<!-- Generado automáticamente por scripts/generate-docs.mjs. No editar a mano. -->
<!-- Fuente: src/app/tipografia/page.tsx -->

# Tipografía

Usa tipografía para hacer contenido legible y hermoso.

## Familia tipográfica

Geist es una tipografía inspirada en la tradición del diseño suizo, construida sobre principios de simplicidad, minimalismo y precisión.

Diseñada especialmente para desarrolladores y diseñadores, prioriza la legibilidad en entornos digitales y de alta usabilidad, permitiendo comunicar ideas con claridad, velocidad y funcionalidad.

Geist

## Escala tipográfica

La escala tipográfica de Lexy entrega una dirección visual clara y roles semánticos para crear jerarquías escaneables y una experiencia de producto equilibrada.

## Estilo de texto

A veces es necesario aplicar formatos distintos para indicar jerarquía o prominencia. La legibilidad debe guiar cualquier decisión de estilo y formato.

### Uso de mayúsculas

Usa **sentence case** (estilo oración) en todo el texto de interfaz: títulos, labels, botones, navegación y microcopy.

**Evita ALL CAPS** en toda la UI Lexy. No uses mayúsculas para metadatos, eyebrow text ni etiquetas compactas: rompen el ritmo de lectura, reducen el contraste de jerarquía y se sienten ruidosas frente al tono sobrio de la marca. Las únicas excepciones legítimas son siglas consolidadas (RUT, RUN, ID, SII) y abreviaciones institucionales que ya existen así en el mundo real.

Si necesitas separar metadatos del contenido, usa color neutral 3, tamaño menor y peso medium — no mayúsculas.

### Alineación

Usa alineación izquierda para bloques largos en español e inglés.

La alineación centrada debe limitarse a momentos breves e intencionales, como estados vacíos o módulos compactos.

### Color

Usa colores neutros para texto primario y secundario.

Aplica el color de marca con moderación para enfatizar links, estados activos, etiquetas pequeñas o puntos clave de la jerarquía.

## Tokens

Familias, pesos y escala tipográfica completa (size / line-height / weight). La escala sigue Material 3.

| Token | Valor | Uso |
| --- | --- | --- |
| `font.heading` | `Geist Sans (Vercel)` | Display, titles y CTAs. Pesos 400/500/600. |
| `font.body` | `Geist Sans (Vercel)` | Body, labels, captions. Una sola familia para reducir carga. |
| `font.mono` | `Geist Mono` | Snippets, código, identificadores tipo C-2984-2025. |
| `--fontFamilyBase` | `var(--font-geist-sans), Segoe UI, system-ui, sans-serif` | Stack canónico con fallback. |
| `--fontFamilyMonospace` | `Consolas, 'Courier New', monospace` | Stack monospace legacy de Fluent (preferir --font-geist-mono). |
| `--fontWeightRegular` | `400` | Body, captions. |
| `--fontWeightMedium` | `500` | Labels, títulos, énfasis ligero. |
| `--fontWeightSemibold` | `600` | Display, headings principales. |
| `--fontWeightBold` | `700` | Reservado para badges o números clave. |
| `Display Large` | `96px / 104px / Medium` | Hero principal de marca. |
| `Display Medium` | `68px / 92px / Medium` | Mensajes de marca. |
| `Display Small` | `40px / 52px / Medium` | Títulos expresivos de página. |
| `Headline Large` | `32px / 40px / Medium` | Títulos de página estándar. |
| `Headline Medium` | `28px / 36px / Medium` | Secciones principales. |
| `Headline Small` | `24px / 32px / Medium` | Subsecciones. |
| `Title Large` | `20px / 26px / Medium` | Títulos destacados de bloque. |
| `Title Medium` | `16px / 22px / Medium` | Énfasis en UI (cards, listas). |
| `Title Small` | `14px / 20px / Medium` | Títulos compactos en toolbar. |
| `Body Large` | `16px / 24px / Regular` | Texto extenso de lectura. |
| `Body Medium` | `14px / 20px / Regular` | Body por defecto de la UI. |
| `Body Small` | `12px / 16px / Regular` | Captions, help text, metadatos. |
| `Label Large` | `14px / 20px / Medium` | Labels de formulario. |
| `Label Medium` | `12px / 16px / Medium` | Labels compactos, badges. |
| `Label Small` | `11px / 16px / Medium` | Microcopy y metadatos compactos. SIEMPRE en sentence case — Lexy no usa all caps. |