Official anchors. Blue-tinted canvas. No decorative color.
The official anchors are #00698F (Pantone 7706 C), #00A66C (Pantone 3405 C), and #009DDB (Pantone 2925 C). #71BF43 (Pantone 360 C) is reserved for brand artwork and illustrations, not UI chrome.
Brand Primary — navigation ramp
Anchored on #00698F. Used for brand chrome, app navigation, and structural identity. It is not a success color and does not replace action green.
primary
50 · Primary tint backgrounds
100 · Hover tint on primary surfaces
200 · Subtle dividers on primary contexts
300 · Dark-mode primary support
400 · Navigation emphasis
500 · Brand primary · app chrome · navigation
600 · Hover state for 500
700 · Active · text on primary-50
800 · Dark primary surface
900 · Deep header backgrounds
950 · Darkest primary extreme
Green — action and success ramp
Anchored on #00A66C. 500 is canonical action green; 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 · Action 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 · Darkest green extreme
Blue — secondary accent ramp
Anchored on #009DDB (Pantone 2925 C). Used for info states, navigation differentiation, and data-visualization series beyond action green. Never replaces brand primary blue or action green.
blue
50 · Info tint backgrounds
100 · Hover tints on blue surfaces
200 · Decorative · chart series 4
300 · Dark-mode blue accent
400 · Info emphasis · chart series 3
500 · Info solid · secondary nav accent
600 · Hover state for 500
700 · Active · text on blue-50
800 · Rare — dark theme over canvas
900 · Rare — deep header backgrounds
950 · Darkest blue extreme
Neutral — tuned for blue-tinted canvas
A slightly green-desaturated gray ramp. Pure gray against the blue-tinted 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.