RétroTextureIndustriel

Corporate Grunge Design Reference

Corporate Grunge (c. 1993--2005) is the aesthetic that emerged when corporations adopted the visual language of the grunge movement -- rough textures, distressed typography, and a deliberately imperfect, analog-feeling visual style -- and applied it to commercial design. The result combines edgy, raw textures and fonts with corporate-grade layouts and messaging. Think photocopied underground concert flyers repurposed as Fortune 500 marketing materials: stencil text, grainy overlays, worn-out surfaces, and muted earthy palettes, all held together by a surprisingly rigid underlying structure. The style is a deliberate reaction against polished, clean corporate design, replacing sterile perfection with authentic, gritty tactility.

Visual Characteristics

Core Motifs and Patterns

Distressed, worn-out textures -- concrete walls, rusted metal, scratched surfaces, crumpled paper, weathered cardboard
Grainy overlays and noise -- film grain, photocopy artifacts, halftone dot patterns, subtle static
Torn and irregular edges -- ripped paper borders, uneven crop marks, ragged divider lines
Stencil and label-maker text -- military stencil lettering, DYMO embossed tape, rubber stamp imprints
Collaged imagery -- layered photographs, cut-and-paste compositions, overlapping elements with visible seams
Glitch and degradation effects -- VHS tracking lines, corrupted scan artifacts, shifted color channels
Digital contrast-enhanced two-color vector graphics -- high-contrast duotone imagery processed to look reproduced on cheap equipment
Vintage computer graphics -- early bitmap icons, low-resolution interfaces, CRT screen artifacts
Photocopied aesthetics -- high-contrast black-and-white imagery with visible toner marks and registration errors
Ink splatter and paint drips -- accidental-looking marks suggesting analog production methods

Design Principles

Purposeful imperfection -- every element should look like it has been handled, photocopied, weathered, or degraded
Restraint over chaos -- maintain clear content hierarchy and readable structure beneath the grunge surface treatments
Rigid grid with rough skin -- use a clean, corporate-grade layout grid, but apply distressed textures and irregular visual treatments on top
Content primacy -- grunge elements serve the message rather than obscure it; readability is never sacrificed
Analog authenticity -- design should feel hand-made, physically produced, and tactile rather than digitally pristine
Dark, moody atmosphere -- overall tone should feel urban, industrial, and slightly confrontational
Layered depth -- multiple texture layers (background, midground, foreground overlays) create visual richness
Selective cleanliness -- body text and key UI elements remain legible; grunge treatments apply primarily to decorative and structural elements

Color Palette

Primary Scheme

Role	Colors
Base / Background	Deep charcoal, near-black, dark warm gray
Primary text	Off-white, aged paper cream, dirty white
Accent (warm)	Rusty brown, burnt sienna, dried blood red
Accent (cool)	Olive green, military khaki, dark teal
Neutral midtones	Concrete gray, dusty beige, faded tan

Detailed Palette

Color	Hex	Usage
Soot Black	`#0D0C0C`	Deep backgrounds, primary base
Dark Charcoal	`#1A1A1A`	Main background, section fills
Warm Charcoal	`#2A2D2F`	Card backgrounds, elevated surfaces
Concrete Gray	`#4A4A4A`	Borders, dividers, secondary structure
Dusty Gray	`#7A7777`	Muted body text, captions, metadata
Aged Paper	`#D9C6B2`	Primary text, headings on dark backgrounds
Dirty White	`#E5E0D6`	High-emphasis text, hero titles
Rusty Brown	`#A76D5D`	Primary warm accent, links, highlights
Burnt Sienna	`#7A5B4D`	Secondary warm accent, hover states
Dark Leather	`#4E3B31`	Tertiary warm accent, deep accents
Dried Blood	`#7A0B0B`	Alert accent, strong emphasis
Deep Maroon	`#531C72`	Alternate accent (rare), special callouts
Olive Drab	`#556B2F`	Cool accent, status indicators
Military Khaki	`#8B8B5E`	Cool midtone accent, tags, labels
Faded Teal	`#4B6F8E`	Cool accent for links or interactive states
Stained Cream	`#C8AFA1`	Muted highlight, soft emphasis areas
Warm Fog	`#D1B2B2`	Light muted accent, card highlight borders

