v0.1 · 2026-04-23

Face

Face is the visual channel of the design system. Nine parameters govern how every surface looks before any word is read.

What Face is

Face is the visual channel of the Vaquum design system. It is the set of visible commitments a surface makes before any word is read. The inheritance is the Swiss school and the field-report typography of institutional publishing: Müller-Brockmann, Vignelli, the BIS Quarterly. Hairline rules, whitespace, and typography carry the structural weight. Accent is a pointer, never a mood.

Nine parameters

Face is composed of nine parameters, of which one is foundational — typeface — and the other eight close under small, typed sets declared in @vaquum/face. The index below is read directly from that typed source, and every entry in it traces back to a declaration in code. When a parameter is added or renamed in code, the index updates automatically on the next build of the site. Each entry names the parameter, the number of values in its closed set, and the canonical path to its reference page.

How a Face declaration works

Every surface declares a Face in its frontmatter — one chosen value per parameter — and the static validator rejects any string outside the closed set at parse time. The eight parameter values are applied to the document root as data-* attributes on the <html> element. CSS reads those attributes and cascades tokens accordingly, without any runtime computation of the Face. A surface never derives its Face at render time; the declaration is the source, and the rendered result is its consequence.

How parameters compose

Tone fixes the luminance ground under which every other parameter lives. Colour names the permitted grey share and accent share against that tone. Form fixes the shape language of marks; position fixes their horizontal axis; proportion fixes their grid. Density caps the mark-per-space; rhythm governs their repetition; motion governs their change in response to input. No parameter overrides another, and a single declaration must satisfy the nine dimensions simultaneously.

Named failure states

Three parameters carry a named failure value inside their closed set. Form has filled-shape, position has centred, and rhythm has arrhythmic. Density carries its failure at a measured pixel-count ceiling, above 15% mark coverage on the rendered surface. These values exist in the set only so the validator can name what has gone wrong. A Vaquum surface never declares them, and the validator emits a failure the moment one is encountered.

Typeface not closed-set: The typographic system — two humanist faces at a fixed scale of seven sizes.; typeface
Tone 3 values: The distribution of brightness across the surface.; tone
Colour 3 values: The colour profile of the surface, drawn from the closed palette of fourteen values.; colour
Form 3 values: The shape language of marks on the surface — what every drawn element looks like at the edge.; form
Position 4 values: How marks sit on the horizontal axis of the surface.; position
Proportion 3 values: The size relationships between elements — the grid that governs everything spatial.; proportion
Density 3 values: How much mark per unit of space.; density
Rhythm 3 values: How predictably elements repeat across the surface.; rhythm
Motion 3 values: When and how the surface changes in response to input.; motion