Colours · Semantic
Meaning-bearing tokens
Semantic tokens bind base palette shades to roles in the UI. Component code never references a base colour directly — it always asks for a semantic role (e.g. --semantic-colour-text-heading) so themes can swap underneath.
Text 55 tokens
Routed through text- prefixes for headings, body, brand, error, warning, success and secondary tones.
--semantic-colour-text-heading
→ neutral-black
#000000
--semantic-colour-text-subheading
→ slate-700
hsl(0 0% 27.84%)
--semantic-colour-text-body1
→ slate-600
hsl(0 0% 38.82%)
--semantic-colour-text-body2
→ slate-500
hsl(0 0% 49.02%)
--semantic-colour-text-muted
→ slate-400
hsl(0 0% 61.96%)
--semantic-colour-text-subtle
→ slate-300
hsl(0 0% 74.9%)
--semantic-colour-text-on-surface
→ neutral-white
#ffffff
--semantic-colour-text-brand-primary-darkest
→ cobalt-900
hsl(222.73 71.74% 18.04%)
--semantic-colour-text-brand-primary-bold
→ cobalt-700
hsl(223.18 75.86% 34.12%)
--semantic-colour-text-brand-primary
→ cobalt-600
hsl(222.8 70.09% 41.96%)
--semantic-colour-text-brand-primary-light
→ cobalt-200
hsl(219.66 83.1% 86.08%)
--semantic-colour-text-brand-primary-extralight
→ cobalt-100
hsl(221.82 80.49% 91.96%)
--semantic-colour-text-brand-primary-subtle
→ cobalt-10
hsl(225 80% 96.08%)
--semantic-colour-text-error-darkest
→ crimson-900
hsl(0 81.44% 19.02%)
--semantic-colour-text-error-bold
→ crimson-700
hsl(2.13 77.05% 35.88%)
--semantic-colour-text-error-primary
→ crimson-600
hsl(3.04 71.82% 43.14%)
--semantic-colour-text-error-light
→ crimson-200
hsl(3.33 75% 85.88%)
--semantic-colour-text-error-extralight
→ crimson-100
hsl(3.87 75.61% 91.96%)
--semantic-colour-text-error-subtle
→ crimson-10
hsl(3.53 80.95% 95.88%)
--semantic-colour-text-warning-darkest
→ bumblebee-900
hsl(27.76 87.01% 15.1%)
--semantic-colour-text-warning-bold
→ bumblebee-700
hsl(43.11 96.53% 33.92%)
--semantic-colour-text-warning-primary
→ bumblebee-600
hsl(47.94 95.33% 41.96%)
--semantic-colour-text-warning-light
→ bumblebee-200
hsl(48.75 88.89% 85.88%)
--semantic-colour-text-warning-extralight
→ bumblebee-100
hsl(48 86.96% 90.98%)
--semantic-colour-text-warning-subtle
→ bumblebee-10
hsl(46.96 92% 95.1%)
--semantic-colour-text-info-darkest
→ sky-900
hsl(205.95 90.24% 16.08%)
--semantic-colour-text-info-bold
→ sky-700
hsl(204.86 83.33% 32.94%)
--semantic-colour-text-info-primary
→ sky-600
hsl(203.77 71.96% 41.96%)
--semantic-colour-text-info-light
→ sky-200
hsl(203.61 75.31% 84.12%)
--semantic-colour-text-info-extralight
→ sky-100
hsl(203.33 78.26% 90.98%)
--semantic-colour-text-info-subtle
→ sky-10
hsl(201.18 80.95% 95.88%)
--semantic-colour-text-success-darkest
→ emerald-900
hsl(124.74 50% 14.9%)
--semantic-colour-text-success-bold
→ emerald-700
hsl(125.19 49.69% 31.96%)
--semantic-colour-text-success-primary
→ emerald-600
hsl(125.14 50.24% 40.98%)
--semantic-colour-text-success-light
→ emerald-200
hsl(128.4 60.98% 83.92%)
--semantic-colour-text-success-extralight
→ emerald-100
hsl(125 78.26% 90.98%)
--semantic-colour-text-success-subtle
→ emerald-10
hsl(123 76.92% 94.9%)
--semantic-colour-text-secondary-orange-darkest
→ citrus-900
hsl(16.18 91.75% 19.02%)
--semantic-colour-text-secondary-orange-semibold
→ citrus-600
hsl(18 73.91% 45.1%)
--semantic-colour-text-secondary-orange-primary
→ citrus-500
hsl(22.09 72.8% 50.98%)
--semantic-colour-text-secondary-orange-light
→ citrus-200
hsl(26.25 88.89% 85.88%)
--semantic-colour-text-secondary-orange-extralight
→ citrus-100
hsl(25.26 95% 92.16%)
--semantic-colour-text-secondary-orange-subtle
→ citrus-10
hsl(26.67 90% 96.08%)
--semantic-colour-text-secondary-pink-darkest
→ fuchsia-900
hsl(321.14 95.65% 18.04%)
--semantic-colour-text-secondary-pink-semibold
→ fuchsia-600
hsl(322.31 70.91% 43.14%)
--semantic-colour-text-secondary-pink-primary
→ fuchsia-500
hsl(322.03 63.2% 49.02%)
--semantic-colour-text-secondary-pink-light
→ fuchsia-200
hsl(321.36 76.62% 84.9%)
--semantic-colour-text-secondary-pink-extralight
→ fuchsia-100
hsl(322.7 90.24% 91.96%)
--semantic-colour-text-secondary-pink-subtle
→ fuchsia-10
hsl(327 100% 96.08%)
--semantic-colour-text-secondary-purple-darkest
→ lavender-900
hsl(280.95 72.41% 17.06%)
--semantic-colour-text-secondary-purple-semibold
→ lavender-600
hsl(280.97 66.21% 42.94%)
--semantic-colour-text-secondary-purple-primary
→ lavender-500
hsl(280.88 64% 49.02%)
--semantic-colour-text-secondary-purple-light
→ lavender-200
hsl(283.16 80.28% 86.08%)
--semantic-colour-text-secondary-purple-extralight
→ lavender-100
hsl(283.64 80.49% 91.96%)
--semantic-colour-text-secondary-purple-subtle
→ lavender-10
hsl(281.05 76% 95.1%)
Surface 66 tokens
Background fills — used by cards, banners, buttons and component containers.
--semantic-colour-surface-black
→ neutral-black
#000000
--semantic-colour-surface-darkest
→ slate-900
hsl(0 0% 12.16%)
--semantic-colour-surface-extra-bold
→ slate-700
hsl(0 0% 27.84%)
--semantic-colour-surface-bold
→ slate-600
hsl(0 0% 38.82%)
--semantic-colour-surface-semi-bold
→ slate-500
hsl(0 0% 49.02%)
--semantic-colour-surface-regular
→ slate-300
hsl(0 0% 74.9%)
--semantic-colour-surface-light
→ slate-200
hsl(0 0% 85.1%)
--semantic-colour-surface-extra-light
→ slate-100
hsl(0 0% 92.16%)
--semantic-colour-surface-subtle
→ slate-10
hsl(0 0% 96.08%)
--semantic-colour-surface-default
→ neutral-white
#ffffff
--semantic-colour-surface-brand-primary-darkest
→ cobalt-900
hsl(222.73 71.74% 18.04%)
--semantic-colour-surface-brand-primary-bold
→ cobalt-700
hsl(223.18 75.86% 34.12%)
--semantic-colour-surface-brand-primary
→ cobalt-600
hsl(222.8 70.09% 41.96%)
--semantic-colour-surface-brand-semibold
→ cobalt-500
hsl(219.87 62.25% 48.82%)
--semantic-colour-surface-brand-primary-light
→ cobalt-200
hsl(219.66 83.1% 86.08%)
--semantic-colour-surface-brand-primary-extralight
→ cobalt-100
hsl(221.82 80.49% 91.96%)
--semantic-colour-surface-brand-primary-subtle
→ cobalt-10
hsl(225 80% 96.08%)
--semantic-colour-surface-error-darkest
→ crimson-900
hsl(0 81.44% 19.02%)
--semantic-colour-surface-error-bold
→ crimson-700
hsl(2.13 77.05% 35.88%)
--semantic-colour-surface-error-primary
→ crimson-600
hsl(3.04 71.82% 43.14%)
--semantic-colour-surface-error-semibold
→ crimson-500
hsl(3.21 67.2% 49.02%)
--semantic-colour-surface-error-light
→ crimson-200
hsl(3.33 75% 85.88%)
--semantic-colour-surface-error-extralight
→ crimson-100
hsl(3.87 75.61% 91.96%)
--semantic-colour-surface-error-subtle
→ crimson-10
hsl(3.53 80.95% 95.88%)
--semantic-colour-surface-warning-extrabold
→ bumblebee-900
hsl(27.76 87.01% 15.1%)
--semantic-colour-surface-warning-bold
→ bumblebee-700
hsl(43.11 96.53% 33.92%)
--semantic-colour-surface-warning-primary
→ bumblebee-600
hsl(47.94 95.33% 41.96%)
--semantic-colour-surface-warning-semibold
→ bumblebee-500
hsl(49.09 81.96% 50%)
--semantic-colour-surface-warning-light
→ bumblebee-200
hsl(48.75 88.89% 85.88%)
--semantic-colour-surface-warning-extralight
→ bumblebee-100
hsl(48 86.96% 90.98%)
--semantic-colour-surface-warning-subtle
→ bumblebee-10
hsl(46.96 92% 95.1%)
--semantic-colour-surface-info-extrabold
→ sky-900
hsl(205.95 90.24% 16.08%)
--semantic-colour-surface-info-bold
→ sky-700
hsl(204.86 83.33% 32.94%)
--semantic-colour-surface-info-primary
→ sky-600
hsl(203.77 71.96% 41.96%)
--semantic-colour-surface-info-semibold
→ sky-500
hsl(202.91 66.27% 48.82%)
--semantic-colour-surface-info-light
→ sky-200
hsl(203.61 75.31% 84.12%)
--semantic-colour-surface-info-extralight
→ sky-100
hsl(203.33 78.26% 90.98%)
--semantic-colour-surface-info-subtle
→ sky-10
hsl(201.18 80.95% 95.88%)
--semantic-colour-surface-success-extrabold
→ emerald-900
hsl(124.74 50% 14.9%)
--semantic-colour-surface-success-bold
→ emerald-700
hsl(125.19 49.69% 31.96%)
--semantic-colour-surface-success-primary
→ emerald-600
hsl(125.14 50.24% 40.98%)
--semantic-colour-surface-success-semibold
→ emerald-500
hsl(124.88 50.2% 48.04%)
--semantic-colour-surface-success-light
→ emerald-200
hsl(128.4 60.98% 83.92%)
--semantic-colour-surface-success-extralight
→ emerald-100
hsl(125 78.26% 90.98%)
--semantic-colour-surface-success-subtle
→ emerald-10
hsl(123 76.92% 94.9%)
--semantic-colour-surface-secondary-orange-extrabold
→ citrus-900
hsl(16.18 91.75% 19.02%)
--semantic-colour-surface-secondary-orange-bold
→ citrus-700
hsl(16.09 75% 36.08%)
--semantic-colour-surface-secondary-orange-semibold
→ citrus-600
hsl(18 73.91% 45.1%)
--semantic-colour-surface-secondary-orange-primary
→ citrus-500
hsl(22.09 72.8% 50.98%)
--semantic-colour-surface-secondary-orange-light
→ citrus-200
hsl(26.25 88.89% 85.88%)
--semantic-colour-surface-secondary-orange-extralight
→ citrus-100
hsl(25.26 95% 92.16%)
--semantic-colour-surface-secondary-orange-subtle
→ citrus-10
hsl(26.67 90% 96.08%)
--semantic-colour-surface-secondary-pink-extrabold
→ fuchsia-900
hsl(321.14 95.65% 18.04%)
--semantic-colour-surface-secondary-pink-bold
→ fuchsia-700
hsl(321.94 75.28% 34.9%)
--semantic-colour-surface-secondary-pink-semibold
→ fuchsia-600
hsl(322.31 70.91% 43.14%)
--semantic-colour-surface-secondary-pink-primary
→ fuchsia-500
hsl(322.03 63.2% 49.02%)
--semantic-colour-surface-secondary-pink-light
→ fuchsia-200
hsl(321.36 76.62% 84.9%)
--semantic-colour-surface-secondary-pink-extralight
→ fuchsia-100
hsl(322.7 90.24% 91.96%)
--semantic-colour-surface-secondary-pink-subtle
→ fuchsia-10
hsl(327 100% 96.08%)
--semantic-colour-surface-secondary-purple-extrabold
→ lavender-900
hsl(280.95 72.41% 17.06%)
--semantic-colour-surface-secondary-purple-bold
→ lavender-700
hsl(281.08 65.68% 33.14%)
--semantic-colour-surface-secondary-purple-semibold
→ lavender-600
hsl(280.97 66.21% 42.94%)
--semantic-colour-surface-secondary-purple-primary
→ lavender-500
hsl(280.88 64% 49.02%)
--semantic-colour-surface-secondary-purple-light
→ lavender-200
hsl(283.16 80.28% 86.08%)
--semantic-colour-surface-secondary-purple-extralight
→ lavender-100
hsl(283.64 80.49% 91.96%)
--semantic-colour-surface-secondary-purple-subtle
→ lavender-10
hsl(281.05 76% 95.1%)
Border 48 tokens
Stroke colours for inputs, borders, dividers and decorative rules.
--semantic-colour-border-darkest
→ slate-900
hsl(0 0% 12.16%)
--semantic-colour-border-dark
→ slate-800
hsl(0 0% 20%)
--semantic-colour-border-medium
→ slate-600
hsl(0 0% 38.82%)
--semantic-colour-border-regular
→ slate-300
hsl(0 0% 74.9%)
--semantic-colour-border-muted
→ slate-200
hsl(0 0% 85.1%)
--semantic-colour-border-light
→ slate-100
hsl(0 0% 92.16%)
--semantic-colour-border-subtle
→ slate-10
hsl(0 0% 96.08%)
--semantic-colour-border-default
→ neutral-white
#ffffff
--semantic-colour-border-brand-primary-bold
→ cobalt-700
hsl(223.18 75.86% 34.12%)
--semantic-colour-border-brand-primary
→ cobalt-600
hsl(222.8 70.09% 41.96%)
--semantic-colour-border-brand-primary-light
→ cobalt-200
hsl(219.66 83.1% 86.08%)
--semantic-colour-border-brand-primary-extralight
→ cobalt-100
hsl(221.82 80.49% 91.96%)
--semantic-colour-border-brand-primary-subtle
→ cobalt-10
hsl(225 80% 96.08%)
--semantic-colour-border-error-bold
→ crimson-700
hsl(2.13 77.05% 35.88%)
--semantic-colour-border-error-primary
→ crimson-600
hsl(3.04 71.82% 43.14%)
--semantic-colour-border-error-light
→ crimson-200
hsl(3.33 75% 85.88%)
--semantic-colour-border-error-extralight
→ crimson-100
hsl(3.87 75.61% 91.96%)
--semantic-colour-border-error-subtle
→ crimson-10
hsl(3.53 80.95% 95.88%)
--semantic-colour-border-warning-bold
→ bumblebee-700
hsl(43.11 96.53% 33.92%)
--semantic-colour-border-warning-primary
→ bumblebee-600
hsl(47.94 95.33% 41.96%)
--semantic-colour-border-warning-light
→ bumblebee-200
hsl(48.75 88.89% 85.88%)
--semantic-colour-border-warning-extralight
→ bumblebee-100
hsl(48 86.96% 90.98%)
--semantic-colour-border-warning-subtle
→ bumblebee-10
hsl(46.96 92% 95.1%)
--semantic-colour-border-info-bold
→ sky-700
hsl(204.86 83.33% 32.94%)
--semantic-colour-border-info-primary
→ sky-600
hsl(203.77 71.96% 41.96%)
--semantic-colour-border-info-light
→ sky-200
hsl(203.61 75.31% 84.12%)
--semantic-colour-border-info-extralight
→ sky-100
hsl(203.33 78.26% 90.98%)
--semantic-colour-border-info-subtle
→ sky-10
hsl(201.18 80.95% 95.88%)
--semantic-colour-border-success-bold
→ emerald-700
hsl(125.19 49.69% 31.96%)
--semantic-colour-border-success-primary
→ emerald-600
hsl(125.14 50.24% 40.98%)
--semantic-colour-border-success-light
→ emerald-200
hsl(128.4 60.98% 83.92%)
--semantic-colour-border-success-extralight
→ emerald-100
hsl(125 78.26% 90.98%)
--semantic-colour-border-success-subtle
→ emerald-10
hsl(123 76.92% 94.9%)
--semantic-colour-border-secondary-orange-bold
→ citrus-700
hsl(16.09 75% 36.08%)
--semantic-colour-border-secondary-orange-primary
→ citrus-500
hsl(22.09 72.8% 50.98%)
--semantic-colour-border-secondary-orange-light
→ citrus-200
hsl(26.25 88.89% 85.88%)
--semantic-colour-border-secondary-orange-extralight
→ citrus-100
hsl(25.26 95% 92.16%)
--semantic-colour-border-secondary-orange-subtle
→ citrus-10
hsl(26.67 90% 96.08%)
--semantic-colour-border-secondary-pink-bold
→ fuchsia-700
hsl(321.94 75.28% 34.9%)
--semantic-colour-border-secondary-pink-primary
→ fuchsia-500
hsl(322.03 63.2% 49.02%)
--semantic-colour-border-secondary-pink-light
→ fuchsia-200
hsl(321.36 76.62% 84.9%)
--semantic-colour-border-secondary-pink-extralight
→ fuchsia-100
hsl(322.7 90.24% 91.96%)
--semantic-colour-border-secondary-pink-subtle
→ fuchsia-10
hsl(327 100% 96.08%)
--semantic-colour-border-secondary-purple-bold
→ lavender-700
hsl(281.08 65.68% 33.14%)
--semantic-colour-border-secondary-purple-primary
→ lavender-500
hsl(280.88 64% 49.02%)
--semantic-colour-border-secondary-purple-light
→ lavender-200
hsl(283.16 80.28% 86.08%)
--semantic-colour-border-secondary-purple-extralight
→ lavender-100
hsl(283.64 80.49% 91.96%)
--semantic-colour-border-secondary-purple-subtle
→ lavender-10
hsl(281.05 76% 95.1%)
Icon 27 tokens
Foreground colours for SVG icons across the system.
--semantic-colour-icon-neutral-light
→ neutral-white
#ffffff
--semantic-colour-icon-neutral-dark
→ neutral-black
#000000
--semantic-colour-icon-muted
→ slate-400
hsl(0 0% 61.96%)
--semantic-colour-icon-brand-primary-extrabold
→ cobalt-800
hsl(223.03 77.95% 24.9%)
--semantic-colour-icon-brand-primary
→ cobalt-600
hsl(222.8 70.09% 41.96%)
--semantic-colour-icon-brand-primary-subtle
→ cobalt-10
hsl(225 80% 96.08%)
--semantic-colour-icon-error-extrabold
→ crimson-800
hsl(0 73.91% 27.06%)
--semantic-colour-icon-error-primary
→ crimson-600
hsl(3.04 71.82% 43.14%)
--semantic-colour-icon-error-subtle
→ crimson-10
hsl(3.53 80.95% 95.88%)
--semantic-colour-icon-warning-extrabold
→ bumblebee-800
hsl(34.95 88.03% 22.94%)
--semantic-colour-icon-warning-primary
→ bumblebee-600
hsl(47.94 95.33% 41.96%)
--semantic-colour-icon-warning-light
→ bumblebee-10
hsl(46.96 92% 95.1%)
--semantic-colour-icon-success-extrabold
→ emerald-800
hsl(125.08 50.43% 22.94%)
--semantic-colour-icon-success-primary
→ emerald-600
hsl(125.14 50.24% 40.98%)
--semantic-colour-icon-success-subtle
→ emerald-10
hsl(123 76.92% 94.9%)
--semantic-colour-icon-info-extrabold
→ sky-800
hsl(205.64 92.13% 24.9%)
--semantic-colour-icon-info-primary
→ sky-600
hsl(203.77 71.96% 41.96%)
--semantic-colour-icon-info-subtle
→ sky-10
hsl(201.18 80.95% 95.88%)
--semantic-colour-icon-secondary-orange-extrabold
→ citrus-800
hsl(15.4 82.48% 26.86%)
--semantic-colour-icon-secondary-orange-primary
→ citrus-500
hsl(22.09 72.8% 50.98%)
--semantic-colour-icon-secondary-orange-subtle
→ citrus-10
hsl(26.67 90% 96.08%)
--semantic-colour-icon-secondary-pink-extrabold
→ fuchsia-800
hsl(322.88 89.39% 25.88%)
--semantic-colour-icon-secondary-pink-primary
→ fuchsia-500
hsl(322.03 63.2% 49.02%)
--semantic-colour-icon-secondary-pink-subtle
→ fuchsia-10
hsl(327 100% 96.08%)
--semantic-colour-icon-secondary-purple-extrabold
→ lavender-800
hsl(281.12 76.07% 22.94%)
--semantic-colour-icon-secondary-purple-primary
→ lavender-500
hsl(280.88 64% 49.02%)
--semantic-colour-icon-secondary-purple-subtle
→ lavender-10
hsl(281.05 76% 95.1%)
Static 3 tokens
Pure black, white and brand-static values that stay constant across light & dark themes.
--semantic-colour-static-black
→ neutral-black
#000000
--semantic-colour-static-white
→ neutral-white
#ffffff
--semantic-colour-static-green
→ emerald-600
hsl(125.14 50.24% 40.98%)