Primary
Signal
Primary brand colour — links, focus, actions, headline emphasis
#00AAFF · rgb(0, 170, 255)
Colour
Signal leads.
Deep Navy anchors.
One primary, one secondary, three supporting. Signal carries emphasis; Deep Navy carries depth. The rest quietly fill in.
Brand
Primary and secondary carry the identity. Supporting fills in.
Secondary
Deep Navy
Secondary brand colour — dark surfaces, foundations, depth
#001540 · rgb(0, 21, 64)
Supporting
3 tokens
Sky
sky
Supporting — soft fills, highlights, hover tints
#ADE4FF · rgb(173, 228, 255)
Royal
royal
Supporting — strong statements, button variants
#003093 · rgb(0, 48, 147)
Indigo
accent
Supporting — gradients, tertiary accent
#4040BF · rgb(64, 64, 191)
Surfaces
System tokens — flip between light and dark.
6 tokens
Canvas
bg
Page background
- Light
- #FFFFFF
- Dark
- #0B0B0D
Mist
panel
Panels, subtle fills
- Light
- #FBFBFD
- Dark
- #151518
Fog
surface
Cards, hover states
- Light
- #F5F5F7
- Dark
- #1D1D1F
Hairline
line
Dividers, grid lines
- Light
- #E5E5EA
- Dark
- #2C2C2E
Ink
ink
Headlines, body text
- Light
- #1D1D1F
- Dark
- #F5F5F7
Slate
muted
Secondary text, captions
- Light
- #6E6E73
- Dark
- #98989D
Reference
11 tokens
| Token | Name | Tier | Light | Dark | Usage |
|---|---|---|---|---|---|
| bg | Canvas | surface | #FFFFFF | #0B0B0D | Page background |
| panel | Mist | surface | #FBFBFD | #151518 | Panels, subtle fills |
| surface | Fog | surface | #F5F5F7 | #1D1D1F | Cards, hover states |
| line | Hairline | surface | #E5E5EA | #2C2C2E | Dividers, grid lines |
| ink | Ink | surface | #1D1D1F | #F5F5F7 | Headlines, body text |
| muted | Slate | surface | #6E6E73 | #98989D | Secondary text, captions |
| primary | Signal | primary | #00AAFF | #00AAFF | Primary brand colour — links, focus, actions, headline emphasis |
| navy | Deep Navy | secondary | #001540 | #001540 | Secondary brand colour — dark surfaces, foundations, depth |
| sky | Sky | supporting | #ADE4FF | #ADE4FF | Supporting — soft fills, highlights, hover tints |
| royal | Royal | supporting | #003093 | #003093 | Supporting — strong statements, button variants |
| accent | Indigo | supporting | #4040BF | #4040BF | Supporting — gradients, tertiary accent |