Foundations
Colour
Seven ramps, each with 17 steps, and a semantic layer on top. Components use the semantic names, never the raw hex.
Primitives
Indigo is the brand ramp, from 50 to 950. The other families follow the same structure: Purple, Blue, Emerald, Amber, Red and Slate.
50#F2F3FF
100#E7E9FF
200#D7D9FF
300#C0C3FF
400#969CFF
500#4A54FF
600#3D45D1
700#3037A6
800#252A80
900#1A1D59
950#101338
Indigo 500#4A54FF
Purple 500#7C3AED
Blue 500#3B82F6
Emerald 500#10B981
Amber 500#F59E0B
Red 500#EF4444
| Indigo 500 | Primary brand. Interactive elements, CTAs, brand touchpoints. |
|---|---|
| Purple 500 | Secondary accent. Secondary actions and creative highlights. |
| Blue 500 | Information and links. |
| Emerald 500 | Success and positive states. |
| Amber 500 | Warning. |
| Red 500 | Error. |
Semantic palette
Every semantic token points at a primitive. Primary, secondary, error, warning, success and info each get eleven steps with a fixed meaning, for example primary/default is Indigo 500 and primary/pressed is Indigo 600.
| primary/background | Indigo 50 · #F2F3FF |
|---|---|
| primary/surface | Indigo 100 · #E7E9FF |
| primary/border | Indigo 200 · #D7D9FF |
| primary/border-strong | Indigo 300 · #C0C3FF |
| primary/hover | Indigo 400 · #969CFF |
| primary/default | Indigo 500 · #4A54FF |
| primary/pressed | Indigo 600 · #3D45D1 |
| primary/emphasis | Indigo 700 · #3037A6 |
| primary/strong | Indigo 800 · #252A80 |
| primary/on-color | Indigo 900 · #1A1D59 |
| primary/contrast | Indigo 950 · #101338 |
Text colour
text/primary#191E25 · Slate 900
text/icon#2E3744 · Slate 700
text/hint#949CA8 · Slate 400
text/disabled#BFC3CB · Slate 300
text/active#4A54FF · Indigo 500
text/error#EF4444 · Red 500
Seven loose text tokens. Seven of the fourteen text tokens are plain hex values, not aliases of a ramp: body-light, caption-light, field-label, label-dark, on-dark-muted, optional-tag and overline. Re-theming a ramp will not move them.
Dark surfaces
Rig is dark-first. The product runs on a deep navy base with ambient indigo and purple glows.
background#0A0E1A
surface#151C2E
sunk#101728
line#2A3450
ink#F8FAFC
ink 2#B6BFD6
ink 3#8E9AB8