Chapter 08 — Design system
GiveMePrompts portfolio · no build step · zero network requests
TECTONIC.
01 Primitive · raw values
02 Semantic · roles
03 Component · bindings
A system is worth more than an artefact.
Eleven other chapters of this portfolio are effects. This one is the thing underneath them: a token graph, four grounds, and the discipline of pointing one visual language at content it was never designed to hold. Everything below is live DOM driven by the same cascade. Change the ground at the top and watch every component, every rule, every shadow and every duration move with it.
Live from this page
void
- Tokens
- —
- Declared
- —
- Driven
- —
- Motion
- —
- Reserved
- —
- Ground L*
- —
- Ratio floor
- —
The ground, the density and the motion state — everything that re-points the semantic layer. Paste one back to return to this exact system.
The theme, the ground's L* and the ratio floor are read off the document while you are looking at it, and they move when you touch it. The five token counts are a different measurement with a different scope: they are derived by overriding each of the — tokens in turn and reading back every computed property on the elements that consume it, which takes about a second and a half — too slow to repeat on every ground switch, so they are held and only re-derived when you ask. Press Re-derive and watch them be measured again from scratch. Press 01 Strata and click any token to see exactly which elements its value reaches.
cascade
The cascade is the design, not the paperwork.
Three layers, and a component never reads the first one. Primitive holds raw values with no meaning attached. Semantic gives those values the names a designer can reason about — ground, edge, ink-muted, accent. Component binds a role to one piece of interface, so a card's border and a table row's border are the same decision made twice.
A theme touches the middle layer and
nothing else. That is the whole reason a button here contains no theme name: it asks
for --s-accent and whatever ground is current simply arrives.
Pick a token and the page outlines everything its value reaches.
Token registry
no token selected
ground
A theme is not a palette. It is a different answer to the same question.
Switching ground does not repaint anything. It re-points the semantic layer: the ground, the ink ramp, the accent role, the border alpha, the shadow depth, the corner radius and the motion duration all move together, and no component notices. Carbon tightens its corners to a single pixel and settles in 120 ms. Basalt rounds to fourteen and takes its time. Paper has to re-point every accent at a deeper step of the same hue, because the spine accents do not survive a light ground at text size — which §04 measures rather than assumes.
Ground separation
Δ L* in OKLCH · floor 0.060
A theme that
changes the ground by less than the floor is a costume, not a change: the page would
tell the reader something moved when nothing did. Every pair below is measured off
the live background-color of each ground, converted to
OKLCH, and differenced.
measuring…
How far apart the grounds actually are
bars scale to the 0.060 floor
What moves with the ground
read from the current theme
fault
A component is only as good as its worst input.
Below, the same five components are handed the content they were never designed around. None of it is a screenshot: every case is live DOM running the same cascade as the sections above. The bar is narrow and checkable — at 320 px wide, no overflow past the gutter, no two painted words on top of each other, and no glyph cut off by its own box.
ratio
The accents are not body copy, and the page can prove why.
Every row below is a real foreground over a real background, sampled from the computed styles of elements that are on screen right now, composited through whatever alpha is in between, and scored with the WCAG 2.x relative-luminance formula. Re-derive them yourself: the number in the table is the number in the pixel.
Measured pairs
void
measuring…
The rule, and the reason it is stricter than the number
Pink measures — on the void ground and — on paper. Both are real, both were read off this page. The second one fails the 4.5 bar outright, which is why the semantic layer hands paper a deeper step of the same hue instead of the spine pink. Acid green clears 4.5 easily on every dark ground and is used as an edge and a status mark, never as body text — a saturated hue at 11 px on black reads as a glow rather than as a letter.
So the policy is not "pink is too dim". It is that an accent's job is punctuation: a large word, a rule, a status dot, a focus ring. The moment an accent starts carrying a paragraph it is no longer punctuating, and on the light ground it stops being legible at all. Display sizes here start at 24 px, where the bar drops to 3.0, and every one of those rows is measured in the table above.
type
Five sizes, and each one has exactly one job.
A scale that every heading shares is a scale with no hierarchy in it. These are read off the running document, so the number beside each specimen is the rendered size and not a declaration. The specimens are the real components, at the real size, in the real ground.
The scale
system stacks · no webfont
Three head sizes, and what each is for
Tectonic
The cascade is the design, not the paperwork.
A system is worth more than an artefact.
A component that has only been seen holding the content you designed it around has not been designed at all. It has been photographed.