Tipografia
Los tokens tipográficos son estilos predefinidos que indican cómo debe verse el texto.
Su propósito es mantener consistencia visual en el sistema de diseño.
👉 Importante: los tokens no reemplazan la semántica HTML.
Regla general
- El tag HTML (
h1,h2,p, etc.) se elige por semántica y accesibilidad. - El token tipográfico se elige por uso (título, label, body, etc.) y según lo que indique el wireframe.
- Tag y token no siempre coinciden.
- Ejemplo: un
<h2>puede usartext-title-h4si el diseño requiere un tamaño más pequeño.
- Ejemplo: un
Titulos
Clases disponibles para títulos y encabezados.
| Vista previa | Tamaño | Alto de linea | Espaciado | Tailwind class |
|---|---|---|---|---|
Titulo 1 | 56px | 64px | -1% | text-title-h1 |
Titulo 2 | 48px | 56px | -1% | text-title-h2 |
Titulo 3 | 40px | 48px | -1% | text-title-h3 |
Titulo 4 | 32px | 40px | -0.5% | text-title-h4 |
Titulo 5 | 24px | 32px | 0% | text-title-h5 |
Titulo 6 | 20px | 28px | 0% | text-title-h6 |
Labels
Clases disponibles para etiquetas. Ideales para labels de inputs, texto de botones y elementos descriptivos de interfaz.
| Vista previa | Tamaño | Alto de linea | Espaciado | Tailwind class |
|---|---|---|---|---|
Label xl | 24px | 32px | -1.5% | text-label-xl |
Label lg | 18px | 24px | -1.5% | text-label-lg |
Label md | 16px | 24px | -1.1% | text-label-md |
Label sm | 14px | 20px | -0.6% | text-label-sm |
Label xs | 12px | 16px | 0% | text-label-xs |
Texto de contenido
Clases para texto de contenido y párrafos. Ideales para cuerpo de texto, descripciones, contenido de artículos y bloques de información.
| Vista previa | Tamaño | Alto de linea | Espaciado | Tailwind class |
|---|---|---|---|---|
Texto xl | 24px | 32px | -1.5% | text-paragraph-xl |
Texto lg | 18px | 24px | -1.5% | text-paragraph-lg |
Texto md | 16px | 24px | -1.1% | text-paragraph-md |
Texto sm | 14px | 20px | -0.6% | text-paragraph-sm |
Texto xs | 12px | 16px | 0% | text-paragraph-xs |
Subtitulos
Clases para subtítulos y encabezados secundarios. Ideales para secciones, categorías, encabezados de tarjetas y títulos de menor jerarquía.
| Vista previa | Tamaño | Alto de linea | Espaciado | Tailwind class |
|---|---|---|---|---|
SUBTITULO MD | 16px | 24px | 6% | text-subheading-md |
SUBTITULO SM | 14px | 20px | 6% | text-subheading-sm |
SUBTITULO XS | 12px | 16px | 4% | text-subheading-xs |
General
Clases para texto común y elementos diversos. Ideales para contenido general, enlaces, elementos auxiliares y casos de uso no específicos.
| Vista previa | Tamaño | Alto de linea | Espaciado | Tailwind class |
|---|---|---|---|---|
Aa | 128px | 128px | - | font-size-128 |
Aa | 96px | 96px | - | font-size-96 |
Aa | 72px | 72px | - | font-size-72 |
Aa | 60px | 60px | - | font-size-60 |
Aa | 48px | 48px | - | font-size-48 |
Aa | 36px | 40px | - | font-size-36 |
Aa | 30px | 36px | - | font-size-30 |
Aa | 24px | 32px | - | font-size-24 |
Aa | 20px | 28px | - | font-size-20 |
Aa | 18px | 28px | - | font-size-18 |
Aa | 16px | 24px | - | font-size-16 |
Aa | 14px | 20px | - | font-size-14 |
Aa | 12px | 16px | - | font-size-12 |
Aa | 10px | 12px | - | font-size-10 |