Suggested CSS Custom Properties

:root {
  /* Base tones */
  --grunge-black: #0d0c0c;
  --grunge-charcoal: #1a1a1a;
  --grunge-charcoal-warm: #2a2d2f;
  --grunge-concrete: #4a4a4a;
  --grunge-dust: #7a7777;

  /* Text tones */
  --grunge-paper: #d9c6b2;
  --grunge-white: #e5e0d6;
  --grunge-cream: #c8afa1;

  /* Warm accents */
  --grunge-rust: #a76d5d;
  --grunge-sienna: #7a5b4d;
  --grunge-leather: #4e3b31;
  --grunge-blood: #7a0b0b;
  --grunge-maroon: #531c72;

  /* Cool accents */
  --grunge-olive: #556b2f;
  --grunge-khaki: #8b8b5e;
  --grunge-teal: #4b6f8e;

  /* Muted highlights */
  --grunge-stain: #c8afa1;
  --grunge-fog: #d1b2b2;

  /* Functional mappings */
  --grunge-bg-primary: var(--grunge-charcoal);
  --grunge-bg-secondary: var(--grunge-charcoal-warm);
  --grunge-bg-surface: var(--grunge-concrete);
  --grunge-text-primary: var(--grunge-white);
  --grunge-text-secondary: var(--grunge-paper);
  --grunge-text-muted: var(--grunge-dust);
  --grunge-accent: var(--grunge-rust);
  --grunge-accent-hover: var(--grunge-sienna);
  --grunge-border: var(--grunge-concrete);
}

Palette Approaches

Muted, desaturated earth tones -- no bright or saturated colors; everything looks faded, dusty, or oxidized
Warm-over-dark dominance -- warm rust/cream text and accents over near-black backgrounds create the signature Corporate Grunge mood
Low-contrast subtlety -- avoid sharp black-on-white; prefer cream-on-charcoal with gray midtones
Monochromatic with a single accent -- use the full gray/brown spectrum but limit accent color to one family (rust OR olive, rarely both)
Stained and weathered tints -- colors should feel yellowed, oxidized, or sun-bleached rather than fresh

Typography

Typeface Characteristics

Corporate Grunge typography deliberately breaks clean typographic conventions to mimic analog reproduction methods:

Distressed, eroded letterforms -- characters with rough edges, missing fragments, and ink spread
Stencil and rubber-stamp aesthetics -- letters that look cut from stencils or pressed with physical stamps
Unusual letter case mixing -- inconsistent capitalization within words or headings
Slightly rotated or shifted characters -- letters that appear misaligned as if set by hand or through a defective machine
Inconsistent font sizes -- deliberate size variation within a line for a hand-assembled look
Typewriter and label-maker styles -- monospaced, mechanical-feeling type for body text and metadata
High-contrast weight mixing -- heavy display type paired with light, almost fragile body text

Named Typefaces from the Era

These are the typefaces historically associated with Corporate Grunge (commercial/specialty fonts, not freely available on Google Fonts):

FF Confidential / XBAND Rough -- the iconic anti-piracy campaign typeface ("You Wouldn't Steal a Car")
Stam Pete -- rough stencil letterforms
FF Stamp Gothic -- stamped/stenciled industrial face
Escalido Streak / Escalido Gothico -- streaked, degraded gothic
FF Trixie / LTR NCND -- typewriter with heavy ink bleed and imperfection

Recommended Web Fonts (Google Fonts)

Font	Style	Usage
Special Elite	Distressed typewriter	Headlines, hero text, "analog" emphasis
Permanent Marker	Bold hand-written marker	Display headlines, callout text
Cutive Mono	Clean typewriter monospace	Body text, metadata, code-like passages
Courier Prime	Refined typewriter	Body text, long-form reading
Stint Ultra Expanded	Ultra-wide square serif	Section titles, decorative headings
Syne Mono	Monospace with personality	Labels, tags, technical metadata
Bungee Shade	Bold, layered display	Oversized display type, posters
Cabin Sketch	Hand-drawn sketch style	Decorative headings, informal accent
VT323	Pixel/CRT screen	Digital-retro display elements, counters
Share Tech Mono	Technical monospace	Secondary body text, data, timestamps

