Color Foundation
Our color system consists of 5 carefully crafted palettes with 50 total tokens, designed for accessibility, clarity, and trauma-informed interactions.
Primary (Mediterranean Blue)
Primary brand color for CTAs, links, and key UI elements
primary-50
Lightest tint for backgrounds
primary-100
Subtle backgrounds
primary-200
Hover states
primary-300
Disabled states
primary-400
Active states
primary-500
Primary brand color
primary-600
Hover on primary
primary-700
Pressed states
primary-800
Dark mode primary
primary-900
Darkest shade
Secondary (Pristine Teal)
Secondary actions and complementary UI elements
secondary-50
Lightest tint for backgrounds
secondary-100
Subtle backgrounds
secondary-200
Hover states
secondary-300
Disabled states
secondary-400
Active states
secondary-500
Secondary brand color
secondary-600
Hover on secondary
secondary-700
Pressed states
secondary-800
Dark mode secondary
secondary-900
Darkest shade
Tertiary (Soft Indigo)
Accent color for highlights and special features
tertiary-50
Lightest tint for backgrounds
tertiary-100
Subtle backgrounds
tertiary-200
Hover states
tertiary-300
Disabled states
tertiary-400
Active states
tertiary-500
Tertiary brand color
tertiary-600
Hover on tertiary
tertiary-700
Pressed states
tertiary-800
Dark mode tertiary
tertiary-900
Darkest shade
Error (Radishical)
Error states and critical alerts (trauma-informed)
error-50
Lightest error background
error-100
Subtle error backgrounds
error-200
Error hover states
error-300
Error disabled states
error-400
Error active states
error-500
Primary error color
error-600
Error hover
error-700
Error pressed
error-800
Dark mode error
error-900
Darkest error shade
Neutral (In-Dark)
Text, borders, and neutral UI elements
neutral-50
Lightest backgrounds
neutral-100
Subtle backgrounds
neutral-200
Borders
neutral-300
Disabled text
neutral-400
Placeholder text
neutral-500
Secondary text
neutral-600
Body text
neutral-700
Headings
neutral-800
Primary text
neutral-900
Darkest text
Semantic Colors
Purpose-driven colors for consistent UI patterns and accessibility.
Background
App background
Surface
Card/surface backgrounds
Surface Alt
Alternative surface
Success
Success messages
Warning
Warning messages
Info
Info messages
On Primary
Text on primary
On Secondary
Text on secondary
On Surface
Text on surface
On Background
Text on background
On Error
Text on error
Trauma-Informed Color Usage
Do: Use Calming Colors
Primary and secondary palettes use calming blues and teals that reduce anxiety and promote trust.
Do: Soften Error States
Error colors are muted (not aggressive red) and paired with supportive messaging to avoid triggering stress.
Do: Maintain High Contrast
All color combinations meet WCAG AA standards (4.5:1 for text, 3:1 for UI components) for accessibility.
Don't: Use Aggressive Colors
Avoid bright, saturated reds or harsh color combinations that may trigger anxiety or stress responses.
Don't: Rely on Color Alone
Always pair color with text, icons, or patterns to convey meaning for users with color vision deficiencies.
Don't: Overuse Bright Colors
Limit use of saturated colors to key actions and alerts to prevent visual overwhelm and maintain focus.
WCAG AA Contrast Verification
All color combinations in our design system meet or exceed WCAG 2.1 AA standards for contrast ratios. Below are key combinations verified for accessibility.
Primary with On-Primary
Contrast: 5.9:1 (AA Pass)
Secondary with On-Secondary
Contrast: 4.8:1 (AA Pass)
Surface with On-Surface
Contrast: 19.5:1 (AAA Pass)
Background with On-Background
Contrast: 18.2:1 (AAA Pass)
Error with On-Error
Contrast: 6.4:1 (AA Pass)
Success with White
Contrast: 7.2:1 (AA Pass)
Warning with White
Contrast: 5.8:1 (AA Pass)
Note: WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+) and UI components. AAA level requires 7:1 for normal text.
Usage Examples
Button Styles
Primary Action
Secondary Action
Tertiary Action
Ghost Action
Alert Styles
Info: New health advisory available
Success: Profile updated successfully
Warning: Please verify your information
Error: Unable to save changes