Colors

Semantic theme tokens — the design variables every component is built on, with light and dark values.

Each token maps a Figma variable to a CSS custom property and a Tailwind utility — e.g. --primary → bg-primary. Swatches reflect the active theme; the values column lists both the light and dark definitions pulled from globals.css.

Llight  D dark

Theme

--background
--foreground
--card
--card-foreground
--popover
--popover-foreground
--primary
--primary-foreground
--secondary
--secondary-foreground
--muted
--muted-foreground
--accent
--accent-foreground
--destructive
--border
--input
--ring
--background-color
--semantic-background
--semantic-border
--semantic-foreground

Charts

--chart-1
--chart-2
--chart-3
--chart-4
--chart-5

Sidebar

--sidebar
--sidebar-foreground
--sidebar-primary
--sidebar-primary-foreground
--sidebar-accent
--sidebar-accent-foreground
--sidebar-border
--sidebar-ring