Sistema
Tipografía
Instrument Serif, DM Sans y JetBrains Mono — familias, jerarquía y reglas de uso.
Tres familias, roles claros. Serif editorial para voz de marca y títulos; sans-serif limpia para cuerpo y UI; monoespaciada solo para datos técnicos. Nunca al revés.
Familias
| Familia | Rol | Source |
|---|---|---|
| Instrument Serif | Títulos H1–H3, título de página, marca, voz | Google Fonts (next/font/google) |
| DM Sans | Cuerpo, UI, lead, labels, microcopy | Google Fonts |
| JetBrains Mono | Datos, código, numeración, etiquetas | Google Fonts |
Jerarquía
Título de página
Heading H1
Heading H2
Heading H3
H4 / Label — Eyebrow editorial
Lead paragraph — DM Sans 300, introductorio.
Body — DM Sans 400, el cuerpo principal de texto.
Small — DM Sans 400, captions y notas al pie.
Mono — JetBrains Mono 400, datos y código
Tabla de referencia
| Nivel | Familia | Tamaño / LH | Tracking | Notas |
|---|---|---|---|---|
| Título de página | Instrument Serif 400 | clamp(2.2rem, 5vw, 3.5rem) / 1.08 | −2% | DocsTitle, fuera del MDX |
| H1 | Instrument Serif 400 | clamp(1.8rem, 4vw, 2.6rem) / 1.1 | −2% | Heading principal en MDX |
| H2 | Instrument Serif 400 | clamp(1.4rem, 3vw, 1.9rem) / 1.2 | 0 | Sub-heading |
| H3 | Instrument Serif 400 | clamp(1.15rem, 2.5vw, 1.5rem) / 1.25 | 0 | Tercer nivel |
| H4 / Label | DM Sans 700 uppercase | 0.78rem | +10% | Eyebrow editorial, breadcrumbs, sidebar label |
| Lead | DM Sans 300 | 18 / 1.65 | 0 | Intro de sección |
| Body | DM Sans 400 | 16 / 1.6 | 0 | Cuerpo principal |
| Small | DM Sans 400 | 14 / 1.55 | 0 | Captions, notas |
| Mono | JetBrains Mono | 13 / 1.6 | +5% | Solo datos / numeración |
Reglas tipográficas
- Serif solo en títulos, display y cuerpo editorial largo. Nunca UI, botones, microcopy.
- No mezclar más de dos familias serif. No sustituir Instrument Serif por una "parecida".
- Leading generoso (1.55–1.7) en cuerpo. Tracking negativo en display grande.
- Mono no es decoración. Solo datos, código, versiones o numeraciones tipo
01 — 02 — 03. - Label para metadata de navegación. Breadcrumbs, tags, sidebar labels y categorías usan el estilo Label (uppercase, tracking +10%, DM Sans 700) con color primario (teal) para el item activo.
- Hablar en segunda persona (
tu flujo,lo que haces).
Specimen
La IA es una capa, no el centro. — Instrument Serif italic, la voz editorial de la marca en su expresión más mínima.