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. Signal carries emphasis; Deep Navy carries depth.
Brand
Primary and secondary carry the identity.
Secondary
Deep Navy
Secondary brand colour — dark surfaces, foundations, depth
#001540 · rgb(0, 21, 64)
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
8 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 |