Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
SombreIndustrielOrnementalClassique
Vorschau

Industrial Gothic Design Reference

Industrial Gothic is a design aesthetic that fuses Gothic atmosphere -- dread, darkness, mystery -- with the visual language of heavy machinery, decaying infrastructure, and technological blight. It creates "a sense of mechanical dread, technological blight, and dark nihilism" through the deliberate juxtaposition of human decay with technological structure. The style emphasizes texture, low light, and the unsettling merger of biological and mechanical forms, drawing heavily from abandoned industrial environments, H.R. Giger's biomechanical art, and the visual culture of industrial music. Unlike clean cyberpunk futures, Industrial Gothic dwells in the present ruin -- corroded, exposed, and oppressively physical.

Visual Characteristics

Core Motifs and Elements

  • Exposed internal mechanisms -- dense clusters of wires, cabling, piping, bolts, and gears visible as structural and decorative elements
  • Corrosion and decay -- peeling paint, rust stains, oxidized metal surfaces, pitted concrete
  • Biological-mechanical fusion -- organic forms merged with machine parts (H.R. Giger influence), flesh meeting steel
  • Monochrome human faces -- desaturated, high-contrast portraiture suggesting anonymity and dehumanization
  • Abandoned infrastructure -- derelict factories, disused tunnels, decaying power plants, empty warehouses
  • Exposed ductwork and piping -- industrial ventilation, conduits, and plumbing treated as visual features
  • Large metal components -- turbines, boilers, pressure vessels, structural steel as compositional anchors
  • Chains, hooks, and industrial hardware -- hanging elements that suggest both function and menace
  • Distressed and weathered textures -- surfaces that show age, wear, and environmental damage
  • Dense layering -- overlapping mechanical elements creating visual complexity and claustrophobia

Lighting and Atmosphere

  • Single-source or harsh spotlight illumination -- dramatic, directional light that carves objects from darkness
  • Deep, dramatic shadows -- large areas of near-black that obscure detail and create mystery
  • Low ambient light -- overall darkness punctuated by isolated bright zones
  • Artificial cold light -- blue-tinted fluorescent or industrial lighting
  • Visible light sources -- bare bulbs, industrial fixtures, and glowing indicators as design elements
  • Fog and atmospheric haze -- diffused light through particulate-laden air

Design Principles

  • Texture over cleanliness -- every surface should show material character: grain, corrosion, wear
  • Asymmetric, oppressive compositions -- weight concentrated to create unease, not balance
  • Monochromatic dominance with restrained color accents -- near-total grayscale with carefully placed warm or cold color hits
  • Physical immersion -- designs should feel like environments you could inhabit, not flat graphics
  • Layered depth -- foreground mechanical elements, mid-ground content, background darkness
  • Mystery through obscuration -- not everything is visible; darkness and obstruction are intentional
  • Industrial tangibility -- raw, unfinished surfaces; nothing polished or refined
  • Dread as mood -- the aesthetic aims for unease, not comfort

Color Palette

Primary Scheme

Industrial Gothic is overwhelmingly monochromatic, built on blacks, dark grays, and muted metallics. Color is used sparingly and deliberately -- a flash of rust-red or cold blue in a sea of darkness creates far more impact than a broad palette. The effect should feel like an abandoned factory at night, lit by a single failing fluorescent tube.

Role Colors
Dominant base Deep blacks, charcoals, dark grays
Metal tones Steel gray, gunmetal, brushed iron, tarnished silver
Warm decay Muted rust, oxidized orange, dried blood red
Cold accents Deep moody blue, cold fluorescent white-blue
Sepia wash Aged yellowed tones suggesting decay and time
Highlight Harsh white from industrial lighting sources

Detailed Color Table

