Typography

Two variable families, one pt scale, and a named role for every kind of text. Every sample below is rendered from the token itself — never a copied value.

Families

Two families: Archivo for headings and display, Switzer for text. Code and token names render through the code role — see Roles below.

--font-display

Headings and display. Archivo, with a live width axis.

--font-body

Reading text and interface labels. Switzer.

The size scale

Nine pt-based steps, fluid in the browser. Text is never sized outside them — a role pairs a step with weight, line and family.

--text-size-48

--text-size-40

--text-size-32

--text-size-24

--text-size-20

--text-size-16

--text-size-14

--text-size-12

--text-size-10

Text roles

The consumption vocabulary. Every text on every surface consumes exactly one role — weight, size, line height and family travel together.

--text-role-display

Hero statements — one per page at most.

--text-role-watermark

Giant backdrop text behind hero content — absolute-positioned scenery, always in the watermark tone, never primary ink.

--text-role-title-1

The page's own title, in the surface band.

--text-role-title-2

One heading per section of a page.

--text-role-title-3

Titles inside cards and tiles.

--text-role-lede

Intro paragraph under a page title.

--text-role-body

Default reading text.

--text-role-label

Controls, table heads, tabs — semibold small.

--text-role-status

State text inside pills and chips.

--text-role-footnote

Helper text under fields and rows.

--text-role-caption

Captions and quiet metadata.

--text-role-overline

Small caps eyebrow above a title.

--text-role-code

Code and token names.

The width axis

The display face carries a wdth axis. Heading roles pair with a width companion token — the same text, read wider, marking hierarchy at a glance.

--text-role-display-width — the plain width beside the companion width (150). The fainter sample is what the axis adds.

--text-role-title1-width — the plain width beside the companion width (125). The fainter sample is what the axis adds.

--text-role-title2-width — the plain width beside the companion width (112). The fainter sample is what the axis adds.

--text-role-title3-width — the plain width beside the companion width (100). The fainter sample is what the axis adds.