Digital era · 2021–present
Neo-Brutalism
Thick black borders, hard offset shadows, bold type, and loud fill colours — the raw force of Brutalism made friendly and grid-disciplined.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(91% 0.18 99) - --fg
oklch(8% 0 0) - --muted
oklch(36% 0 0) - --surface
oklch(100% 0 0) - --surface-2
oklch(93% 0.12 99) - --border
oklch(8% 0 0) - --accent
oklch(62% 0.26 345) - --accent-fg
oklch(8% 0 0) - --focus
oklch(62% 0.26 345)
| Token | Value |
|---|---|
| --font-body | 'Space Grotesk', system-ui, sans-serif |
| --font-display | 'Space Grotesk', system-ui, sans-serif |
| --font-mono | 'Courier New', monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 5px 5px 0 oklch(8% 0 0) |
| --shadow-lg | 7px 7px 0 oklch(8% 0 0) |
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
:root {
--bg: oklch(91% 0.18 99);
--fg: oklch(8% 0 0);
--muted: oklch(36% 0 0);
--surface: oklch(100% 0 0);
--surface-2: oklch(93% 0.12 99);
--border: oklch(8% 0 0);
--accent: oklch(62% 0.26 345);
--accent-fg: oklch(8% 0 0);
--focus: oklch(62% 0.26 345);
--font-body: 'Space Grotesk', system-ui, sans-serif;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'Courier New', monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 5px 5px 0 oklch(8% 0 0);
--shadow-lg: 7px 7px 0 oklch(8% 0 0);
}Where it came from
Origin: Web design community — popularised on Dribbble and in no-code tools circa 2022
Neo-Brutalism emerged around 2021 on Dribbble and through no-code tools like Framer and Webflow. Unlike web Brutalism, it is deliberately crafted — the harsh elements are choices, not defaults. The thick black borders and offset box shadows recall newspaper printing and childhood toys simultaneously. Products like startup landing pages and creator tool dashboards adopted it quickly, giving it a distinctive 2022 timestamp.
How to spot it
- Very thick black borders (2–4px) around every element
- Hard, untinted offset drop shadows — right and bottom, no blur
- Bold, often clashing fill colours: yellow, coral, mint, sky blue
- No or very small border-radius; rectangular feels intentional
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely recognisable — buttons feel crunchy and pressable | Tied strongly to 2022 — peak neo-brutalism is already a nostalgia signal |
| Works well for B2C, creator and fintech products that want personality | Hard to do subtly — needs commitment across the whole system |
| Interactive states translate beautifully: shadow collapses on press | Black borders are heavy; dense data tables become walls of line |
In the wild
- Gumroad’s early-2020s redesign
- Framer community file templates
- Indie SaaS landing pages, 2022
Use it when
Consumer products, creator tools or startup landing pages that want personality and energy over polish.