ATELIER BRUT — Guide

Palette

Raw concrete: #B8B2A7; The page is the slab. Warm grey, never beige — it reads as material, not background.

Wet concrete: #6E6A62; Secondary voice for metadata and hairline-free dividers. Deliberately low contrast: used only large or decorative, never for body copy.

Shuttering black: #0F0E0C; Not pure #000 — a carbon black with warmth, so the concrete sections and dark sections feel cast from the same mix.

Signal orange: #FF4D00; Site-safety orange: the colour of load warnings and crane hooks. Spent almost entirely on the stress test and small wayfinding marks.

Type

Béton Brut, opsz 144

Fraunces at maximum optical size, weight 900. The display voice of the foundry — a slab that behaves like poured mass. Its SOFT axis (0–100) is the "slump" of the mix, worked live in the specimen rows.

Formwork keeps the wonk

Fraunces with WONK set to 1: stems drift like hand-set metal against warped plywood. The wonk is the brand — the mistakes stay in.

Rebar takes tension

Archivo condensed to width 62, weight 850. The structural steel: navigation, labels, and the stress-test headline that gets loaded to failure.

aggregate spreads the load

Archivo at width 125, weight 350 — the wide, even body voice. Real body copy runs Archivo near its default axes so reading stays effortless between the heavy moments.

Techniques

Signature — the scroll-velocity stress test: A 320vh section with a position:sticky stage. A requestAnimationFrame loop measures scroll velocity (px/s) each frame from scrollY deltas, smooths it with an asymmetric lerp (fast attack 0.22, slow decay 0.05 — the type snaps under load and relaxes like settling concrete), then maps the eased value onto the headline's variable axes: wght 200→900 and wdth 62→125, written as CSS custom properties consumed by font-variation-settings. An instrument panel reads out velocity, both axes, and the session peak. An IntersectionObserver gates the writes so the axes only animate while the section is on screen.
Cursor-weighted hero: Each letter of BRUT is a span with its own --wght. The letter nearest the cursor carries up to weight 900, falling off with distance — the cursor physically loads the word. Cursor Y drives the SOFT axis. Values are lerped in the same rAF loop for inertia.
Specimen axis scrubbing: Each specimen row exposes one axis (SOFT, WONK, wght, wdth) via data attributes; pointer X scrubs the axis across its full range with a live tabular-numeral readout, and pointerleave snaps back to the rest value.
GSAP split-text doctrine: Doctrine lines are split into word spans at runtime (overflow-hidden masks) and revealed with a ScrollTrigger'd stagger on power4.out — one orchestrated moment rather than scattered effects.
CSS-only marquees: Two duplicated glyph tracks on a linear translateX keyframe, opposite directions, alternating concrete/orange glyphs with WONK at 1. Pure CSS, killed entirely under reduced motion.
No images anywhere: Every visual is typography, borders, and four flat colours. The favicon is an inline SVG data URI.

Iteration log

Pass 1 — Craft

Checked every colour pairing: signal orange sits at only 1.65:1 on raw concrete, so orange text on concrete was replaced everywhere by orange plates with ink type (5.1:1) — section numbers and axis readouts became little load-rating tags, which suits the foundry better anyway.
Retired wet-concrete grey from small informative text (2.5:1); specimen facts and the hero hint moved to a darker charcoal (#3F3D38, 5.3:1). Wet grey now only draws rules and decoration.
Specimen sample lines clipped mid-word at 375px behind overflow:hidden — below 600px they now wrap at a recalibrated size instead of losing their last word.
Section heads realigned from baseline to centre for the new number plates; deleted a redundant focus-visible override; kept every rule at the same 3px weight so the page reads as one cast object.

Pass 2 — Depth

Gave each specimen a settle-in: as a row scrolls into view, GSAP tweens its axis from the far end of its range to rest on power3.out — the face visibly sets like poured concrete, and touch users get the axis show without a cursor. The tween is killed the moment the pointer takes over.
Added a second-read reward to the stress test: pushing the peak past 5500 px/s flips the Peak cell to an orange "certified" plate for the rest of the session.
The marquees pause on hover, so you can actually read the wonky glyphs you were curious about.
Formatted all axis readouts through one formatter so rest, scrub, and settle values agree (WONK reads 1.00, not sometimes 1.0).

Pass 3 — Hardening

Velocity sampling now treats any delta over 600px/frame as a teleport (anchor jumps, Home/End) and scores it zero — the peak record can only be earned by real scrolling. Velocity stays clamped at 8000px/s.
Cut wasted work: hero letters and the stress headline skip their style writes once values converge (epsilon guards), on top of the IntersectionObserver gating and the document.hidden pause; merged two observers into one.
Chanel rule: removed the rotated vertical caption from the hero — the eyebrow and the cursor hint already frame the word, and the third voice was noise.
Final copy read: fixed a licence line that pointed the wrong way ("no annual reminder that you exist" → "no renewal email every March") and re-verified 375px, reduced-motion, and focus paths end to end.

How the concrete was poured

Palette

Type

Techniques

Iteration log