Color System
Our color palette uses warm tones instead of cool grays, creating an approachable yet professional feel across all apps.
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.
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.
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.
† Tips is Learn-phase content but deliberately ships Facilitate purple (#7C4DFF) — the one sanctioned cross-phase exception. Academy / Training is Learn red (#E54D4D); an earlier "Reflect green" mapping was never implemented and has been retired. DNA's surface primary is the lighter #34D399 within the #10B981 Reflect phase. See App Theming and Start Here.
Semantic Status Colors
Used for feedback states across all apps.
Brand Colors (Main Site)
Gradients
All gradients use a consistent 135-degree angle.
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 |
--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.