Design system
Tokens from tailwind.config.ts and src/styles/tokens.css. The page follows your system light/dark setting.
green
Primary. 500 is a fill colour; use 700 for text on light backgrounds.
50
#E6FBF0
100
#C2F5DA
200
#8AEDBC
300
#4CE39A
400
#1ADB7E
500
#00D66C
600
#00B35A
700
#007A3D
800
#005F30
900
#00451F
gold
Secondary. CTAs, PROMOTED badges and breaking alerts. Text on gold is always navy.
50
#FFF9E0
100
#FFF0B3
200
#FFE680
300
#FFDB4D
400
#FFD11A
500
#FFC700
600
#E0AE00
700
#B38A00
800
#806200
900
#4D3B00
navy
Surfaces and text. 900 is the dark-mode base; 50 is the light off-white surface.
50
#F4F6F9
100
#E9EDF4
200
#D5DBE7
300
#B4BDD1
400
#8E9AB5
500
#6B7A99
600
#4A5A7A
700
#3A506B
800
#1C2541
900
#0B132B
950
#060B1A
alert
Live and urgent states. Use 700 for body text on light backgrounds.
50
#FFECEB
100
#FFCFCC
300
#FF7A72
500
#FF3B30
600
#E0261C
700
#D70015
Components
Promoted LiveAccessible link textUrgent text
Green on navyGold on navy
Typography
Plus Jakarta Sans
Display headings, 700–800
Inter body text at 16px minimum, so iOS doesn't zoom into form fields.
Muted supporting text, 14px.