Colors
The design system uses a cohesive color palette with support for light and dark modes. Colors are defined as CSS variables in setup.css for easy customization.
Brand
3 tokensCore brand colors that define the identity of the design system.
--primaryMain brand color for interactive elements and headlines.
Light
Dark
--secondaryComplementary color for supporting UI elements.
Light
Dark
--tertiaryAccent color providing additional visual variety.
Light
Dark
Semantic
4 tokensStatus and feedback colors communicating state at a glance.
--infoInformational messages and neutral notifications.
Light
Dark
--successPositive outcomes, confirmations, and completion states.
Light
Dark
--warningCaution states and advisory notices.
Light
Dark
--errorCritical errors and destructive action feedback.
Light
Dark
Surface
4 tokensBackground and container colors that form the UI canvas.
--backgroundBase page background.
Light
Dark
--cardElevated surface for cards and panels.
Light
Dark
--mutedDe-emphasized backgrounds for subdued areas.
Light
Dark
--borderDividers and component boundaries.
Light
Dark
Data Visualization
5 tokensA sequential palette for charts and data graphics.
--chart-1Light
Dark
--chart-2Light
Dark
--chart-3Light
Dark
--chart-4Light
Dark
--chart-5Light
Dark
Usage
import '@/lib_public/setup.css'
// Use CSS variables as tailwind classes
<div className="bg-primary text-primary-foreground">
Primary color background with foreground text
</div>