Colour and motion: the instrument, lit

Context

ADR 0008 made the site an instrument: monochrome chrome in both themes, chromatic colour only for data and status, and no motion nobody asked for. Built, it read as black or white. Looking at the finished site on 2026-10-04, I found it dull, and asked for colour, effects and animation. The worry behind 0008 still stands: the looks that generated sites converge on (a cream page with a serif and one vermilion accent, or a purple gradient on everything) read as a template. So colour comes back with a job to do, and motion with a reason to move.

Decision

• Surfaces lean blue. Both themes keep their neutrals but tint them toward one cold, inky hue (OKLCH 268): porcelain and ink by day, midnight and chalk by night. Every text colour keeps at least 4.5:1 on every surface it meets, computed rather than judged by eye.
• A brand for what answers the visitor. Violet into blue into cyan marks what a visitor acts on or should see first: the name, filled buttons, links under the pointer, focus, selection, reading progress, controls that are on. It is never a data colour.
• One colour for each area of expertise. JVM performance is amber, payment security green, production AI magenta, distributed systems blue. Each area wears its colour, and so do the cases and experiments that back it, always beside the area's name. The four were checked as a categorical palette in both themes: colour-blind separation at least ΔE 8, normal vision at least 15.
• Data and status keep their palettes. The validated series and status colours do not change; the first series colour, blue, still means measured on a real system.
• Motion that reveals and responds. Light drifts behind the first screen; sections rise into place as they are scrolled to; the career timeline draws itself as it is read; cards light up under the pointer, and those that are links lift; a page reached by a link comes up, and a new theme opens in a circle from its switch. Nothing that moves touches the layout, so nothing on the page shifts. prefers-reduced-motion turns off everything that moves on its own.

Consequences

• ADR 0008's rules on type, on the hero as the instrument and on structure stand; its "colour means data" and "quiet motion" give way to the above.
• The tokens carry the brand, the four areas and two shadows. A test holds the two copies of the dark theme identical and every text token at 4.5:1 or more on its surfaces.
• Lab entries name their area; the lab's cards and the home page's cases take its colour.
• The light comes on once the first frame is on the screen: lib/light.ts marks the page data-lit after the first contentful paint, and glows, glass, blurred shadows and gradients wait for it, most of them fading in. A fresh browser has to prepare each of them before it can draw it the first time, and drawing them all in the first frame held it back by up to 150 ms, which cost the record pages two to six points in Lighthouse. Measured against the site as it was before this record, in the same minute, the scores are the same again.
• The favicon, the theme colour and the Open Graph image move to the new palette. The CV stays in ink: it is printed and parsed by applicant tracking systems, and colour would carry nothing there.