Skip to main content
CRI
Design System
Design System

Colors

Color tokens form the foundation of our design system. Built on Material 3 principles with full tonal ramps for light and dark themes.

Color Tokens

Our color system uses Material 3-style semantic role tokens that automatically adapt to the current theme. All colors are defined in HSL format and mapped from comprehensive tonal palettes (0-100) for consistent theming.

Brand Colors

Primary brand colors used for key actions and brand elements

TokenValuePreview
--primary
hsl(var(--primary))
--on-primary
hsl(var(--on-primary))
--primary-container
hsl(var(--primary-container))
--on-primary-container
hsl(var(--on-primary-container))

Secondary Colors

Secondary brand colors for accents and supplementary elements

TokenValuePreview
--secondary
hsl(var(--secondary))
--on-secondary
hsl(var(--on-secondary))
--secondary-container
hsl(var(--secondary-container))
--on-secondary-container
hsl(var(--on-secondary-container))

Tertiary Colors

Tertiary colors for subtle accents and decorative elements

TokenValuePreview
--tertiary
hsl(var(--tertiary))
--on-tertiary
hsl(var(--on-tertiary))
--tertiary-container
hsl(var(--tertiary-container))
--on-tertiary-container
hsl(var(--on-tertiary-container))

Surface System

Background colors for surfaces and containers, providing elevation hierarchy

TokenValuePreview
--surface
hsl(var(--surface))
--surface-container-lowest
hsl(var(--surface-container-lowest))
--surface-container-low
hsl(var(--surface-container-low))
--surface-container
hsl(var(--surface-container))
--surface-container-high
hsl(var(--surface-container-high))
--surface-container-highest
hsl(var(--surface-container-highest))

Text & Content

Colors for text and content placed on surfaces

TokenValuePreview
--on-surface
hsl(var(--on-surface))
--on-surface-variant
hsl(var(--on-surface-variant))

Borders & Outlines

Colors for borders, dividers, and outline elements

TokenValuePreview
--outline
hsl(var(--outline))
--outline-variant
hsl(var(--outline-variant))

Status & Feedback

Colors for status indicators, errors, and feedback messages

TokenValuePreview
--error
hsl(var(--error))
--on-error
hsl(var(--on-error))
--error-container
hsl(var(--error-container))
--on-error-container
hsl(var(--on-error-container))

Gradients

Reusable gradient styles for backgrounds and containers

TokenValuePreview
--gradient
linear-gradient(to bottom, #F1D8BB, #DEB87E, #925C41, #2E2017)
--gradient-bg-fitzpatrick-light
14-step Fitzpatrick sunrise (main site light mode)
--gradient-bg-fitzpatrick-dark
14-step Fitzpatrick sunrise (main site dark mode)

Tonal Palettes

Material 3-inspired tonal palettes provide a complete 0-100 scale for each color family. These palettes are derived from the gradient colors and enable consistent theming across light and dark modes.

Primary Palette

Derived from gradient color #DEB87E (HSL: 36° 59% 68%). Key tone at 40 for light mode, tone 80 for dark mode.

0
--primary-0
10
--primary-10
20
--primary-20
30
--primary-30
40
--primary-40
50
--primary-50
60
--primary-60
70
--primary-70
80
--primary-80
90
--primary-90
95
--primary-95
100
--primary-100

Secondary Palette

Derived from gradient color #925C41 (HSL: 20° 38% 41%). Key tone at 40 for light mode, tone 80 for dark mode.

0
--secondary-0
10
--secondary-10
20
--secondary-20
30
--secondary-30
40
--secondary-40
50
--secondary-50
60
--secondary-60
70
--secondary-70
80
--secondary-80
90
--secondary-90
95
--secondary-95
100
--secondary-100

Usage

Use Tailwind CSS classes or CSS custom properties to apply colors:

/* Using Tailwind classes */
<div className="bg-primary text-on-primary">Primary Button</div>
<div className="bg-surface-container text-on-surface">Card</div>

/* Using CSS custom properties */
.my-element {
  background-color: hsl(var(--primary));
  color: hsl(var(--on-primary));
}

.surface-card {
  background-color: hsl(var(--surface-container));
  color: hsl(var(--on-surface));
}

Material 3 Principles

Our color system follows Material 3 design principles:

  • Role tokens: Semantic color roles (primary, surface, outline) rather than raw color values
  • Tonal palettes: Complete 0-100 tone ramps for each color family
  • Theme adaptation: Automatic mapping between light and dark themes
  • Accessibility: Contrast ratios meet WCAG AA standards
  • Container colors: Subtle background variations for elevation and hierarchy