Tokens de Tipografía
Familia Tipográfica
Section titled “Familia Tipográfica”- Fuente: Public Sans
- Pesos: Regular (
400), Semibold (600), Bold (700) - Base: 16px (1rem)
Comportamiento Móvil (Responsive)
Section titled “Comportamiento Móvil (Responsive)”El sistema ajusta automáticamente la escala de títulos cuando la pantalla es inferior a 768px (max-width: 768px) para garantizar la legibilidad y evitar saltos de línea excesivos en dispositivos móviles.
| Nivel Tipográfico | Desktop (Size / Line Height) | Mobile (Size / Line Height) |
|---|---|---|
| Title Page | 28px / 33px | 22px / 30px |
| Title Section | 22px / 30px | 18px / 22px |
| Title Subsection | 18px / 22px | 16px / 18px |
| Subtitle 02 | 16px / 18px | 14px / 16px |
| Subtitle 03 | 14px / 16px | 12px / 14px |
Títulos (Titles Styles - Desktop)
Section titled “Títulos (Titles Styles - Desktop)”El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
Cuerpo de Texto (Body Styles)
Section titled “Cuerpo de Texto (Body Styles)”Los tamaños de cuerpo de texto se mantienen constantes entre Desktop y Mobile para asegurar legibilidad.
Body Large Strong (16px / 18px) — Texto destacado de mayor jerarquía.
Body Large (16px / 18px) — Párrafos de introducción o lectura amplia.
Body Normal Strong (14px / 16px) — Énfasis dentro del cuerpo estándar.
Body Normal (14px / 16px) — Estilo base por defecto en toda la aplicación.
Body Small Strong (12px / 14px) — Información secundaria destacada.
Body Small (12px / 14px) — Datos secundarios, leyendas y aclaraciones.
Estilos Numéricos (Number Styles)
Section titled “Estilos Numéricos (Number Styles)”Optimizado para importes, estadísticas, dashboards y datos financieros.
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
# $ 0123456789 ,
Estilos Especiales (Extras Styles)
Section titled “Estilos Especiales (Extras Styles)”Caption Strong — Etiqueta o aclaración en negrita.
Caption Regular — Etiqueta o nota aclaratoria.
Caption Italic — Nota aclaratoria en cursiva.
Legales Strong — Términos y condiciones en negrita.
Legales Regular — Disclaimers y derechos reservados.
Enlaces (Anchors & Links)
Section titled “Enlaces (Anchors & Links)”Regla de UI: Se aplica subrayado (underline) únicamente a los enlaces dentro de bloques de texto.
- Link Default: Texto de enlace activo
- Link Hover: Estado al pasar el cursor
- Link Visited: Enlace ya visitado