Color System

Complete color palette with CSS custom properties from globals.css

infoThese colors automatically adapt to your system's dark/light mode preference using the theme toggle in the top navigation.

Layout Colors

5 colors
Background
Layout

Main background color for pages and containers

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Foreground
Layout

Primary text color for optimal readability

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Card
Layout

Background for card components and elevated surfaces

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Card Foreground
Layout

Text color for content inside cards

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Border
Layout

Subtle borders for dividers and component outlines

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:

Interactive Colors

6 colors
Primary
Interactive

Main brand color for primary actions and highlights

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Primary Foreground
Interactive

Text color for primary buttons and elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Secondary
Interactive

Secondary actions and alternative button styles

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Secondary Foreground
Interactive

Text color for secondary buttons and elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Accent
Interactive

Subtle accent color for hover states and highlights

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Accent Foreground
Interactive

Text color for accent elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:

Feedback Colors

6 colors
Destructive
Feedback

Error states, delete actions, and warning indicators

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Destructive Foreground
Feedback

Text color for destructive buttons and error messages

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Success
Feedback

Success states, confirmation messages, and positive feedback

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Success Foreground
Feedback

Text color for success buttons and confirmation messages

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Muted
Feedback

Subtle background for disabled or secondary content

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Muted Foreground
Feedback

Text color for secondary information and placeholders

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:

Form Colors

2 colors
Input
Form

Background color for form inputs and text fields

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Ring
Form

Focus ring color for keyboard navigation and accessibility

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:

Overlay Colors

2 colors
Popover
Overlay

Background for popovers, tooltips, and floating elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Popover Foreground
Overlay

Text color for popover content

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:

Chart Colors

5 colors
Chart 1
Chart

Primary chart color for data visualization

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Chart 2
Chart

Secondary chart color for data visualization

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Chart 3
Chart

Tertiary chart color for data visualization

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Chart 4
Chart

Quaternary chart color for data visualization

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Chart 5
Chart

Quinary chart color for data visualization

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:

Sidebar Colors

8 colors
Sidebar
Sidebar

Background color for sidebar navigation components

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Foreground
Sidebar

Text color for sidebar content and navigation items

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Primary
Sidebar

Primary color for sidebar active states and highlights

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Primary Foreground
Sidebar

Text color for sidebar primary elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Accent
Sidebar

Accent color for sidebar hover states and secondary highlights

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Accent Foreground
Sidebar

Text color for sidebar accent elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Border
Sidebar

Border color for sidebar dividers and separators

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
Sidebar Ring
Sidebar

Focus ring color for sidebar navigation elements

CSS Variable:
CSS Usage:
Light HSL:
Dark HSL:
lightbulb_onUsage Guidelines

✅ Best Practices

  • • Always use CSS custom properties: hsl(var(--primary))
  • • Use Tailwind classes: bg-primary text-primary-foreground
  • • Ensure proper contrast ratios for accessibility
  • • Test both light and dark modes thoroughly

❌ Avoid

  • • Hardcoded colors: #3b82f6 or blue-500
  • • RGB values: rgb(59, 130, 246)
  • • Creating separate CSS files for colors
  • • Using colors without considering contrast