Design Tokens
Extracted from Figma and defined in tokens.css
#ECF1FF
Background / Light
#391224
Text / Dark
#22B573
Main Green
#3EA2BE
Secondary Cyan
#C859B0
Secondary Pink / Active
#3E62BE
Deep Blue / Hover
Logo Component
Two variants: green for light backgrounds, outlined for dark backgrounds
Logo Light (.logo-light)
Logo Dark (.logo-dark)
Button Component
Three variants with hover, active, and accessible focus states
Primary / Filled Dark (.btn-primary)
Button primary
Secondary / Outlined (.btn-secondary)
Button secondary
Tertiary / Filled Green (.btn-tertiary)
Button tertiary
Link Component
Circle and plain arrow links across color combinations
Circle: Dark BG + Green Arrow
Label
Circle: Dark BG + Light Arrow
Label
Circle: Light BG + Green Arrow
Label
Circle: Light BG + Dark Arrow
Label
Circle: Green BG + Dark Arrow
Label
Circle: Green BG + Light Arrow
Label
Plain Green (.link-plain-green)
Label
Plain Dark (.link-plain-dark)
Label
Plain White (.link-plain-white)
Label
Plus / Minus Toggle Icons
58x58px circular icons for expandable accordion sections
Plus Icon (.icon-toggle)
Minus Icon (.icon-toggle)