Colors

Empathy DS uses an opinionated color system encoded in oklch for perceptual uniformity.

IMPORTANT

Empathy DS is intentionally not customizable. We provide a carefully tested, accessible color palette. Use it as-is for consistency and accessibility.

Why oklch?

• Perceptually uniform - Colors with the same lightness value appear equally bright
• Better for accessibility - Easier to maintain consistent contrast ratios
• Smooth gradients - No muddy midpoints when transitioning between colors
• Wide gamut - Supports modern P3 displays

Color Tokens

Semantic Colors

These are the primary color tokens used throughout Empathy DS:

Token	Light Mode	Dark Mode	Usage
background	oklch(1 0 0)	oklch(0 0 0)	Page/app background
foreground	oklch(0.1884 0.0128 248.5103)	oklch(0.9328 0.0025 228.7857)	Primary text color
card	oklch(0.9784 0.0011 197.1387)	oklch(0.2097 0.008 274.5332)	Card background
card-foreground	oklch(0.1884 0.0128 248.5103)	oklch(0.8853 0 0)	Text on cards
popover	oklch(1 0 0)	oklch(0 0 0)	Popover background
popover-foreground	oklch(0.1884 0.0128 248.5103)	oklch(0.9328 0.0025 228.7857)	Text on popovers
primary	oklch(0.6723 0.1606 244.9955)	oklch(0.6692 0.1607 245.011)	Primary brand color
primary-foreground	oklch(1 0 0)	oklch(1 0 0)	Text on primary
secondary	oklch(0.1884 0.0128 248.5103)	oklch(0.9622 0.0035 219.5331)	Secondary backgrounds
secondary-foreground	oklch(1 0 0)	oklch(0.1884 0.0128 248.5103)	Text on secondary
muted	oklch(0.9222 0.0013 286.3737)	oklch(0.209 0 0)	Subtle backgrounds
muted-foreground	oklch(0.1884 0.0128 248.5103)	oklch(0.5637 0.0078 247.9662)	De-emphasized text
accent	oklch(0.9392 0.0166 250.8453)	oklch(0.1928 0.0331 242.5459)	Accent/hover states
accent-foreground	oklch(0.6723 0.1606 244.9955)	oklch(0.6692 0.1607 245.011)	Text on accent
destructive	oklch(0.6188 0.2376 25.7658)	oklch(0.6188 0.2376 25.7658)	Error/danger actions
destructive-foreground	oklch(1 0 0)	oklch(1 0 0)	Text on destructive
border	oklch(0.9317 0.0118 231.6594)	oklch(0.2674 0.0047 248.0045)	Border color
input	oklch(0.9809 0.0025 228.7836)	oklch(0.302 0.0288 244.8244)	Input borders
ring	oklch(0.6818 0.1584 243.354)	oklch(0.6818 0.1584 243.354)	Focus rings

Sidebar Colors

Dedicated tokens for sidebar components:

Token	Light Mode	Dark Mode
sidebar	oklch(0.9784 0.0011 197.1387)	oklch(0.2097 0.008 274.5332)
sidebar-foreground	oklch(0.1884 0.0128 248.5103)	oklch(0.8853 0 0)
sidebar-primary	oklch(0.6723 0.1606 244.9955)	oklch(0.6818 0.1584 243.354)
sidebar-primary-foreground	oklch(1 0 0)	oklch(1 0 0)
sidebar-accent	oklch(0.9392 0.0166 250.8453)	oklch(0.1928 0.0331 242.5459)
sidebar-accent-foreground	oklch(0.6723 0.1606 244.9955)	oklch(0.6692 0.1607 245.011)
sidebar-border	oklch(0.9271 0.0101 238.5177)	oklch(0.3795 0.022 240.5943)
sidebar-ring	oklch(0.6818 0.1584 243.354)	oklch(0.6818 0.1584 243.354)

Chart Colors

Five chart colors for data visualization:

Token	Light Mode	Dark Mode
chart-1	oklch(0.6723 0.1606 244.9955)	oklch(0.6723 0.1606 244.9955)
chart-2	oklch(0.6907 0.1554 160.3454)	oklch(0.6907 0.1554 160.3454)
chart-3	oklch(0.8214 0.16 82.5337)	oklch(0.8214 0.16 82.5337)
chart-4	oklch(0.7064 0.1822 151.7125)	oklch(0.7064 0.1822 151.7125)
chart-5	oklch(0.5919 0.2186 10.5826)	oklch(0.5919 0.2186 10.5826)

Usage in Tailwind

Use the color tokens with Tailwind CSS classes:

<template>
  <!-- Background colors -->
  <div class="bg-background">Default background</div>
  <div class="bg-primary">Primary background</div>
  <div class="bg-muted">Muted background</div>
  
  <!-- Text colors -->
  <p class="text-foreground">Primary text</p>
  <p class="text-muted-foreground">Muted text</p>
  <p class="text-destructive">Error text</p>
  
  <!-- Border colors -->
  <div class="border border-border">Default border</div>
  <div class="border border-input">Input border</div>
  
  <!-- Focus ring -->
  <button class="focus:ring-2 focus:ring-ring">Focusable</button>
</template>

Understanding oklch

The oklch format is: oklch(lightness chroma hue)

• Lightness (0-1): 0 = black, 1 = white
• Chroma (0-0.4+): Color intensity/saturation
• Hue (0-360): Color angle on the color wheel

/* Grayscale (chroma ≈ 0) */
oklch(0.5 0 0)        /* Medium gray */

/* Saturated colors */
oklch(0.6188 0.2376 25.7658)  /* Destructive red */
oklch(0.6723 0.1606 244.9955) /* Primary blue */

Dark Mode

Dark mode is activated by adding the .dark class to the HTML element:

<html class="dark">
  <!-- Dark mode active -->
</html>

All color tokens automatically switch to their dark mode values. This is the only toggle available—light/dark mode.