B — Brutalism · GRAYNODE A

The style

Made, and left showing.

Brutalism began in concrete. Le Corbusier called concrete left as it came out of the formwork béton brut, raw concrete, and built the Unité d’habitation in Marseille, finished in 1952, out of it. In Britain Alison and Peter Smithson took up the name New Brutalism, and in 1955 the critic Reyner Banham set it out in an essay for The Architectural Review: structure on show, materials as found, a building you remember as an image.

Web brutalism borrowed the name, not the concrete. Around 2014 Pascal Deville started brutalistwebsites.com, a collection of sites that looked unfinished on purpose: system fonts, default links, bare tables, heavy borders, nothing smoothed. It answered a web of templates, where every page had the same hero and the same soft cards.

Both keep one idea: how a thing is made stays visible. Here that means a grid you can see, 3px borders, shadows cut hard at 8px, one signal colour and links in the browser’s own blue. It suits an index, a tool or a manifesto, where honesty is the point, and fails where a reader needs easing in.

In use

A back office with nothing to hide.

The publishing desk of a fictional architecture magazine: a dense post table, bulk actions, a plain editor and a deploy log that prints as it runs. Sort, select, write a post and publish it.

Posts

8 posts · 3 drafts · 8 shown

Search

Status

With 0 selected


J. Varga	Scheduled	2026-10-12	960
R. Okafor	Draft	2026-10-10	1,210
R. Okafor	Live	2026-10-09	2,140
M. Kim	Live	2026-10-08	1,780
M. Kim	Draft	2026-10-07	540
A. Moreau	Draft	2026-10-06	880
A. Moreau	Live	2026-10-05	2,630
J. Varga	Live	2026-10-02	3,010

Deploy log

$ waiting for a publish…
  Write a title and press Publish.

01Defaults, framedSelects, checkboxes and the table are the browser’s own parts in a 3px frame. Nothing that already worked is rebuilt.
02Status in wordsLive, Draft and Scheduled are written out, then marked: black, dashed, signal. Colour is never the only signal.
03The log is the feedbackPublishing prints what it did, line by line, the way the build tool says it. No spinner, no progress theatre.

The kit

Every part, every state.

The parts that back office is built from. The rows of states hold still for comparison; everything else works. Every border is 3px, every shadow an 8px copy of the box, every change a cut.

Button

A press is a drop: 8px, no easing

3px border, 8px hard shadow at rest. Disabled loses the shadow and goes dashed, so it reads without colour.

Text field

Email

Errors are a black message on signal, 5.9:1

Select

Issue

The browser’s own menu, a 3px frame

Switch, checkbox, radio

Mail on publish

Comments

Credit photosHyphenateLocked

A4A3Letter

Checks are square, radios round

Slider

Border weight3px

A black rectangle for a thumb

Progress

Build64%

Loading▮

Text bars work in a terminal too

Segments and tabs

Plain text, 2,140 words, last saved 14:02.

Arrows, Home and End move the tabs

List rows

Cover story

01Unité d’habitation at 702,140 w02Habitat 67, 354 boxes1,210 w03The Geisel Library stacks540 w

Chosen row: signal, black text

Card and loading

National Theatre: the board marks

LiveJ. Varga · 3,010 words

The menu closes on Esc or a click awayLoading is dashed and hatched, not grey

Toast

It cuts in. No slide, no fade

Modal

The one box with a 12px shadow

Steps

✓Write, done
02Edit
03Lay out
04Publish

Done is black, now is signal

Badges and avatars

LiveDraftScheduledConcrete

Inbox12

Status is a word, never only a colour

Signature

View source.

Brutalism’s claim is that nothing is hidden. Test it: strip the specimen’s CSS and read the bare HTML that was always underneath, then lay the grid and every box over this whole page.

Strip the CSS

Show the grid

Outline every box

With the page’s CSS

BÉTON

Raw concrete, 1952

By R. Okafor · 2,140 words

The formwork left its grain in the walls, and nobody sanded it off.

Building	Year
Unité	1952
Trellick	1972

View source: all the HTML there is

<header>
  <strong>BÉTON</strong>
  <nav>
    <a href="#in-use">Posts</a>
    <a href="#kit">Kit</a>
    <a href="#the-style">About</a>
  </nav>
