Colors
Design tokens that define the visual identity of the system. Each token has a clear purpose: background, text, borders, accents, semantic states, or charts.
Base Colors
Foundational colors for backgrounds, text, borders, inputs, and focus rings.
Background
Main app background
--backgroundForeground
Default text color
--foregroundBorder
UI borders and dividers
--borderInput
Input field backgrounds
--inputRing
Focus ring for inputs/buttons
--ringSemantic Colors
Brand, secondary, accents, muted tones, and destructive states.
Primary
Brand / primary actions
--primaryPrimary Foreground
Text/icons on primary
--primary-foregroundSecondary
Secondary surfaces
--secondarySecondary Foreground
Text/icons on secondary
--secondary-foregroundAccent
Highlights & accents
--accentAccent Foreground
Text/icons on accents
--accent-foregroundMuted
Subtle backgrounds
--mutedMuted Foreground
Muted text / captions
--muted-foregroundDestructive
Errors & danger states
--destructiveSurfaces
Cards, popovers, and their foregrounds.
Card
Card backgrounds
--cardCard Foreground
Text/icons on cards
--card-foregroundPopover
Popover / dropdowns
--popoverPopover Foreground
Text/icons on popovers
--popover-foregroundChart Colors
Categorical colors for data visualizations.
Chart 1
Data visualization color 1
--chart-1Chart 2
Data visualization color 2
--chart-2Chart 3
Data visualization color 3
--chart-3Chart 4
Data visualization color 4
--chart-4Chart 5
Data visualization color 5
--chart-5Sidebar
Specialized tokens for navigation surfaces.
Sidebar
Sidebar background
--sidebarSidebar Foreground
Sidebar text/icons
--sidebar-foregroundSidebar Primary
Primary actions in sidebar
--sidebar-primarySidebar Primary Foreground
Text/icons on primary
--sidebar-primary-foregroundSidebar Accent
Accent surfaces in sidebar
--sidebar-accentSidebar Accent Foreground
Text/icons on accent
--sidebar-accent-foregroundSidebar Border
Sidebar borders
--sidebar-borderSidebar Ring
Focus rings in sidebar
--sidebar-ring