Foundations / Color
One green. One canvas. Everything else is meaning.
Primary green (#016B61) is the only decorative color in the system. Every other token earns its place by carrying meaning — danger, warning, success, info — and never appears outside that meaning.
Primary Green — accent ramp
Anchored on #016B61. 500 is canonical primary; 300 is the dark-mode substitute where 500 would fail contrast on #0D1815. Click any swatch to copy its hex; hover for usage role.
green
50 · Pill backgrounds (light)
100 · Hover tints on green surfaces
200 · Decorative · heatmap mid-low
300 · Dark-mode primary accent
400 · Success emphasis · chart series 2
500 · Primary accent · CTA · success
600 · Hover state for 500
700 · Active · text on green-50
800 · Rare — dark theme over canvas
900 · Rare — deep header backgrounds
950 · Near-black green for dark extremes
Neutral — warmed for mint canvas
A slightly green-desaturated gray ramp. Pure gray against the mint canvas produces a cold seam; this ramp resolves it.
neutral
50 · Light canvas
100 · Subtle surface tint · divider
200 · Grid lines · dashed chart rules
300 · Disabled borders
400 · Placeholder · disabled foreground
500 · Tertiary text · mono label color
600 · Secondary body text
700 · Strong secondary · muted heading
800 · Dark-theme chrome · dashed grid
900 · Primary text (light) · surface (dark)
950 · Dark canvas
Each semantic color has a solid value, a tint value (light), and a tint value (dark). Never use these decoratively.
Semantic — status colors
danger
#D64545
warning
#E89C2A
success
#016B61
info
#2B6CB0