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.

Display

Para momentos de máximo impacto visual. Se usa en heroes, pantallas de bienvenida y mensajes de marca donde el tamaño comunica jerarquía antes que el contenido.

Display Large96px / 104px · MediumHero principal

Display Medium68px / 92px · MediumMensajes de marca

Display Small40px / 52px · MediumTítulos expresivos

Headline

Para estructurar el contenido en secciones claras. Estos estilos guían al usuario a través de la jerarquía de la página sin competir con los displays.

Headline Large32px / 40px · MediumTítulos de página

Headline Medium28px / 36px · MediumSecciones principales

Headline Small24px / 32px · MediumSubsecciones

Title

Para nombrar componentes, grupos de contenido y elementos de navegación. Aportan énfasis sin generar ruido visual en superficies densas.

Title Large20px / 26px · MediumTítulos destacados

Title Medium16px / 22px · MediumÉnfasis en UI

Title Small14px / 20px · MediumTítulos compactos

Body

Para texto de lectura y contenido corrido. Optimizados para legibilidad en bloques largos dentro de formularios, tarjetas y páginas de documentación.

Body Large16px / 22px · RegularTexto principal

Body Medium14px / 20px · RegularTexto de lectura

Body Small12px / 16px · RegularAyudas y metadatos

Label

Para elementos funcionales de la interfaz: botones, etiquetas, chips y campos. Su peso medio les da presencia en tamaños pequeños sin perder legibilidad.

Label Large14px / 20px · MediumLabels y acciones

Label Medium12px / 16px · MediumEtiquetas breves

Label Small10px / 14px · MediumMicroetiquetas

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.