X X

// design system //

ZINEPUNK

CUT. PASTE. PHOTOCOPY. DESTROY.

A design system for the DIY underground. No rules. No permission. Just a photocopier and a bad attitude.

01

Color Palette

High-contrast xerox black and white as the foundation. Accents come from whatever was lying around the copy shop -- safety-pink highlighters, yellow markers, red spray paint, and strips of blue masking tape.

Core Tones

Xerox Black #111111 Primary ink, borders, text
Xerox White #F0ECE3 Page background, clean areas
Paper Cream #E8E2D4 Aged paper, body background
Dirty Paper #D4CFC2 Worn surfaces, gutters
Xerox Grey #B8B3A8 Faded copies, muted text

Neon Accents

Safety Pink #FF2D87 Primary accent, highlights
Marker Yellow #FFE11A Highlighter, tape strips
Spray Red #E01A1A Warnings, urgency, X marks
Tape Blue #3D85C6 Info, links, masking tape
Sharpie Green #00C853 Success, confirmed, go
Bruise Purple #8B2FC9 Special callouts, rare accent
02

Typography

Six wildly different typefaces crammed together like cut-out letters glued to a page. The deliberate mismatch IS the system. Creepster screams headlines, Special Elite hammers out body copy, Permanent Marker scrawls notes in the margins.

Display / H1 Creepster / clamp(4rem, 14vw, 9rem)
DESTROY
Heading 2 Creepster / 2.8rem
No Future
Heading 3 Permanent Marker / 1.5rem
Scrawled in the Margins
Heading 4 Special Elite / 1.15rem / 700 / Uppercase
TYPEWRITER SECTION LABEL
Gothic UnifrakturMaguntia / 1.6rem
Blackletter Chaos
Terminal VT323 / 1.2rem
C:\SYSTEM\> hack the planet_
Body Special Elite / 1rem / 400
We printed 200 copies at 3am at the Kinkos on Haight Street. The toner was running low and every page came out slightly different.
Mono / Code Courier Prime / 0.85rem
font-family: 'whatever-was-in-the-drawer';

Ransom Note Demo

The core zine aesthetic: every word cut from a different source and pasted together.

WE don't NEED your PERMISSION to CREATE . just a photocopier and RAGE
03

Spacing

Even chaos has a grid underneath. A 4px base unit keeps the entropy just structured enough to hold together, like staples barely holding a 40-page zine.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
32px
--space-xl
64px
--space-2xl
96px
--space-3xl
128px
04

Buttons

Every button is a call to action scrawled on a flyer. Rough edges, hand-drawn energy, and a satisfying mechanical snap on hover. Click it like you are slamming a stamp down.

Core Variants

Special Variants

Sizes

Button Group

05

Forms

Data entry with typewriter grit. Every field feels like filling in a photocopied order form at a record swap. Heavy borders, sharp focus states, hand-written labels.

Checkboxes

Radio Buttons

06

Cards

Content containers that look like scraps of paper taped and stapled to a corkboard. Each one slightly askew, slightly different, like pages torn from different zines and pinned together.

Standard Cards

DIY or Die

The whole point is that nobody gave you permission. You took the photocopier, you wrote the words, you stapled the pages together yourself.

Blackout Issue

When the content is too raw for daylight. White text on black, like a negative exposure or a redacted government document.

Collage Style

Layered backgrounds, angled text, fragments of other things peeking through. Nothing is clean. Everything is intentional.

Flyer Card

Cards can also serve as miniature concert flyers or event announcements, using the full zine aesthetic toolkit.

Friday Feb 21

DEAD KENNEDYS

w/ Minor Threat + Bad Brains

The Mab, 443 Broadway, SF
Doors 8pm / $5 / All Ages

Saturday Feb 22

BLACK FLAG

w/ Circle Jerks + Descendents

Whisky a Go Go, LA
Doors 9pm / $3 / BYO

07

Alerts

Messages that refuse to be filed away politely. Thick left-border accents, typewriter text, and the unmistakable feeling of a note slipped under your door.

Info

Next issue deadline is Friday. Send submissions to PO Box 1977 or slide them under the door at Gilman Street.

Success

Your zine has been accepted into the distro. Print run of 200 confirmed. Pick them up Saturday after the show.

Warning

The photocopier at the community center is almost out of toner. Bring your own or prepare for faded copies.

Danger

Show cancelled. Venue shut down by fire marshal. Meet at the backup spot. You know where. Tell no one.

Scrawled Note

This variant looks like someone scribbled a warning in the margin of your zine with a red marker at 4am.

08

Zine Clippings

Scraps, cut-outs, and fragments arranged on a surface like a collage board. Some taped, some just lying there. Hover to see them shift -- nothing is permanently fixed down.

The first zine was just 12 photocopied pages stapled together in a garage in 1976.
QUESTION EVERYTHING
INFORMATION WANTS TO BE FREE. THE INTERNET IS JUST A FASTER PHOTOCOPIER.
The venue is at 1234 SECRET Street. Show starts at REDACTED. Bring CLASSIFIED.
cut here - - - - - - - - -
NO GODS NO MASTERS
09

Stickers & Badges

Small labels, tags, and status indicators. Like the stickers slapped on a guitar case, a laptop lid, or the back of a bathroom stall. Hover to peel them off the page.

Filled Stickers

Punk DIY Zine Sold Out Info Default

Round Stickers

A NEW !!! X

Torn Edge Stickers

Underground Limited Run Free Banned
10

Flyer Layout

The ultimate test of the zine-punk design system: a complete concert flyer built from all the components. Black border, dashed inner frame, stacked type in clashing fonts, a big price badge, and that unmistakable xeroxed energy.

* * * * *

Gilman Street Presents

DEAD
PREZ
w/ Crass + Flux of Pink Indians
Saturday March 15, 2026
924 Gilman Street, Berkeley CA
Doors 7pm / All Ages / No Booze
$5
* * * * *

Flyer design: photocopied 200x at 3am. Quality may vary.