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
- driver
4f3406d1abea- 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
Four moving things, and each one says something true. All of it is CSS.
The caret after the landing title blinks on a 1.25s step: this is a readout of a machine that is still rendering. The lamp on every annotation breathes at 2.6s. The sweep crosses an annotation every 12 seconds — slow enough to be noticed rather than watched, which is the line between a live instrument and a screensaver.
The ruler draws left to right on load, staggered 45ms a row, so the page renders the way the work did.
prefers-reduced-motion collapses all of it to nothing.
The lamp breathes, the sweep crosses, the brackets hold.
Voice
Plain, measured, declarative — the register the record itself uses. “It is a reconstruction, not a measurement.” No marketing, no hedging.
Gaps are stated, never styled away. A pass still rendering says so. A count that is a directory listing says it is one. An unwritten page says it is unwritten instead of showing placeholder prose, because a placeholder reads as finished and a stated gap does not.
Labels name what a reader recognises. Numbers are tabular so the one above can be compared with the one below. Dates carry their offset.
Anomalies are rendered, not reconciled. Where a pass record and the project index disagree about status, both are shown. Deciding between them here would put a second opinion somewhere the record cannot see it.
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.