Brutalism vs Neo-Brutalism
The common claim is that neo-brutalism is brutalism with rounded corners. In this gallery that is simply wrong: both keep every corner square. What actually changed is the palette and the shadow.
Short answer: Brutalism is one accent on paper. Neo-brutalism is five candy fills on cream, with a deeper shadow stack — same skeleton, completely different temperature.
What actually separates them
Compare the two stylesheets and the structure is nearly identical: 3px black borders, hard offset shadows with zero blur, no gradients, no border radius anywhere. Both refuse the same things.
The difference is in two declarations. Brutalism keeps a single acid yellow against black and white, and its shadow tops out at 6px. Neo-brutalism introduces five tints — butter, mint, lilac, peach, cream — and pushes the stack to 8px, so each card looks like a sticker peeled off a sheet rather than a block printed on paper.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Brutalism | Neo-Brutalism |
|---|---|---|
| Palette | One acid yellow, plus black and paper white | ● Five candy tints against cream |
| Border | 2 to 3px solid black | 3px solid black |
| Shadow | Offset solid, up to 6px, zero blur | ● Offset solid, up to 8px, zero blur |
| Corner radius | 0 — no radius declared anywhere | 0 — declared explicitly three times |
| Typeface | ● Arial, deliberately unsmoothed | Inter via the shared base, at heavier weights |
| Hover | Element translates into its own shadow | Element translates, shadow shrinks to match |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Brutalism | Neo-Brutalism |
|---|---|---|
| Accent | --acid: #f7ff00; one value |
#ffd166 / #a8f0c6 / #c9b8ff / #ffb3a7 / #ffe08a |
| Shadow | box-shadow: 4px 4px 0 #000 |
box-shadow: 8px 8px 0 #000 |
| Type | font-family: Arial |
inherits Inter from the base stylesheet |
| Radius | undeclared |
border-radius: 0 (explicit, three rules) |
When each one wins
Brutalism wins when
- You need one loud surface in an otherwise quiet page — a single acid panel reads as a statement
- The content is editorial and the type should feel slightly wrong on purpose
- The page has very few cards; a broad palette with three cards looks accidental rather than playful
Neo-Brutalism wins when
- The page is a grid of many items and colour is how you differentiate them
- The audience is consumer or creative, where candy tints read as energy rather than as a warning
- You want each card to feel individually placed, which deeper shadows and multiple fills achieve
Steering a model to one or the other
Both prompts start with the same sentence about hard black borders and zero-blur offset shadows, so the model will produce a similar skeleton either way. The steering happens in the palette clause: name one accent and the ban on other colours for brutalism; name five specific tints and a cream ground for neo-brutalism. Also state the radius explicitly — a model asked for neo-brutalism will add 8px corners by default because that is what most blog posts describe, and it will not look like this page.