Typography
The type trio, scale, measure, leading, and inversion rule.
Rule
Typography identifies the kind of information before a reader processes the words. Archivo is interface and headline type. Literata is long-form reading. Geist Mono is machine truth: identifiers, timestamps, versions, cursors, code, and tabular numbers.
The inversion is deliberate: sans for the interface, serif for what people read, mono for what machines produced. Serif is functional here, not decorative.
Token contract
Use the typography.display, typography.headline-*, typography.title-*,
typography.ui-*, and typography.label-* recipes for interface hierarchy. Use
typography.body-lg and typography.body-md for prose. Use
typography.data-md, typography.code, and typography.overline for machine output;
those three carry Geist Mono in the token itself, so never add a family class beside them.
Interface text is typography.ui-md; typography.ui-lg is the 16px handheld step the
design system applies to form fields so a focused control never triggers viewport zoom.
Body measure stops at spacing.reading-max.
Hierarchy comes from scale and weight, never colour. Use no more than two Archivo
weights on one screen. typography.overline is the only uppercase style.
Correct example
A Task detail uses typography.headline-md for the title,
typography.data-md for the Task id and version, and typography.body-md for the
brief. The prose remains within spacing.reading-max, while timestamps use tabular mono
figures.
Rejected example
A detail page renders its title, prose, identifiers, and timestamps in one sans style, then uses colour to create hierarchy. The result hides the boundary between authored intent and machine state.
Reasoning
Read the visual-language type rationale and the author persona.