Web Brutalism
No border radius, default system fonts, default blue links, visible structure
Everything removed from this page was removed on purpose, and you are meant to notice.
One corner is all it takes
Our reading. The record’s anti-signature: soften one corner and the position collapses. The same block, three radii. The change is instant; this page has no easing anywhere.
0: the position. Nothing softened, nothing apologised for.
8px: collapsing. One softened corner and the argument is already negotiating.
24px: a friendly product card. The position is gone; this is somebody else’s register.
Type jumps. It does not step.
Our reading. Rank by raw scale and rule weight. Type sizes jump rather than step; a heading is three times the body, not 1.4.
A modular scale, 1.4: polite, professional, someone else’s register.
This register: the jump is the point.
The pair
Utilitarian renders almost exactly like this and means the opposite: plainness nobody decided. The same specimen appears on both pages.
Opening hours
Monday to Friday, 9 to 5.
- Closed public holidays.
- Entry is free.
Documented. The purist strand builds from the purest markup available, with little or no custom styling: light ground, black text, blue links. Several early exemplars looked like this because of what HTML and CSS could do at the time, not by choice.
Here, every default kept is a refusal displayed. On the Utilitarian page, the same surface is simply what the browser did. Go and look; the point only lands if you see both.
Build with it
A starting grammar for a website in Web Brutalism: the plainest markup, the document's own structure left showing, the browser's light ground, black text and blue links, system fonts at conspicuous sizes, nothing softened and nothing eased.
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
#000000 #FFFFFF #0000EE, the default link. The browser’s own defaults; no palette chosen.
The rules behind it
- DocumentedUse the browser's own defaults: a light ground, black text, blue links. Choose no palette. From a documented finding
Typography
Heading. 3×.
Body text in whatever the system gives you. No typeface was chosen, and that is the decision.
The rules behind it
- On the recordUse the system's own faces, its sans stack or its monospace; choose no typeface. From the typography record, a documented finding (typography)
- Our readingMake a heading three times the body size; sizes jump rather than step. From our reading (hierarchy)
Layout
This board is the specimen: every field is stacked in source order, and every box shows its outline and its element.
The rules behind it
- From our catalogue entry · Source attachedStack content in source order; let the document flow be visible. From our catalogue entry (layout)
- Not specified by the sourceThe sources do not specify a column system. Do not add a grid to tidy the page; if one is needed, state it as a decision.
Shape
radius: 0. shadow: none. border: 2px solid.
The rules behind it
- From our catalogue entryborder-radius: 0 and box-shadow: none, everywhere. From our catalogue entry
- Web translationDraw boundaries as heavy 2px black lines. Rank by rule weight; a heavy line is a rule the reader is meant to notice. 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 sourceThe sources do not specify imagery. If images appear, show them as the browser would: no frame, no filter.
Components
The record sets interface conventions for Web Brutalism. These four components are contemporary builds on them, not historical artefacts.
Project 12
A block with its outline left showing. Read it.
The rules behind it
- From our catalogue entryborder-radius: 0 and box-shadow: none. From our catalogue entry
- Our readingChange state instantly: transition: none. From our reading (motion)
- Web translationInvert black and white on hover instead of tinting. The palette is the browser's defaults (light ground, black text, blue links); an inversion stays inside it where a tint would add a colour. From our reading (colour)
- From our catalogue entry · Source attachedLet the layout follow the markup: blocks stack in document order. From our catalogue entry (layout)
- Web translationLeave each block's outline visible. Document flow made visible: the boxes the browser draws are shown, not hidden. From our catalogue entry (layout), how you recognise it
- Web translationUse the system font for entry text. Our translation of the record's typography block into this web primitive; the block is a catalogue phrase, not a rule. From the typography record
- From our catalogue entryNo radius on the field. From our catalogue entry
- DocumentedLeave links underlined in the browser's default blue. From a documented finding
- Our readingRank by raw scale and rule weight, not by colour. From our reading (hierarchy)
Motion
0ms
Hover the Submit button above: the swap is instant.
The rules behind it
- Our readingChange state instantly, with no easing. From our reading (motion)
- DocumentedAdd no decorative animation: a thesis on brutalist web design names animations and custom cursors as distracting features. From a documented finding (motion)
- Not specified by the sourceWhether the purist strand specifies motion or its absence is an open question. Treat the instant swap as our reading; do not cite it as the strand's rule.
Which Brutalism
| Purists (this one) | UX minimalists | Anti-ists (Anti-Design) |
|---|---|---|
| truth to materials, the purest markup | efficiency and performance | web design as art, against the status quo |
The rules behind it
- Our readingBuild the purist register: raw HTML shown as material, unconcerned rather than broken. From our reading
- DocumentedBuild from the purest markup elements available, with little or no custom styling; add styling only to solve a specific problem. From a documented finding (technique)
- Web translationKeep contrast, visible focus, underlined links and labels. The purist camp shows the material without breaking it; so does Aesthetary. From our reading
- Web translationMake the removals emphatic: no radius, no shadow, no easing, visible structure. Our translation of the record's recognition signature into this web primitive; the record states it as the look, not as a rule. From how you recognise it, what it argues
- Web translationRefuse rounded corners, soft shadow, decorative easing and the grammar of comfort. Our translation of the record's argument (intent) into this web primitive; the record argues it, it does not state it as a rule. From what it argues
The record
What it argues
The conventions of contemporary web design are a costume, and removing them is an argument. Showing the document's real structure — undecorated, unrounded, unsoftened — is a position about honesty, taken by someone who could have done otherwise.
It refuses: rounded corners, soft shadow, decorative easing, and the whole grammar of comfort that marks a page as professionally designed.
Costs it accepts:
- Approachability
- Client acceptability
- Being mistaken for laziness
Assumes: A viewer fluent enough in web convention to register what has been removed.
Posture: reactive, knowing
How you recognise it
Undisguised document structure — no border radius anywhere, no shadow, hard unmodulated contrast, system fonts used at conspicuous sizes, and layout that follows the markup rather than concealing it.
The diagnostic condition is legible intent: the removals are emphatic and somebody is meant to notice them, which is why the register usually overshoots plainness into something loud.
Utilitarian arrives at a similar surface without having decided anything. Anti-Design breaks the structure; this exposes it intact.
Imagery: not specified by the source
Not specified by the source
The sources do not specify this area; a translation may follow. Our reading: the research brief leaves it free, neither demanded nor forbidden. This page leaves it unspent: there is no image on it.
What carries the look
0 Elements linked. No Element is linked to this Aesthetic yet. Each dimension opens its gallery.
| Dimension | Weight | On the record |
|---|---|---|
| Typography | Carries the look | No typeface is loaded: this page is set in the system stack. Typographic research on the record. |
| Color | #FFFFFF#000000#0000EE#551A8B As built on this page. | |
| Composition | Carries the look | Nothing linked yet. |
| Imagery | Nothing linked yet. | |
| Surfaces | Nothing linked yet. | |
| Motion | Nothing on this page moves. | |
| Motifs & Symbols | Nothing linked yet. | |
| Techniques | Nothing linked yet. |
Rules 18
By area, each labelled with what kind of claim it is.
- Layout From our catalogue entry · Source attached
Composition: document flow made visible. - Typography Documented · Source attached
Typography: the system's own faces at scale, its sans stack or its monospace. - Color Our reading
Colour: the browser's own defaults, light ground, black text, blue links; reading it as harsh contrast is ours. - Surface Documented · Source attached
The material shown is the web's own: HTML and, to a lesser extent, CSS left raw, paralleling brutalist architecture's bare building materials. - Surface Documented · Source attached
This aspect of brutalism is sometimes expressed as bare-bones, almost naked HTML with raw or nonexistent styling; excluding applied texture or grain is Aesthetary's inference. - Motion Our reading
Instant state changes, no easing. Transitions are a comfort device and the register refuses comfort. - Motion Documented · Source attached
Animation belongs to the antidesign strand ('unnecessary distracting animations'), which the approved scope excludes. - Motion Documented · Source attached
Deville's Brutalist Websites collection lists 'Motherfucking Website'. - Motion Documented · Source attached
That page explicitly rejects decorative animation: hover-animated banners and 'bobbing' buttons driven by scroll plugins. - Motion Documented · Source attached
The thesis describes design using few features beyond websites' default appearance, and names animations and customised cursors as distracting features. - Motif Documented · Source attached
The practitioner guidelines allow decoration when needed and reject decoration for its own sake, which leaves ornament conditional rather than forbidden. - Motif Documented · Source attached
The architectural parent is defined by bare materials over decorative design. - Technique Documented · Source attached
Pages are built from the purest markup elements available, with little or no custom styling. - Technique Documented · Source attached
The build stays legible from the source: a novice can follow how the page is put together. - Technique Documented · Source attached
Default, unstyled HTML is itself readable on all devices; styling is added only to solve a specific problem. - Technique Documented · Source attached
Several exemplars never set out to be brutalist: their style was a result of the limitations of HTML and CSS at the time, not an artistic choice. - Hierarchy Our reading
Rank by raw scale and rule weight. Type sizes jump rather than step; a heading is three times the body, not 1.4. - Form / motif / surface / technique From our catalogue entry
Form / motif / surface / technique: zero radius; zero elevation.
Ruled out, or left open by the sources
- Imagery Not specified by the source
The sources do not specify this area; a translation may follow.
What stands behind it
Partly sourced. 11 sources attached.
Build guidance: recorded in 6 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 · From our catalogue entry | yes |
| Typography | Specified · From our catalogue entry | 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 | Not specified by the source: form, motif · Specified: surface, technique | yes |
| Motion | Open question | yes |
Often confused with
- Utilitarian Aesthetic
Argued versus unexamined. - Anti-Design Aesthetic
Exposure versus breakage. This keeps structure legible; Anti-Design deliberately breaks alignment and legibility. - Neo-Brutalism Aesthetic
Seen from Neo-Brutalism: styled versus stripped. Same word, opposite method.
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.