Color Hex (suggested) Usage
Void Black #0A0A0A, #0D0D0D Deepest backgrounds, shadow areas
Soot #141414, #1A1A1A Primary dark background
Charcoal #222222, #282828 Secondary backgrounds, panels
Dark Iron #2E2E2E, #333333 Container backgrounds, card surfaces
Gunmetal #3A3A3F, #434350 Mid-tone structural elements
Steel Gray #5A5A62, #6B6B73 Borders, dividers, secondary text
Tarnished Silver #8A8A90, #999EA3 Light metallic accents, highlights
Cold White #C8CDD3, #D4D8DD Primary text on dark backgrounds
Harsh Light #E8ECF0, #F0F2F5 Spotlight areas, extreme highlights
Rust Red #8B3A2A, #A04030 Primary warm accent, decay, danger
Dried Blood #6B2020, #7A2828 Deep warm accent, emphasis
Oxidized Orange #8B5E3C, #9A6840 Corrosion effects, warm mid-tones
Cold Blue #2A3A5A, #3A4A6A Cold light reflections, atmospheric depth
Fluorescent Blue #4A6A8A, #5A7A9A Artificial light accent, tech glow
Sepia #6B5B4A, #7A6A58 Aged surfaces, patina effects
Warning Amber #8B7530, #9A8438 Industrial indicators, sparse warm highlights

Suggested CSS Custom Properties

:root {
  /* Blacks and darks */
  --ig-void: #0a0a0a;
  --ig-soot: #141414;
  --ig-charcoal: #222222;
  --ig-dark-iron: #2e2e2e;

  /* Metallic grays */
  --ig-gunmetal: #3a3a3f;
  --ig-steel: #5a5a62;
  --ig-tarnished: #8a8a90;

  /* Lights */
  --ig-cold-white: #c8cdd3;
  --ig-harsh-light: #e8ecf0;

  /* Warm decay accents */
  --ig-rust: #8b3a2a;
  --ig-rust-bright: #a04030;
  --ig-blood: #6b2020;
  --ig-oxidized: #8b5e3c;
  --ig-sepia: #6b5b4a;
  --ig-amber: #8b7530;

  /* Cold accents */
  --ig-cold-blue: #2a3a5a;
  --ig-fluorescent-blue: #4a6a8a;

  /* Functional assignments */
  --ig-bg-primary: var(--ig-soot);
  --ig-bg-secondary: var(--ig-void);
  --ig-bg-surface: var(--ig-charcoal);
  --ig-bg-elevated: var(--ig-dark-iron);
  --ig-text-primary: var(--ig-cold-white);
  --ig-text-secondary: var(--ig-tarnished);
  --ig-text-muted: var(--ig-steel);
  --ig-accent-warm: var(--ig-rust);
  --ig-accent-cold: var(--ig-fluorescent-blue);
  --ig-border: var(--ig-gunmetal);
  --ig-border-light: var(--ig-steel);
}

Color Approaches

  • Near-monochrome foundation -- build the entire design in black-to-gray before adding any color
  • Color as signal, not decoration -- a single rust-red element on an otherwise grayscale page creates powerful focus
  • Warm vs. cold tension -- rust/amber warmth of decay against cold blue/white of artificial light
  • Desaturation of all accents -- no pure or vibrant colors; everything is muted, aged, or darkened
  • Sepia aging -- apply subtle warm yellow-brown shifts to suggest time and neglect
  • High contrast within darkness -- the palette is dark overall but uses harsh light/dark contrasts within that dark range
  • No pastels, no brightness -- the lightest element should feel like harsh industrial lighting, not sunshine

Typography

Typeface Characteristics

Industrial Gothic typography draws from two traditions: condensed industrial sans-serifs (factory signage, stamped metal, stencil lettering) and heavy blackletter/gothic forms (cathedral inscriptions, medieval dread). The combination produces type that feels simultaneously mechanical and ancient.