</header>
<h3>Raw concrete, 1952</h3>
<p>By R. Okafor · 2,140 words</p>
<p>The formwork left its grain in the
  walls, and <a href="#the-style">nobody
  sanded it off</a>.</p>
<form>
  <label for="mail">Email</label>
  <input id="mail" type="email">
  <button>Subscribe</button>
</form>
<table>
  <tr><th>Building</th><th>Year</th></tr>
  <tr><td>Unité</td><td>1952</td></tr>
  <tr><td>Trellick</td><td>1972</td></tr>
</table>

Strip it and nothing breaks: the headline is still a heading, the links still go somewhere, the form still sends. Brutalism styles the structure; it never replaces it.

Tokens

The system, in numbers.

Eight colours, three border weights, four shadows that are only offsets, one radius (none), a spacing scale and one easing: a cut. Copy them as custom properties.

Palette

--paper · #ffffffGround. 21:1 under black
--ink · #000000Text, borders, shadows
--signal · #ff3b003.6:1 on white: blocks only. Black on it, 5.9:1
--link · #0000eeThe browser's own. 9.4:1
--visited · #551a8bLinks you have followed. 11:1
--quiet · #595959Notes and disabled text. 7:1
--zebra · #f0f0f0Every other row
--rule · #e2e2e2The grid under the page

Display · Archivo BlackRaw structure, shown on purpose.Text · Space Mono 400 / 700Every character the same width, like a form filled in by hand. 0123456789 ↑↓ → ■

Borders

1px · Rows
3px · Everything else
6px · The one thing to look at

Radius

0, everywhere. Radios are the one circle.

Shadows

Flat0px, no blur
Raised4px, no blur
Box8px, no blur
Loud12px, no blur

Spacing

4
8
16
24
32
48

Motion

steps(1). A state is held, then replaced. A press moves the box 8px onto its own shadow, in one frame.

:root {
  --paper: #ffffff;
  --ink: #000000;
  --signal: #ff3b00;
  --link: #0000ee;
  --visited: #551a8b;
  --quiet: #595959;
  --zebra: #f0f0f0;
  --rule: #e2e2e2;

  /* Borders: rows, everything, the one thing. */
  --border-1: 1px solid var(--ink);
  --border-2: 3px solid var(--ink);
  --border-3: 6px solid var(--ink);

  /* Shadows are offset copies of the box. No blur, ever. */
  --shadow-raised: 4px 4px 0 var(--ink);
  --shadow-box: 8px 8px 0 var(--ink);
  --shadow-loud: 12px 12px 0 var(--ink);

  --radius: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  --font-display: 'Archivo Black', Impact, sans-serif;
  --font-text: 'Space Mono', ui-monospace, monospace;

  /* Motion is a cut. */
  --ease: steps(1);
  --press: translate(8px, 8px);
}

Do

01Show the structure. Leave the grid, the borders and the defaults in sight.
02Make links look like links: blue, underlined, unmistakable.
03Spend one loud colour on one job. Body text stays black on white.
04Cut, don’t ease. State changes are instant, and a press is a drop.

Don’t

Signal as text
#ff3b00 on white is 3.6:1, too faint for words. Put black text on a signal block instead.
Links in disguise
Black, bold, no underline: is it a link? Keep the browser’s blue and its line.
Ugly by accident
Raw is a decision. Boxes off the grid and random border weights read as broken, not bold.

In the wild

Where the style shows up outside this page.

Craigslist
Craig Newmark / 1995Blue links on white and nothing else, long before the look had a name.
Brutalist Websites
Pascal Deville / 2014The directory that gave the web the word: raw HTML, default fonts, no apology.
Bloomberg Businessweek covers
Richard Turley / 2010–2014News covers built from system type, cursors and clashing colour.
Barbican Estate
Chamberlin, Powell and Bon / 1965–1976The béton brut the name comes from: structure left showing, nothing dressed up.

B — Brutalism

Made, and left showing.

A back office with nothing to hide.

Posts

New post

Every part, every state.

Button01

Text field02

Select03

Switch, checkbox, radio04

Slider05

Progress06

Segments and tabs07

List rows08

Card and loading09

Toast10

Modal11

Steps12

Badges and avatars13