Color Palette

Brand colors, semantic mappings, chart colors, sidebar colors, and status indicators derived from the Figma source of truth.

Brand Palette

brand-50

0 0% 100%

brand-100

31 33% 88%

brand-300

32 33% 67%

brand-600

33 20% 31%

brand-800

199 27% 18%

brand-950

30 11% 4%

Semantic Mappings

These tokens change between light and dark mode. The swatches below reflect the current theme. All tokens are defined as CSS custom properties and mapped to Tailwind utility classes.

background

Light: brand-50 (white)

Dark: brand-950 (near-black)

foreground

Light: brand-950

Dark: brand-100

primary

Light: brand-800 (dark teal)

Dark: brand-100 (warm beige)

primary-foreground

Light: brand-50

Dark: brand-950

secondary

Light: brand-100

Dark: dark teal shade

secondary-foreground

Light: brand-950

Dark: brand-100

muted

Light: brand-100

Dark: dark teal shade

muted-foreground

Light: brand-600

Dark: brand-300

accent

Light: brand-100

Dark: dark teal shade

accent-foreground

Light: brand-950

Dark: brand-100

card

Light: brand-50

Dark: 199 27% 14%

card-foreground

Light: brand-950

Dark: brand-100

popover

Light: brand-50

Dark: 199 27% 14%

popover-foreground

Light: brand-950

Dark: brand-100

destructive

Light: error red

Dark: error red

border

Light: brand-100

Dark: 199 20% 16%

input

Light: brand-100

Dark: 199 20% 20%

ring

Light: brand-300 (golden)

Dark: brand-300 (golden)

Chart Colors

Sequential palette for data visualizations. Used by Recharts and other charting libraries.

chart-1

chart-2

chart-3

chart-4

chart-5

chart-1

Light: brand-800

Dark: brand-300

chart-2

Light: brand-600

Dark: brand-100

chart-3

Light: brand-300

Dark: brand-600

chart-4

Light: brand-100

Dark: brand-800

chart-5

Light: brand-950

Dark: brand-950

Sidebar Colors

Dedicated color tokens for sidebar components. These follow the same light/dark mapping pattern as the core semantic tokens.

sidebar

Light: brand-50

Dark: brand-950

sidebar-foreground

Light: brand-950

Dark: brand-100

sidebar-primary

Light: brand-800

Dark: brand-300

sidebar-primary-foreground

Light: brand-50

Dark: brand-950

sidebar-accent

Light: brand-100

Dark: 199 20% 12%

sidebar-accent-foreground

Light: brand-950

Dark: brand-100

sidebar-border

Light: brand-100

Dark: 199 20% 16%

sidebar-ring

Light: brand-300

Dark: brand-300

Status Colors

Fixed-value colors for communicating status and feedback. These do not change between themes.

success

160 84% 39%

warning

38 92% 50%

error

0 84% 60%

info

33 20% 31%

Composition Patterns

Common color pairings showing how semantic tokens combine in real components. These patterns adapt automatically between light and dark themes.

Card with emphasis

Monthly Revenue

$24,563

+12.5% from last month

Status indicators

ActivePendingFailedInactive

Primary action + secondary

Primary
Secondary
Accent
Muted

Design Guidelines

Do

  • Use semantic tokens, not brand values directly. Write bg-primary instead of bg-brand-800. Semantic tokens adapt to light/dark mode automatically.
  • Pair foreground tokens with their background. Always use text-primary-foreground on bg-primary to guarantee contrast.
  • Reserve destructive for irreversible actions. The destructive color carries strong semantic weight — use it only for delete, remove, or error states.
  • Use status colors consistently. Green for success, amber for warning, red for error, and brand-600 for informational. Never reassign these meanings.
  • Test both themes. Verify every screen in both light and dark mode. Semantic tokens handle the mapping, but layouts can still look unbalanced.

Don't

  • Don't hardcode hex or HSL values. Inline colors bypass the theme system and will break in dark mode. Use CSS variables or Tailwind tokens instead.
  • Don't rely on color alone to convey meaning. Always pair color with text labels, icons, or patterns so color-blind users can distinguish states (WCAG 1.4.1).
  • Don't use foreground colors on mismatched backgrounds. Combining text-card-foreground with bg-popover may look fine today but can drift on theme updates.
  • Don't introduce new color tokens without updating the theme. Ad-hoc colors create inconsistency. Extend the palette through CSS custom properties in the theme file.
  • Don't use opacity hacks for lighter shades. Prefer the actual brand scale (brand-100, brand-300) over bg-primary/20 for predictable results across backgrounds.

Developer Reference

Accessibility

  • All semantic foreground/background pairs meet WCAG 2.1 AA contrast (4.5:1 for normal text, 3:1 for large text).
  • Status colors are paired with text labels and icons — never rely on color alone to communicate state (WCAG 1.4.1).
  • The --ring token (brand-300) provides a visible focus indicator that meets the 3:1 contrast requirement against both light and dark backgrounds.
  • Dark mode uses carefully chosen HSL values (not simple inversions) to maintain perceived contrast and readability.

Usage

// Semantic background + foreground pairs
<div className="bg-primary text-primary-foreground">Primary</div>
<div className="bg-secondary text-secondary-foreground">Secondary</div>
<div className="bg-muted text-muted-foreground">Muted</div>
<div className="bg-accent text-accent-foreground">Accent</div>
<div className="bg-destructive text-white">Destructive</div>

// Card and popover surfaces
<div className="bg-card text-card-foreground">Card content</div>
<div className="bg-popover text-popover-foreground">Popover content</div>

// Borders and inputs
<div className="border border-border">Bordered element</div>
<input className="border border-input bg-background" />

// Focus ring
<button className="focus-visible:ring-3 focus-visible:ring-ring/50">
  Focusable
</button>

// Status colors (fixed across themes)
<span className="text-success">Success</span>
<span className="text-warning">Warning</span>
<span className="text-error">Error</span>

// CSS custom properties
color: hsl(var(--primary));
background: hsl(var(--background));