Tokens

Sistema tipográfico

Una sola familia, Mulish, en toda la marca. Escala, pesos y reglas leídos de tokens/typography.tokens.json. Los tamaños abajo se renderizan a su valor real.

Escala

Niveles H1–C. Tamaño / interlineado orientativos para pantalla.

Display Portada / marketing (no UI) 64px / 66px · extrabold 800 · MAYÚS · -0.02em

Los datos no ganan partidos

H1 Títulos de sección 48px / 64px · extrabold 800 · MAYÚS · 0.01em

Analizamos cada movimiento

H2 Subtítulos principales 28px / 36px · bold 700 · MAYÚS · 0.01em

Rendimiento del equipo

H3 Subtítulos secundarios 18px / 24px · semibold 600 · MAYÚS · 0.02em

Métricas clave del partido

B1 Destacados / datos clave 14px / 18px · bold 700 · MAYÚS · 0.02em

87.5% rendimiento

B2 Etiquetas / UI 12px / 14px · semibold 600 · MAYÚS · 0.04em

Posesión del balón

P Texto corrido 12px / 16px · regular 400

El equipo mantuvo una posesión promedio del 58% durante el segundo tiempo, con mayor volumen por la banda izquierda.

C Notas / pie de página 11px / 14px · regular 400

Datos actualizados al 12/05/2024.

Pesos

Mulish variable. Regular por defecto; SemiBold/Bold para énfasis; ExtraBold para display.

Regular · 400 AaBbCc 0123 — Datos que juegan a tu favor

Medium · 500 AaBbCc 0123 — Datos que juegan a tu favor

SemiBold · 600 AaBbCc 0123 — Datos que juegan a tu favor

Bold · 700 AaBbCc 0123 — Datos que juegan a tu favor

ExtraBold · 800 AaBbCc 0123 — Datos que juegan a tu favor

Reglas

Cómo se usa la tipografía en ONSIDE.

Usar únicamente Mulish, en las variantes definidas.
Mantener la jerarquía: no saltarse niveles para “rellenar”.
Alinear el texto siempre a la izquierda; evitar centrados en bloques.
Sin efectos: nada de sombras, contornos ni deformaciones.
El lima solo para destacar información, acción o estado positivo.
Datos y cifras con tabular-nums para que alineen en columnas.