Style Family: brutal

Signature: Raw, monospace, high-contrast borders, deliberately rough, system-font fallbacks visible. Reference products: Many indie maker landing pages, Vercel templates (brutalist variants), Bauhaus-revival sites, Cobalt.tools. Best for: indie projects, designer portfolios, statement marketing, hacker culture products.

Token defaults

Color

Primary: high-saturation block colors — pure red, pure yellow, pure blue, pure black.
Background: unapologetic — pure white #ffffff or pure black #000000. The "no pure black" rule from modern-minimal does not apply here; pure black is the point.
Borders: thick (2–4px), pure black, on every container. Borders carry the visual weight that elsewhere is carried by shadows.

Typography

Heading: monospace, system font, or quirky display — JetBrains Mono, Space Mono, IBM Plex Mono, Departure Mono, Times New Roman (deliberate retro).
Body: monospace or system serif. Geometric sans-serif is out of family.
Weights: extreme contrast — 400 vs 800, no in-between.

Radius

0 px. Sharp corners always. This is the family's most non-negotiable trait.

Spacing

8px base. Scale: 8 / 16 / 24 / 40 / 64.
Spacing is uneven on purpose — asymmetric layouts are encouraged.

Shadow

Hard shadows only. box-shadow: 4px 4px 0 0 #000; (no blur). No soft elevation.

Motion

Snappy or none. No easing curves. Linear or step transitions. Hover states can be aggressive (color invert, hard offset).

Anti-patterns within this family

Soft shadows.
Rounded corners.
Pastels.
"Design system polish" — uniform spacing, perfect alignment, careful hierarchy. Brutal embraces friction.
Fade animations.
Lucide / Phosphor icons. Use ASCII characters, emoji as ironic decoration, or system Unicode glyphs.

Typical surfaces

This family does well on:

Single-page indie landing
Developer tool marketing
Manifesto / values pages
Designer portfolios

This family does poorly on:

Anything where users spend more than ~10 minutes per session — the friction wears
Enterprise / regulated industries
Consumer apps with broad demographic reach

Notes

Brutal is a statement, not a default. If the user picked it without realizing what it implies (no rounded corners, no soft shadows, no neat alignment), pause and double-check before generating tokens.

2.4 KiB Raw Blame History Unescape Escape