BÉTON. Design guide · Site 17 of 25
How this site was made

Brutalism, done
by the book.

BÉTON is a fictional preservation society for endangered brutalist buildings. The design applies the movement's own ethics to the web page: structure exposed, materials honest, ornament refused, and everything slightly heavier than you expected.

Concept

Every rule visible on the page is load-bearing: the 3px borders are the grid made physical, the drop shadows fall hard at 45° like afternoon sun on béton brut, and the register's status stamps are rotated 2° because rubber stamps never land straight. There is no blur, no gradient, no rounding — concrete doesn't do fillets.

Palette

Shuttered concrete#C9C7C1
Rebar#171614
Survey stamp#D43A26

Grey, near-black, and the red of a surveyor's DEMOLISH stamp — reclaimed here for SAVE.

Typography

Raw. Grey. Loved.

Anton — display. Compressed, immovable, poured rather than typeset. The hollow-stroke word is the building as drawing — the state every lost building returns to.

CASE 001 · THREATENED

B612 Mono — the stamp voice (a cockpit typeface: legible under stress). Public Sans carries body copy.

Techniques

ElementHow it works
Cast textureA fixed feTurbulence SVG overlay at 6% alpha gives every surface the tooth of board-marked concrete — one data URI, no images.
Massing modelsEach case file carries an isometric SVG massing diagram — three-tone polygons (lit, shade, top) with hard drop-shadow filters. The demolished Tricorn is drawn in dashed ghost lines under a red X.
Structural bordersThe layout's 3px rules are real flow borders, not decorations: header cells, hero split, stat strip, and register rows all share the same structural grid.
Status stampsBordered mono badges rotated −2°; THREATENED blinks on a hard steps(2) cadence, like a hazard light, and respects reduced motion.
The rotating sealSVG textPath around a circle, spun by CSS — the campaign's rubber stamp, permanently mid-application.
Zero dependenciesThis is the only site of the 25 with no JavaScript at all. Brutalism ships nothing it doesn't need.

Interaction map

You doThe page does
Hover a case fileThe row sets like fresh concrete — panel tone, index darkens
Hover the CTAThe block physically settles into its own shadow
Read case 004A demolition, drawn as the absence it is
← Back to the register