Skip to main content
A consistent palette for building interfaces. All colors work seamlessly in both light and dark modes.

​
Color Palettes

​
Primary Colors

Main brand colors used for primary actions and emphasis.
TokenCSS VariableUsage
Primary--primaryPrimary buttons, Links, Focus states, Key actions
Primary Foreground--primary-foregroundButton text, Text on primary surfaces

​
Secondary Colors

Secondary colors for supporting elements and subtle actions.
TokenCSS VariableUsage
Secondary--secondarySecondary buttons, Subtle backgrounds, Hover states
Secondary Foreground--secondary-foregroundText on secondary surfaces, Secondary button text

​
Neutral Colors

Base colors for text, backgrounds, and UI elements.
TokenCSS VariableDescriptionUsage
Background--backgroundMain background colorPage backgrounds, Main content areas
Foreground--foregroundPrimary text colorBody text, Headings, Primary content
Card--cardCard background colorCard backgrounds, Elevated surfaces
Card Foreground--card-foregroundText color on card backgroundsText on cards, Card content
Popover--popoverPopover background colorDropdown backgrounds, Tooltip backgrounds, Modal overlays
Popover Foreground--popover-foregroundText color on popover backgroundsDropdown text, Tooltip text, Modal content
Muted--mutedMuted background colorDisabled states, Subtle backgrounds, Code blocks
Muted Foreground--muted-foregroundMuted text colorSecondary text, Captions, Placeholder text

​
Accent Colors

Accent colors for highlights and special states.
TokenCSS VariableUsage
Accent--accentHover states, Active states, Highlights
Accent Foreground--accent-foregroundText on accent surfaces, Active link text

​
Semantic Colors

Colors that convey meaning and state.
TokenCSS VariableUsage
Destructive--destructiveError states, Delete buttons, Warning messages
Destructive Foreground--destructive-foregroundError button text, Text on error backgrounds
Border--borderInput borders, Card borders, Dividers
Input--inputForm inputs, Text areas, Select borders
Ring--ringFocus indicators, Keyboard navigation, Accessibility

​
Brand & Status Colors

Brand identity and status indication colors.
TokenCSS VariableUsage
Brand--brandBrand accents, Highlights, Badges
Brand Foreground--brand-foregroundText on brand surfaces, Brand buttons
Success--successSuccess alerts, Positive states, Badges
Success Foreground--success-foregroundText on success surfaces
Warning--warningWarning alerts, Cautionary states, Badges
Warning Foreground--warning-foregroundText on warning surfaces

​
Light vs Dark Mode Values

Core surface and text colors with their specific values in both light and dark themes.
| Token | HSL Value | |-------|-----------| | Background | hsl(0 0% 96%) | | Foreground | hsl(0 0% 11%) | | Card | hsl(0 0% 99%) | | Card Foreground | hsl(236.05 1.67% 18.72%) | | Popover | hsl(0 0% 100%) | | Popover Foreground | hsl(236.05 1.66% 18.88%) |

​
Accessibility

All color pairings meet WCAG accessibility standards:
  • Primary on Background: AA+ rating
  • Muted Text: AA rating (sufficient contrast for secondary information)

​
Color Pairings

Always pair colors with their designated foreground colors:
  • Primary + Primary Foreground
  • Secondary + Secondary Foreground
  • Brand + Brand Foreground
  • Muted + Muted Foreground

​
Best Practices

Do

  • Use CSS variables for all color references
  • Test colors in both light and dark modes
  • Maintain sufficient contrast for accessibility (WCAG AA: 4.5:1)
  • Use semantic color names (primary, secondary, etc.)
  • Follow the established color hierarchy
  • Pair colors with their designated foreground colors

Don't

  • Hard-code color values in components
  • Use colors that don’t exist in the system
  • Override theme colors without considering accessibility
  • Mix light and dark mode color values
  • Create custom colors without design approval
  • Use insufficient contrast ratios (< 4.5:1)

​
Implementation

​
Using CSS Variables

.my-component {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--border));
}

​
Using Tailwind Classes

<div class="bg-primary text-primary-foreground border border-border">Content</div>