Colors

The color palette defines the visual identity. These semantic tokens ensure consistent usage across all components.

Base Colors

Primary background and foreground colors.

Background

--background

Foreground

--foreground

Card

--card

Card Foreground

--card-foreground

Primary & Secondary

Main action colors and their alternatives.

Primary

--primary

Primary Foreground

--primary-foreground

Secondary

--secondary

Secondary Foreground

--secondary-foreground

Muted & Accent

Subtle backgrounds and highlighted elements.

Muted

--muted

Muted Foreground

--muted-foreground

Accent

--accent

Accent Foreground

--accent-foreground

Semantic Colors

Colors that convey meaning.

Destructive

--destructive

Border

--border

Ring

--ring

Chart Colors

Palette for data visualization.

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Sidebar Colors

Specific palette for sidebar navigation.

Sidebar

--sidebar

Sidebar Foreground

--sidebar-foreground

Sidebar Primary

--sidebar-primary

Sidebar Accent

--sidebar-accent

Usage Examples

How colors work together in components.

Card Example

Cards use bg-card with text-card-foreground

Muted backgrounds work well for secondary content areas and provide visual separation.

Dark Mode

Toggle dark mode to see how colors adapt.

Use the theme toggle in the header to switch between light and dark modes. All color tokens automatically adapt to provide appropriate contrast.

CSS Variables Reference

Copy these variables to customize the theme.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
}