// Design Aesthetic Reference

Grunge
Revival

Raw textures // Controlled chaos // Analog warmth

The modern reinterpretation of 90s alternative visual culture — distressed textures, torn edges, and ink-splattered typography deployed within a structured, usable framework. Surface chaos with underlying order.

Hand-Drawn & Eroded

marker strokes, typewriter grit, clean body text

Display / Rubik Dirt

SMASH THE GRID

Heading / Permanent Marker

Raw Headlines

Subheading / Rock Salt

scrawled annotations & margin notes

Label / Special Elite

Distressed Typewriter Output

Body / Inter

Clean, readable body text designed for comfortable long-form reading. The Revival preserves usability beneath the visual roughness.

Mono / IBM Plex Mono

code, metadata, timestamps & structured content

Type Scale

5.5rem Aa
3.5rem Aa
2rem Aa
1.15rem Aa
1rem Aa
0.75rem Aa

Font Pairings

Permanent Marker + Inter
Raw display energy meets clean modern readability

Rubik Dirt + Courier Prime
Inky bold display over lo-fi typewriter body

Rock Salt + Inter
Intimate hand-scrawled headings with clean text


Oxidized & Weathered

rust, charcoal, moss, amber & aged parchment

Void Black
#0C0C0C
Asphalt
#1A1A1E
Worn Charcoal
#2C2A2A
Concrete Dust
#4A4744
Smoke Haze
#7A7672
Oxidized Rust
#A04A2D
Faded Amber
#B89234
Dried Blood
#6B1515
Dark Moss
#3A3F2A
Slate Teal
#3D5A5C
Bruise Purple
#4E3A5C
Aged Parchment
#D4C9A8
Dirty White
#E8E2D5
Tarnished Silver
#9A9590
Stain Brown
#8B6F4E

Distressed Cards

tape strips, torn edges & rough surfaces

// Texture

Film Grain Overlay

SVG feTurbulence noise layered at low opacity creates analog warmth. The grain shifts perception from digital precision to physical imperfection.

// Layout

Torn Edge Dividers

Irregular clip-path polygons replace clean horizontal rules with jagged, ripped-paper boundaries between sections and content areas.

// Motion

Deliberate Rotation

Subtle 0.5-3 degree tilts on cards and headings suggest hand-placement. The slight imperfection signals authenticity over machine precision.

// Decoration

Tape Strip Accents

Translucent pseudo-elements simulate adhesive tape holding cards in place. A physical metaphor that grounds the digital in analog craft.

// Typography

Marker & Typewriter

Display fonts with marker strokes and eroded qualities paired with clean monospace body text. Chaos in the headlines, order in the paragraphs.

// Color

Oxidized Earth Tones

Rust, amber, moss, and dried blood on dark asphalt surfaces. Every color looks weathered, left in the rain, stained by coffee and ink.


Distressed Techniques

grain, halftone, torn edges & analog artifacts

Film Grain

Animated SVG feTurbulence noise with overlay blend mode creates shifting, organic film grain texture.

Torn Paper Edge

Irregular clip-path polygon vertices simulate ripped paper between content sections.

Halftone Dots

Coarse radial-gradient dot overlay referencing cheap printing processes and newsprint reproduction.

Tape Strips

Semi-transparent pseudo-elements with subtle borders simulate translucent adhesive tape.

Ink Splatter

Scattered box-shadow dots in warm accent colors create organic paint-splatter dividers and accents.

Photocopy / Xerox

High contrast, heavy noise, and scan-line artifacts simulate photocopied output with degraded fidelity.

Rough & Tactile

hand-stamped, peeling, and eroded button styles


Words from the Underground

rough-edged callout with paint-stroke border

The mess is visual rather than structural. Navigation hierarchies remain predictable, content architecture stays familiar, and readability is preserved — even as the surface layer screams chaos and imperfection.
— Grunge Revival Design Manifesto

Embrace the Imperfect

Controlled rebellion -- the visual language of disorder deployed within an invisible structure.