A design system born from xerox machines, zine culture, and basement shows. 1991 - 1999.
Vol. 01 // DIY or Die // No Clean Fonts AllowedThis style guide channels the raw energy of 90s underground culture: photocopied zines, wheat-pasted flyers, hand-stamped show posters, and the deliberate imperfection of analog reproduction. Every smudge is intentional. Every misalignment is a statement. The xerox machine is our printing press.
The palette of a photocopied world. Ink blacks that bleed, paper whites gone yellow with age, the safety orange of a flyer on a telephone pole, and the bruise purple of a hand-stamped envelope. Nothing is bright. Everything is lived-in.
Five font stacks that span the spectrum from typewriter intimacy to punk-show screaming. Mix them freely. Clash them intentionally. This is not about harmony -- it is about energy.
SMELLS LIKE
TEEN SPIRIT
the quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
This is body text. It feels like it was typed on a Smith Corona in a basement apartment in Olympia, Washington, circa 1993. The keys stick sometimes. The ribbon is running low on ink. But the words still matter more than the medium. AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789
CAPTION TEXT FOR LABELS, METADATA, TIMESTAMPS, AND SMALL ANNOTATIONS. FILE UNDER: EPHEMERA. DATE: UNKNOWN. ORIGIN: SOME RECORD STORE IN SEATTLE.
function destroyCleanDesign() {
const rules = document.querySelectorAll('.corporate');
rules.forEach(r => r.style.transform = `rotate(${Math.random()*4-2}deg)`);
}
Marker Scrawl
For emphasis, annotations, and hand-written feel
Highlighted Text
Caution-yellow marker highlight effect
Crossed Out
Deletions, redactions, changed minds
"I'd rather be hated for who I am, than loved for who I am not." -- Kurt Cobain
A 4px base unit scaled up in powers of two. Grunge does not mean chaos without structure. The grid exists -- it is just not afraid to break its own rules sometimes.
Buttons should feel like stickers slapped onto a surface. Hard shadows, no border-radius, typewriter labels. They shift on hover like something peeling off. The disabled state is a faded photocopy of itself.
INTERACTION: Hover shifts position 2px down-right, removing shadow (sticker peel effect). Active state adds inset shadow. Disabled buttons lose opacity and shadow. No transitions -- movements are instant, like slapping something down.
Form fields should feel like typing on an actual form -- the kind you find stapled to a telephone pole or photocopied in a stack at the merch table. Labels are code comments. Inputs have inner shadows like pressed paper.
Content containers that feel like torn-out pages pinned to a corkboard, photocopied flyers, or collaged scraps held down with tape. Each variant evokes a different texture of the analog underground.
A standard content card with ink-black header bar. Use for structured content that needs a clear title and body separation.
Borders are hard. Shadows offset down-right like a bad photocopy registration.
Cometbus #43 -- Aaron writes about riding freight trains through the Pacific Northwest. The typewriter font is almost unreadable but you keep reading anyway.
Recommended
This card variant appears taped to the surface with a duct-tape strip across the top. Slight rotation gives it a hand-placed feel, like something pinned to a bulletin board at the record store.
Pair these with the ransom-note text treatment for maximum zine authenticity. Works well for featured content or editorial callouts.
Grey-toned like a photocopy that has been copied too many times. The shadow is heavier and offset, simulating misregistration from a worn-out copier drum.
Good for secondary content, archival material, or anything that should feel like it has been passed around and photocopied at every Kinko's in town.
Full ink-black background. For high-impact content -- announcements, headlines, important notices. The orange header stripe cuts through the darkness like a safety flare.
Subtle radial gradient simulates a coffee stain soaked through the paper. Perfect for that lived-in, passed-around-the-cafe feeling. Somebody spilled their Americano on this one.
System messages styled like margin notes, scribbled corrections, and stamped warnings. The left border is a thick marker stripe. Colors are muted -- this is not corporate UI, this is a note stapled to a telephone pole.
Rules for breaking rules. These are the values that hold the chaos together.
Slight rotations, rough edges, misaligned elements -- these are not bugs. They signal that a human made this, not a template. Use CSS transforms sparingly but intentionally: rotate(-0.5deg) to rotate(-2deg).
Grain overlays, paper backgrounds, coffee stains, tape strips. Every surface should feel tactile. If it looks like it could have been printed on a laser printer and stapled together, you are on the right track.
Display + Marker + Typewriter in the same layout is not a mistake. Zine design lives in the tension between type styles. Use the ransom-note component for maximum collage energy.
Duct tape navigation bars. Coffee-stained cards. Torn-paper dividers. Stamp badges. Every UI element should reference a physical object from the zine-making toolkit.
Grunge aesthetics must not sacrifice usability. Text remains readable. Contrast ratios are maintained. Form elements are clearly labeled. The chaos is visual, not functional.
If something looks like it belongs in a pitch deck, it does not belong here. This design system exists for the spaces between commercial design -- personal sites, art projects, independent publications, and anything that refuses to be polished.