Zine / Collage

---
name: zine-collage
description: Apply the Zine / Collage visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Zine / Collage, mentions zine, punk zine, cut-and-paste, or describes torn and taped paper edges, ransom-note mixed typography, photocopy grain and halftone — 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
---

# Zine / Collage Design System

Cut-paste photocopy DIY: torn paper scraps, ransom-note type, typewriter body text, tape and staples, all reproduced through the gritty degradation of a xerox machine. Deliberately anti-polished — the visible labor of scissors and glue is the point.

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 Zine / Collage.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (zine, punk zine, cut-and-paste, DIY collage, photocopy aesthetic, xerox style), or describes its traits: torn and taped paper edges; ransom-note mixed typography; photocopy grain and halftone; overlapping collage layers; typewriter body text; 1–2 spot inks on newsprint.

## Design tokens

### Color palette

- Newsprint off-white page background: `#f0ece2` (--color-bg)
- Pasted paper scrap, slightly brighter than the page: `#faf7ef` (--color-surface)
- Aged clipping / second paper stock: `#e3ddcd` (--color-surface-alt)
- Photocopier toner black: `#1a1a1a` (--color-text)
- Faded second-generation copy text: `#4a4a4a` (--color-text-muted)
- Single spot ink — riot red, used for stamps and highlights: `#d0021b` (--color-accent)
- Optional second spot ink, highlighter yellow (decorative fills only): `#f5c518` (--color-accent-2)
- Translucent masking-tape strips (65% opacity): `#d8d2bfa6` (--color-tape)

### Typography

- Display / headings: Permanent Marker (fallback: Impact, Arial Black, sans-serif)
- Body: Courier Prime (fallback: Courier New, monospace) (ideal: IBM Selectric typewriter output, premium — use Courier Prime as the free substitute)
- Mono / data: Special Elite (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.1, letter-spacing 0.01em, uppercase
- Body: line-height 1.55, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 12, 16, 24, 40, 64 — Cramped and overlapping; scraps crowd and partially cover each other. Erratic gaps are in character — perfect alignment is not.
- Border radius: none 0px — No rounded corners; edges are torn (clip-path polygons) or straight scissor cuts, never CSS-rounded.
- Border treatment: none — Paper scraps have no strokes — separation comes from paper-tone contrast, torn edges, and a small lift shadow. Occasional 2px solid #1a1a1a hand-ruled boxes for callouts.

### Shadows

- scrap: `2px 3px 0 rgba(0, 0, 0, 0.25)` — Default lift under pasted paper scraps and cards
- scrap-deep: `3px 5px 0 rgba(0, 0, 0, 0.3)` — Hero collage pieces and modals
- photocopy: `0 0 0 rgba(0, 0, 0, 0)` — Flat elements printed 'into' the page — toner smudge is texture, not shadow

### Layout

- Max content width: 1100px
- Chaotic collage: elements rotated -4deg to 4deg, overlapping by 8–24px
- No strict grid — cluster scraps around a dominant headline piece
- Scanned-texture background layer (grain, fold lines) behind everything
- Marginalia: stamps, doodles, and staple marks in gutters and corners

### Effects

- Photocopy grain overlay (SVG feTurbulence noise at 5–8% opacity, multiply)
- Halftone dot patterns on images (radial-gradient dot tiles)
- Torn edges via jagged clip-path polygons
- Masking-tape strips (rotated translucent rectangles) pinning corners
- Grayscale + high-contrast filter on photos to mimic xerox reproduction

### Motion

- Easing: steps(2, end); durations 80ms / 140ms / 220ms
- Hover jolts a scrap: rotate a degree further and lift the shadow, stepped not eased
- Entrances 'slap down' — scale from 1.06 to 1 in two frames like a stamp
- No smooth parallax or fades; motion should feel hand-made and abrupt

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f0ece2;
  --color-surface: #faf7ef;
  --color-surface-alt: #e3ddcd;
  --color-text: #1a1a1a;
  --color-text-muted: #4a4a4a;
  --color-accent: #d0021b;
  --color-accent-2: #f5c518;
  --color-tape: #d8d2bfa6;
  --radius-none: 0px;
  --shadow-scrap: 2px 3px 0 rgba(0, 0, 0, 0.25);
  --shadow-scrap-deep: 3px 5px 0 rgba(0, 0, 0, 0.3);
  --shadow-photocopy: 0 0 0 rgba(0, 0, 0, 0);
  --border-default: none;
  --font-display: "Permanent Marker", Impact, "Arial Black", sans-serif;
  --font-body: "Courier Prime", "Courier New", monospace;
  --font-mono: "Special Elite", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.55;
  --tracking-heading: 0.01em;
  --tracking-body: 0.02em;
  --ease: steps(2, end);
  --duration-fast: 80ms;
  --duration-base: 140ms;
  --duration-slow: 220ms;
}
```

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

## Component recipes

- **Nav:** Strip of newsprint bg with a hand-drawn 2px black bottom rule; logo as a rotated paper scrap; links in Special Elite, underlined with marker-style 3px squiggle on hover
- **Hero:** Ransom-note headline assembled from rotated word-scraps over a halftone photo; a taped-on red stamp holds the CTA
- **Card:** Paper scrap (surface) with torn clip-path top edge, 2–3deg rotation, scrap shadow, tape strip across one corner, 16–24px padding
- **Button (primary):** Accent red block, toner-black uppercase Permanent Marker label, no radius, scrap shadow; press removes shadow and nudges 2px down-right
- **Button (secondary):** Surface paper chip with 2px black hand-ruled border, black uppercase label, slight rotation
- **Form fields:** Typewriter text on a bare underline (2px solid #1a1a1a) like a filled-in form; focus swaps underline to accent red

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

Ransom-note headlines — each word (or letter) set in a different face, on its own torn paper scrap, rotated a few degrees, held down with visible strips of tape. Spend boldness here; keep everything else quiet.

## Do

- Rotate and overlap elements — nothing should sit perfectly square
- Keep to toner black plus one or two spot inks; scarcity of color is the xerox constraint
- Add tactile evidence: tape, staples, stamps, torn edges, grain
- Mix typefaces freely in headlines but keep body text in one typewriter face for readability

## Don't

- No gradients, glass, or soft modern shadows — nothing a 1990s photocopier couldn't produce
- Don't set long body copy on rotated or torn scraps; keep paragraphs level
- Don't use full-color photography — convert to grayscale halftone
- Don't over-sanitize the chaos into a neat grid; controlled mess is the aesthetic

## Accessibility notes

- Keep rotation of body text under 3deg and paragraph text un-rotated; rotated long-form text harms readability for dyslexic and low-vision readers
- Grain and halftone overlays must stay under ~8% opacity over text blocks to preserve contrast
- Ransom-note headlines are hard to parse for screen magnifier users — keep them short and duplicate meaning in accessible headings
- The stepped 'slap' animations must be disabled under prefers-reduced-motion

## Reference sites

- Queer Zine Archive Project: https://archive.qzap.org
- Barnard Zine Library: https://zines.barnard.edu
- V&A — zines in the collection: https://www.vam.ac.uk

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

Install this skill

unzip zine-collage.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/zine-collage.json

Settings → Capabilities → Skills → Upload skill → zine-collage.zip