Layout
Documented · Source attachedNeo-brutalism is defined by high contrast, blocky layouts, bold colours, thick borders and 'unpolished' elements, and is more colourful and orderly than brutalist web design.
Visual language · Market convention
Neo-Brutalism
Thick black outlines, hard unblurred shadows, clashing candy colour, chunky buttons
The name is a trap. Against Web Brutalism: Styled versus stripped. Same word, opposite method.
Press one
These are real buttons. Hold one down and it presses into its own shadow, the offset collapsing to zero.
Documented · Source attached A codified guide gives the button press as the element moving into its own shadow, with the shadow disappearing.
Add blur
Build with it
A starting grammar for a website in codified Neo-Brutalism: every component outlined in one thick black stroke, square-cornered, flat-filled in loud candy colour, casting a hard unblurred shadow it presses into.
Web translation marks our choices for the screen. Not specified by the source marks what the sources leave open. Everything else is a rule from the record below.
The same system is in the brief (Build → Brief) and in the structured data.
Colour
- ground
#FFF4E0 - ink
#000000 - pink
#FF90E8 - yellow
#FFC900 - mint
#7BF1A8 - blue
#90A8ED - orange
#FF7A45
All text black. Which candy hues is ours; saturation and flatness are the rule.
The rules behind it
- Documented · Source attachedSaturated, high-contrast flat colour. From a documented finding (colour)
- Our readingNo soft or muted palette. From our reading
- Web translationSet all text in black; never set text in a candy colour. High contrast is the record's; black on every fill keeps it above 8:1. From a documented finding (colour), a documented finding (layout)
- Not specified by the sourceThe sources do not name the candy hues. Any saturated flat set works; these five are the room's choice. Do not treat them as canonical.
Typography
Loud.
Then an abrupt step down.
> monospace, as a nod_
The rules behind it
- DocumentedOversized sans-serif headlines with abrupt scale shifts. From a documented finding (typography)
- DocumentedQuirky or slightly eccentric typefaces, balanced by generous whitespace. From a documented finding (typography)
- Web translationArchivo Black for display, Space Grotesk for text. An oversized heavy sans and a slightly eccentric grotesque, as the research describes; the pair is the room's choice. From a documented finding (typography)
- DocumentedMonospace may appear as a nostalgic early-interface reference. From a documented finding (typography)
Layout
A grid, and one module that breaks it. This field is that module.
The rules behind it
- DocumentedBlocky layouts, high contrast, more orderly than brutalist web design. From a documented finding (layout)
- DocumentedKeep an underlying grid and disrupt it locally with offset, asymmetric or overscaled modules. From a documented finding (layout)
- Web translationLeave generous space between blocks so each shadow reads. The research pairs the loud elements with generous whitespace, and a shadow needs room to be seen. From a documented finding (typography), our reading
Shape
Radius 0, stroke 3px, blur 0. Offset is rank.
The rules behind it
- Documented · Source attachedThick, solid, dark outlines with square corners. From a documented finding (surface)
- Our readingA solid offset shadow, blur 0, always. From our reading
- Our readingNo thin or varied outline weight. From our reading
- DocumentedDepth is depicted, not built: offset shadows and flat isometric drawing. From a documented finding (form)
- Web translationStep shadow offsets 4, 8, 16px by rank. Rank by shadow offset; three doubling steps keep the ranks readable. From our reading (hierarchy)
Imagery
Not specified by the source Whether a page has images at all.
The rules behind it
- Not specified by the sourceImagery is neither demanded nor forbidden. If you use images, frame them like any component: outline, square corners, hard shadow. From our reading (imagery)
- DocumentedFake-3D objects, where drawn, are isometric at about 45°. From a documented finding (form)
Components
Neo-Brutalism is a screen language. Where a rule states a component value (outline, square corner, hard shadow, the press), the value is the record’s; the rest are marked as web translations.
The rules behind it
- Documented · Source attachedOutline it thick and solid, with square corners. From a documented finding (surface)
- Our readingGive it a solid offset shadow with blur 0. From our reading, our reading (interface)
- DocumentedOn press, move the element into its own shadow and let the shadow disappear. From a documented finding (motion), our reading (motion)
- DocumentedBorder plus flat fill plus hard shadow, square corners, one stroke width. From a documented finding, a documented finding (technique)
- Our readingRank by shadow offset: the most important card casts the biggest. From our reading (hierarchy)
- DocumentedSame outline and corner as every component: one canonical stroke width. From a documented finding, a documented finding (surface)
- Web translationMark focus with a flat yellow fill, not a glow. No blur anywhere, and colour is flat and saturated; a glow would be a soft elevation. From our reading, a documented finding (colour)
- Web translationShow the current page as a tab already pressed into its shadow. The press is the language's own state change; a pressed tab reads as selected. From our reading (motion), a documented finding (motion)
Motion
Instant: into the shadow, and the shadow is gone.
The rules behind it
- Our readingElements press into their own shadow on interaction, the offset collapsing to zero. From our reading (motion)
- DocumentedThe press moves the element into its shadow and the shadow disappears. From a documented finding (motion)
- Web translationMake the press instant, with no easing. The motion rule is native to the shadow logic and not generic easing. From our reading (motion)
Which phase
These values bind the kits. The looser 2022 trend is history.
The rules behind it
- DocumentedBuild the codified form: border, flat fill, hard shadow, square corners, one stroke width. From a documented finding
- DocumentedDo not grade 2022-era work by these rules: its colour was desaturated and its lines and corners uneven. From a documented finding
- On the recordStyled, not stripped: that is Web Brutalism. From boundary:web-brutalism, our catalogue entry
What it argues
Interface conventions can be exaggerated into ornament.
Taking the border, the shadow and the button — the plainest furniture of a web page — and making them thick, hard and loud turns usability signals into decoration while leaving them perfectly usable.
It refuses: softness, subtlety, blur, and the tasteful neutrality of the contemporary product default.
Costs it accepts: Seriousness, Enterprise credibility, Ageing well
How you recognise it
Thick uniform black outlines around every element, hard offset shadows with no blur at all, saturated candy colours on a flat ground, and chunky oversized buttons that look pressable to the point of parody.
The diagnostic condition is the unblurred offset shadow: a solid shape displaced behind the element, never a soft elevation — it quotes depth rather than simulating it.
Web Brutalism strips styling away; this piles it on. Memphis assembles unrelated shapes with no compositional relationship; this is ordinary interface furniture, exaggerated.
Two phases
What carries the look
0 Elements linked. No Element is linked to this Aesthetic yet. Each row opens its gallery.
This page is set in Archivo Black + Space Grotesk. Typographic research on the record.
- ColorCarries the look#FFF4E0#000000#FF90E8#FFC900#7BF1A8#90A8ED#FF7A45#FFFFFF
As built on this page.
Nothing linked yet.
Nothing linked yet.
Nothing linked yet.
Nothing linked yet.
Nothing linked yet.
Nothing linked yet.
Rules 13
By area, each labelled with what kind of claim it is.
Layout, again
Documented · Source attachedOne self-published guide prescribes an underlying grid that is locally disrupted by offset, asymmetric or overscaled modules.
Typography
Documented · Source attachedBold, 'unpolished' elements often include quirky or slightly eccentric typefaces, balanced by generous whitespace.
Typography, again
Documented · Source attachedMonospace fonts may appear as a nostalgic early-interface reference.
Typography, again
Documented · Source attachedOne self-published guide pushes display type to oversized sans-serif headlines with abrupt scale shifts.
Color
Documented · Source attachedColour: saturated, high-contrast flat colour.
Surface
Documented · Source attachedComponents carry thick, solid, dark outlines with square corners.
Interface
Our readingThe offset shadow is solid and unblurred — a displaced shape behind the element, never a soft elevation. It quotes depth rather than simulating it.
Motion
Our readingElements pressing into their own shadow on interaction — the offset collapsing to zero. Native to the shadow logic, and not generic easing.
Motion, again
Documented · Source attachedA codified guide gives the button press as the element moving into its own shadow, with the shadow disappearing.
Technique
Documented · Source attachedThe look is expressed with a few CSS properties (border, flat fill, hard offset shadow, square corners) and is packaged in ready-made component libraries such as one built on shadcn/ui.
Form
Documented · Source attachedDepth is depicted, not built. Offset shadows 'add depth' and fake-3D objects are drawn in isometric view at about 45°. The language is flat screen UI.
Hierarchy
Our readingRank by outline weight and shadow offset — the element with the biggest offset sits "highest". Quoted depth used as a ranking system.
Ruled out, or left open by the sources
Imagery
Not specified by the sourceThe sources do not specify this area; a translation may follow.
Form
Does not applyResearch found the area does not apply.
What stands behind it
Partly sourced. 9 sources attached.
Build guidance: recorded in 4 of 8 research dimensions. It says what usable material is recorded, never how well it is evidenced.
Neither is a free hand: an area research has not reached is not permission to decide on the language’s behalf.
| Research dimension | Evidence | Carries guidance |
|---|---|---|
| Composition | Specified | yes |
| Typography | Specified | yes |
| Hierarchy | Specified · Our reading | yes |
| Colour | Specified · From our catalogue entry | yes |
| Density | Not specified by the source | no |
| Imagery | Not specified by the source | no |
| Form / motif / surface / technique | Does not apply: form · Not researched yet: motif · Specified: surface, technique | yes |
| Motion | Specified | yes |
Often confused with
Use it
Mixsee where its rules collide with another Aesthetic’sThe briefevery rule above, with a checklist for grading the resultStructured datathe record as JSON, as an agent receives itSuggest a correctionto Neo-Brutalism
Request deeper research into Neo-Brutalism.
Contribute
Contributing and commenting need JavaScript. Nothing else on this page does.
Work made in this style: a poster, a page, a type setting. Every submission is reviewed before it appears.
Nothing here yet.
Comments
No comments yet.