/002 — Colors & Variables · Tokens · Combinations · Usage

Colors &
Variables

All colors are defined as CSS custom properties and support light/dark mode switching. Toggle dark mode to see live values update across the palette.

The palette

/001 · Foundations
18 tokens, light + dark
/01 Neutral scale
Mode-aware · 04 steps
/02 Primary
Static across modes · Brand
/03 Secondary tints
Accents · Cards · Highlights
/04 Dark accents
Deep tones · Backgrounds

Approved
combinations

/002 · Approved pairings
Always test for contrast
/05 Primary pairings
03 pairings · Heroes & statements

Health, designed
for humans.

Health, designed
for humans.

Health, designed
for humans.

/06 Dark & tint backgrounds — accent text
03 pairings

Health, designed for humans.

Health, designed for humans.

Health, designed for humans.

/07 Secondary tints — black text
05 pairings · Safe defaults

Health, designed for humans.

Health, designed for humans.

Health, designed for humans.

Health, designed for humans.

Health, designed for humans.

/08 Neutral background — colored text
04 pairings · UI defaults

Health, designed for humans.

Health, designed for humans.

Health, designed for humans.

Health, designed for humans.

The gradients

/003 · Brand gradients
8 styles · light + bold

✕Incorrect usage

Never combine dark text on dark backgrounds or light text on light backgrounds. These pairings fail contrast requirements and make content unreadable. Hover any card to flag why it fails.

Dark text on dark backgrounds

✕

Health, designed for humans

Gray-Dark + Black✕Fails contrast
✕

Health, designed for humans

Blue + Black✕Fails contrast
✕

Health, designed for humans

Lavender + Gray-Dark✕Fails contrast
✕

Health, designed for humans

Orange + Gray-Dark✕Fails contrast
✕

Health, designed for humans

Yellow + Orange-Light✕Fails contrast

Light text on light backgrounds

✕

Health, designed for humans

White + Yellow✕Fails contrast
✕

Health, designed for humans

Yellow + White✕Fails contrast
✕

Health, designed for humans

Orange-Light + Lavender-Light✕Fails contrast
✕

Health, designed for humans

Blue-Light + Green-Light✕Fails contrast
✕

Health, designed for humans

Lavender-Light + Yellow-Light✕Fails contrast