Tipografía
Una sola familia, tres pesos y una escala corta. La jerarquía sale del tamaño y el peso, no de mezclar fuentes.
Familia
Konfront usa siempre Inter Tight. Ojo: Inter a secas es otra fuente. Los pesos permitidos son 400, 500 y 700; los títulos van en Bold 700.
Escala
| Token | Muestra | Tamaño / línea | Peso | Uso |
|---|---|---|---|---|
| title-1 | Rediseño del portal | 32 / 38 | Bold | Título del frente en vista cliente |
| title-2 | Lo que logramos este mes | 24 / 29 | Bold | Secciones de la vista cliente |
| title-3 | Frentes de trabajo | 18 / 22 | Bold | Título de página en app interna |
| title-4 | Entregables de la etapa | 16 / 19 | Bold | Tarjeta, sección, diálogo |
| title-5 | Mapa de sitio | 14 / 17 | Bold | Encabezado de grupo, nombre de paso |
| body-l | Terminamos la etapa de descubrimiento. | 18 / 25 | Regular | Texto destacado en vista cliente |
| body-m | El equipo validó los flujos con tus usuarios. | 16 / 22 | Regular | Párrafo en vista cliente |
| body-s | Sube la evidencia para cerrar el paso. | 14 / 20 | Regular | Texto base de la app interna |
| label | Correo electrónico | 14 / 17 | Medium | Labels, ítems de navegación |
| button | Publicar | 13 / 16 | Medium | Botones |
| caption | Actualizado el 6 oct, 10:42 | 12 / 17 | Regular | Metadatos, fechas, chips |
| caption-strong | Terminado | 12 / 14 | Medium | Badges, contadores |
| overline | Navegación | 11 / 13 | Medium | Grupos de navegación |
| micro | 12 | 10 / 14 | Medium | Solo contadores dentro de badges |
El texto base de la app interna es body-s (14 px). En la vista cliente sube a body-m (16 px) para dar más aire.
Color del texto
- Títulos de la app interna
--foreground - Títulos de la vista cliente
--heading - Subtítulos de 24 px o más en vista cliente
--brand-secondary - Párrafos
--text-body - Metadatos y texto secundario
--muted-foreground - Links, con subrayado al hover
--primary
Reglas
Máximo tres tamaños por pantalla
En la app interna, si necesitas un cuarto tamaño, la jerarquía se resuelve mejor con peso o color.
Bold es 700, nunca 600
Si encuentras 600 en títulos, súbelo a 700. Si encuentras 800 o 900, bájalo a 700.
Números tabulares
Usa tabular-nums en métricas, montos, fechas y tablas, para que las cifras se alineen.
Sin mayúsculas sostenidas
Nada en mayúsculas salvo el overline de grupos de navegación.
Líneas de 60 a 80 caracteres
En párrafos largos, limita el ancho para que la lectura sea cómoda.
Display solo en marketing
display-1 y display-2 son para piezas de marca y no se usan en producto.