Fundamentos
Colores
Obsidiana, marfil y dorado — sin degradados, sin sombras, solo color plano. Radio de 6px y transiciones de 150ms sin rebote son la regla en toda la librería, no algo específico de un componente. Esto es lo único que necesitas leer una vez; las páginas de cada componente no la repiten.
Marca
Estado (semánticos)
Excepción acotada a la paleta de marca — solo para cuando la acción en sí comunica algo (confirmar, eliminar, advertir), nunca como alternativa decorativa. Mismos tonos apagados que el resto de la marca. Warning se corrió deliberadamente lejos del hue del dorado para no confundirse con una acción primaria.
Gráficas
Tres colores para identidad de serie, no ocho. El dorado de marca ocupa ~78° de matiz y los cuatro semánticos de arriba ya toman 31°, 59°, 129° y 242° — el único arco libre de la rueda para series nuevas es 78°→308°, y esos tres tonos lo llenan completo sin invadir el significado de ningún semántico. Una cuarta serie (o un "otros") cae a un gris neutro, no a un hue nuevo. Validado con separación de contraste para daltonismo, no a ojo — ver Chart.
Cómo los lee cada componente
Un mismo token (danger, por ejemplo) no se pinta igual en todos lados. Cada componente decide su propia lectura:
| Componente | Lectura |
|---|---|
| Button | Relleno sólido, texto en -foreground |
| Badge | Fondo tintado (mismo hue, menos saturación) |
| Alert | Fondo muy sutil + borde |
| Alert Dialog | Marcas de esquina + ícono opcional en badge |
| Attachment | Riel de progreso (dorado) o ícono + borde (danger) |
| Avatar | Punto de estado (dot) — único lugar sin ser un fondo/borde |
| Input | Borde + anillo de foco |
| Toast | Acento (borde lateral o ícono), no fondo dominante — pendiente |
Solo Toast sigue pendiente — el resto de la tabla ya está construido, marcado arriba.