Neo-brutalist DNA — no rounded corners, hard offset shadows, hover displacement — softened with pastel accents and grey borders. Structure with personality.
Hard edges. Soft palette. Every element follows the same hover displacement physics.
Accent color variants — hover to lift, click to press
Ghost variants — off-white fill, grey offset shadow
Interaction physics
hover:-translate-x-[2px] hover:-translate-y-[2px]hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.2)]active:translate-x-[2px] active:translate-y-[2px]active:shadow-nonetransition-all duration-150Two structural tones plus four pastel accents. No gradients. No blends. Each accent lives on its own — clean signal, never noise.
Near Black
#1a1a1a
Primary
Off White
#f5f5f5
Secondary
Soft Pink
#f472b6
Accent
Lime
#a3e635
Accent
Sky Blue
#38bdf8
Accent
Amber
#fbbf24
Accent
Usage rules
Top accent borders
border-t-4 border-t-[#f472b6]Color identity on cards — single edge only.
Hover shadows
shadow-[6px_6px_0px_0px_rgba(0,0,0,0.2)]Hard offset, no blur. Never pure black.
Fill backgrounds
bg-[#f472b6] text-whiteOnly on buttons and accent elements — not full panels.
Identity system for an independent creative studio. Structured without rigidity.
Mobile experience for urban gardeners. Hard edges, soft personality.
Analytics interface that doesn't intimidate. Structure with warmth.
Direct-to-consumer storefront for seasonal produce. Grounded and welcoming.
font-sans font-bold for headings. font-mono for labels, tags, and technical text. Weight contrast creates hierarchy without decoration.
Soft Brutal
Hero headings — font-sans font-black
Structure with Personality
Section headings — font-sans font-bold
Pastel Accents, Hard Edges
Sub-headings — font-sans font-bold
COMPONENT / CATEGORY / TAG
Labels & tags — font-mono uppercase
Neo-brutalism retains structural DNA but softens with pastel accents and grey tones.
Body copy — font-sans regular
border-2 border-gray-800 rounded-none
Technical labels — font-mono
font-sans font-black — headings
Bold
Accent.
font-mono — labels and technical text
CATEGORY / SYSTEM / TAG
border-2 border-gray-800 rounded-none
shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]
Not a list — shown as hard-bordered cards with the token, the rule, and the reason why. Every decision is traceable.
rounded-noneZero rounded corners — ever
The angular edge is the brutalist signature. Softness comes from color, not geometry.
border-2 border-gray-800Thin grey border, not pure black
#1a1a1a borders vs #000000 — the 10% grey shift is what 'soft' means structurally.
shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]Hard offset shadow at 20% opacity
Directional shadows define depth. Opacity drop softens without losing the brutalist offset.
hover:-translate-x-[2px] hover:-translate-y-[2px]Lift on hover — displacement + larger shadow
Hover should feel physical. Elements rise toward the cursor. Press reverses this.
border-t-4 border-t-[#f472b6]Colored accent top-border on cards
Single-edge color accent breaks monotony without flooding the card. Identity without noise.
active:translate-x-[2px] active:translate-y-[2px]Press displacement — shadow collapses
Buttons should feel like physical stamps. Press down, shadow disappears, element sinks.
rounded-sm or rounded-md anywhere
Any rounding breaks the geometric contract.
Pure black shadows rgba(0,0,0,1)
Full opacity shadows feel heavy, not soft.
Dark or moody overall palette
This is the soft variant. Light backgrounds are required.
Gradient backgrounds or fills
Flat color only. Gradients conflict with the structural aesthetic.
box-shadow utilities like shadow-lg
Only use hard offset shadow syntax — never blurred shadows.
Centered body text
Left-alignment is structural. Centering decorates; it doesn't communicate.
Neo-Brutalist Soft vs Classic Neo-Brutalist — Diff
border-2 border-gray-800 (not #000)shadow rgba(0,0,0,0.2) — 20% opacityhover:-translate-x-[2px] (2px lift)border-t-4 pastel accentsbg-[#f5f5f5] off-white bodyPastel fills: pink, lime, sky, amberborder-2 border-black (pure #000)shadow rgba(0,0,0,1) — full opacityhover:-translate-x-[4px] (4px lift)No top-border accentsbg-white pure white bodySaturated fills: primary colors