Colour
Three brand ramps with fixed jobs. Purple signals elevated risk, teal is the only action colour, and lime marks the data. Mixing those jobs is the fastest way to make a surface stop looking like Avantect.
Purple
Risk. Backgrounds, eyebrows, Purple Flags. Never a button fill.
purple-100
#EDE7F4purple-300
#A48DBECore brand
purple-500
#725393purple-700
#5B4076Teal
Action. Every button, link, and interactive affordance.
teal-100
#D6EFEDteal-300
#4DBAB5Primary action
teal-500
#00968Fteal-700
#00736DLime
Data accent. Stat rails, highlight marks, signal callouts.
lime-100
#F5F8D6lime-300
#DDE770Signal accent
lime-500
#C4D600lime-700
#98A700Supporting
Navy anchors footers and dark surfaces; mint closes the hero gradient.
navy-500
#1F2A4Dmint-500
#BFE3D6gradient-hero
gradient-hero-soft
Neutrals
A lavender-leaning ramp — never pure grey.
ink-25
#FBFAFCink-50
#F4F2F7ink-100
#EFEDF3ink-200
#E8E4EEink-300
#D9D5E1ink-400
#9A9AA1ink-600
#6B6B72ink-900
#2A2A2ESemantic tokens
Build against these, not the raw ramps — they are what the dark theme swaps.
| Token | Light | Dark |
|---|---|---|
| background | white | navy-500 |
| foreground | ink-900 | ink-25 |
| surface | white | #26314F |
| surface-muted | ink-50 | #2D3859 |
| surface-risk | purple-500 | purple-700 |
| primary | teal-500 | teal-300 |
| accent | lime-500 | lime-300 |
| border | ink-200 | #3B466A |
| ring | teal-500 | teal-300 |
Contrast floor is 4.5:1 for body copy. Purple 500 and teal 500 both clear it against white; lime never carries text — it is a rail, a mark, or a fill behind ink-900.