A design system for the copy room. Raw structure, exposed grids, monospaced type, and zero decoration that doesn't earn its place. beautiful functional.
Five colors and a tape. This is a photocopy palette — ink on cheap paper, grey where the toner ran thin, red where the editor struck, and highlighter yellow where something mattered. The tape is barely there. If you need more colors, you don't understand the assignment.
Usage rule: Black and paper are the system. Grey is metadata. Red is correction. Yellow is emphasis. If everything is highlighted, nothing is.
Three monospaced and system fonts. Space Mono for
display and headings — brutalist, mechanical, grid-locked.
Courier Prime for body text — the typewriter,
the memo, the carbon copy. IBM Plex Sans for UI
labels and metadata — institutional, functional, invisible.
Design systems should make you feel uncomfortable if they have too many fonts. Three is already generous. Use them with discipline or don't use them at all.
A 4px base unit. Six stops. No in-betweens, no
margin: 13px accidents. The grid is the law.
Everything snaps to it or it doesn't belong.
No border-radius. No gradients. No box-shadow until hover. Buttons are rectangles with borders — they look like what they are. Hover inverts them. That's the whole interaction model: black becomes white, white becomes black.
Form controls are rectangles. No rounded corners, no soft shadows, no placeholder animations. A text input is a box you type into. A checkbox is a box you check. If your form needs more than black borders on copy paper, you're designing a brochure, not a zine.
Content containers are clippings. Cut from something else, taped onto this page. They have borders because they're physical objects. Some are straight, some aren't. The slight tilt is intentional — perfect alignment is for people who've never used a paste-up board.
The standard card. Black border, copy-paper background, scotch tape holding it to the page. This is how content was assembled before CSS Grid existed.
The photocopied negative. White text on black. Like when you accidentally feed the original face-down and get that beautiful inverted result.
Someone ran a highlighter across the top of this one. It means "important" or "read this first." The yellow strip is the only color this card gets.
This card has been through editorial review. The red border means corrections are pending. Margin notes appear in the editor's hand.
Alerts are rubber stamps. Uppercase, monospaced, bordered. They don't ask politely. An error is an error. A warning is a warning. No soft language, no friendly icons, no pastel backgrounds.
Every zine has an editorial page. This is ours. Read it, xerox it, pass it on.
rotate(-0.5deg)
because nothing in a zine is perfectly straight. The tape
is never centered. The staple misses. That's honesty.