design system
One instrument, every page.
This site is a readout of a machine that is still running, so it is built like one. Every specimen below is the live component with the live classes — if a token moves, this page moves with it.
Principles
Evidence has a look. Solid means a manifest verified it, hollow means the log observed it, dashed means no record at all. The three fills are not a palette, they are the record’s epistemology, and picking the wrong one is a factual error rather than a style choice.
Nothing is brighter than the render. The pass log reports a maximum
measured luminance of 179.6 of 255. That is --lum-max, and no text, rule
or fill on this site exceeds it. There is no pure white anywhere.
One hue. Sodium amber, the colour of empty industrial sites at night. Failure gets no second colour — a crash is a bright tick, a gap is a dashed edge. Differentiating by texture rather than hue is the one accessory removed.
One face. Monospace, everywhere, including running prose. Two earlier systems paired mono with a serif and then a grotesque; both made the page read as a document about the work instead of an instrument attached to it.
Colour
Contrast is measured, not assumed. --dim was lifted from
#6a6965 during the build because the original measured 3.6:1 and fails AA
for small text.
Type
Cascadia Mono, then the platform monos. No font binaries in this repo, nothing to license or rot. Mono at length is paid for in leading: body 1.72, statement 1.95, notes 1.8.
| token | size | used for |
|---|---|---|
--t-micro | 0.66rem | eyebrows, legends, tile captions |
--t-data | 0.76rem | tables, fields, nav |
--t-body | 0.92rem | running prose |
--t-lede | clamp(0.95→1.1rem) | ledes |
--t-h2 | clamp(1.1→1.4rem) | section heads |
--t-h1 | clamp(1.6→2.7rem) | page titles |
display | clamp(2.3→5rem) | the landing title, once |
Specimens
eyebrow · micro label
A section head
A lede. Set brighter than body and hung off a rule, so it reads as a value against a label like everything else here.
Running prose, at --t-body. Monospace at this
leading stays readable across a paragraph, which is the whole argument for using one
face rather than two.
A note. Dim, smaller, for things that qualify rather than assert.
The frame ruler
The signature. One shared coordinate system — frame 1 to 43,200, which is also 0:00 to 30:00 at 24 fps — drawn identically on every page, so spans are comparable without reading a number. Pure CSS: absolutely positioned spans on a percentage scale.
Components
Annotation
Corner brackets, a breathing status lamp and a slow sweep, on a neutral
raised ground. The brackets quote the machine-vision overlay in the treatments, which
draws them on every detection at bracket_len 56. Caveats are set
larger than the data they qualify — a record that hides its gaps in
small print is managing an impression.
The render log holds the prompt, sampler seed and applied denoise of every frame. That is a complete reproduction recipe, so the schedule is published and the seeds are not.
Fields
Label and value. Falsy values are dropped by the builder, so a field absent from an older record leaves no empty row.
- status
- complete
- evidence
- verified by manifest
- render driver
4f3406d1abea- render driver, reconstructed
30bee52fad0freconstructed
A dotted underline means the record says the value was inferred rather than measured. It is the same mark everywhere it appears.
Figures
Status
completerenderingstopped
Motion
Motion here should feel like values settling, a readout acknowledging input, data arriving. Restraint and consistency, with one or two moments that are allowed to be noticed. An effect that draws attention to itself rather than to the record is cut.
Everything composes from twelve tokens. There are no bespoke timing values anywhere in the stylesheet, and that is checkable rather than claimed: grep it for a duration outside the token block and the only hits are the four lines of the reduced-motion backstop.
Before the tokens there were thirteen durations, six easings and six travel distances. Every one was chosen locally and defensibly, and no two components agreed — a press took 70ms in one place, 90 in another, 100 in a third and 120 in a fourth.
Nothing was wrong on its own. The whole read as uncalibrated, which on something
pretending to be an instrument is the thing that costs it credibility. The full
inventory is MOTION_AUDIT.md in the repository.
| token | value | for |
|---|---|---|
--m-fast | 90ms | feedback — a press, a colour under the pointer |
--m-base | 180ms | state change — a lift, a panel opening |
--m-slow | 420ms | arrival — something that was not there |
--m-enter | cubic-bezier(0.22, 0.85, 0.25, 1) | arriving and settling |
--m-exit | cubic-bezier(0.4, 0, 1, 1) | leaving, and nothing else |
--m-emph | cubic-bezier(0.19, 1, 0.22, 1) | the signature moments only |
--m-near | 3px | a lift, a nudge. a press is this over three |
--m-far | 20px | entrance travel, and nothing else |
--m-pulse | 1.25s | the caret. all three of them |
--m-breath | 2.6s | the status lamp |
--m-sweep | 12s | the panel sweep |
--m-stagger | 45ms | per-sibling delay in a staggered run |
linear is deliberately not a token. It is the absence of
easing, and it is correct for colour and opacity, where a curve cannot be seen and only
the duration reads. The three periods are not durations — they describe how often
something recurs, and the caret is not a slow version of a press.
Every effect, in isolation
Each specimen is the live component with the live classes, not a recording of one. Slow the whole system down to inspect a 90 ms press; switch the fallback on to see what someone with reduced motion gets.
Ambient
Three loops that never stop. Nothing beats in time with anything else, on purpose — synchronised ambient motion is what makes a page read as a loading screen.
--m-pulse · steps(1)The work is still rendering. A hard step rather than a fade, because a terminal does not ease a cursor on and off.A real annotation panel. The lamp and the sweep both live on this component, so each specimen shows one and switches off the other.
--m-breath · --m-enterThe panel is attached to something live. Slow enough that you notice it only once.A real annotation panel. The lamp and the sweep both live on this component, so each specimen shows one and switches off the other.
--m-sweep · --m-enterOne pass every twelve seconds, off-panel for half the cycle — the line between a live instrument and a screensaver.Response
Four states on every control: rest, pointed at, reached by keyboard, pressed. Tab into these rather than pointing at them and the keyboard state is the one that answers.
--m-fast · linear · --m-near / 3A readout acknowledging the pointer. The press travels one pixel: an acknowledgement, not a movement.
f014401--m-base · --m-enter · --m-nearThe one under the pointer has to leave the texture to be legible. Neighbours dim instantly; only this tile animates.--m-base · --m-enterThe corner tick draws across the cell. It used to animate its width, which reflowed the cell on every pointer entry.--m-fast · linear · --exitThe only red thing on the site, and the only control that means leaving. The cross is drawn from two hairlines, the same way the menu builds one and the same way the cursor does.Arrival
Both rest in the arrived state and animate from hidden on replay. A specimen that waited at zero opacity for a transition would show an empty box to anyone who opened this page in a background tab, where nothing ticks.
--m-slow · --m-enter · --m-staggerThe page renders the way the work did: left to right, one row behind the last.A real annotation panel. The lamp and the sweep both live on this component, so each specimen shows one and switches off the other.
--m-slow · --m-emph · --m-farThe one place the emphasis curve is spent. 800ms before the tokens, which is half a second of withholding a paragraph from someone already reading toward it.Signature: stepping between stills
The most-used interaction on the site, and currently the only one with no feedback at all. Three answers — pick one and it ships in the lightbox.
stepno motionWhat ships today. The readout changes and the image cuts. Honest, and the only interaction on the site with no acknowledgement at all.step--m-fast · linearOne frame dissolves into the next. Reads as film rather than as a readout, which may be the wrong register here.step--m-base · --m-enter · --m-nearThe outgoing frame leaves the way you sent it. Three pixels, so it reads as direction rather than as a slide.Signature: how a value arrives
The figures are the point of most pages here. Right now they ride in on the generic block reveal, which is the gesture a marketing page uses for a feature card.
--m-slow · --m-emph · --m-farWhat ships today. The whole block travels twenty pixels. Reads as a card arriving, which is the marketing-page gesture.--m-base · --m-slow · --m-enterNo travel. The figures come up and the channel ticks draw across behind them — values settling rather than sliding in.--m-fast · --m-base · --m-enterThe value is simply there, and the readout confirms it a beat later. The most instrument-like of the three, and the coldest.Proposed, not shipped
Two gaps from the audit, built here so they can be seen before they are decided. Both are scoped to this page until you say otherwise; promoting either is a matter of dropping one selector.
--m-fast · linearThe key to the whole evidence system is currently inert. Pointing at one fill dims the other two.--m-fast · linearEvery bar carries the reason for its fill in a title, and nothing suggests it is worth asking. Point at one.The fallback is a state change, not an absence
Under prefers-reduced-motion: reduce the tokens are redefined rather
than the rules overridden: durations to 1ms, travels to 0.
A tile still lifts, a panel still opens, a block still arrives — each one simply
gets there in a single frame. The end state carries the meaning and is never withheld.
The loops stop rather than run fast. An infinite animation at a millisecond is not a calmer animation, it is a strobe, which is the precise thing the preference exists to prevent. The caret parks solid, which is the more honest readout anyway: the cursor is still there, it has just stopped blinking.
Voice
Prose here states what happened and what is known. A pass still rendering says so; a count taken from a directory listing says that is what it is.
Using the system
The whole system is one stylesheet,
static/css/record.css, with no preprocessor and no build step, plus one
40-line script that binds arrow keys and escape to links the lightbox already has.
Everything opens, closes and steps with scripting off — a record has to be
readable without a runtime. The reasoning behind each rule, including the two it
replaced, is in design-system.md in the repository.