Key characteristics:

  • Condensed, tall letterforms evoking factory signage and utilitarian labeling
  • Heavy weight -- bold and black weights dominate; thin weights feel too refined
  • Angular, sharp terminals -- no soft curves or rounded endings
  • Uppercase-dominant display usage with tight tracking
  • Stencil and distressed variants for texture and age
  • Monospaced fonts for technical/data readout elements
  • Blackletter accents for titles where gothic atmosphere takes priority over readability

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage Why it fits
Oswald Condensed sans-serif Primary headlines Tall, narrow, industrial signage feel; excellent weight range
Bebas Neue Condensed uppercase sans Large display text, hero titles Ultra-condensed, bold, stencil-like industrial presence
Pathway Gothic One Narrow gothic sans Subheadings, section labels Extremely narrow; evokes cramped industrial labeling
Archivo Black Heavy geometric sans Impact headings, single-word display Maximum weight, blunt and imposing
Barlow Condensed Condensed sans Subheadings, UI elements, captions Clean industrial precision with narrow proportions
Share Tech Mono Monospaced, technical Data readouts, technical labels, metadata CRT terminal aesthetic, mechanical spacing
Special Elite Typewriter Body text variant, narrative blocks Distressed typewriter feel suggests age and documentation
UnifrakturMaguntia Blackletter Decorative titles, gothic accent text Authentic blackletter for gothic atmosphere
Inter Neutral sans Body text, readable content Clean and mechanical enough for body copy without distraction
Rajdhani Angular geometric sans Secondary body text, technical content Sharp, mechanical edges with adequate readability

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Bebas+Neue&family=Pathway+Gothic+One&family=Archivo+Black&family=Barlow+Condensed:wght@400;600;700&family=Share+Tech+Mono&family=Special+Elite&family=Inter:wght@300;400;500;600&family=Rajdhani:wght@400;500;600;700&display=swap');

/* Hero / Display text */
.ig-display {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: clamp(3rem, 10vw, 9rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 0.9;
  color: var(--ig-cold-white);
}

/* Primary headlines */
h1, h2 {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ig-cold-white);
}

/* Section labels and subheadings */
h3, h4 {
  font-family: 'Pathway Gothic One', 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 400;
  color: var(--ig-tarnished);
  font-size: 0.9rem;
}

/* Body text */
body {
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--ig-cold-white);
}

/* Technical / data readout text */
.ig-tech-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ig-fluorescent-blue);
  text-transform: uppercase;
}

/* Gothic decorative title */
.ig-gothic-title {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: clamp(2rem, 6vw, 5rem);
  color: var(--ig-tarnished);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Typewriter / aged document text */
.ig-typewriter {
  font-family: 'Special Elite', cursive;
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1.8;
  color: var(--ig-sepia);
}

Layout Principles

Grid and Structure

  • Dark, immersive full-bleed backgrounds -- no white borders or visible page boundaries; the design extends into darkness at every edge
  • Heavy vertical compositions -- content stacked in tall, narrow columns evoking factory chimneys, elevator shafts, and vertical machinery
  • Asymmetric weight distribution -- content deliberately off-center or bottom-heavy to create unease
  • Industrial framing -- content contained within heavy borders, bolted panels, and structural enclosures
  • Generous negative space (in black) -- darkness itself is a design element; large empty dark areas create dread and focus
  • Narrow content columns -- text and content confined to tight widths, surrounded by dark margins

Section Organization

  • Use heavy industrial dividers between sections -- thick steel bars, riveted beams, pipe runs, chain motifs
  • Create panel-based layouts resembling factory control rooms, electrical cabinets, or boiler instrumentation
  • Employ layered depth -- foreground mechanical elements (pipes, gears) partially obscuring content creates immersion
  • Use full-width dark bands to separate major sections, varying the shade of black/charcoal
  • Apply inset content panels with visible borders -- content feels mounted or bolted to the page
  • Build viewport-height sections -- each section fills the screen, creating a progression through industrial spaces

Spatial Characteristics

  • Dark-dominant -- at least 70-80% of the visible area should be dark tones
  • Textured surfaces -- no flat, clean backgrounds; every surface has noise, grain, or material texture
  • Hard edges with decay -- borders are present but imperfect, interrupted, or corroded
  • Depth through shadow -- layered elements with heavy drop shadows and darkened edges
  • Claustrophobic density in content zones -- tight spacing within panels contrasts with vast dark surroundings
  • No rounded corners -- sharp, angular edges on all containers and elements

CSS/Design Techniques

Corroded Metal Surface

.ig-metal-surface {
  background:
    /* Noise/grain texture overlay */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    /* Subtle vertical streaks */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 2px,
      transparent 8px
    ),
    /* Base metal gradient */
    linear-gradient(
      180deg,
      var(--ig-charcoal) 0%,
      var(--ig-dark-iron) 50%,
      var(--ig-charcoal) 100%
    );
}

