Color System
Our color palette uses warm tones instead of cool grays, creating an approachable yet professional feel across all apps.
info
Source of truth:
design-system/platform-tokens.css. If this page and the CSS file disagree, the CSS file wins.
Ink Palette (Text Colors)
Warm near-black tones with subtle red/brown undertones instead of pure black.
Ink
#2C2416
--color-ink
Ink Secondary
#5C5242
--color-ink-secondary
Ink Muted
#78716C
--color-ink-muted
Ink Faint
#A8A29E
--color-ink-faint
Semantic Text Aliases
| Token | Maps To | Usage |
|---|---|---|
--text-dark | var(--color-ink) | Headlines, strong emphasis |
--text-default | var(--color-ink-secondary) | Body paragraphs |
--text-muted | var(--color-ink-muted) | Captions, metadata |
--text-faint | var(--color-ink-faint) | Hints, disabled states |
--text-inverse | #FFFFFF | Text on dark backgrounds |
Background Colors
Warm cream tones for page backgrounds, pure white for card surfaces.
Page
#FEF7F1
--bg-page
Page Alt
#FFFBF8
--bg-page-alt
Surface
#FFFFFF
--bg-surface
Muted
#F5F5F4
--bg-muted
Subtle
#FAFAF9
--bg-subtle
Paper
#FAF7F2
--bg-paper
Paper Dark
#F0EBE3
--bg-paper-dark
Gray Scale (Warm Stone)
Warm stone tones, not cool blue-grays, to match the ink palette.
| Token | Hex | Usage |
|---|---|---|
--gray-50 | #FAFAF9 | Section backgrounds |
--gray-100 | #F5F5F4 | Chip backgrounds, muted areas |
--gray-200 | #E7E5E4 | Borders, dividers |
--gray-300 | #D6D3D1 | Hover borders |
--gray-400 | #A8A29E | Placeholder text |
--gray-500 | #78716C | Secondary text |
--gray-600 | #57534E | Body text alternative |
--gray-700 | #44403C | Strong body text |
--gray-800 | #292524 | Headlines alternative |
--gray-900 | #1C1917 | Darkest gray |
Phase Colors
Each phase of the facilitator journey has a base color.
Learn
#E54D4D
--phase-learn
Main Site, Tips, Podcasts
Plan
#0284C7
--phase-plan
Planner
Facilitate
#7C4DFF
--phase-facilitate
Coach, Intervention
Reflect
#10B981
--phase-reflect
DNA*, Training*
Semantic Status Colors
Used for feedback states across all apps.
check_circle
Success
#22C55E
--color-success
warning
Warning
#F59E0B
--color-warning
error
Error
#EF4444
--color-error
info
Info
#3B82F6
--color-info
Brand Colors (Main Site)
Primary
#E54D4D
--mainsite-primary
Dark
#C73E3E
--mainsite-dark
Light
#FEE2E2
--mainsite-light
Very Light
#FEF2F2
--mainsite-very-light
Gradients
All gradients use a consistent 135-degree angle.
Primary
Navy
Coach
info
Only use gradients for buttons, section headers, and icon containers. Never for card backgrounds or decorative fills.
Contrast & Accessibility
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px bold).
Known Contrast Risks
| Combination | Ratio | Result | Guidance |
|---|---|---|---|
White on --mainsite-primary (#E54D4D) |
3.82:1 | AA Large only | Use for headings 18px+. For body text, use --color-primary-on-white (#C73E3E, 5.02:1) |
--color-ink-faint (#A8A29E) on white |
2.8:1 | Fails AA | Decorative use only (borders, icons). For text, use --color-ink-faint-accessible (#78716C, 4.6:1) |
White on --mainsite-dark (#C73E3E) |
5.02:1 | AA pass | Safe for all text sizes on white backgrounds |
--color-ink (#2C2416) on white |
14.5:1 | AAA pass | Primary text color — excellent contrast |
warning
When placing text on brand colors, always use
--color-primary-on-white instead of --mainsite-primary. The brand red (#E54D4D) is safe for large headings and decorative elements, but not for body text on white.