Brutalist web design: rules that keep it usable

Where the name comes from

The word comes from brutalist architecture, the post-war buildings in exposed concrete whose name refers to béton brut, raw concrete. The buildings didn't hide how they were made: you could see the formwork marks, the beams and the weight. On the web the idea became pages that don't hide how they're made either. Default system fonts, blue underlined links, visible table borders and text that runs edge to edge were a reaction against templated sites that all shared the same rounded cards and soft gradients.

That early version was close to raw HTML. Over time a more designed version grew alongside it: bold grotesque type, thick black rules, flat blocks of colour and shadows offset without blur. That later look is usually called neo-brutalism, and it has its own page on neo-brutalism web design.

Two kinds of brutalism

Raw brutalism compared with decorative neo-brutalism
Trait	Raw brutalism	Neo-brutalism
Type	System or monospace fonts, often default sizes	One heavy grotesque, often condensed and uppercase
Colour	Black, white, default link blue	Flat saturated fills: yellow, pink, green, blue
Edges	Browser defaults, visible table borders	2px to 4px black outlines on every block
Depth	None	Hard offset shadows with no blur
Layout	Document flow, sometimes deliberately awkward	A grid of boxed blocks
Feels like	A text file someone published	A zine or a poster wall

The rules that keep it usable

Make structure visible, not missing. Borders and rules should show how the page is divided: header, sections, list items. Use 2px rules consistently rather than mixing 1px, 3px and dashed lines.
Keep hard edges everywhere. Square corners on cards, buttons, images and inputs. A single rounded button on a brutalist page looks like a mistake.
Use one grotesque face. A heavy sans-serif with a condensed width (Archivo, for example) can carry headlines and body at different weights and widths. Brutalism gets its noise from scale and weight, not from a pile of typefaces.
Set headlines very large and body text normal. A 90px uppercase headline is in character. Body text at 12px monospace is not; keep it at 16px or more with a line height around 1.5.
Underline links. Brutalism's blue underlined link is a gift: everyone knows what it is. Don't replace it with unmarked bold text.
Keep navigation conventional. Put it at the top, label it in plain words and make it work on a phone. Moving or hiding the menu as a statement costs visitors, not the designer.

Where brutalist sites go wrong

Contrast traded for attitude. Grey text on concrete grey, or yellow on white, fails the 4.5:1 contrast ratio that WCAG asks for at level AA for normal text. Black on light grey passes easily, which is one reason the style leans on it.
Clickable things that don't look clickable. With every block outlined, buttons and cards look alike. Give the action a fill colour, and keep plain boxes for content.
Motion as a joke. Marquees, cursor trails and jittering text are part of the folklore but tiring for many readers and a problem for people sensitive to motion. Respect the reduced-motion setting.
Wide text. Edge-to-edge paragraphs are hard to read. Keep body text to roughly 60 to 75 characters per line even when headlines run full width.
Rawness as an excuse. Missing alt text, unlabelled form fields and a page with no lang attribute aren't a style. They're bugs.

When the style fits

Brutalist website design suits work that wants to look made rather than bought: independent record labels, galleries, design and architecture studios, zines, festivals and personal sites of people who make things. It's a poor fit where visitors need reassurance before they act, such as a dental practice, a solicitor or a care home, because the style reads as confrontational on purpose. If the brief says “calm” or “trusted”, pick something else.

Brutalism in Anticode

Anticode's Brutalist design system is the direct fit for this style. It uses one family, Archivo, with condensed, uppercase headlines at a very heavy weight, 2px black rules between sections, square corners, and a concrete-grey ground in the light theme. Like every Anticode system it has one action colour, so the buy or book button is the one thing that isn't black. You can pick a different action colour (red, orange, gold, green, teal, blue, pink or black) in the visual editor.

The template gallery includes Static Bloom Records, an indie label site in a brutalist zine style. It's an app build written by Anticode's model in a similar style, not a page made with the Brutalist system, but it shows the look applied to a real brief. The Critic still runs its nineteen checks on a brutalist build, and several of them protect the style from its usual failures: body text of at least 16px, no empty links (an empty or "#" href), and a footer that's more than a copyright line.

Questions people ask

Is brutalist web design good for business sites?

For some. It suits businesses whose customers value independence and craft, such as labels, studios and galleries. For services where trust and calm matter, it tends to push people away.

What fonts do brutalist websites use?

Raw brutalism uses system fonts or monospace. The more designed version usually uses one heavy grotesque sans-serif, often condensed, at very large sizes for headlines.

Are brutalist websites accessible?

They can be more accessible than average, since black on light grey, underlined links and plain structure are all good for readers. They become inaccessible when contrast, motion or navigation are broken for effect.