Rust Stain / Corrosion Effect

.ig-rust-stain {
  position: relative;
}

.ig-rust-stain::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 40%;
  height: 60%;
  background: radial-gradient(
    ellipse at center bottom,
    rgba(139, 58, 42, 0.25) 0%,
    rgba(139, 94, 60, 0.15) 30%,
    rgba(139, 94, 60, 0.05) 60%,
    transparent 80%
  );
  pointer-events: none;
  mix-blend-mode: screen;
}

Industrial Steel Panel with Rivets

.ig-panel {
  background: var(--ig-charcoal);
  border: 2px solid var(--ig-gunmetal);
  padding: 2.5rem;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 4px 20px rgba(0,0,0,0.6);
}

/* Corner rivets */
.ig-panel::before,
.ig-panel::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle at 35% 35%,
    var(--ig-tarnished) 0%,
    var(--ig-steel) 40%,
    var(--ig-gunmetal) 100%
  );
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.ig-panel::before { top: 10px; left: 10px; }
.ig-panel::after { top: 10px; right: 10px; }

Exposed Pipe Divider

.ig-pipe-divider {
  height: 12px;
  margin: 2rem 0;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08) 0%,
    var(--ig-steel) 15%,
    var(--ig-gunmetal) 50%,
    #2a2a2a 85%,
    rgba(0,0,0,0.3) 100%
  );
  box-shadow:
    0 2px 6px rgba(0,0,0,0.5),
    0 -1px 0 rgba(255,255,255,0.05);
}

/* Pipe joints / bolts */
.ig-pipe-divider::before,
.ig-pipe-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(
    circle at 40% 40%,
    var(--ig-tarnished),
    var(--ig-steel) 50%,
    var(--ig-gunmetal)
  );
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.ig-pipe-divider::before { left: 30px; }
.ig-pipe-divider::after { right: 30px; }

.ig-chain-border {
  border-image: repeating-linear-gradient(
    90deg,
    var(--ig-steel) 0px,
    var(--ig-tarnished) 4px,
    var(--ig-gunmetal) 8px,
    transparent 8px,
    transparent 12px,
    var(--ig-gunmetal) 12px,
    var(--ig-tarnished) 16px,
    var(--ig-steel) 20px
  ) 4;
  border-width: 4px;
  border-style: solid;
}

Single-Source Spotlight Effect

.ig-spotlight {
  position: relative;
  overflow: hidden;
}

.ig-spotlight::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 30%;
  width: 40%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 205, 211, 0.12) 0%,
    rgba(200, 205, 211, 0.05) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

Fluorescent Flicker Animation

@keyframes ig-flicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.85; }
  6% { opacity: 1; }
  7.5% { opacity: 0.9; }
  9% { opacity: 1; }
  40% { opacity: 1; }
  42% { opacity: 0.92; }
  43% { opacity: 1; }
  77% { opacity: 1; }
  78% { opacity: 0.88; }
  79% { opacity: 0.95; }
  80% { opacity: 1; }
}

.ig-flicker {
  animation: ig-flicker 8s ease-in-out infinite;
}

/* Harsh fluorescent text glow */
.ig-fluorescent-text {
  color: var(--ig-harsh-light);
  text-shadow:
    0 0 4px rgba(74, 106, 138, 0.6),
    0 0 12px rgba(74, 106, 138, 0.3),
    0 0 30px rgba(74, 106, 138, 0.1);
  animation: ig-flicker 8s ease-in-out infinite;
}

Scan-Line / CRT Overlay

.ig-scanlines {
  position: relative;
}

