Scale
Display ramp — rendered
.h-display
450 · -0.038emStart a company, instantly.
450 · -0.038emStart a company, instantly.
.h-1
450 · -0.030emA flat token system across three surfaces
450 · -0.030emA flat token system across three surfaces
.h-2
450 · -0.022emSection heading for marketing & docs
450 · -0.022emSection heading for marketing & docs
.h-3
500 · -0.015emCard title or app row header
500 · -0.015emCard title or app row header
Body ramp — 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
Eyebrow
Section eyebrowHeading sits below
Display tokens
| Class | Size (clamp) | Tracking | Weight | Leading |
|---|---|---|---|---|
.h-display | clamp(44, 6.4vw, 92) | −0.038em | 450 | 1.0 |
.h-1 | clamp(34, 4vw, 54) | −0.030em | 450 | 1.05 |
.h-2 | clamp(26, 2.6vw, 36) | −0.022em | 450 | 1.12 |
.h-3 | clamp(20, 1.8vw, 24) | −0.015em | 500 | 1.20 |
Headings sit at font-weight: 450 — slightly heavier than light, not a full medium. Tracking grows tighter at larger sizes.
Body tokens
| Token | Size | Use |
|---|---|---|
--text-xs | 12px | param-row, kbd, request-log timestamps |
--text-sm | 13px | timeline, table 2°, dense lists |
--text-md | 14px | app body, button label, form copy |
--text-lg | 18px | card title, banking-row primary, app section header |
--text-xl | 22px | modal title, cards-kit confirm |
Eyebrow
| Property | Value |
|---|---|
| Size | 11px |
| Tracking | 0.18em |
| Transform | uppercase |
| Weight | 500 |
| Numerals | tnum (tabular) |
Emphasis — weight + color, never italic
Use font-weight: 500 or a stronger ink token (var(--fg) over var(--fg-muted)) for emphasis inside body copy. font-style: italic is banned across all three surfaces.