Style Guide

Grounds and ink stay warm in both themes; pine is the one cooler note and marks the current thing. Applied by weight: ground ≫ ink ≫ accent. The value printed under each swatch is read from the page's computed styles.

Grounds & surfaces

• --color-background
• --color-surface
• --color-background-muted
• --color-surface-elevated

Inks

• --color-primary
• --color-text-soft
• --color-text-light

Accent — pine

• --color-accent
• --color-accent-dark

Borders & hairlines

• --color-border
• --color-hairline
• --color-border-dark

Functional

• --color-danger
• --color-success

Visualisation palette (OKLCH, derived from ink + pine)

• --sys-viz-1
• --sys-viz-2
• --sys-viz-3
• --sys-viz-4
• --sys-viz-5
• --sys-viz-6
• --sys-viz-7

The document voice is what the scholar writes; the data voice is what the machine indexes. Every string on the site belongs to exactly one. Blurring them is the system's only unforgivable error: no mono headlines, no serif metadata.

Type scale — forked ratios

Reading measure — counted, not assumed

A ch is the advance width of the digit zero, not the width of one character. Newsreader's average character measures about 0.7ch, so a cap written as 65ch sets nearer ninety characters a line — past the forty-five to seventy-five that keeps a line scannable. Reason in characters and let the token carry the arithmetic. The counts below are measured in your browser, in the live font, at each role's own size.

Reach for the rule system before size or colour: the page should be navigable if all type were one size. Rules are ink-coloured, never gray. Corners are square; shadows and glass do not exist — depth comes from ink density and rule weight.

The rule → content interval

Every ruled module — masthead, section, hairline — puts the same --rule-gap between the rule and what it opens, so only the rule's weight carries hierarchy. Vary the weight, never the gap.

A rule is not a border

The two share a 1px width and nothing else. A rule separates and is the lightest mark on the page; a box edge encloses an object and sits one step darker. Crossing the pair fails silently — a separator drawn in the edge colour just looks like a plate — so the tokens are named to be paired, and the three heavy weights above take --color-primary instead.

Any dated or keyed record renders as a hanging-column ledger row, not a card: mono key left, serif content right, a hairline above each row.

The meta-ledger — a catalogue entry

A distinct idiom, not a variant. The ledger above sets a record: mono key against serif content, because the content is something the scholar wrote. The meta-ledger sets a record’s catalogue entry — journal, DOI, place, date — where both columns are strings a database could hold, so both are the data voice, over a key column narrowed to 5.5rem for the 380px metadata rail. It is what the “Record” block prints on a publication or a talk, above the rail’s label and action stack.

Pine marks only the row that leaves the record — a DOI, a live project page — and only one control in the stack carries the accent fill.

Flat, square, mono caps, count appended; selected means a solid ink fill. The counts below are real — the three most frequent tags in the publications corpus.

Chips

Facet combobox

A chip row prints a closed list; an open one is reached by typing. The field is machine-facing, so it takes the data voice and the square edge of the search field, and the listbox is a plate rather than a floating card — paper ground, 1px border, ledger rows with the serif value left and the mono count right. It overlays what follows on purpose: laying all 117 publication tags out grew the index by a screen and a half. Matching ignores case and diacritics, so cote reaches Côte d’Ivoire.

Counts are real. Picks here narrow nothing — they only show the selected state.

Pagination

Buttons

The accent never fills large areas except the single primary button per screen.

The only decoration permitted is real data made visible. These bars are the actual publications-per-year distribution, 2013–2026; the newest year carries the accent. If a flourish doesn't encode something true, it goes.

Photographs, covers and scans are plates: square corners, a one-pixel border, and a serif-italic caption below.

An 8-point rhythm carries the density scholars expect — structured information over whitespace. Motion is near-zero by design: instant state changes, at most a short fade on page enter. The register is print, not app.

Semantic spacing

Durations