Colours · Base
The raw palette
Ten palettes, ninety chromatic shades plus pure neutrals. Authored in Figma with HSL and rendered through Display-P3 for full vibrancy on wide-gamut displays.
Cobalt
Brand primary — anchors actions, links and active states.
10
hsl(225 80% 96.08%)
100
hsl(221.82 80.49% 91.96%)
200
hsl(219.66 83.1% 86.08%)
300
hsl(215.88 78.86% 75.88%)
400
hsl(216.1 67.21% 64.12%)
500
hsl(219.87 62.25% 48.82%)
600
hsl(222.8 70.09% 41.96%)
700
hsl(223.18 75.86% 34.12%)
800
hsl(223.03 77.95% 24.9%)
900
hsl(222.73 71.74% 18.04%)
Sky
Informational — used for help, hints and ambient signals.
10
hsl(201.18 80.95% 95.88%)
100
hsl(203.33 78.26% 90.98%)
200
hsl(203.61 75.31% 84.12%)
300
hsl(203.12 76.22% 71.96%)
400
hsl(203.04 71.13% 61.96%)
500
hsl(202.91 66.27% 48.82%)
600
hsl(203.77 71.96% 41.96%)
700
hsl(204.86 83.33% 32.94%)
800
hsl(205.64 92.13% 24.9%)
900
hsl(205.95 90.24% 16.08%)
Lavender
Secondary — supporting accents in dashboards and tags.
10
hsl(281.05 76% 95.1%)
100
hsl(283.64 80.49% 91.96%)
200
hsl(283.16 80.28% 86.08%)
300
hsl(282.94 79.69% 74.9%)
400
hsl(281.81 80.31% 62.16%)
500
hsl(280.88 64% 49.02%)
600
hsl(280.97 66.21% 42.94%)
700
hsl(281.08 65.68% 33.14%)
800
hsl(281.12 76.07% 22.94%)
900
hsl(280.95 72.41% 17.06%)
Fuchsia
Secondary — punctuates badges and decorative accents.
10
hsl(327 100% 96.08%)
100
hsl(322.7 90.24% 91.96%)
200
hsl(321.36 76.62% 84.9%)
300
hsl(323.27 80.33% 76.08%)
400
hsl(322.01 73.54% 62.94%)
500
hsl(322.03 63.2% 49.02%)
600
hsl(322.31 70.91% 43.14%)
700
hsl(321.94 75.28% 34.9%)
800
hsl(322.88 89.39% 25.88%)
900
hsl(321.14 95.65% 18.04%)
Crimson
Error and destructive states.
10
hsl(3.53 80.95% 95.88%)
100
hsl(3.87 75.61% 91.96%)
200
hsl(3.33 75% 85.88%)
300
hsl(3.19 73.44% 74.9%)
400
hsl(1.76 72.34% 63.14%)
500
hsl(3.21 67.2% 49.02%)
600
hsl(3.04 71.82% 43.14%)
700
hsl(2.13 77.05% 35.88%)
800
hsl(0 73.91% 27.06%)
900
hsl(0 81.44% 19.02%)
Citrus
Secondary — warm decorative accent.
10
hsl(26.67 90% 96.08%)
100
hsl(25.26 95% 92.16%)
200
hsl(26.25 88.89% 85.88%)
300
hsl(22.89 76.38% 75.1%)
400
hsl(23.01 82.02% 65.1%)
500
hsl(22.09 72.8% 50.98%)
600
hsl(18 73.91% 45.1%)
700
hsl(16.09 75% 36.08%)
800
hsl(15.4 82.48% 26.86%)
900
hsl(16.18 91.75% 19.02%)
Bumblebee
Warning — heads-up signals.
10
hsl(46.96 92% 95.1%)
100
hsl(48 86.96% 90.98%)
200
hsl(48.75 88.89% 85.88%)
300
hsl(49.29 87.5% 74.9%)
400
hsl(49.02 89.13% 63.92%)
500
hsl(49.09 81.96% 50%)
600
hsl(47.94 95.33% 41.96%)
700
hsl(43.11 96.53% 33.92%)
800
hsl(34.95 88.03% 22.94%)
900
hsl(27.76 87.01% 15.1%)
Emerald
Success — confirmations and positive states.
10
hsl(123 76.92% 94.9%)
100
hsl(125 78.26% 90.98%)
200
hsl(128.4 60.98% 83.92%)
300
hsl(126.49 57.81% 74.9%)
400
hsl(124.86 55.78% 60.98%)
500
hsl(124.88 50.2% 48.04%)
600
hsl(125.14 50.24% 40.98%)
700
hsl(125.19 49.69% 31.96%)
800
hsl(125.08 50.43% 22.94%)
900
hsl(124.74 50% 14.9%)
Slate
Neutral scale — text, borders and surfaces.
10
hsl(0 0% 96.08%)
100
hsl(0 0% 92.16%)
200
hsl(0 0% 85.1%)
300
hsl(0 0% 74.9%)
400
hsl(0 0% 61.96%)
500
hsl(0 0% 49.02%)
600
hsl(0 0% 38.82%)
700
hsl(0 0% 27.84%)
800
hsl(0 0% 20%)
900
hsl(0 0% 12.16%)
Neutral
Pure black and white — used sparingly for max contrast.
white
#ffffff
black
#000000