Typography CSS Example

/* Import grunge-appropriate Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Permanent+Marker&family=Cutive+Mono&family=Courier+Prime:wght@400;700&family=VT323&family=Share+Tech+Mono&display=swap');

/* Display / Hero text -- distressed typewriter */
h1 {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--grunge-white);
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.6),
    -1px -1px 0 rgba(0, 0, 0, 0.3);
}

/* Section headings */
h2, h3 {
  font-family: 'Permanent Marker', 'Special Elite', cursive;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--grunge-paper);
  text-transform: uppercase;
}

/* Body text -- readable typewriter */
body {
  font-family: 'Courier Prime', 'Cutive Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--grunge-text-secondary);
}

/* Metadata, labels, tags */
.grunge-label {
  font-family: 'Share Tech Mono', 'VT323', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--grunge-dust);
}

/* Oversized display number / stat */
.grunge-stat {
  font-family: 'VT323', monospace;
  font-size: clamp(3rem, 8vw, 8rem);
  color: var(--grunge-rust);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

Layout Principles

Grid and Structure

Rigid underlying grid, irregular surface -- use a conventional 12-column or modular grid, but apply grunge textures, torn edges, and distressed treatments as overlays
Asymmetric visual weight -- even within a symmetric grid, let textures and imagery create visual imbalance
Dense, layered compositions -- elements overlap, stack, and collide like a physical collage
Full-bleed texture backgrounds -- section backgrounds extend edge-to-edge with seamless dark textures
Narrow content columns -- keep readable content in a centered narrow column (700--800px) while textures fill the viewport
Vertical rhythm through roughness -- instead of clean horizontal rules, use torn-edge dividers, ink splatter separators, or stained bands

Section Organization

Use distressed horizontal dividers between sections -- torn paper edges, rough ink lines, or stained bands rather than clean <hr> elements
Apply background texture variation per section -- alternating between concrete, paper, metal, and wood textures prevents monotony
Create hierarchy through weathering -- more important elements appear less degraded; supporting elements are more distressed and faded
Employ visible "tape" and "pin" elements -- decorative overlays suggesting content is physically attached to a wall or board
Use staggered, misaligned containers -- cards and panels that are slightly rotated (1--3deg) or offset from the grid
Apply visible margin annotations -- handwritten-style marginal notes, stamps, or redaction marks as decorative elements

CSS/Design Techniques

Grunge Texture Background with Noise Overlay

/* Base distressed background using CSS gradients to simulate noise */
.grunge-bg {
  background-color: var(--grunge-charcoal);
  background-image:
    /* Subtle noise grain (simulated with radial gradients) */
    radial-gradient(circle at 20% 80%, rgba(120, 100, 80, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(80, 60, 40, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(100, 80, 60, 0.03) 0%, transparent 70%);
}

/* Noise overlay using SVG filter (applied as pseudo-element) */
.grunge-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

Distressed / Torn Edge Effect

/* Torn bottom edge using clip-path with irregular polygon */
.grunge-torn-bottom {
  position: relative;
  padding-bottom: 3rem;
}

.grunge-torn-bottom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 20px;
  background: var(--grunge-charcoal);
  clip-path: polygon(
    0% 0%, 3% 60%, 6% 20%, 10% 70%, 14% 30%, 18% 80%,
    22% 10%, 26% 65%, 30% 25%, 35% 75%, 39% 15%, 43% 60%,
    47% 30%, 52% 85%, 56% 20%, 60% 70%, 64% 35%, 68% 80%,
    72% 10%, 76% 55%, 80% 25%, 84% 75%, 88% 40%, 92% 70%,
    96% 15%, 100% 50%, 100% 100%, 0% 100%
  );
}

Stencil / Stamp Text Effect

/* Rubber stamp text treatment */
.grunge-stamp {
  font-family: 'Special Elite', monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--grunge-blood);
  border: 3px solid var(--grunge-blood);
  padding: 0.4em 0.8em;
  display: inline-block;
  transform: rotate(-3deg);
  opacity: 0.85;
  /* Simulated ink bleed */
  text-shadow:
    0 0 2px rgba(122, 11, 11, 0.4),
    1px 0 1px rgba(122, 11, 11, 0.2);
  box-shadow:
    inset 0 0 10px rgba(122, 11, 11, 0.1),
    0 0 5px rgba(0, 0, 0, 0.3);
}

/* Stencil text with spray paint bleeding effect */
.grunge-stencil {
  font-family: 'Permanent Marker', cursive;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grunge-white);
  text-shadow:
    0 0 8px rgba(229, 224, 214, 0.3),
    0 0 20px rgba(229, 224, 214, 0.1);
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='rough'%3E%3CfeTurbulence baseFrequency='0.04' numOctaves='5' type='fractalNoise'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3'/%3E%3C/filter%3E%3C/svg%3E#rough");
}

