Tipografía
Geist, Geist Mono y Bricolage Grotesque.
- Geist (
--font-body) para todo lo funcional. Estilostext-xs(12/18) atext-xl(20/30) en regular, medium, semibold y bold. Por defecto en la interfaz:text-sm(14/20). Cuerpo de lectura:text-md(16/24). - Bricolage Grotesque (
--font-display) solo para titulares:display-xs(24/32) adisplay-2xl(72/90). Dedisplay-mdhacia arriba, interletrado −2%. Título de página en app:display-sm-semibold. Cifras destacadas:display-md-semibold. - Pesos: etiquetas y botones en medium/semibold; párrafos en regular. No uses bold en display.
- Geist Mono (
--font-mono) solo para código, de la misma familia que Geist: estiloscode-sm(14/20) ycode-xs(12/18). - Ancho máximo de párrafo:
paragraph-max-width(720px).
Display
| Estilo | Tamaño | Uso |
|---|---|---|
Gasto de octubre | 72px/90px | Titular principal, uno por página. |
Gasto de octubre | 72px/90px | |
Gasto de octubre | 72px/90px | |
Gasto de octubre | 60px/72px | Titular de página de aterrizaje. |
Gasto de octubre | 60px/72px | |
Gasto de octubre | 60px/72px | |
Gasto de octubre | 48px/60px | Cabecera de sección. |
Gasto de octubre | 48px/60px | |
Gasto de octubre | 48px/60px | |
Gasto de octubre | 36px/44px | Título de página en páginas de marketing. |
Gasto de octubre | 36px/44px | |
Gasto de octubre | 36px/44px | |
Gasto de octubre | 30px/38px | Título de página dentro de la app (cabecera de página). |
Gasto de octubre | 30px/38px | |
Gasto de octubre | 30px/38px | |
Gasto de octubre | 24px/32px | Títulos de modal en escritorio, titulares de tarjeta, cifras destacadas. |
Gasto de octubre | 24px/32px | |
Gasto de octubre | 24px/32px |
Text
| Estilo | Tamaño | Uso |
|---|---|---|
Gasto de octubre | 20px/30px | Párrafos de entrada, subtítulos de sección. |
Gasto de octubre | 20px/30px | |
Gasto de octubre | 20px/30px | |
Gasto de octubre | 20px/30px | |
Gasto de octubre | 18px/28px | Cabeceras de sección, títulos de modal en móvil. |
Gasto de octubre | 18px/28px | |
Gasto de octubre | 18px/28px | |
Gasto de octubre | 18px/28px | |
Gasto de octubre | 16px/24px | Texto de lectura por defecto, valores de inputs, etiquetas de checkbox md. |
Gasto de octubre | 16px/24px | |
Gasto de octubre | 16px/24px | |
Gasto de octubre | 16px/24px | |
Gasto de octubre | 14px/20px | Por defecto en la interfaz: botones, etiquetas, celdas de tabla, pistas. |
Gasto de octubre | 14px/20px | |
Gasto de octubre | 14px/20px | |
Gasto de octubre | 14px/20px | |
Gasto de octubre | 12px/18px | Badges sm, tags, tooltips, pies de foto. |
Gasto de octubre | 12px/18px | |
Gasto de octubre | 12px/18px | |
Gasto de octubre | 12px/18px |
Code
| Estilo | Tamaño | Uso |
|---|---|---|
Gasto de octubre | 14px/20px | Bloques de código y código en línea. Geist Mono, de la misma familia que el texto. |
Gasto de octubre | 12px/18px | Código en línea dentro de texto pequeño. |