Foundations
Colour
A refined balance of deep, calming tones with one soft, warm accent. Primitives paint; semantic roles decide where the paint goes.
0B0F14
11 · 15 · 20
night-950
1A2A33
26 · 42 · 51
night-800
4C6B73
76 · 107 · 115
night-500
A7C6D1
167 · 198 · 209
night-200
FF8D9B
255 · 141 · 155
coral-500
B45B67
180 · 91 · 103
coral-700
950
900
850
800
700
600
500
400
300
200
100
50
The cool foundation ramp. 950 is the canvas; 200 is secondary text; steps between build surfaces and borders.
300
400
500
600
700
500 is the canonical accent. 400 hovers, 700 presses.
danger-400 · #F87171
Please enter a valid email address.
F87171 marks genuine errors only. Coral invites; danger warns.
neutral
135deg
The night sweep — deep canvas rising to ice. Ambient backgrounds, quiet data fills.
accent
135deg
The warm sweep — coral into deep rose. Hero moments, active progress, the one warm signal at full strength.
scrim
0deg
Media scrim — void rising over imagery so text stays readable (from the reference cards).
The two brand sweeps from the palette sheet, plus the media scrim. Use sparingly — a gradient is a moment, not a default.
white-3
white-5
white-8
white-10
white-12
Borders and quiet fills are translucent white, so they adapt to whatever sits beneath the glass.
40%
20%
15%
10%
8%
7%
Primary colours are the foundation; accents exist for highlights, calls-to-action and key interactions.
| Role | CSS variable | Source | Sample |
|---|---|---|---|
| bg / base | --color-bg | colour.night.950 | |
| surface / sunken | --color-surface-sunken | colour.alpha.white-3 | |
| text / primary | --color-fg | colour.white | |
| text / secondary | --color-fg-secondary | colour.night.200 | |
| text / muted | --color-fg-muted | colour.night.400 | |
| text / disabled | --color-fg-disabled | colour.night.600 | |
| text / on-accent | --color-fg-on-accent | colour.night.950 | |
| border / subtle | --color-border-subtle | colour.alpha.white-5 | |
| border / default | --color-border-default | colour.alpha.white-10 | |
| border / strong | --color-border-strong | colour.alpha.white-12 | |
| accent / default | --color-accent | colour.coral.500 | |
| accent / hover | --color-accent-hover | colour.coral.400 | |
| accent / pressed | --color-accent-pressed | colour.coral.700 | |
| accent / subtle | --color-accent-subtle | #FF8D9B1A | |
| status / error | --color-danger | colour.danger.400 | |
| focus / ring | --color-ring | colour.coral.300 |
Components never reference primitives. A future light theme only re-points this table.
| Pair | Sample | Ratio | Result |
|---|---|---|---|
| Primary text on canvas | Aa 25:00 | 17.92:1 | Pass ≥4.5 |
| Secondary text on canvas | Aa 25:00 | 10.65:1 | Pass ≥4.5 |
| Muted text on canvas | Aa 25:00 | 5.04:1 | Pass ≥3 |
| Accent (large text / UI) on canvas | Aa 25:00 | 8.73:1 | Pass ≥3 |
| Text on accent | Aa 25:00 | 8.73:1 | Pass ≥4.5 |
| Error text on canvas | Aa 25:00 | 6.95:1 | Pass ≥4.5 |
Ratios computed from the token values at build time. AA body = 4.5:1 · AA large text / UI = 3:1.