Mood & theme · 1988–present
Grunge
Distressed, anti-corporate, and deliberately rough: torn textures, heavy type, noise, and the visual energy of a photocopied flyer made at 2 am.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(14% 0.01 40) - --fg
oklch(84% 0.01 80) - --muted
oklch(55% 0.01 70) - --surface
oklch(19% 0.01 38) - --surface-2
oklch(24% 0.01 38) - --border
oklch(35% 0.01 48) - --accent
oklch(60% 0.18 45) - --accent-fg
oklch(10% 0 0) - --focus
oklch(60% 0.18 45)
| Token | Value |
|---|---|
| --font-body | 'Arial Black', 'Helvetica Neue', Helvetica, system-ui, sans-serif |
| --font-display | 'Impact', 'Arial Black', Helvetica, system-ui, sans-serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 0 2px 8px oklch(4% 0 0 / 0.6) |
| --shadow-lg | 0 12px 32px oklch(4% 0 0 / 0.7) |
:root {
--bg: oklch(14% 0.01 40);
--fg: oklch(84% 0.01 80);
--muted: oklch(55% 0.01 70);
--surface: oklch(19% 0.01 38);
--surface-2: oklch(24% 0.01 38);
--border: oklch(35% 0.01 48);
--accent: oklch(60% 0.18 45);
--accent-fg: oklch(10% 0 0);
--focus: oklch(60% 0.18 45);
--font-body: 'Arial Black', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
--font-display: 'Impact', 'Arial Black', Helvetica, system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 0 2px 8px oklch(4% 0 0 / 0.6);
--shadow-lg: 0 12px 32px oklch(4% 0 0 / 0.7);
}Where it came from
Origin: Pacific Northwest rock scene; David Carson; Ray Gun magazine
Grunge as a design aesthetic emerged alongside the music in the late 1980s, most influentially in the hands of David Carson at Transworld Skateboarding and then Ray Gun magazine. Carson broke every rule of legibility and grid — running text sideways, once setting an entire interview in a dingbat font, bleeding images off edges. The resulting chaos communicated the authenticity of a subculture that rejected the polished mainstream.
How to spot it
- Distressed, scratched, and eroded textures throughout
- High-contrast palette — near-black with washed-out or dirty neutrals
- Heavy, aggressive type — Impact, condensed blacks, or hand-drawn letters
- Deliberate imperfection: misalignment, overlap, visible damage
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Unmistakably authentic to its subculture references | Deliberately hostile to easy reading — intentionally uncomfortable |
| High visual energy that cuts through polished media landscapes | Very specific subcultural signal — excludes audiences outside it |
| Pairs well with photography and raw visual content | Texture-heavy layouts degrade on low-resolution or small screens |
In the wild
- Ray Gun magazine (David Carson, 1990s)
- Concert poster and band merch graphic design
- Skate, streetwear, and underground music branding
Use it when
The audience is subcultural and the brand's authenticity depends on rejecting polish.