Colors

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.

Token	CSS Variable	Usage
Primary	`--primary`	Primary buttons, Links, Focus states, Key actions
Primary Foreground	`--primary-foreground`	Button text, Text on primary surfaces

Secondary Colors

Secondary colors for supporting elements and subtle actions.

Token	CSS Variable	Usage
Secondary	`--secondary`	Secondary buttons, Subtle backgrounds, Hover states
Secondary Foreground	`--secondary-foreground`	Text on secondary surfaces, Secondary button text

Neutral Colors

Base colors for text, backgrounds, and UI elements.

Token	CSS Variable	Description	Usage
Background	`--background`	Main background color	Page backgrounds, Main content areas
Foreground	`--foreground`	Primary text color	Body text, Headings, Primary content
Card	`--card`	Card background color	Card backgrounds, Elevated surfaces
Card Foreground	`--card-foreground`	Text color on card backgrounds	Text on cards, Card content
Popover	`--popover`	Popover background color	Dropdown backgrounds, Tooltip backgrounds, Modal overlays
Popover Foreground	`--popover-foreground`	Text color on popover backgrounds	Dropdown text, Tooltip text, Modal content
Muted	`--muted`	Muted background color	Disabled states, Subtle backgrounds, Code blocks
Muted Foreground	`--muted-foreground`	Muted text color	Secondary text, Captions, Placeholder text

Accent Colors

Accent colors for highlights and special states.

Token	CSS Variable	Usage
Accent	`--accent`	Hover states, Active states, Highlights
Accent Foreground	`--accent-foreground`	Text on accent surfaces, Active link text

Semantic Colors

Colors that convey meaning and state.

Token	CSS Variable	Usage
Destructive	`--destructive`	Error states, Delete buttons, Warning messages
Destructive Foreground	`--destructive-foreground`	Error button text, Text on error backgrounds
Border	`--border`	Input borders, Card borders, Dividers
Input	`--input`	Form inputs, Text areas, Select borders
Ring	`--ring`	Focus indicators, Keyboard navigation, Accessibility

Brand & Status Colors

Brand identity and status indication colors.

Token	CSS Variable	Usage
Brand	`--brand`	Brand accents, Highlights, Badges
Brand Foreground	`--brand-foreground`	Text on brand surfaces, Brand buttons
Success	`--success`	Success alerts, Positive states, Badges
Success Foreground	`--success-foreground`	Text on success surfaces
Warning	`--warning`	Warning alerts, Cautionary states, Badges
Warning Foreground	`--warning-foreground`	Text on warning surfaces

Light vs Dark Mode Values

Core surface and text colors with their specific values in both light and dark themes.

Light Mode
Dark Mode

| 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%) |

| Token | HSL Value | |-------|-----------| | Background | hsl(240 14% 10%) | | Foreground | hsl(0 0% 100%) | | Card | hsl(234 17% 12%) | | Card Foreground | hsl(236.05 20.05% 91.2%) | | Popover | hsl(235 16% 15%) | | Popover Foreground | hsl(236.03 23.75% 91.7%) |

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>

Foundations

Components

Guidelines

Color Palettes

Primary Colors

Secondary Colors

Neutral Colors

Accent Colors

Semantic Colors

Brand & Status Colors

Light vs Dark Mode Values

Accessibility

Color Pairings

Best Practices

Do

Don't

Implementation

Using CSS Variables

Using Tailwind Classes

​Color Palettes

​Primary Colors

​Secondary Colors

​Neutral Colors

​Accent Colors

​Semantic Colors

​Brand & Status Colors

​Light vs Dark Mode Values

​Accessibility

​Color Pairings

​Best Practices

Do

Don't

​Implementation

​Using CSS Variables

​Using Tailwind Classes

Color Palettes

Primary Colors

Secondary Colors

Neutral Colors

Accent Colors

Semantic Colors

Brand & Status Colors

Light vs Dark Mode Values

Accessibility

Color Pairings

Best Practices

Implementation

Using CSS Variables

Using Tailwind Classes