Brutalist design system: Archivo, black rules on concrete

Three things called brutalism

The word does a lot of work. In architecture, brutalism is the post-war style of exposed concrete and honest structure, named from the French for raw concrete. On the web in the 2010s it described sites that rejected polish on purpose: default fonts, visible HTML, blue underlined links, sometimes deliberately awkward. The style most people now mean, often called neo-brutalism, kept the bluntness but made it a look: thick black outlines, flat colour, chunky type and shadows offset like a print misregistration. The brutalist web design guide tells that story in full.

Anticode's brutalist design system with Archivo sits closest to the last of these, with a nod to the first: the background is concrete grey rather than candy colours, and there's one accent, not a palette of them. It's raw in its structure, not in its usability. Navigation, forms and focus states are the same accessible components every Anticode site gets.

What it sets

Typeface: Archivo, loaded with its width axis as well as weights up to 900. That lets the headlines run condensed without switching to a second, narrower font.
Headlines: Weight 900, uppercase, condensed to three-quarters width, with the tightest line height and largest base size of the seven systems. Section headings get the same treatment.
Rules: Two-pixel black lines under the header, between sections and list rows, and around images, cards, plans, panels, forms and the facts list.
Shadows: A hard six-pixel offset in the text colour on content blocks and five pixels on buttons, with no blur at all.
Corners: Square, everywhere.
Palette: Light concrete grey with near-black text and a strong blue action colour. The dark palette is black with off-white text and a hot orange action colour.
Body text: 17px.
Logo: Uppercase, condensed, weight 900 and set larger than in other systems.

The press-in button

Most hover effects lift an element towards you. Brutalist does the reverse: on hover, a button moves two pixels down and to the right while its shadow shrinks from five pixels to three, so it looks pressed into the page. The movement takes a little over a tenth of a second on a tuned curve rather than the browser's default. It's the system's signature interaction, and it's the opposite of the card-lifting habit the card hover lift check flags.

Why the shadows don't count as glow

The Critic flags a coloured glow: a soft shadow with a blur of 40 pixels or more in a colour other than black. Brutalist's shadows have zero blur and use the text colour, so they read as a printed offset, not a halo, and they pass. In the dark palette the offset is off-white, which keeps the same graphic effect on black.

Who it suits

Record labels, zines, galleries and independent shops with a strong point of view.
Design and creative studios that want their own site to feel made, not templated.
Events and campaigns that need to be noticed in a crowded feed.
Less suited to healthcare, finance, legal services or luxury goods, where loudness costs trust. Swiss gives a similar rigour at a lower volume.

Quick previews never pick Brutalist from the subject alone, so you get it by asking: naming it in your request steers a model build to it. Pick Brutalist under Direction with Edit on in the builder, or write "make it brutalist" as a change. Either way the switch is made in your browser and doesn't use your build allowance.

Limits

Long headlines suffer. Condensed uppercase at weight 900 is striking for four words and tiring for fourteen. Keep the hero short, and consider the Calm headline scale on phones.
One accent colour. You can change the blue to another action colour, but the system won't do multicolour blocks.
No deliberate ugliness. It won't reproduce raw-HTML web brutalism, broken layouts or default link styles; Anticode's accessibility basics stay on.
Apps get a description. A model-written app is told Brutalist means Archivo, black rules on concrete grey, hard edges and no rounded corners, and your own words can override it.

Questions people ask

Is a brutalist website bad for usability?

It doesn't have to be. The look comes from type, rules and shadows; the navigation, forms, focus outlines and reduced-motion support are the same as on any Anticode site.

Why Archivo?

It has a width axis as well as heavy weights, so one family can give both the condensed uppercase headlines and comfortable body text.

Can I make the background a bright colour?

Not with the theme switches. The light palette is concrete grey and the dark one is black. Background colour tokens can be edited in the code view, though they reset if you change direction.