What Is Neobrutalism?
Neobrutalism (sometimes called neo-brutalism) is a contemporary design trend that combines the raw, unpolished aesthetic of web brutalism with vibrant colors, strong typography, and a sense of playful irreverence. Unlike its predecessor, neobrutalism doesn't reject beauty — it redefines it through bold contrasts, thick borders, and flat, almost cartoonish visual elements.
Think of it as brutalism that went to art school and came back with a box of markers. It's anti-corporate without being anti-user, rebellious but still highly functional.
Key Principles
1. Bold Borders and Hard Shadows
The signature neobrutalist element: thick black borders (2-4px) and hard offset shadows that refuse to blend or blur. Elements look like they've been cut out and placed on the page.
2. Vivid, Saturated Colors
Forget subtle palettes. Neobrutalism embraces bright yellows, hot pinks, electric blues, and lime greens — often in unexpected combinations that feel energetic and attention-grabbing.
3. Raw Typography
Large, bold, often monospaced or grotesque typefaces. Text doesn't whisper — it shouts. Headlines are oversized, and hierarchy is established through sheer scale.
4. Flat, No-Gradient Surfaces
Elements are intentionally flat with solid color fills. No gradients, no subtle textures. What you see is what you get.
5. Intentional Imperfection
Slightly off-grid placements, hand-drawn elements, or deliberately 'unfinished' touches signal that this design doesn't take itself too seriously.
History & Origins
Neobrutalism emerged around 2020-2021 as a reaction to the homogenized, safe design patterns that dominated SaaS and tech. Designers grew tired of the same rounded corners, soft gradients, and 'friendly' illustrations everywhere. The style draws from architectural brutalism, punk zine aesthetics, and the anti-design web movement, but filters it through modern usability standards.
Modern UI Applications & Examples
- Gumroad — Perhaps the most famous neobrutalist redesign. When Sahil Lavingia redesigned Gumroad in 2021, the bold borders, bright colors, and raw layout became the poster child for the movement.
- Figma Community — Many popular Figma community pages and templates embrace neobrutalist elements with thick borders and saturated backgrounds.
- Notion Templates — The Notion ecosystem is full of neobrutalist template designs that use bold color blocking and hard shadows.
- Linear — While more refined, Linear's bold typography and high-contrast interface shares neobrutalist DNA.
When to Use It
Neobrutalism works brilliantly for creative portfolios, indie products, startup landing pages, and any brand that wants to stand out from the sea of 'clean and minimal' competitors. It signals confidence, creativity, and a willingness to be different.
When Not To
Enterprise software, healthcare, finance, or any context where users expect conservative, trustworthy aesthetics. Neobrutalism can feel jarring or unprofessional to audiences unfamiliar with the style.
How to Apply It
- Use 2-4px solid black borders on cards, buttons, and containers
- Add hard offset box-shadows (no blur)
- Choose 3-4 bold, saturated colors
- Use large, heavy-weight sans-serif or monospace fonts
- Keep layouts relatively simple — the visual elements do the heavy lifting
/* Neobrutalist button */
.btn-neo {
background: #FF6B35;
color: #000;
border: 3px solid #000;
border-radius: 0;
padding: 12px 24px;
font-weight: 800;
font-size: 1.1rem;
box-shadow: 4px 4px 0 #000;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.btn-neo:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #000;
}
.btn-neo:active {
transform: translate(4px, 4px);
box-shadow: none;
}
Related Styles
See also: Brutalism, Flat Design, Memphis Design, Bauhaus Design