System
Every token and component in the Latents design system, rendered from the same stylesheets the site uses. If it looks wrong here, it is wrong everywhere.
Colour.
One chromatic ramp. Everything that is not cobalt is black at an
opacity, on paper rather than white. Values are authored in
oklch so the steps are perceptually even.
- 50
- 100
- 200
- 300
- 400
- 500
- 600 · Primary
- 700
- Background
- Foreground
- Ink 50%
- Ink 25%
Type.
Serif carries prose. Mono carries every label, caption, number and piece of interface chrome. There is no third family, and no sans.
Latents
Handgloves & quartz, 1926 — “curly quotes”, an ellipsis…
Section headings sit at base size in medium.
Body copy runs at 16 px with 180% leading. The reference site sets 14 px; at the measures we use that reads as fine print, so the whole scale sits one step above it. The loose leading is the part worth keeping.
Mono Label · Tracking 0.1em
0123456789 · 77.6K · 3.5K · 22 / 31
Rules.
Controls.
One button, two variants. The affordance is a 2 px inset bevel, not a shadow. Tab to any of these to see the focus ring.
Figures.
A technical plate sits on a dithered ground inside a four-strip
frame. Captions run up the sides, knocked out on the paper colour.
Every plate needs a real aria-label; the frame strips do
not.
Data.
- A row that links somewhere 3.6k Words
- A row with a label long enough to wrap on a narrow screen, which it must do without breaking the leader 6.2k Words
- A row with no value yet —
Marks, positive
- Short statements opened by a mono mark. The mark is a real element, hidden from assistive tech, so the meaning has to be carried by the heading above the list.
- Rows are held to the prose measure and wrap under the mark.
Marks, negative
- The negative set drops to muted ink so the two columns are separable at a glance, not only by reading them.
- Same geometry, no second layout to maintain.
Current Progress:
██████████████░░░░░░
Finished Chapters:
22 / 31
Words per Chapter:
3.5K
Current Word Count:
77.6K
Current Image Count:
848
Prose.
A statement is one load-bearing claim, set in the serif at a larger size with tighter leading. There is no display face here.
Single-column prose is left-aligned, capped at a 36 rem measure, and set at 180% leading. Use it for anything a reader has to act on: instructions, terms, contact details.
Emphasis is a weight change, not a colour change. Italics stay italic. Links are dotted underlines that go solid cobalt on hover.
Multi-column prose is justified with hyphenation and a two-line drop cap, balanced so the final column is never a stub. Use it for the opening spread and nothing else — it is a display setting, not a reading default.
Because the columns balance rather than fill, adding a sentence reflows all three. That is the intended behaviour: the block is treated as one typeset object.
Anything a reader must act on stays out of here and goes into single-column prose, where the line length is predictable.
Split, first cell
Two columns of independent blocks — question and answer pairs, side-by-side lists — rather than one body of flowing text. It is a grid, so cells stay put instead of reflowing into each other.
Split, second cell
Collapses to a single column below 48 rem. Reach for the multi-column setting only when the text really is one continuous passage.