Neo-Brutalism
Harsh borders, bright pastels, and solid drop shadows. A playful rebellion against flat design.
The Concept
Unlike traditional Brutalism which is raw and often user-hostile, Neo-Brutalism is incredibly playful and highly usable. Popularized by tools like Figma and Gumroad, it combines the starkness of thick black borders with the approachability of bright, saturated pastels and quirky typography.
The Experiment
We created a landing page for a fictional creative agency. The entire UI is built with solid black borders (no blur on shadows), making the interface feel like a stack of physical, brightly colored index cards.
Design Specs & Assets
Use these core parameters to recreate the Neo-Brutalist aesthetic in your own projects.
Color Palette
#FFD4E5 (Pastel Pink)#D4F0FF (Pastel Blue)#E7FFD4 (Pastel Green)#000000 (Black Lines)Typography
font-family: 'DM Sans', sans-serif;
font-weight: 800; /* Chunky Headers */
Key CSS Snippet: Solid Drop Shadows
/* No blur radius, solid black offset */
.neo-card {
border: 3px solid #000;
border-radius: 8px;
box-shadow: 6px 6px 0px #000;
transition: transform 0.1s, box-shadow 0.1s;
}
.neo-card:active {
transform: translate(4px, 4px);
box-shadow: 2px 2px 0px #000;
}Design Decisions
Hard Shadows
Replacing soft blurs with aggressive, non-blurred offsets (e.g. box-shadow: 8px 8px 0px #000) for a 90s web feel.
High Contrast Outlines
Wrapping every container, image, and interactive element in thick 4px solid black borders.
Clashing Pastels
Using hyper-saturated, intentionally clashing pastel background colors to evoke a playful, anti-corporate mood.
Accessibility (a11y) Analysis
The Art vs. Access Tradeoff
The Conflict: Neo-brutalism is surprisingly accessible due to its massive typography, solid #000 borders, and high-contrast pastel backgrounds. The main issue is visual noise and cognitive overload.
The Compromise: Maintaining semantic HTML. While the UI looks chaotic, the underlying structure must remain a clean tree of nav, main, and article tags for screen readers to parse the noise.