Ship itloud.
One flat yellow block. Two-pixel ink. Zero blur anywhere.
Hover the button — it presses INTO its shadow
Neobrutalism
Industry-coined trend
Industry-coined early-2020s label (also spelled neo-brutalism / neubrutalism); contested because it borrows brutalism's name for a look that is heavily styled rather than raw.
also called neo-brutalism, neubrutalism, neo brutalist UI
Neobrutalism is a designed graphic language: flat, saturated color blocks outlined in thick black strokes, with hard offset shadows — solid black rectangles displaced a few pixels, no blur — and chunky display type. Elements read like stickers or risograph prints; pressing a button often physically 'pushes' it into its shadow. Despite the name it is the opposite of raw: every border and shadow is a deliberate illustration choice.
Scope: Takes brutalism's name but not its method — see Web Brutalism for the genuinely-raw sibling, and architectural Brutalism (exposed concrete) for where the word started. Memphis-style geometric confetti often decorates neobrutalist pages but is its own movement.
If you called it…
…you meant Neobrutalism.
What makes it this — the defining signals
- Thick black outlinesGeometry & borders
Every element — cards, buttons, inputs, even images — wears a uniform 2–3px solid black border, like an inked comic panel.
- Hard offset shadowsDepth & light
Shadows are solid black shapes displaced down-right with ZERO blur — graphic depth, not simulated lighting. Pressing collapses the offset.
- Saturated flat color blocksColor & contrast
Unapologetic fills — yellow, hot pink, lime, cyan — laid flat next to each other on a cream or white ground; no gradients.
- Chunky display typeTypography
Bold, blocky grotesks or display faces, often oversized; body text stays plain so the headings can shout.
Style brief — paste into your agent
Create the surface using Neobrutalism. Defining signals: a uniform 2–3px solid black border on every element; hard offset shadows — solid black, displaced ~4px down-right, zero blur (box-shadow: 4px 4px 0 #000); flat saturated color blocks (e.g. yellow, hot pink, lime) on a cream or white ground with no gradients; bold chunky display type for headings. Keep the specific palette and any sticker doodads flexible. Active states translate the element into its shadow (transform: translate(4px,4px) with the shadow removed). Do not drift into Web Brutalism; the decisive difference is that this look is heavily styled — removing the borders, shadows, and color in favor of browser defaults would make it brutalist proper. Preserve 4.5:1 text contrast on every colored block (black text on saturated fills usually passes; white on yellow never does), visible focus indicators distinct from the decorative borders, and reduced-motion support for press animations.
Often confused with Web Brutalism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Neobrutalism
Welcome back
Pick up where you left off.
Neobrutalism
This is Neobrutalism because the rawness is a designed costume: uniform thick borders, hard offset shadows, and saturated blocks are deliberate graphic choices.
It would become Web Brutalism if the styling were removed rather than exaggerated — browser-default type, plain blue links, bare structure, and no decorative rendering at all.
vs Neumorphism: This is Neobrutalism because edges are maximum-contrast black ink and shadows are hard graphic shapes. It would become neumorphism if the outlines vanished and depth went soft — controls molded from one matte surface with blurred dual shadows.
Full style DNA
Geometry & borders
Every element — cards, buttons, inputs, even images — wears a uniform 2–3px solid black border, like an inked comic panel.
Depth & light
Shadows are solid black shapes displaced down-right with ZERO blur — graphic depth, not simulated lighting. Pressing collapses the offset.
Blurred shadows, gradients, or translucency dissolve the inked-print effect instantly — softness is the enemy.
Color & contrast
Unapologetic fills — yellow, hot pink, lime, cyan — laid flat next to each other on a cream or white ground; no gradients.
Yellow-black is the cliché but any high-saturation set works; the borders and shadows carry the style, not one specific hue.
Typography
Bold, blocky grotesks or display faces, often oversized; body text stays plain so the headings can shout.
Imagery & ornament
Stars, blobby badges, arrows, and squiggles with the same black outlines, scattered like stickers.
Motion
Hover/active states translate the element toward its shadow, as if pressing a physical sticker flat.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | border: 2px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 8px; | The signature card/button construction |
| CSS | :active { transform: translate(4px,4px); box-shadow: none; } | Press-into-shadow interaction |
| Tailwind | border-2 border-black shadow-[4px_4px_0_#000] active:translate-x-1 active:translate-y-1 active:shadow-none | Same construction as utilities |
Accessibility & misuse
- Saturated fills need checked text contrast: black ink on yellow/lime passes easily; white ink on yellow, pink, or cyan usually fails 4.5:1.
- The decorative black borders look like focus rings — give keyboard focus a distinct, higher-visibility indicator (e.g. an offset outline in a reserved color).
- NN/g's caution: the loudness taxes readability at length — keep body text plain and reserve the shout for structure and actions.
Origin
Emerged around 2020–2022 in product marketing and portfolio sites (Gumroad's 2021 redesign is the era's poster child), catalogued by NN/g in 2023 as a reaction to soft, same-looking SaaS design — flat design turned up to eleven with comic-book construction.