Neo-Brutalist design: thick black borders, hard-edge shadows, zero border-radius, maximum contrast. Function over form. Unapologetic.
Black and white as the structural foundation. Four high-energy accent colors for emphasis. No pastels. No gradients. No neutral grays.
Every component follows the same rule: black border, hard shadow, zero rounding. Hover increases shadow. Active crushes it flat.
Primary — Physical Crushing active state
Outline & Ghost
Size scale
Neo-Brutalist interactions are defined by four named rules. Each has an interactive demo below. Hover and click to feel the difference.
active:translate-x-[Npx] active:translate-y-[Npx] active:shadow-none
N MUST equal the original shadow pixel value. Complete flattening — entity crushed into the surface.
shadow-8px → active translate is exactly 8px
hover:bg-[#ffff00] duration-150 ease-out
Instant hard-cut background switch on hover. NO gradients, NO opacity fade. Sharp instantaneous snap.
Background snaps from white to acid green — no fade
transition-all duration-150 ease-out
All transitions: ease-out, 150ms. Brutal collision feel. No spring overshoot, no elastic settling.
Click animate — notice the snap vs the bounce
hover:shadow-[12px_12px_0px_0px_rgba(255,0,110,1)] hover:bg-[#ffff00]
Cards on hover: shadow grows AND switches to colored rgba(255,0,110,1). Background snaps. Physical impact.
Shadow color switches from white to #ff006e on hover
A mock productivity app rendered in full Neo-Brutalist fidelity. Every rule applied in context: thick borders, hard shadows, brutal hover states.
2 tasks remaining
font-black for headings. font-mono for body. No serif. No light weights. Tracking is tight for headings, wide for labels.
Heading — font-black
Body — font-mono
Boldly built on raw function. Every pixel serves purpose.
text-xl / leading-relaxedNeo-Brutalism refuses the ornamental. The border IS the structure. The shadow IS the depth. Nothing is decorative.
text-base / leading-relaxedInspired by Bauhaus functionalism and architectural brutalism. Form follows function absolutely.
text-sm / mutedPhysical Crushing on the decrement button. Brutal Snap color on increment. Zero easing — instant feedback.
Three core principles from architectural Brutalism applied to the web. Honesty of structure. Primacy of function. Refusal of ornament.
Do not hide structure. The border shows the boundary. The shadow shows the depth. No faking. Every visual element must communicate something real.
Every pixel earns its place. If it doesn't communicate information or aid interaction, remove it. No decorative gradients. No cosmetic shadows.
Maximum legibility through maximum contrast. Black on white. White on black. Neon accents on dark fields. Nothing murky. Nothing ambiguous.
Six reasons why the most memorable digital products embrace raw, unapologetic design.
Neo-Brutalism is unmistakable. Users remember it because it refuses to blend in.
Grid lines, borders, and shadows reveal the underlying system. Nothing is hidden.
No blur, no gradients, no filters. Pure CSS properties. Brutal to build, fast to ship.
Maximum accessibility through maximum contrast. WCAG AAA by default.
Buttons look like buttons. Cards look like cards. No skeuomorphic confusion.
No element exists for aesthetics alone. Every visual choice is functional.