Dark-theme-first colour system built on warm charcoals with Cool Silver accent
Magenta Pink is the signature brand colour from the logo. Dark Charcoal is the primary neutral. White provides contrast for text and UI elements.
Magenta accessibility: Use #E91E8C for icons, decorative elements, links, and headings. For buttons with white text on a magenta background, use #DE1C86 (4.55:1 — passes AA). For small body text on dark backgrounds, use #F24BA3. For small body text on light backgrounds, use #C81478. All variants meet WCAG AA.
A neutral secondary that never competes with Magenta. Handles section labels, badges, outlines, featured indicators, and secondary CTAs. Magenta owns all primary actions.
Silver accessibility: On dark backgrounds, #B0B8C4 passes AA at all surface levels (7.55:1+ on cards). On light backgrounds, use #5F6B7A for small text (section labels, tags, tier names) to meet AA — 4.80:1 on page, 5.43:1 on white cards.
The preferred presentation. Four core levels create depth and hierarchy.
For contexts where dark backgrounds are impractical (documents, emails, light UI sections).
Different backgrounds require different text shades to meet WCAG AA. The same semantic role maps to a different value per theme.
| Role | Dark Theme | Light Theme | Notes |
|---|---|---|---|
| Primary text | #F5F0ED |
#221E1E |
AAA on all backgrounds |
| Secondary text | #ACA4A0 |
#6B6362 |
AA on all backgrounds |
| Muted / placeholder | #958D89 |
#A09894 |
AA on cards (4.64:1). Exempt for disabled/placeholder |
| Magenta (large text) | #E91E8C |
#E91E8C |
AA-large only. Buttons, headings, icons, stats |
| Magenta (small text) | #F24BA3 |
#C81478 |
AA on cards — 4.54:1 dark, 5.49:1 light |
| Silver (decorative) | #B0B8C4 |
#7A8494 |
AAA dark (7.55:1+). Large text / decorative in light |
| Silver (small text) | #B0B8C4 |
#5F6B7A |
AA — 7.55:1+ dark, 4.80:1+ light |
The full warm grey scale. See the text usage table above for which values to use for text in each theme.
| Name | Hex | Use For | |
|---|---|---|---|
| Near Black | #1A1717 |
Page background (dark theme), overlays | |
| Surface | #221E1E |
Nav, containers (dark theme) | |
| Card | #2A2525 |
Card backgrounds (dark theme) | |
| Subtle Border | #2E2929 |
Dividers, subtle separators | |
| Elevated | #3B3535 |
Hover states, borders (dark theme) | |
| Medium Grey | #6B6362 |
Light theme secondary text | |
| Soft Grey | #958D89 |
Dark theme muted text, placeholders | |
| Light Muted | #A09894 |
Light theme muted text, placeholders | |
| Secondary | #ACA4A0 |
Dark theme secondary text | |
| Light Border | #E8E0DC |
Borders, dividers (light theme) | |
| Warm Off-White | #F5F0ED |
Page background (light theme) |
The full silver accent range. Use the appropriate variant depending on theme and text size.
| Name | Hex | Use For | |
|---|---|---|---|
| Silver Text (Light) | #5F6B7A |
Small text on light backgrounds (labels, tags, tiers) | |
| Silver (Light Theme) | #7A8494 |
Decorative / large text in light theme, check marks | |
| Silver Dark | #8E96A3 |
Outline borders, subtle accents (dark theme) | |
| Cool Silver | #B0B8C4 |
Primary silver — labels, badges, text on dark surfaces | |
| Silver Light | #C8CED8 |
Hover states, highlights |
Different contexts require different magenta values to maintain WCAG AA compliance.
| Name | Hex | Use For | |
|---|---|---|---|
| Magenta Dark | #C81478 |
Small text on light backgrounds (5.49:1 on white) | |
| Magenta (Brand) | #E91E8C |
Buttons, icons, large/bold text, brand moments | |
| Magenta Light | #F24BA3 |
Small text on dark cards (4.54:1 on #2A2525), hover states |
For status indicators, alerts, and feedback. Not brand colours.