90s Grunge

---
name: nineties-grunge
description: Apply the 90s Grunge visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" 90s Grunge, mentions grunge design, zine style, xerox aesthetic, or describes distressed typewriter type, torn paper and tape collage, xerox grain and halftone texture — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# 90s Grunge Design System

Photocopied chaos from 90s zines and Ray Gun magazine: distressed typewriter and ransom-note type, torn-paper edges, halftone grime, gaffer tape, and ink splatter on newsprint — layered like a flyer stapled over last month's flyer.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as 90s Grunge.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (grunge design, zine style, xerox aesthetic, ray gun style, anti-design 90s), or describes its traits: distressed typewriter type; torn paper and tape collage; xerox grain and halftone texture; ransom-note emphasis; newsprint palette with blood red; layered rotated elements.

## Design tokens

### Color palette

- Newsprint off-white background: `#e8e4da` (--color-bg)
- Paper-scrap surfaces, slightly cleaner: `#f2efe7` (--color-surface)
- Photocopy black primary text: `#141210` (--color-text)
- Faded-ink secondary text: `#4a453c` (--color-text-muted)
- Blood red — stamps, links, ransom boxes: `#8b1a1a` (--color-accent)
- Muddy olive for tape and secondary fills: `#5e5a3c` (--color-olive)
- Heavy ink for splatter and rules: `#292520` (--color-ink)

### Typography

- Display / headings: Special Elite (fallback: Courier New, monospace)
- Body: Courier Prime (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.1, letter-spacing 0.02em, uppercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 20, 32, 48, 72 — Tight and cluttered on purpose — elements overlap, rotate, and crowd like a collage board; breathing room reads as unfinished, which is fine too.
- Border radius: none 0px — No rounded corners; edges are either hard cuts or irregular torn-paper clip-paths.
- Border treatment: 2px solid #141210 — Rough black rules; alternates with torn edges (clip-path polygons) and tape strips instead of clean borders.

### Shadows

- paper: `2px 3px 0 rgba(20,18,16,0.35)` — Paper scraps and cards, like layered flyers
- photocopy: `0 0 0 1px rgba(20,18,16,0.15), 3px 4px 6px rgba(20,18,16,0.25)` — Heavier stacked-paper depth for modals

### Layout

- Max content width: 1100px
- Deliberately broken grid — elements rotated -3deg to 3deg and overlapping
- Torn-edge section transitions via clip-path
- Tape strips and staples pin elements at corners
- Dense collage hero, calmer typewriter columns for reading

### Effects

- Xerox grain overlay at 6–8% opacity
- Halftone dot texture on images (duotone black/newsprint)
- Ink splatter and rubber-stamp SVG accents
- Torn-paper clip-path edges
- Gaffer-tape strips holding elements down

### Motion

- Easing: steps(2, end); durations 80ms / 140ms / 240ms
- Stuttering, stepped transitions — nothing smooth or eased
- Hover jolts elements 1–2px with a rotation twitch
- Page sections slap down like stamped paper on scroll
- Keep twitches tiny and disable them under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e8e4da;
  --color-surface: #f2efe7;
  --color-text: #141210;
  --color-text-muted: #4a453c;
  --color-accent: #8b1a1a;
  --color-olive: #5e5a3c;
  --color-ink: #292520;
  --radius-none: 0px;
  --shadow-paper: 2px 3px 0 rgba(20,18,16,0.35);
  --shadow-photocopy: 0 0 0 1px rgba(20,18,16,0.15), 3px 4px 6px rgba(20,18,16,0.25);
  --border-default: 2px solid #141210;
  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "Courier Prime", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: steps(2, end);
  --duration-fast: 80ms;
  --duration-base: 140ms;
  --duration-slow: 240ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Special+Elite:wght@400&family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Newsprint bar with rough black bottom rule, wordmark like a rubber stamp in blood red, uppercase typewriter links that get struck-through on hover
- **Hero:** Collage: distressed Special Elite headline, one ransom-note word reversed in a red box, torn newsprint scraps and tape behind, halftone photo
- **Card:** Paper scrap: surface bg, slight rotation, paper shadow, tape strip on one corner, typewriter text
- **Button (primary):** Blood red fill, newsprint text, 2px black border, hard edges; jolts and darkens on press
- **Button (secondary):** Transparent with 2px black border and typewriter label; gets a red strikethrough hover
- **Form fields:** Surface fill, 2px black border, no radius; focus adds a red offset outline like a misprint

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A headline in distressed typewriter caps, photocopied to the edge of legibility, taped down crooked over a torn newsprint scrap — with one word cut out ransom-note style in a red box. Spend boldness here; keep everything else quiet.

## Do

- Layer: every element sits on, under, or taped to something else
- Distress the display type but keep body copy clean enough to read
- Use red sparingly — one stamp, one ransom word, one link color
- Rotate elements slightly; perfect alignment breaks the illusion

## Don't

- No gradients, glows, or glossy anything — the medium is a photocopier
- Don't distress body text or form labels
- Avoid bright, clean colors; everything is slightly dirty
- Don't fake it with one texture overlay on an otherwise clean grid — the layout itself must be collaged

## Accessibility notes

- Distressed and rotated display text must remain real DOM text with sufficient contrast; heavy grunge treatments belong on decorative elements, not on link labels
- Grain and halftone overlays must stay under 10% opacity over text areas
- The stepped jolt animations are small but should still be disabled under prefers-reduced-motion

## Reference sites

- Ray Gun magazine: https://en.wikipedia.org/wiki/Ray_Gun_(magazine)
- David Carson: https://www.davidcarsondesign.com
- Zine culture: https://en.wikipedia.org/wiki/Zine

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip nineties-grunge.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/nineties-grunge.json

Settings → Capabilities → Skills → Upload skill → nineties-grunge.zip