.ig-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.15) 1px,
    rgba(0, 0, 0, 0.15) 2px
  );
  pointer-events: none;
  z-index: 10;
}

Distressed / Scratched Surface Overlay

.ig-distressed {
  position: relative;
}

.ig-distressed::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Horizontal scratches */
    repeating-linear-gradient(
      2deg,
      transparent 0px,
      transparent 40px,
      rgba(255,255,255,0.03) 40px,
      rgba(255,255,255,0.03) 41px
    ),
    /* Vertical scratches */
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 60px,
      rgba(255,255,255,0.02) 60px,
      rgba(255,255,255,0.02) 61px
    ),
    /* Diagonal wear marks */
    repeating-linear-gradient(
      -35deg,
      transparent 0px,
      transparent 80px,
      rgba(255,255,255,0.015) 80px,
      rgba(255,255,255,0.015) 81px
    );
  pointer-events: none;
  z-index: 1;
}

Wire / Cable Decorative Element

.ig-wire {
  position: absolute;
  width: 3px;
  background: linear-gradient(
    90deg,
    var(--ig-gunmetal),
    var(--ig-steel),
    var(--ig-gunmetal)
  );
  box-shadow:
    1px 0 3px rgba(0,0,0,0.5),
    -1px 0 3px rgba(0,0,0,0.5);
}

/* Hanging wire from top */
.ig-wire-vertical {
  top: 0;
  height: 120px;
  left: 15%;
}

/* Drooping catenary wire */
.ig-wire-catenary {
  width: 200px;
  height: 3px;
  border: none;
  border-bottom: 3px solid var(--ig-steel);
  border-radius: 0 0 50% 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

Gear Silhouette (CSS)

.ig-gear {
  width: 100px;
  height: 100px;
  background: var(--ig-gunmetal);
  border-radius: 50%;
  position: relative;
  opacity: 0.3;
}

.ig-gear::before {
  content: '';
  position: absolute;
  inset: -12px;
  background: conic-gradient(
    from 0deg,
    var(--ig-gunmetal) 0deg 12deg,
    transparent 12deg 30deg,
    var(--ig-gunmetal) 30deg 42deg,
    transparent 42deg 60deg,
    var(--ig-gunmetal) 60deg 72deg,
    transparent 72deg 90deg,
    var(--ig-gunmetal) 90deg 102deg,
    transparent 102deg 120deg,
    var(--ig-gunmetal) 120deg 132deg,
    transparent 132deg 150deg,
    var(--ig-gunmetal) 150deg 162deg,
    transparent 162deg 180deg,
    var(--ig-gunmetal) 180deg 192deg,
    transparent 192deg 210deg,
    var(--ig-gunmetal) 210deg 222deg,
    transparent 222deg 240deg,
    var(--ig-gunmetal) 240deg 252deg,
    transparent 252deg 270deg,
    var(--ig-gunmetal) 270deg 282deg,
    transparent 282deg 300deg,
    var(--ig-gunmetal) 300deg 312deg,
    transparent 312deg 330deg,
    var(--ig-gunmetal) 330deg 342deg,
    transparent 342deg 360deg
  );
  border-radius: 50%;
  z-index: -1;
}

.ig-gear::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: var(--ig-soot);
  border-radius: 50%;
  border: 2px solid var(--ig-steel);
}

/* Slow ambient rotation */
@keyframes ig-gear-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ig-gear-spin {
  animation: ig-gear-rotate 30s linear infinite;
}

.ig-gear-spin-reverse {
  animation: ig-gear-rotate 30s linear infinite reverse;
}

Materials and Textures (Visual Metaphors for Web)

