Tipografía
Tres fuentes con un papel cada una y una escala propia de ocho pasos. El carácter de la marca vive aquí, en la tensión de la escala, más que en el color.
Tres fuentes, tres papeles
Manrope · Titula
font-displayDisplay, cabeceras de vista y títulos de tarjeta. Geometría apretada y tracking negativo.
Reservas de octubre
IBM Plex Sans · Habla
font-sansTexto corrido, etiquetas, botones y navegación. Aguanta seis horas de tabla.
Te esperamos a partir de las 15:00.
JetBrains Mono · Cuenta
font-monoImportes, fechas en tabla e identificadores: lo que se compara en columna.
BK-2045 · $1.240.000
La Regla de los Tres Papeles
Manrope solo titula, IBM Plex solo habla, JetBrains solo cuenta. Una cifra suelta en un párrafo va en la fuente del párrafo; una cifra que alguien va a comparar con la de la fila de abajo va en mono con tabular-nums. No hay una cuarta fuente, y no hay excepción decorativa.
Escala
12 / 14 / 16 / 20 / 26 / 34 / 44 / 56, con razón ≈1.28. No es la de Tailwind: el paquete reescribe text-xs…text-4xl con su altura de línea, que baja a medida que el tamaño sube, y un tracking cada vez más negativo. Desde 20 px la muestra va en Manrope, que es quien titula. Los dos pasos pequeños se multiplican por --density-text: en la densidad cómoda text-sm pasa de 14 a 16 px.
text-xs · 12 px
lh 1.5
Llegadas de hoy
text-sm · 14 px
lh 1.45
Llegadas de hoy
text-base · 16 px
lh 1.6
Llegadas de hoy
text-lg · 20 px
lh 1.4 · −0.01em
Llegadas de hoy
text-xl · 26 px
lh 1.3 · −0.015em
Llegadas de hoy
text-2xl · 34 px
lh 1.2 · −0.02em
Llegadas de hoy
text-3xl · 44 px
lh 1.1 · −0.02em
Llegadas de hoy
text-4xl · 56 px
lh 1.05 · −0.025em
Llegadas de hoy
Jerarquía
Seis niveles. Display solo en superficies públicas (portal del hotel, confirmación de reserva), nunca dentro del panel. Headline, una por pantalla. Title es el escalón de trabajo real del panel. El peso 600 es lo que separa una etiqueta de un dato.
Display · Manrope 700 · 56 px
Hola, Marta
Headline · Manrope 700 · 34 px
Reservas
Title · Manrope 600 · 20 px
Llegadas de hoy
Body · IBM Plex Sans 400 · 16 px
Te esperamos el viernes 16 a partir de las 15:00. Si llegas más tarde, escríbenos por WhatsApp y dejamos la llave en recepción.
Label · IBM Plex Sans 600 · 14 px
Huésped principal
Data · JetBrains Mono 500 · 14 px
BK-2045 · 16/10/2026 · $1.240.000
Cifras que se comparan
La Regla de los Tres Papeles en una pantalla de facturación: el importe del párrafo va en la fuente del párrafo; los de la lista, en font-mono tabular-nums, para que las unidades de mil caigan una debajo de otra.
La estancia de Marta Ocampo suma 3 noches y $1.240.000 con impuestos.
- Marta OcampoFV-1184$1.240.000
- Jorge RestrepoFV-1185$318.500
- Lucía HerreraFV-1186$2.075.000
- Andrés GilFV-1187$96.000
Etiquetas de sección
La Regla de la Etiqueta Callada
Las etiquetas de sección van en 12 px, peso 500, tracking abierto y color secundario. Nunca en mayúsculas dentro de un formulario: la mayúscula es para el rail y para las cabeceras de tabla, donde la palabra es un rótulo y no algo que se lee.
<p className="text-xs font-medium tracking-wide text-muted-foreground">
Datos de facturación
</p>Cargar las fuentes
Las tres llegan una sola vez desde @unozero-ai/design-tokens/fonts, auto-hospedadas con next/font; ninguna app las redefine. base.css pone los h1…h6 en Manrope, y el resto se elige con font-sans, font-display y font-mono. El paso completo está en Instalación.
import { brandFontVariables } from "@unozero-ai/design-tokens/fonts";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es" className={brandFontVariables}>
<body className="font-sans antialiased">{children}</body>
</html>
);
}