Body ramp
Display ramp on the Scale page. The body ramp below is what app screens and docs reach for.
Rendered
--text-xs
12 / 1.4
12 / 1.4
param-row, kbd, request-log timestamps
--text-sm
13 / 1.45
13 / 1.45
timeline, table 2°, dense lists
--text-md
14 / 1.5
14 / 1.5
app body, button label, form copy
--text-lg
18 / 1.45
18 / 1.45
card title, banking-row primary, app section header
--text-xl
22 / 1.3
22 / 1.3
modal title, cards-kit confirm
Tokens
| Token | Size | Leading | Use |
|---|---|---|---|
--text-xs | 12px | 1.4 | param-row, kbd, request-log timestamps |
--text-sm | 13px | 1.45 | timeline, table 2°, dense lists |
--text-md | 14px | 1.5 | app body, button label, form copy |
--text-lg | 18px | 1.45 | card title, banking-row primary value, app section header |
--text-xl | 22px | 1.3 | modal title, cards-kit confirm |
Pairings
- 22 px sits at the top of body, bottom of display — used for modal titles and the cards-kit confirm prompt.
- 18 px is the most-reached-for card-level size.
- 14 px is the default app body. Buttons, forms, table primaries.
- 13 px for secondaries — table sub-text, timeline rows.
- 12 px for chrome metadata — kbd hints, request-log timestamps.
Pair
--text-xs (mono) eyebrow with --text-xl heading for the canonical section rhythm.Don't reach for 15, 16, or 17 px. The five tiers cover every product need.