Halftone / Photocopy Effect

/* Halftone dot overlay (CSS-only approximation) */
.grunge-halftone {
  position: relative;
}

.grunge-halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* High-contrast photocopy effect for images */
.grunge-photocopy {
  filter: contrast(1.6) grayscale(1) brightness(1.1);
  mix-blend-mode: luminosity;
}

Scratched / Worn Surface

/* Scratched metal surface using overlapping gradients */
.grunge-scratched {
  background:
    /* Diagonal scratch lines */
    repeating-linear-gradient(
      -35deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.015) 8px,
      rgba(255, 255, 255, 0.015) 9px
    ),
    repeating-linear-gradient(
      25deg,
      transparent,
      transparent 12px,
      rgba(255, 255, 255, 0.01) 12px,
      rgba(255, 255, 255, 0.01) 13px
    ),
    /* Base surface */
    linear-gradient(
      180deg,
      #2a2a2a 0%,
      #222222 50%,
      #2a2a2a 100%
    );
}

Grunge Card / Panel

.grunge-card {
  background: var(--grunge-charcoal-warm);
  border: 1px solid rgba(167, 109, 93, 0.2);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  /* Slightly askew for that hand-placed feeling */
  transform: rotate(-0.5deg);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 0, 0, 0.3);
}

/* Tape strip holding the card */
.grunge-card::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 80px;
  height: 24px;
  background: rgba(200, 175, 161, 0.25);
  border: 1px solid rgba(200, 175, 161, 0.1);
}

/* Corner fold / dog-ear */
.grunge-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(
    225deg,
    var(--grunge-charcoal) 50%,
    rgba(167, 109, 93, 0.15) 50%
  );
}

Distressed Divider Line

/* Rough, imperfect horizontal rule */
.grunge-divider {
  border: none;
  height: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--grunge-concrete) 0px,
      var(--grunge-concrete) 4px,
      transparent 4px,
      transparent 7px,
      var(--grunge-concrete) 7px,
      var(--grunge-concrete) 9px,
      transparent 9px,
      transparent 14px
    );
  opacity: 0.6;
  margin: 3rem 0;
}

/* Ink splatter divider (using box-shadow dots) */
.grunge-splatter-divider {
  border: none;
  height: 1px;
  background: var(--grunge-concrete);
  position: relative;
  margin: 3rem 0;
  opacity: 0.5;
}

.grunge-splatter-divider::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 20%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grunge-rust);
  box-shadow:
    30px 2px 0 2px var(--grunge-rust),
    65px -1px 0 1px var(--grunge-rust),
    120px 3px 0 0 var(--grunge-rust),
    180px -2px 0 3px var(--grunge-rust);
  opacity: 0.4;
}

Redacted / Classified Text Effect

/* Redacted text block (black bar over text) */
.grunge-redacted {
  position: relative;
  display: inline;
}

.grunge-redacted::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 15%;
  bottom: 15%;
  background: var(--grunge-black);
  transform: rotate(-0.5deg);
}

