La deriva visual de un panel casi nunca viene de un cambio grande, sino de valores de color, espaciados y componentes de un solo uso repartidos por el código: el mismo «éxito» aparece en tres verdes distintos y cambiar de tema obliga a tocar decenas de archivos.
admin-design empieza por los tokens y las estructuras, y solo después habla de páginas.
El color describe el propósito, no el valor
El color pasa solo por clases de utilidad semánticas: bg-card, text-muted-foreground, text-success, border-destructive. Cambiar de tema cambia tokens, no código de negocio.
Las paletas funcionan en dos capas: seis predefinidas (teal, blue, forest, violet, amber, graphite y personalizada) fijan el tono general, mientras los colores base (neutral, stone, zinc y otros) y los colores de tema entre dieciocho matices lo ajustan. Los modos claro y oscuro guardan elecciones separadas.
La accesibilidad no es un añadido: tamaño y peso de texto, alto contraste, apoyo a la visión del color, reducción de movimiento y enlaces subrayados están en ajustes. Las preferencias quedan en el navegador y nunca entran en los datos de negocio.
Todos los gráficos son SVG dibujado a mano
Líneas, barras, anillos, mini barras, barras horizontales, mapas de calor, radar, embudo y Gantt comparten un mismo juego de colores semánticos, siguen los modos claro y oscuro y llevan role="img" con una aria-label que explica qué muestra el gráfico.
El precio de cero dependencias es mantener coordenadas y escalas. La recompensa es el control sobre el tamaño del paquete, las auditorías y la coherencia del tema: no hay un segundo sistema de color que sincronizar.
La galería es la superficie de aceptación
Nueve categorías de componentes viven en nueve páginas y cada control tiene una ubicación real. Modificar un componente exige actualizar antes su ejemplo en la galería; una capacidad nueva se entrega como ejemplo, ubicación real y prueba. La documentación no puede separarse de la implementación y la revisión tiene un único lugar con el que comparar.