Agence WagnerAgence Wagner
FRENDEELS
Zruck züe de Designs
RétroTextureIndustriel
Vorschau

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
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>
← Zruck züe de Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alli Rächt vorbehalt.

Designs vu chrislemke/website_designs, lizenziert unter MIT.