Physical Material Web Equivalent
Corroded steel plate Dark gradient with noise overlay and subtle streak patterns
Rust and oxidation Radial gradients in warm muted oranges/reds with organic shapes
Exposed piping and conduits Linear gradient cylinders as dividers and borders
Concrete (stained, cracked) Gray noise texture with irregular dark patches
Wire clusters and cables Thin vertical/diagonal lines with shadow effects
Peeling paint Layered partial overlays with irregular edges
Cast iron machinery Very dark metallic gradients with hard reflections
Tarnished metal Warm-shifted grays with subtle brown/gold tint
Grime and soot deposits Very subtle dark overlay concentrated at edges and corners
Industrial glass (frosted/dirty) Backdrop-filter blur with dark tinted overlay
Rivets and bolt heads Small radial-gradient circles with highlight/shadow
Chain links Repeating interlocked oval gradients
Mesh/grating Fine grid backgrounds with transparency
Fluorescent tube lighting Horizontal white-blue box-shadow glow strips
Steam/fog Radial gradient white overlays with very low opacity

Influences and Design Lineage

Influence What Industrial Gothic borrows
H.R. Giger's biomechanics Biological-mechanical fusion, alien dread, organic forms merged with machinery
Gothic architecture Pointed arches, vertical emphasis, dramatic shadow play, imposing scale
Industrial music culture Album art aesthetics (Nine Inch Nails, Ministry, Skinny Puppy), dark club environments
Brutalist architecture Raw concrete, exposed structure, imposing mass, anti-decorative philosophy
Film noir lighting High-contrast single-source light, dramatic shadows, atmospheric tension
Steampunk (darker variant) Victorian machinery aesthetics, but stripped of whimsy and optimism
Post-apocalyptic fiction Decaying infrastructure, survival-mode aesthetics, ruined technology
German Expressionism Distorted angles, extreme shadow, psychological unease through visual composition
Cyberpunk (grounded variant) Technological dystopia, but focused on present decay rather than future neon
Aesthetic Relationship to Industrial Gothic
Cyberpunk Shares technological dystopia but Industrial Gothic is more grounded, physical, and present-tense
Factory Pomo Both celebrate industrial imagery, but Factory Pomo is colorful and playful; Industrial Gothic is dark and menacing
Gothic Parent aesthetic providing the dread, darkness, and mystery that Industrial Gothic mechanizes
Grunge Shares distressed textures and anti-polish ethos; Grunge is more organic, Industrial Gothic more mechanical
Industrial Direct ancestor; the machinery and factory aesthetic without the Gothic atmosphere overlay
Industrial Decay Close sibling; focuses specifically on the beauty of abandonment and deterioration
Post-Apocalyptic Shares the ruined-world visual vocabulary; Post-Apocalyptic implies narrative, Industrial Gothic implies mood
Whimsicraft Distant relative through shared use of textured, layered visual approaches (but opposite emotional register)
Dark Academia Both embrace darkness and age, but Dark Academia is intellectual/literary while Industrial Gothic is physical/mechanical
Brutalism (web) Shares raw, unpolished philosophy, but web Brutalism tends toward stark minimalism while Industrial Gothic is densely textured