/* "CLASSIFIED" / "CONFIDENTIAL" stamp overlay */
.grunge-classified::before {
  content: 'CLASSIFIED';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-family: 'Special Elite', monospace;
  font-size: 3rem;
  letter-spacing: 0.2em;
  color: var(--grunge-blood);
  border: 4px solid var(--grunge-blood);
  padding: 0.2em 0.5em;
  opacity: 0.2;
  pointer-events: none;
  white-space: nowrap;
}

Grunge Button

.grunge-button {
  display: inline-block;
  padding: 0.7rem 2rem;
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grunge-white);
  background: var(--grunge-charcoal-warm);
  border: 2px solid var(--grunge-rust);
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  /* Slight imperfection */
  transform: rotate(-0.5deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

.grunge-button:hover {
  background: var(--grunge-rust);
  color: var(--grunge-black);
  transform: rotate(0deg) translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
}

.grunge-button:active {
  transform: rotate(0deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

VHS / Scan Line Overlay

/* CRT scan line effect (pairs with VT323 font) */
.grunge-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
}

/* VHS tracking distortion */
@keyframes vhs-track {
  0%, 100% { clip-path: inset(0); }
  5% { clip-path: inset(10% 0 85% 0); transform: translateX(4px); }
  10% { clip-path: inset(0); transform: translateX(0); }
  45% { clip-path: inset(60% 0 30% 0); transform: translateX(-3px); }
  50% { clip-path: inset(0); transform: translateX(0); }
}

.grunge-vhs-glitch {
  animation: vhs-track 8s steps(1) infinite;
}

Materials and Textures (Visual Metaphors for Web)

Physical Corporate Grunge materials and their web equivalents:

Physical Material	Web Equivalent
Photocopied paper	High-contrast grayscale images with `filter: contrast(1.5) grayscale(1)` and noise overlay
Rusted metal	Warm brown-orange gradient with scratched line overlays and granular noise
Concrete wall	Dark neutral gradient with subtle radial light spots and halftone dot overlay
Crumpled paper	Off-white/cream background with CSS noise texture and subtle box-shadow creases
Stencil spray paint	`text-shadow` blur with SVG displacement filter on bold uppercase type
Duct tape / masking tape	Semi-transparent cream rectangle with `border` and slight `rotate` transform
Cork board / bulletin board	Warm brown base with pinned/taped card elements at slight rotations
Old cardboard	Warm mid-brown with horizontal line texture overlays suggesting corrugation
Scratched CD case	Dark surface with thin diagonal `repeating-linear-gradient` scratch lines
Label-maker tape	Inline-block with embossed-style `text-shadow` and colored background strip

Cultural References and Influences

The following define the Corporate Grunge visual language and serve as design references:

"You Wouldn't Steal a Car" anti-piracy campaign (2004--2007) -- the canonical Corporate Grunge artifact; set in XBAND Rough typeface, featuring high-contrast footage with aggressive stencil-style text overlays
Early-2000s corporate annual reports adopting grunge textures to appear "edgy" and youthful
MTV bumpers and idents (mid-1990s) -- collaged, distressed motion graphics
Nine Inch Nails album packaging (particularly "The Downward Spiral") -- industrial grime applied to commercial music releases
David Carson's Ray Gun magazine layouts -- deconstructed corporate-quality typography
Emigre magazine -- experimental typography pushing distressed, analog-looking digital type

Web Design Era Context

Corporate Grunge thrived in the era of:

Table-based layouts with background image tiles
Flash intros featuring gritty, animated textures
Geocities and Angelfire pages with dark, textured backgrounds
Pre-CSS3, designers achieved grunge effects through sliced background images and ImageReady exports

Aesthetic	Relationship to Corporate Grunge
Grunge	Parent aesthetic; the original music/fashion/design movement that Corporate Grunge commercializes
Industrial	Shares dark, mechanical, gritty textures; Industrial leans heavier and more metallic
Cyberpunk	Overlaps in dark palettes and dystopian undertones; Cyberpunk adds neon and sci-fi elements
Early Cyber	Shares the same late-90s/early-2000s web context; Early Cyber is more digital and less textured
Y2K Futurism	Contemporaneous but visually opposite; Y2K is glossy and optimistic where Corporate Grunge is matte and gritty
Nu-Metal	Musical counterpart; Nu-Metal bands used Corporate Grunge visual design extensively
Teenpunk	Shares the rebellious, rough-edged sensibility but targets a younger demographic
Memphis Design	An unlikely influence; both break design rules, but Memphis uses bright colors while Corporate Grunge uses muted earth tones
Brutalism (web)	Modern web design echo; both reject polish for rawness, but Brutalism is more minimal while Corporate Grunge is more textured

Quick-Start: Minimal Corporate Grunge Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Corporate Grunge Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Permanent+Marker&family=Courier+Prime:wght@400;700&family=VT323&family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <style>
    :root {
      --grunge-black: #0d0c0c;
      --grunge-charcoal: #1a1a1a;
      --grunge-charcoal-warm: #2a2d2f;
      --grunge-concrete: #4a4a4a;
      --grunge-dust: #7a7777;
      --grunge-paper: #d9c6b2;
      --grunge-white: #e5e0d6;
      --grunge-rust: #a76d5d;
      --grunge-blood: #7a0b0b;
      --grunge-olive: #556b2f;
    }

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

    body {
      background: var(--grunge-charcoal);
      color: var(--grunge-paper);
      font-family: 'Courier Prime', 'Courier New', monospace;
      font-weight: 400;
      line-height: 1.7;
      position: relative;
    }

    /* Global noise texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      opacity: 0.06;
      background-image: 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)'/%3E%3C/svg%3E");
      background-size: 256px 256px;
      pointer-events: none;
      mix-blend-mode: overlay;
      z-index: 9999;
    }

    h1, h2, h3 {
      font-family: 'Special Elite', monospace;
      color: var(--grunge-white);
      text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    }

    h2, h3 {
      font-family: 'Permanent Marker', cursive;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .hero {
      text-align: center;
      padding: 6rem 2rem;
      background:
        radial-gradient(circle at 30% 70%, rgba(167, 109, 93, 0.06) 0%, transparent 50%),
        var(--grunge-black);
      position: relative;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      letter-spacing: 0.05em;
      line-height: 1.1;
      margin-bottom: 1rem;
    }

    .hero p {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--grunge-dust);
    }

    .grunge-divider {
      border: none;
      height: 3px;
      background: repeating-linear-gradient(
        90deg,
        var(--grunge-concrete) 0px, var(--grunge-concrete) 4px,
        transparent 4px, transparent 7px,
        var(--grunge-concrete) 7px, var(--grunge-concrete) 9px,
        transparent 9px, transparent 14px
      );
      opacity: 0.5;
      margin: 0;
    }

    section {
      max-width: 800px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    .grunge-card {
      background: var(--grunge-charcoal-warm);
      border: 1px solid rgba(167, 109, 93, 0.2);
      padding: 2rem;
      margin: 2rem 0;
      transform: rotate(-0.5deg);
      box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 0, 0, 0.3);
    }

    .grunge-stamp {
      font-family: 'Special Elite', monospace;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--grunge-blood);
      border: 2px solid var(--grunge-blood);
      padding: 0.3em 0.7em;
      display: inline-block;
      transform: rotate(-3deg);
      opacity: 0.8;
    }

    a {
      color: var(--grunge-rust);
      text-decoration: none;
      border-bottom: 1px solid rgba(167, 109, 93, 0.4);
      transition: color 0.15s;
    }

    a:hover {
      color: var(--grunge-white);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <p>Subheading in monospace uppercase</p>
  </div>
  <hr class="grunge-divider">
  <section>
    <h2>Section Heading</h2>
    <div class="grunge-card">
      <p>Content styled with Corporate Grunge aesthetic. Rough textures, distressed type, muted earth tones.</p>
      <br>
      <span class="grunge-stamp">Confidential</span>
    </div>
  </section>
</body>
</html>

← Back to designs