Typography
Major Third scale (1.250) on an 18px base. Aleo for headings, Georama for text.
Typography is what carries the message, so hierarchy is set by a single scale, not by eye. Content follows that scale; interface elements stay outside it so they don't compete with what is being read.
Weights
Bold in body = 500 (medium). Never 700. Georama at 700 is too heavy; strong and b render at 500 across the whole system (rule in tokens.css). The available weights are 400 (normal), 500 (medium) and 600 (semibold, NavPill and card-title only).
Scale
display, Aleo
Elastic design
h1, Aleo
El veloz murciélago hindú comía feliz cardillo y kiwi
h2, Aleo
The quick brown fox jumps over the lazy dog
h3, Aleo
Benjamín pidió una bebida de kiwi y fresa
h4, Aleo
Pack my box with five dozen liquor jugs
body, Georama
How vexingly quick daft zebras jump. The five boxing wizards jump quickly at dawn. Amazingly few discotheques provide jukeboxes.
body bold, Georama
Jovencillo emponzoñado de whisky: ¡qué figurota exhibe!
body-sm, Georama
Sphinx of black quartz, judge my vow. Crazy Frederick bought many very exquisite opal jewels.
caption, Georama
El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío.
Component tokens
UI elements, not content headings: they don't follow the Major Third scale or change with the viewport (except modal-title, 28→22px on mobile). The reason for each one lives in its component's spec.
| Token | Size | Where it's used |
|---|---|---|
| card-title | 22px | Card title and BentoCaseCell label |
| modal-title | 28px (22px mobile) | Modal title |
| modal-body | 16px | Modal body |
| nav | 14px | NavPill items |
| table | 16px | Tables in prose |
| footer | 12px | The whole Footer |