Quick-Start: Minimal Industrial Gothic Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Industrial Gothic Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Bebas+Neue&family=Pathway+Gothic+One&family=Barlow+Condensed:wght@400;600&family=Share+Tech+Mono&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --ig-void: #0a0a0a;
      --ig-soot: #141414;
      --ig-charcoal: #222222;
      --ig-dark-iron: #2e2e2e;
      --ig-gunmetal: #3a3a3f;
      --ig-steel: #5a5a62;
      --ig-tarnished: #8a8a90;
      --ig-cold-white: #c8cdd3;
      --ig-harsh-light: #e8ecf0;
      --ig-rust: #8b3a2a;
      --ig-rust-bright: #a04030;
      --ig-blood: #6b2020;
      --ig-oxidized: #8b5e3c;
      --ig-cold-blue: #2a3a5a;
      --ig-fluorescent-blue: #4a6a8a;
      --ig-sepia: #6b5b4a;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--ig-soot);
      color: var(--ig-cold-white);
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      line-height: 1.7;
    }

    /* --- Hero Section --- */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4rem 2rem;
      background: var(--ig-void);
      position: relative;
      overflow: hidden;
    }

    /* Spotlight effect */
    .hero::before {
      content: '';
      position: absolute;
      top: -30%;
      left: 25%;
      width: 50%;
      height: 80%;
      background: radial-gradient(
        ellipse at center,
        rgba(200, 205, 211, 0.08) 0%,
        rgba(200, 205, 211, 0.03) 30%,
        transparent 70%
      );
      pointer-events: none;
    }

    /* Scanline overlay */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0,0,0,0.1) 1px,
        rgba(0,0,0,0.1) 2px
      );
      pointer-events: none;
    }

    .hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.5rem, 10vw, 9rem);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ig-cold-white);
      line-height: 0.9;
      position: relative;
      z-index: 1;
    }

    .hero .subtitle {
      font-family: 'Share Tech Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ig-steel);
      margin-top: 1.5rem;
      font-size: 0.8rem;
      position: relative;
      z-index: 1;
    }

    /* --- Pipe Divider --- */
    .pipe-divider {
      height: 10px;
      background: linear-gradient(
        180deg,
        rgba(255,255,255,0.06) 0%,
        var(--ig-steel) 20%,
        var(--ig-gunmetal) 50%,
        #1a1a1a 80%,
        rgba(0,0,0,0.4) 100%
      );
      box-shadow: 0 3px 8px rgba(0,0,0,0.6);
      position: relative;
    }

    .pipe-divider::before,
    .pipe-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      background: radial-gradient(circle at 35% 35%, var(--ig-tarnished), var(--ig-gunmetal));
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.4);
      box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }

    .pipe-divider::before { left: 40px; }
    .pipe-divider::after { right: 40px; }

    /* --- Content Section --- */
    .content-section {
      max-width: 800px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    .content-section h2 {
      font-family: 'Oswald', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      color: var(--ig-cold-white);
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
    }

    .content-section .section-label {
      font-family: 'Pathway Gothic One', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ig-steel);
      font-size: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .content-section p {
      color: var(--ig-tarnished);
      margin-bottom: 1rem;
    }

    /* --- Industrial Panel --- */
    .ig-panel {
      background: var(--ig-charcoal);
      border: 2px solid var(--ig-gunmetal);
      padding: 2.5rem;
      margin: 3rem auto;
      max-width: 800px;
      position: relative;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 4px 20px rgba(0,0,0,0.5);
    }

    /* Corner rivets */
    .ig-panel::before,
    .ig-panel::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background: radial-gradient(circle at 35% 35%, var(--ig-tarnished), var(--ig-gunmetal));
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.4);
    }

    .ig-panel::before { top: 10px; left: 10px; }
    .ig-panel::after { top: 10px; right: 10px; }

    .ig-panel h3 {
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ig-rust-bright);
      font-weight: 600;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }

    .ig-panel p {
      color: var(--ig-tarnished);
      font-size: 0.95rem;
    }

    /* --- Accent bar (rust) --- */
    .rust-bar {
      height: 3px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ig-rust) 15%,
        var(--ig-rust-bright) 50%,
        var(--ig-rust) 85%,
        transparent 100%
      );
      margin: 3rem auto;
      max-width: 300px;
    }

    /* --- Footer --- */
    footer {
      text-align: center;
      padding: 3rem 2rem;
      background: var(--ig-void);
      border-top: 1px solid var(--ig-gunmetal);
    }

    footer p {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--ig-steel);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <p class="subtitle">// sector 7-g // status: operational //</p>
  </div>

  <div class="pipe-divider"></div>

  <div class="content-section">
    <p class="section-label">Section 01 // Overview</p>
    <h2>Section Heading</h2>
    <p>Content presented within the darkness of the industrial environment. Text is muted, allowing the atmosphere to dominate while remaining legible.</p>
  </div>

  <div class="rust-bar"></div>

  <div class="ig-panel">
    <h3>Industrial Panel</h3>
    <p>Content framed within a steel-bordered panel with corner rivets. The rust-colored heading provides the only warmth in an otherwise cold composition.</p>
  </div>

  <div class="pipe-divider"></div>

  <footer>
    <p>// end transmission //</p>
  </footer>
</body>
</html>
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.