Design Reference // Est. 1991 // Seattle, WA

Smells Like Raw Design

Anti-establishment aesthetics — corporate polish — analog soul

this page was assembled by hand
at 3am with coffee and scissors

Typography

Font Specimens // Grunge Type System
Raw Energy
Permanent Marker Headline

Rock Salt for handwritten annotations

Special Elite -- distressed typewriter output for subheadings and display text that channels analog imperfection.

Courier Prime serves as the primary body font. It carries the mechanical warmth of a typewriter without sacrificing legibility. Every character has equal weight, equal space, equal honesty. No kerning tricks, no optical adjustments -- just raw, evenly-spaced truth on the page.

Cutive Mono adds vintage typewriter character for secondary text, metadata, and supporting content that needs to whisper rather than shout.

VT323 >> pixel font for technical elements, counters, and retro-digital accents that reference early screen culture_


Typographic Principles

Grunge typography treats text as a visual medium first. Letters bounce on uneven baselines. Headings tilt at angles that feel hand-pinned to a wall. The typewriter is sacred -- its mechanical imperfection is more honest than any OpenType feature. Readability matters for body text, but headlines exist to scream, smudge, and bleed.

legibility is overrated for headlines

Color Palette

Earth Tones // Muted // Anti-Neon

The grunge palette draws from rain-soaked forests, thrift store flannel, black coffee, and the toner residue of a thousand photocopies. Everything is desaturated, everything is muted, everything has been left out in the Seattle rain.

Soot Black #0d0d0d
Charcoal #1e1e1e
Dark Olive #3b3f2b
Flannel Green #556b2f
Faded Olive #6b7b4a
Rust #a0522d
Burnt Mustard #b8860b
Dried Blood #6b1010
Concrete Gray #4a4846
Smoke #7a7672
Worn Denim #4b5d6e
Aged Paper #d4c9a8
Dirty White #e5dfd3
Coffee Stain #8b6f4e
Faded Purple #5c4a6b

Flannel Texture

CSS-Only Plaid Pattern // The Signature Textile

The flannel shirt is grunge's most iconic garment. This plaid pattern is generated entirely with CSS gradients -- no images, no SVGs. Overlapping horizontal and vertical bands in olive, rust, and mustard create the characteristic woven textile. Use it for section backgrounds, decorative accents, or anywhere you need that Pacific Northwest warmth.

Thrift Store Flannel Seattle PNW 1993

Components

Cards // Buttons // Forms // Show Flyers

Torn Paper Cards

Cards that look like scraps of paper taped to a dark surface. Each one tilts slightly, held in place by translucent tape strips. The torn bottom edge is pure CSS clip-path.

01 // Textures

Distressed Surfaces

Every surface tells a story of wear. Torn paper, crumpled fabric, scratched film. Nothing is pristine. Everything has been touched, used, lived in, and left out in the rain.

02 // Typography

Scrawled & Typed

Handwritten marker text collides with typewriter output. Letters bounce on uneven baselines. The imperfection is the point -- every smudge is intentional.

03 // Emotion

Dark & Brooding

Grunge is introspection turned into visual form. Dark backgrounds, heavy shadows, muted tones that feel like late-night thoughts written in a spiral notebook.


Light Card Variant

Inverted

Aged Paper

Sometimes the scrap of paper is the card itself -- warm, yellowed, with visible texture and the ghost of whatever was on the other side bleeding through.

Contrast

Photocopied Note

Run through the Xerox machine at 3am, slightly crooked, with toner streaks across the margins. The message is still legible. That is what matters.


Button Variants

Primary Ghost Sticker Blood Denim
^ hover these, they actually move

Tags & Labels

Grunge Seattle Flannel DIY Zine Analog Lo-fi Photocopy

Blockquote

The grunge aesthetic endures because authenticity never goes out of style. In a world of pixel-perfect interfaces, there is power in showing the seams, the tape, the coffee rings, the human hand behind the screen. — The Anti-Design Manifesto, 1993

Form Inputs


Show Flyer

The show flyer is grunge design distilled to its purest form -- photocopied, wheat-pasted, and stapled to telephone poles across Capitol Hill.

The Crocodile Cafe Presents

Moth Antenna

w/ Broken Projector & Loose Thread

Saturday Nov 12 // Doors 8pm // All Ages

$5 at the door

Torn Notebook Page

Design Notes:

1. Keep it raw -- never over-polish

2. Typewriter fonts are sacred

3. Tilt everything 1-3 degrees

4. Dark earth tones, no neon

5. Tape strips hold the world together

6. The photocopy machine is your friend


Waveform Bars

Now Playing // Track 07

Visual Effects

Photocopy // Grain // Halftone // Analog Artifacts

Every effect references a physical process. Film grain from lo-fi cameras. Halftone dots from cheap printing. Coffee stains from late-night studio sessions. Scanlines from thrift store televisions. Nothing is digital for the sake of being digital.

01 // Animated Film Grain
02 // Overlay Halftone Dots
03 // Gradient Dark Vignette
04 // Decorative Coffee Ring
05 // Animated TV Scanlines
06 // Animated Jitter / Shake

Zine Culture

Cut // Paste // Photocopy // Distribute

The zine was the original social media -- self-published, unfiltered, distributed hand-to-hand outside shows and in independent record stores. Each one was a collage of thoughts, art, and raw expression, assembled with scissors, glue sticks, and whatever was lying around.

Photocopied at 3am on a borrowed Kinko's card. Stapled with whatever was in the junk drawer. Distributed outside the Crocodile for free or traded for other zines and cassette demos.
DIY or Die
The imperfections ARE the design.
Every smudge -- intentional.
Every misaligned letter -- authentic.
Every toner streak -- a badge of honor.
Kill Your Television
The best design decisions happen when you stop thinking about design and start thinking about what you actually want to say. The medium is secondary. The message is everything.

Design Principles

Do's & Don'ts // The Grunge Rulebook (which rejects rules)
Do

Embrace Imperfection

Nothing should look digitally perfect. Every element should feel touched by human hands, weather, or a malfunctioning photocopier. If it looks too clean, rough it up.

Do

Layer Textures Deep

Combine noise grain, scratches, halftone dots, and vignettes. Real analog surfaces have multiple layers of visual history. Build that depth digitally.

Don't

Use Bright Neon

Grunge is muted, faded, and desaturated. Bright saturated colors belong to rave culture and cyberpunk. Stick to earth tones, deep darks, and faded warmth.

Don't

Over-Polish

If it looks too professional, it has lost the grunge spirit. The aesthetic is fundamentally anti-establishment. Corporate smoothness is the antithesis of everything this stands for.