Sistema de diseño
Tokens y componentes
Ocho piezas de interfaz construidas sobre los tokens de color y tipografía de la marca. Ninguna usa JavaScript: el sobrevuelo, el foco y el estado deshabilitado son CSS puro sobre elementos nativos. Recorre la página con la tecla Tab — el foco nunca desaparece. Más abajo está el catálogo completo de tokens: los ocho niveles tipográficos y la rampa de color.
Botón
Tres variantes según el peso de la acción: relleno para la principal, contorno para la secundaria, texto para la terciaria. El segundo botón de cada fila está deshabilitado — nota que sale de la fila de tabulación, porque un control real deshabilitado no debe recibir foco.
Enlace
Para texto corrido, no para acciones aisladas. Siempre subrayado — el color solo no basta para distinguirlo del texto alrededor.
Las fuentes de este sistema son Geist y Geist Mono, con licencia OFL 1.1: se pueden autoalojar, modificar e incrustar en un proyecto de cliente sin costo. Puedes revisar la licencia completa en vercel.com/font, o volver a la sección de Tarjeta de esta misma página.
Tarjeta
Sin estructura interna fija: el contenido se arma dentro del espacio de la tarjeta. La segunda es un enlace completo — pásale el cursor o dale Tab para ver el borde y el foco.
Sin acción
Borde decorativo (--borde), sin cambios al pasar el cursor: no es interactiva, así que no finge estados que no tiene.
Toda la tarjeta es un enlace
Borde funcional (--borde-control), sobrevuelo y foco visibles. Lleva a la sección de Etiqueta.
Etiqueta
Mono, versalitas, tracking abierto — el mismo nivel tipográfico "etiqueta" de la escala, en dos colores y dos formas.
Separador
Sin foco ni sobrevuelo: no es interactivo. Horizontal para separar bloques, vertical para separar elementos en una misma fila.
Contraste del botón relleno
--sobre-acento (#FFF7F3) sobre --acento(#C0492B): 4,69:1. Cumple AA para texto normal. Calculado con la fórmula de luminancia relativa de WCAG, no estimado a ojo.
Ocho niveles
Los ocho niveles tipográficos de tokens.css, con su tracking negativo en los tamaños grandes.
Construimos el nuestro primero.
La excepción.
Ocho niveles, una sola familia tipográfica.
El peso y el tamaño hacen el contraste.
Geist Sans y Geist Mono, licencia OFL.
Este es el texto corrido del sistema: interlineado amplio, sin tracking, pensado para párrafos largos y buena lectura en pantalla.
Texto de apoyo para notas, metadatos y detalles secundarios de la interfaz.
Tokens de marca
Rampa completa
Cada par de esta rampa está calculado contra el criterio AA de WCAG, no estimado a ojo.
Óxido
Neutros
Estados
El 600 nunca es texto pequeño sobre negro
El color de la marca, #C0492B, da 3,99:1 sobre negro: por debajo del 4,5:1 que exige AA para texto normal. Por eso el texto de acento en tamaño de cuerpo usa siempre el 400 (#E68A66, 7,72:1), como en las etiquetas de esta página. El 600 solo aparece como texto en titulares de 24 px o más — el umbral de AA baja a 3:1 en ese tamaño, sin importar el peso.
Titular de 28 px en 600 — cumple AA para texto grande