Foundations
Typography
One family, three weights, four sizes. Every text style is a token with its size, line height, weight and tracking baked in.
Foundation 02
Typography
One family, three weights, four sizes. Every text style is a token with its size, line height, weight and tracking baked in.
Role
Token
Sample
Spec
Family and weight
Family
Every product surface
font.family.body
Inter Aa Gg 0123
Inter with the opsz axis on. No second face.
Weights
Regular, medium, semibold
font.weight.*
Regular
Medium
Semibold
400 prose, 500 UI, 600 titles. No bold.
Scale
Heading large
Record name
text-heading-large
Northwind Logistics
24 / 28 / 600, −0.02em
Heading small
Page, block and dialog titles
text-heading-small
Senior Data Engineer
16 / 20 / 600, −0.01em
Body
Cells, buttons, nav, tabs, menus
text-body
Move to Interview · Add note
14 / 20 / 500, −0.005em
Prose
Notes, email bodies, empty-state line
text-body font-normal
Strong on Spark, wants a hybrid role.
14 / 20 / 400, −0.005em
Body small
Labels, pills, counts, meta
text-body-small
Owner · 3 open roles · Updated 2h ago
12 / 16 / 500, no tracking. Meta lines 400.
Usage
Small button
size="sm", calendar, toggle
text-body
Save
14 / 20. Only the height shrinks.
Tracking
Tightens as size grows
in each text token
12: 0 · 14: −0.005em · 16: −0.01em · 24: −0.02em
Never set ad hoc.
Case
Titles, buttons, labels
Move candidate to Short list
Sentence case. No all-caps labels in the product.
Rules
1. Use the four type utilities: text-heading-large, text-heading-small, text-body, text-body-small. Prose adds font-normal.
2. Four sizes only: 24, 16, 14, 12. No 13px; labels, meta and timestamps are body small, Inbox rows and tabs are body.
3. Menu items use weight 500, like every other control.
4. Record name is heading large, 24 / 28 / 600.