The document, unsoftened. No shadow, no radius, no gradient, no reassurance. What you are looking at is roughly what the browser was going to do anyway.
Architectural brutalism left the concrete unclad — you saw the structure, the formwork marks and the bolt holes, because covering them was considered a lie. Web brutalism makes the same argument about HTML. Times New Roman, blue underlined links, hard black borders, a visible grid, no attempt to pretend the page is anything other than a document rendered by a browser.
The movement got its name around 2014 and its manifesto sites shortly after, as a direct reaction to the era of identical rounded cards. Its most-cited working examples are craigslist and Hacker News — neither of which set out to be a style, which is precisely why they read as authentic.
It is worth separating two things that get called the same word. There is brutalism the anti-style, which strips ornament away, and there is neo-brutalism — the thick black outlines and hard offset drop shadows on saturated blocks currently everywhere in web UI. The second is a decorative style wearing the first one's name.
| # | Rule |
|---|---|
| 1 | Use the defaultSystem serif, default link blue, default focus ring. Every override needs to justify itself, and most cannot. |
| 2 | Show the structureBorders on the container, borders on the cells. The reader should be able to see the box model. Nothing bleeds, nothing floats. |
| 3 | No soft edges anywhereZero border radius. Zero box shadow. Zero transitions. A corner that has been rounded is a corner someone was embarrassed by. |
| 4 | Contrast is absolutePure black on pure white, or the inversion. No grey scale of hierarchy — hierarchy comes from size, weight and rules. |
| 5 | Density over airWhitespace is a luxury signal, and this style is not signalling luxury. Pack it in, and let the borders do the separating. |
| 6 | It still has to workThe one place brutalism must not be raw. Focus states, tab order, alt text and hit areas are structure, not ornament, and stripping them is not honesty — it is just breakage. |
It is fast, it is accessible almost by accident, and it is completely legible at any zoom level on any device made in the last twenty years. It also cannot be mistaken for a template, which for certain kinds of work is the entire brief.
Warmth. Brutalism is very good at conveying "we are serious and we do not need your approval" and very bad at conveying "you are welcome here". Almost nobody selling to the general public can afford the first message without the second.