Tipografía

Apilar text-sm font-medium leading-5 tracking-tight deja cuatro decisiones sueltas que la próxima persona va a combinar distinto. Una sola clase las fija juntas, y cambiar la escala es cambiar el token, no buscar cien usos.

/* bien */
<h2 className="text-heading-md">Tráfico por origen</h2>

/* mal: cuatro decisiones sueltas que nadie va a repetir igual */
<h2 className="text-lg font-semibold leading-tight tracking-tight">…</h2>

• text-display-lgIngresos
• text-display-mdIngresos
• text-display-smIngresos

• text-heading-lgTráfico por origen
• text-heading-mdTráfico por origen
• text-heading-smTráfico por origen

• text-body-lgLos componentes se instalan con un comando y el código queda en tu repositorio.
• text-body-mdLos componentes se instalan con un comando y el código queda en tu repositorio.
• text-body-smLos componentes se instalan con un comando y el código queda en tu repositorio.

• text-label-lgÚltimos 30 días
• text-label-mdÚltimos 30 días
• text-label-smÚltimos 30 días

• font-sans

  Geist Sans

  Todo el texto de interfaz. Autoalojada con next/font, sin pedidos a terceros en runtime.

• font-mono

  Geist Mono

  Código, comandos y rutas de archivo. No como disfraz de «técnico» sobre texto común.

Cualquier elemento que muestre números lleva data-orbit-numeric="". Activa numerales tabulares, así los dígitos no cambian de ancho al animarse un contador o al cambiar el rango de un chart.

Mirá el ancho del 1 en cada columna: a la izquierda es más angosto que el resto y las cifras no alinean.