Typography
Three families. IBM Plex Sans carries the chrome — buttons, counters, captions, body copy. Space Grotesk carries narrative voice — step instructions, modal titles, the value displays inside widget bars. IBM Plex Mono carries data — numeric readouts, unit labels, the phase chip.
Families
IBM Plex Sans — --font-family
UI default. All buttons, counters, labels, body copy. 400 / 500 / 600 / 700 / 800 weights are loaded.
The quick brown fox jumps over the lazy dog
0123456789 · ABCDEFGHIJKLM · abcdefghijklm
Space Grotesk — --font-display
Display + readout. Step-bar instructions (24 / 700), value displays (38 / 600 with tabular numbers), pause-stamp pills (18 / 700). Optical-size axis tuned via opsz.
Drag the beaker onto the hot plate
142.5 g
Scale
Six steps from caption to display
Used directly as var(--font-size-*). Below each row shows the resolved px value plus a sample at that size. Both --font-size-* values resolve from tokens.css at load time.
--font-size-xs
—
Caption / counter / chip
--font-size-sm
—
Body small / button label
--font-size-md
—
Default body
--font-size-lg
—
Card heading
--font-size-xl
—
Step instruction (Space Grotesk 600)
--font-size-2xl
—
Section title
--font-size-3xl
—
Display
Weights
Aa Regular
--font-weight-regular · 400
Aa Medium
--font-weight-medium · 500
Aa Semibold
--font-weight-semibold · 600
Aa Bold
--font-weight-bold · 700