Neobrutalism (you'll also see it spelled neubrutalism) is a web design style built from thick black borders, hard offset shadows, flat saturated color, and heavy display type. Nothing floats and nothing fades. Every element sits on the page like a sticker slapped on a locker, every button looks like it wants to be pressed, and the whole site stops apologizing for being a website.
It's a reaction to sameness. After a decade of soft gradients, rounded cards, and template sites that all blur together, neobrutalism went the other way: show the structure, crank the contrast, and let the design act a little rude. Done well, it reads as confidence. Done badly, it reads as noise, which is why the rules below matter more here than in almost any other style.
Where it came from
The name is borrowed from Brutalist architecture, the raw concrete school of the 1950s that refused to hide its materials. The web picked the idea up twice. The first wave, usually just called web brutalism, was raw in the literal sense: default fonts, bare HTML, no decoration. Sites that looked like they were built in an afternoon, because many were.
Neobrutalism is the second wave, and it's far more designed than it pretends to be. Around 2021 the raw attitude got paired with a real system: consistent border weights, a controlled palette, deliberate typography. Gumroad rebuilt its whole brand around the look, design tools pushed it into the mainstream, and it spread from startup landing pages to portfolios, merch drops, and anywhere else that wanted to feel independent. The rawness became a costume, and the costume got tailored.
The six rules that make it work
Borders do the work
2 to 4px, solid, almost always black. Every card, button, and input gets one. The border is the design system.
Shadows do not blur
Offset the shadow, keep it razor sharp, and give it a color if you dare. A blurred shadow is depth. A hard shadow is attitude.
Color is flat and loud
No gradients. Pick three or four saturated colors, fill whole surfaces with them, and let black hold everything together.
Type is heavy
Display weights, tight leading, usually uppercase. The headline works like a poster, not a paragraph.
Corners stay square
Zero radius, or close to it. Rounding softens exactly the edge this style depends on.
Motion is abrupt
Hover states snap instead of easing. The classic move: the element translates into its own shadow, like a button physically pressed.
When to pick it, when to skip it
Pick it if
- Your brand competes on personality: creators, studios, streetwear, events.
- Your audience is young or design-aware and scrolls straight past polish.
- You sell merch or drops. The style borrows from poster and sticker culture and sells it well.
- You're small and need to look unafraid next to bigger, blander competitors.
Skip it if
- You're in a trust-first industry like law, medical, or finance. Loud reads as risky there.
- Your product is content-dense. Hard borders on everything makes busy screens exhausting.
- Your identity is calm, premium, and quiet. That job belongs to Minimalism.
- Nobody will maintain the discipline. Half-committed neobrutalism just looks broken.
How we build it
Every neobrutalist site we ship is built from scratch, no templates and no page builders, because this style dies in a template. The border weights, the shadow offsets, the way a button snaps on hover: those details have to be tuned to your brand, and prefab blocks always miss. We start with your palette and your voice, decide how loud the site can afford to be, and hand-build from there.
The demo at the top of this page is exactly that: an original homepage we designed and coded ourselves so you can feel the style working instead of reading about it. If you want to see how it stacks up against calmer directions, the full catalog puts your business name inside all 20 styles at once.
Questions we actually get
How is this different from brutalist web design?
Brutalist web design is genuinely raw: default type, bare layouts, decoration stripped out. Neobrutalism keeps the raw attitude but designs every inch of it, with consistent border weights, a deliberate palette, and typography chosen to look loud on purpose.
What fonts and colors work for it?
Heavy display faces for headlines and a sturdy grotesque for body text. This page and the demo pair Archivo Black with Space Grotesk; Lexend Mega and Bricolage Grotesque are also strong headline picks. For color, choose three or four saturated flat tones, fill whole surfaces with them, and let black borders hold everything together.
Can it work with our existing brand?
Yes. The style is a system of borders, shadows, and weight, and your brand's own colors and voice plug straight into it. The volume is tunable too: a full poster treatment for a merch drop, or neobrutalist accents layered onto a calmer structure for an established business.
How long does a build take?
Most of our custom builds go live in three to five weeks, and neobrutalism sits in the same range. The style's discipline is in the details, and those get decided during design, not bolted on at the end.