Tipografía
Escala Major Third (1.250) sobre base de 18px. Aleo para títulos, Georama para texto.
La tipografía es lo que lleva el mensaje, así que la jerarquía se fija con una sola escala y no a ojo. El contenido sigue esa escala; los elementos de interfaz quedan fuera de ella para no competir con lo que se lee.
Pesos
Bold en body = 500 (medium). Nunca 700. Georama a 700 es demasiado pesado; strong y b renderizan a 500 en todo el sistema (regla en tokens.css). Los pesos disponibles son 400 (normal), 500 (medium) y 600 (semibold, solo NavPill y card-title).
Escala
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.
Tokens de componente
Elementos de UI, no headings de contenido: no siguen la escala Major Third ni cambian con el viewport (salvo modal-title, 28→22px en móvil). La razón de cada uno vive en el spec de su componente.
| Token | Tamaño | Dónde se usa |
|---|---|---|
| card-title | 22px | título de Card y label de BentoCaseCell |
| modal-title | 28px (22px móvil) | título de Modal |
| modal-body | 16px | body de Modal |
| nav | 14px | items del NavPill |
| table | 16px | tablas en prose |
| footer | 12px | todo el Footer |