Design System · v1.0

POP-BRUTAL
DESIGN SYSTEM.

Bold blocks. Thick ink borders. Hard shadows. Loud where it counts, calm where it needs to be.

Download PDF
Foundation

PRINCIPLES.

INK FIRST

Every element is anchored by a thick black border. Contrast > softness.

BLOCKS OF COLOR

Solid, saturated fields. No gradients. Color communicates hierarchy.

SHADOW = WEIGHT

6px offset ink shadow signals interactive. Never blur, never soft.

Color

THE PALETTE.

Ink
--ink
#000000
Cream
--background
oklch(0.985 0.005 90)
Pop Blue
--pop-blue
oklch(0.55 0.24 264)
Pop Pink
--pop-pink
oklch(0.72 0.24 350)
Pop Yellow
--pop-yellow
oklch(0.92 0.19 100)
Pop Red
--pop-red
oklch(0.65 0.26 27)
Pop Green
--pop-green
oklch(0.78 0.2 145)
Card White
--card
#ffffff

Rule of thumb: ONE loud color per composition. Ink + Cream carry the weight; pop colors accent.

Typography

TYPE STACK.

Display · Archivo Black
Aa Bb 360
--font-display
Body · Space Grotesk
Aa Bb 360
--font-sans
HEADLINE.H1 · Display / 60px
SECTION.H2 · Display / 48px
SUBHEAD.H3 · Display / 24px
Regular body copy.Body · 16px medium
CAPTION LABELCaption · 12px bold uppercase
Shadows & Borders

THE BRUTAL STACK.

.brutal-sm
2px border · 4px shadow
.brutal
3px border · 6px shadow
.brutal-lg
4px border · 10px shadow
Radius

CORNERS.

sm
4px
lg
8px
2xl
16px
3xl
24px
Components

BUTTONS.

Components

CARDS.

01
DEFAULT

White surface, ink border, small icon square.

FILLED

Solid pop color as the surface itself.

INVERTED

Ink surface for maximum contrast moments.

Patterns

TEXTURES.

.halftone · .stripes — use sparingly as background accents.

Motion

ANIMATIONS.

animate-logo-bounce
Idle logo bob
animate-float
Card drift
animate-wiggle
Playful nudge
animate-marquee
Logo ticker
hover-lift → translate(-2px,-2px) + shadow 8px · active → translate(2px,2px) + shadow 2px
Spacing & Grid

LAYOUT.

12-col grid · max-width 1152px · 16/24/32 px section rhythm · everything breathes on mobile first.

Assets

GRAB THE KIT.

LOUD BUT NEVER MESSY.

If it's not helping the message land — cut it.

Read Brand Guidelines →