Mood & theme · 1930s–present
Zine
Self-published on a photocopier, assembled with scissors and tape: cut-and-paste collage, typewriter text, hand-drawn elements, and the raw energy of no-budget publishing.
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(94% 0.018 88) - --fg
oklch(13% 0.01 50) - --muted
oklch(42% 0.01 52) - --surface
oklch(97% 0.012 90) - --surface-2
oklch(90% 0.022 84) - --border
oklch(20% 0.01 50) - --accent
oklch(88% 0.18 100) - --accent-fg
oklch(13% 0.01 50) - --focus
oklch(78% 0.18 100)
| Token | Value |
|---|---|
| --font-body | 'Courier New', Courier, ui-monospace, monospace |
| --font-display | 'Courier New', Courier, ui-monospace, monospace |
| --font-mono | 'Courier New', Courier, ui-monospace, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 3px 3px 0 oklch(13% 0.01 50) |
| --shadow-lg | 5px 5px 0 oklch(13% 0.01 50) |
:root {
--bg: oklch(94% 0.018 88);
--fg: oklch(13% 0.01 50);
--muted: oklch(42% 0.01 52);
--surface: oklch(97% 0.012 90);
--surface-2: oklch(90% 0.022 84);
--border: oklch(20% 0.01 50);
--accent: oklch(88% 0.18 100);
--accent-fg: oklch(13% 0.01 50);
--focus: oklch(78% 0.18 100);
--font-body: 'Courier New', Courier, ui-monospace, monospace;
--font-display: 'Courier New', Courier, ui-monospace, monospace;
--font-mono: 'Courier New', Courier, ui-monospace, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 3px 3px 0 oklch(13% 0.01 50);
--shadow-lg: 5px 5px 0 oklch(13% 0.01 50);
}Where it came from
Origin: Science fiction fanzines; punk DIY publishing; riot grrrl, 1990s
Zines (short for magazines or fanzines) trace back to science fiction fan communities of the 1930s but found their most influential form in the punk era and, later, riot grrrl's feminist underground publishing of the 1990s. The aesthetic is defined by the constraints of the photocopier: black and white, high contrast, collaged text and image, imperfect alignment, visible tape and correction fluid. The imperfections are the point — they prove it was made by hand.
How to spot it
- Off-white or cream paper background with near-black copy
- Collaged elements: cut text, hand-drawn borders, torn-paper edges
- Mixed typefaces — typewriter, cut-out letterforms, hand-lettering
- Slight rotation and imperfect alignment on assembled elements
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Communicates DIY authenticity with immediate force | Deliberately low production value — reads as amateur without care |
| Stands out completely from polished digital design | High-contrast B&W offers little palette flexibility |
| Inexpensive to reference — no visual complexity needed | Rotation and misalignment can cause horizontal overflow at mobile widths |
In the wild
- Riot grrrl movement publications, 1990s
- Punk and hardcore scene event flyers
- Artist-run independent publishing and small press catalogues
Use it when
The product is self-published, community-driven, or anti-commercial — and the audience values authenticity over production quality.