'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Diseña con las piezas que publicas
Color, tipografía, espacio e íconos como tokens de diseño W3C, las pautas detrás de ellos y un kit de Figma hecho de la misma fuente. Lo que dibujas es lo que se construye.
--alea-accent--alea-surface--alea-text--alea-text-muted--alea-border-strong--alea-status-success
Factura pagada
PagadaEl mismo componente, tres temas, cero sobrescrituras.
En esta sección
Fundamentos y pautas
- ColoresOcho escalas OKLCH del Palette Generator, y los tokens semánticos que cambian entre oscuro y claro.
- TipografíaCrimson Pro para títulos, Inter para todo lo demás, JetBrains Mono para código, en una sola escala de tamaños.
- Espacio y tamañosUna escala de espacio de 4 px, alturas de controles, radios y sombras.
- ÍconosÍconos de Lucide en los tamaños y el trazo del kit, a través de un componente Icon que puedes apuntar a otro set.
- AccesibilidadLo que hace cada componente por el teclado, el lector de pantalla, el contraste y el movimiento, y lo que todavía te toca a ti.
- Kit de FigmaLos mismos tokens como variables de Figma en Dark y Light, y componentes con las mismas props.
Principios
A lo que vuelve cada decisión
Accesible primero
El contraste, el foco, las áreas táctiles y el movimiento se deciden en los tokens, así cada pantalla parte de valores accesibles.
Tokens de punta a punta
Las primitivas alimentan los tokens base, y los base a los semánticos. Los componentes solo leen tokens semánticos, así un tema es un solo archivo.
Superficies tranquilas
Fondos sobrios y acentos cálidos. El color es para dar significado y para la acción que importa.
Movimiento con sentido
Cada animación dice qué cambió. Nada se mueve por moverse, y nada se desplaza con movimiento reducido.
Contraste
Revisa cualquier par, en ambos temas
Elige un token de texto y una superficie. El contraste se mide con los colores reales, así ves lo que se publica en oscuro y en claro.
color: var(--alea-text-muted); background: var(--alea-surface);Cómo fluyen los tokens
Tres capas, una dirección
Cambia una primitiva y todos los temas la siguen. Cambia un token semántico y solo cambia su significado. Los componentes nunca se saltan una capa.
- 1PrimitivasEscalas puras
--alea-purple-500 - 2BaseTipografía, espacio, radio, movimiento
--alea-space-4 - 3SemánticosSignificado, por tema
--alea-accent
Hazlo tuyo
Tu marca, a partir de tres elecciones
Elige un acento, un radio y una densidad. brandVariables los convierte en los tokens, y cada componente los sigue.
--alea-radius-xs--alea-radius-sm--alea-radius-field--alea-radius-md--alea-radius-lg--alea-radius-xlPago
Ana Rivas · Plan de equipo
Puestos usados
8 de 10
Al pagar aceptas los términos.
Preguntas