Workbeat Design System
Fundamentos
Color, tipografía, tokens, marca, iconos, layout, themes y modo oscuro.
Fundamentos
Una base visual compartida en toda la plataforma Workbeat
Los componentes no conocen colores ni tamaños: leen tokens. Aquí está la capa que los define y cómo se resuelve con cada theme y en modo oscuro, manteniendo una experiencia coherente entre módulos.
Themes y modo oscuro
Cambia el theme y el modo en vivo, y entiende la precedencia default → theme → host.
Color
Paleta de marca y tokens semánticos de superficie, texto, estados e interacción.
Tipografía
Familias, escalas y pesos tipográficos.
Tokens
Referencia de tokens semánticos con su valor resuelto en el theme activo.
Marca
Logos, gráficos y lineamientos de uso de la marca Workbeat.
Iconografía
BoxIcon y lucide-react: cuándo usar cada uno.
Layout y composición
Anatomía de página, z-index y reglas de composición.