The design system

A design system usually lives in a Figma file: pages of colours, type and components, each a picture of what the code should do. This one lives in the code, so this page shows the code itself. Every swatch reads its colour from the page as it renders, every spring is imported from the file the site uses, every component is the one on the other pages, and every sound is made the moment you press it.

So it can’t drift. Change a token in globals.css and the swatch here changes with it. What this detail doesn’t do is give the reasons: the next two do, the pencil language for the look and how things move for the motion.

Seven tokens make the page: its ground, a surface a shade under it, four greys for text and pencil, and ember. Ember is only for what matters: the active state, the thing being studied, a key note. Structure stays white pencil, at low opacity.

Four more colour what’s drawn on the page rather than the page itself: the case study’s book, its ink, the résumé’s sheet and the stage every demo plays on.

Every pair below is measured as it renders: the text’s colour against the ground it sits on, as a contrast ratio. Body text needs 4.5:1, and each of these clears it, ember included.

EB Garamond for titles, Roboto for reading and the interface, Caveat for anything handwritten, and the signature’s face for the signature alone. Mono is only for code and readouts. The sizes below are read from the samples at this screen’s width, so on a phone the titles read smaller.

Nothing on the site has a CSS border where a line can be drawn instead. Every mark is a few hand-made strokes, seeded by its own text so it comes out the same on every visit.

The film grain lies over this page too: at 15%, moving in whole-pixel jumps, and held still at 8% with animations off.

Anything that changes picks a spring by what it’s doing, never a new one written on the spot. Press a spring’s name to play it, or play them all and compare.

What’s timed rather than sprung, a sequence or a sketch or a page change, takes one of five named curves.

A press sinks by one of three depths, by what’s pressed. Press and hold each one.

There are no sound files. Every sound is made in the browser as it plays, from a little noise or a tone, and only ever for something the visitor did. The settings island turns every one of them off.

These are the real components, not drawings of them: point at them, tab to them, press them.

Each control has the same five states, written in CSS so they look the same whatever the visitor’s animation setting.

And the larger surfaces: a demo’s browser window, a code panel, an article’s card.

1.tags {
2  overflow-x: clip;
3}

The settings island has a switch for animations, and a device can ask for less motion. Every change on the site comes in three versions: animated, landing at once, or a calm fade. Demos keep playing in all three, because showing motion is what they’re for.