Skip to main content

Color

Globals

CoolGrey

Token name / Figma path
Value
$color-coolGrey--4Global/Cool Grey/cool-grey--4
hsla(208, 24%, 14%, 1)
$color-coolGrey--3Global/Cool Grey/cool-grey--3
hsla(208, 15%, 18%, 1)
$color-coolGrey--2Global/Cool Grey/cool-grey--2
hsla(210, 12%, 26%, 1)
$color-coolGrey--1Global/Cool Grey/cool-grey--1
hsla(210, 12%, 33%, 1)
$color-coolGrey-0Global/Cool Grey/cool-grey-0
hsla(215, 12%, 38%, 1)
$color-coolGrey-+1Global/Cool Grey/cool-grey-+1
hsla(211, 12%, 55%, 1)
$color-coolGrey-+2Global/Cool Grey/cool-grey-+2
hsla(211, 12%, 66%, 1)
$color-coolGrey-+3Global/Cool Grey/cool-grey-+3
hsla(210, 17%, 84%, 1)
$color-coolGrey-+4Global/Cool Grey/cool-grey-+4
hsla(207, 16%, 89%, 1)
$color-coolGrey-+5Global/Cool Grey/cool-grey-+5
hsla(210, 16%, 93%, 1)
$color-coolGrey-+6Global/Cool Grey/cool-grey-+6
hsla(204, 20%, 95%, 1)
$color-coolGrey-+7Global/Cool Grey/cool-grey-+7
hsla(210, 25%, 97%, 1)
$color-coolGrey-+8Global/Cool Grey/cool-grey-+8
hsla(210, 33%, 99%, 1)

CoolGrey Alpha

Token name / Figma path
Value
$color-coolGreyA--4Global/Cool Grey Alpha/cool-greyA--4
hsla(207, 47%, 7%, 0.93)
$color-coolGreyA--3Global/Cool Grey Alpha/cool-greyA--3
hsla(208, 43%, 7%, 0.88)
$color-coolGreyA--2Global/Cool Grey Alpha/cool-greyA--2
hsla(212, 27%, 14%, 0.86)
$color-coolGreyA--1Global/Cool Grey Alpha/cool-greyA--1
hsla(211, 30%, 16%, 0.8)
$color-coolGreyA-0Global/Cool Grey Alpha/cool-greyA-0
hsla(215, 40%, 16%, 0.74)
$color-coolGreyA-+1Global/Cool Grey Alpha/cool-greyA-+1
hsla(210, 50%, 19%, 0.56)
$color-coolGreyA-+2Global/Cool Grey Alpha/cool-greyA-+2
hsla(211, 66%, 15%, 0.4)
$color-coolGreyA-+3Global/Cool Grey Alpha/cool-greyA-+3
hsla(212, 68%, 20%, 0.2)
$color-coolGreyA-+4Global/Cool Grey Alpha/cool-greyA-+4
hsla(205, 89%, 14%, 0.13)
$color-coolGreyA-+5Global/Cool Grey Alpha/cool-greyA-+5
hsla(214, 64%, 17%, 0.09)
$color-coolGreyA-+6Global/Cool Grey Alpha/cool-greyA-+6
hsla(206, 95%, 16%, 0.06)
$color-coolGreyA-+7Global/Cool Grey Alpha/cool-greyA-+7
hsla(213, 100%, 18%, 0.04)
$color-coolGreyA-+8Global/Cool Grey Alpha/cool-greyA-+8
hsla(216, 67%, 37%, 0.02)

NeutralGrey

Token name / Figma path
Value
$color-neutralGrey--4Global/Neutral Grey/neutral-grey--4
hsla(0, 0%, 13%, 1)
$color-neutralGrey--3Global/Neutral Grey/neutral-grey--3
hsla(0, 0%, 18%, 1)
$color-neutralGrey--2Global/Neutral Grey/neutral-grey--2
hsla(0, 0%, 25%, 1)
$color-neutralGrey--1Global/Neutral Grey/neutral-grey--1
hsla(0, 0%, 32%, 1)
$color-neutralGrey-0Global/Neutral Grey/neutral-grey-0
hsla(0, 0%, 37%, 1)
$color-neutralGrey-+1Global/Neutral Grey/neutral-grey-+1
hsla(0, 0%, 54%, 1)
$color-neutralGrey-+2Global/Neutral Grey/neutral-grey-+2
hsla(0, 0%, 65%, 1)
$color-neutralGrey-+3Global/Neutral Grey/neutral-grey-+3
hsla(0, 0%, 84%, 1)
$color-neutralGrey-+4Global/Neutral Grey/neutral-grey-+4
hsla(0, 0%, 89%, 1)
$color-neutralGrey-+5Global/Neutral Grey/neutral-grey-+5
hsla(0, 0%, 92%, 1)
$color-neutralGrey-+6Global/Neutral Grey/neutral-grey-+6
hsla(0, 0%, 95%, 1)
$color-neutralGrey-+7Global/Neutral Grey/neutral-grey-+7
hsla(0, 0%, 97%, 1)
$color-neutralGrey-+8Global/Neutral Grey/neutral-grey-+8
hsla(0, 0%, 99%, 1)

NeutralGrey Alpha

Token name / Figma path
Value
$color-neutralGreyA--4Global/Neutral Grey Alpha/neutral-greyA--4
hsla(0, 0%, 7%, 0.93)
$color-neutralGreyA--3Global/Neutral Grey Alpha/neutral-greyA--3
hsla(0, 0%, 6%, 0.88)
$color-neutralGreyA--2Global/Neutral Grey Alpha/neutral-greyA--2
hsla(0, 0%, 13%, 0.86)
$color-neutralGreyA--1Global/Neutral Grey Alpha/neutral-greyA--1
hsla(0, 0%, 15%, 0.8)
$color-neutralGreyA-0Global/Neutral Grey Alpha/neutral-greyA-0
hsla(240, 1%, 15%, 0.74)
$color-neutralGreyA-+1Global/Neutral Grey Alpha/neutral-greyA-+1
hsla(0, 0%, 17%, 0.56)
$color-neutralGreyA-+2Global/Neutral Grey Alpha/neutral-greyA-+2
hsla(0, 0%, 13%, 0.4)
$color-neutralGreyA-+3Global/Neutral Grey Alpha/neutral-greyA-+3
hsla(0, 0%, 18%, 0.2)
$color-neutralGreyA-+4Global/Neutral Grey Alpha/neutral-greyA-+4
hsla(0, 0%, 12%, 0.13)
$color-neutralGreyA-+5Global/Neutral Grey Alpha/neutral-greyA-+5
hsla(0, 0%, 11%, 0.09)
$color-neutralGreyA-+6Global/Neutral Grey Alpha/neutral-greyA-+6
hsla(0, 0%, 13%, 0.06)
$color-neutralGreyA-+7Global/Neutral Grey Alpha/neutral-greyA-+7
hsla(0, 0%, 18%, 0.04)
$color-neutralGreyA-+8Global/Neutral Grey Alpha/neutral-greyA-+8
hsla(0, 0%, 32%, 0.02)

WarmGrey

Token name / Figma path
Value
$color-warmGrey--4Global/Warm Grey/warm-grey--4
hsla(60, 4%, 13%, 1)
$color-warmGrey--3Global/Warm Grey/warm-grey--3
hsla(60, 4%, 18%, 1)
$color-warmGrey--2Global/Warm Grey/warm-grey--2
hsla(60, 5%, 24%, 1)
$color-warmGrey--1Global/Warm Grey/warm-grey--1
hsla(60, 4%, 31%, 1)
$color-warmGrey-0Global/Warm Grey/warm-grey-0
hsla(60, 4%, 36%, 1)
$color-warmGrey-+1Global/Warm Grey/warm-grey-+1
hsla(60, 3%, 53%, 1)
$color-warmGrey-+2Global/Warm Grey/warm-grey-+2
hsla(60, 5%, 64%, 1)
$color-warmGrey-+3Global/Warm Grey/warm-grey-+3
hsla(60, 8%, 84%, 1)
$color-warmGrey-+4Global/Warm Grey/warm-grey-+4
hsla(60, 8%, 89%, 1)
$color-warmGrey-+5Global/Warm Grey/warm-grey-+5
hsla(60, 9%, 91%, 1)
$color-warmGrey-+6Global/Warm Grey/warm-grey-+6
hsla(60, 6%, 95%, 1)
$color-warmGrey-+7Global/Warm Grey/warm-grey-+7
hsla(60, 6%, 97%, 1)
$color-warmGrey-+8Global/Warm Grey/warm-grey-+8
hsla(60, 4%, 99%, 1)

WarmGrey Alpha

Token name / Figma path
Value
$color-warmGreyA--4Global/Warm Grey Alpha/warm-greyA--4
hsla(60, 6%, 7%, 0.93)
$color-warmGreyA--3Global/Warm Grey Alpha/warm-greyA--3
hsla(60, 15%, 6%, 0.88)
$color-warmGreyA--2Global/Warm Grey Alpha/warm-greyA--2
hsla(60, 12%, 12%, 0.86)
$color-warmGreyA--1Global/Warm Grey Alpha/warm-greyA--1
hsla(60, 10%, 14%, 0.8)
$color-warmGreyA-0Global/Warm Grey Alpha/warm-greyA-0
hsla(60, 15%, 13%, 0.74)
$color-warmGreyA-+1Global/Warm Grey Alpha/warm-greyA-+1
hsla(60, 15%, 16%, 0.56)
$color-warmGreyA-+2Global/Warm Grey Alpha/warm-greyA-+2
hsla(60, 41%, 11%, 0.4)
$color-warmGreyA-+3Global/Warm Grey Alpha/warm-greyA-+3
hsla(60, 36%, 18%, 0.2)
$color-warmGreyA-+4Global/Warm Grey Alpha/warm-greyA-+4
hsla(60, 43%, 14%, 0.13)
$color-warmGreyA-+5Global/Warm Grey Alpha/warm-greyA-+5
hsla(60, 89%, 7%, 0.09)
$color-warmGreyA-+6Global/Warm Grey Alpha/warm-greyA-+6
hsla(60, 54%, 12%, 0.06)
$color-warmGreyA-+7Global/Warm Grey Alpha/warm-greyA-+7
hsla(60, 3%, 18%, 0.04)
$color-warmGreyA-+8Global/Warm Grey Alpha/warm-greyA-+8
hsla(0, 0%, 32%, 0.02)

White Alpha

Token name / Figma path
Value
$color-whiteA--12Global/White Alpha/whiteA--12
hsla(0, 0%, 100%, 0.02)
$color-whiteA--11Global/White Alpha/whiteA--11
hsla(0, 0%, 100%, 0.03)
$color-whiteA--10Global/White Alpha/whiteA--10
hsla(0, 0%, 100%, 0.05)
$color-whiteA--9Global/White Alpha/whiteA--9
hsla(0, 0%, 100%, 0.08)
$color-whiteA--8Global/White Alpha/whiteA--8
hsla(0, 0%, 100%, 0.1)
$color-whiteA--7Global/White Alpha/whiteA--7
hsla(0, 0%, 100%, 0.12)
$color-whiteA--6Global/White Alpha/whiteA--6
hsla(0, 0%, 100%, 0.24)
$color-whiteA--5Global/White Alpha/whiteA--5
hsla(0, 0%, 100%, 0.4)
$color-whiteA--4Global/White Alpha/whiteA--4
hsla(0, 0%, 100%, 0.64)
$color-whiteA--3Global/White Alpha/whiteA--3
hsla(0, 0%, 100%, 0.68)
$color-whiteA--2Global/White Alpha/whiteA--2
hsla(0, 0%, 100%, 0.72)
$color-whiteA--1Global/White Alpha/whiteA--1
hsla(0, 0%, 100%, 0.82)
$color-whiteA-0Global/White Alpha/whiteA-0
hsla(0, 0%, 100%, 1)

Red

Token name / Figma path
Value
$color-red--4Global/Red/red--4
hsla(0, 70%, 17%, 1)
$color-red--3Global/Red/red--3
hsla(0, 55%, 28%, 1)
$color-red--2Global/Red/red--2
hsla(0, 54%, 38%, 1)
$color-red--1Global/Red/red--1
hsla(0, 50%, 42%, 1)
$color-red-0Global/Red/red-0
hsla(0, 58%, 49%, 1)
$color-red-+1Global/Red/red-+1
hsla(0, 85%, 67%, 1)
$color-red-+2Global/Red/red-+2
hsla(0, 82%, 76%, 1)
$color-red-+3Global/Red/red-+3
hsla(0, 88%, 90%, 1)
$color-red-+4Global/Red/red-+4
hsla(0, 85%, 92%, 1)
$color-red-+5Global/Red/red-+5
hsla(0, 92%, 95%, 1)
$color-red-+6Global/Red/red-+6
hsla(0, 100%, 96%, 1)
$color-red-+7Global/Red/red-+7
hsla(0, 88%, 98%, 1)
$color-red-+8Global/Red/red-+8
hsla(0, 100%, 99%, 1)

Raspberry

Token name / Figma path
Value
$color-raspberry--4Global/Raspberry/raspberry--4
hsla(340, 70%, 16%, 1)
$color-raspberry--3Global/Raspberry/raspberry--3
hsla(340, 55%, 26%, 1)
$color-raspberry--2Global/Raspberry/raspberry--2
hsla(340, 54%, 37%, 1)
$color-raspberry--1Global/Raspberry/raspberry--1
hsla(340, 50%, 41%, 1)
$color-raspberry-0Global/Raspberry/raspberry-0
hsla(340, 60%, 47%, 1)
$color-raspberry-+1Global/Raspberry/raspberry-+1
hsla(340, 71%, 64%, 1)
$color-raspberry-+2Global/Raspberry/raspberry-+2
hsla(340, 71%, 74%, 1)
$color-raspberry-+3Global/Raspberry/raspberry-+3
hsla(340, 75%, 89%, 1)
$color-raspberry-+4Global/Raspberry/raspberry-+4
hsla(339, 83%, 91%, 1)
$color-raspberry-+5Global/Raspberry/raspberry-+5
hsla(342, 87%, 94%, 1)
$color-raspberry-+6Global/Raspberry/raspberry-+6
hsla(341, 80%, 96%, 1)
$color-raspberry-+7Global/Raspberry/raspberry-+7
hsla(340, 82%, 98%, 1)
$color-raspberry-+8Global/Raspberry/raspberry-+8
hsla(336, 100%, 99%, 1)

Magenta

Token name / Figma path
Value
$color-magenta--4Global/Magenta/magenta--4
hsla(320, 71%, 15%, 1)
$color-magenta--3Global/Magenta/magenta--3
hsla(321, 55%, 26%, 1)
$color-magenta--2Global/Magenta/magenta--2
hsla(320, 54%, 35%, 1)
$color-magenta--1Global/Magenta/magenta--1
hsla(320, 50%, 39%, 1)
$color-magenta-0Global/Magenta/magenta-0
hsla(320, 58%, 44%, 1)
$color-magenta-+1Global/Magenta/magenta-+1
hsla(320, 66%, 62%, 1)
$color-magenta-+2Global/Magenta/magenta-+2
hsla(320, 72%, 73%, 1)
$color-magenta-+3Global/Magenta/magenta-+3
hsla(320, 74%, 88%, 1)
$color-magenta-+4Global/Magenta/magenta-+4
hsla(321, 83%, 91%, 1)
$color-magenta-+5Global/Magenta/magenta-+5
hsla(321, 87%, 94%, 1)
$color-magenta-+6Global/Magenta/magenta-+6
hsla(319, 80%, 96%, 1)
$color-magenta-+7Global/Magenta/magenta-+7
hsla(320, 82%, 98%, 1)
$color-magenta-+8Global/Magenta/magenta-+8
hsla(324, 100%, 99%, 1)

Purple

Token name / Figma path
Value
$color-purple--4Global/Purple/purple--4
hsla(320, 71%, 15%, 1)
$color-purple--3Global/Purple/purple--3
hsla(290, 55%, 26%, 1)
$color-purple--2Global/Purple/purple--2
hsla(290, 54%, 35%, 1)
$color-purple--1Global/Purple/purple--1
hsla(290, 50%, 39%, 1)
$color-purple-0Global/Purple/purple-0
hsla(290, 50%, 45%, 1)
$color-purple-+1Global/Purple/purple-+1
hsla(288, 62%, 63%, 1)
$color-purple-+2Global/Purple/purple-+2
hsla(288, 71%, 74%, 1)
$color-purple-+3Global/Purple/purple-+3
hsla(296, 74%, 88%, 1)
$color-purple-+4Global/Purple/purple-+4
hsla(291, 83%, 91%, 1)
$color-purple-+5Global/Purple/purple-+5
hsla(288, 87%, 94%, 1)
$color-purple-+6Global/Purple/purple-+6
hsla(289, 80%, 96%, 1)
$color-purple-+7Global/Purple/purple-+7
hsla(288, 100%, 98%, 1)
$color-purple-+8Global/Purple/purple-+8
hsla(288, 100%, 99%, 1)

Grape

Token name / Figma path
Value
$color-grape--4Global/Grape/grape--4
hsla(270, 70%, 18%, 1)
$color-grape--3Global/Grape/grape--3
hsla(270, 56%, 30%, 1)
$color-grape--2Global/Grape/grape--2
hsla(270, 54%, 40%, 1)
$color-grape--1Global/Grape/grape--1
hsla(270, 50%, 45%, 1)
$color-grape-0Global/Grape/grape-0
hsla(270, 50%, 50%, 1)
$color-grape-+1Global/Grape/grape-+1
hsla(270, 74%, 68%, 1)
$color-grape-+2Global/Grape/grape-+2
hsla(270, 81%, 77%, 1)
$color-grape-+3Global/Grape/grape-+3
hsla(269, 84%, 90%, 1)
$color-grape-+4Global/Grape/grape-+4
hsla(270, 100%, 93%, 1)
$color-grape-+5Global/Grape/grape-+5
hsla(270, 100%, 95%, 1)
$color-grape-+6Global/Grape/grape-+6
hsla(264, 100%, 97%, 1)
$color-grape-+7Global/Grape/grape-+7
hsla(270, 100%, 98%, 1)
$color-grape-+8Global/Grape/grape-+8
hsla(264, 100%, 99%, 1)

Violet

Token name / Figma path
Value
$color-violet--4Global/Violet/violet--4
hsla(250, 69%, 23%, 1)
$color-violet--3Global/Violet/violet--3
hsla(250, 55%, 35%, 1)
$color-violet--2Global/Violet/violet--2
hsla(250, 54%, 48%, 1)
$color-violet--1Global/Violet/violet--1
hsla(250, 60%, 53%, 1)
$color-violet-0Global/Violet/violet-0
hsla(250, 54%, 55%, 1)
$color-violet-+1Global/Violet/violet-+1
hsla(250, 80%, 72%, 1)
$color-violet-+2Global/Violet/violet-+2
hsla(246, 92%, 81%, 1)
$color-violet-+3Global/Violet/violet-+3
hsla(249, 100%, 92%, 1)
$color-violet-+4Global/Violet/violet-+4
hsla(246, 100%, 94%, 1)
$color-violet-+5Global/Violet/violet-+5
hsla(249, 100%, 96%, 1)
$color-violet-+6Global/Violet/violet-+6
hsla(252, 100%, 97%, 1)
$color-violet-+7Global/Violet/violet-+7
hsla(252, 100%, 98%, 1)
$color-violet-+8Global/Violet/violet-+8
hsla(252, 100%, 99%, 1)

Blue

Token name / Figma path
Value
$color-blue--4Global/Blue/blue--4
hsla(222, 91%, 19%, 1)
$color-blue--3Global/Blue/blue--3
hsla(222, 80%, 33%, 1)
$color-blue--2Global/Blue/blue--2
hsla(222, 73%, 44%, 1)
$color-blue--1Global/Blue/blue--1
hsla(222, 68%, 48%, 1)
$color-blue-0Global/Blue/blue-0
hsla(222, 66%, 51%, 1)
$color-blue-+1Global/Blue/blue-+1
hsla(222, 87%, 68%, 1)
$color-blue-+2Global/Blue/blue-+2
hsla(221, 93%, 77%, 1)
$color-blue-+3Global/Blue/blue-+3
hsla(221, 100%, 90%, 1)
$color-blue-+4Global/Blue/blue-+4
hsla(221, 100%, 92%, 1)
$color-blue-+5Global/Blue/blue-+5
hsla(220, 100%, 95%, 1)
$color-blue-+6Global/Blue/blue-+6
hsla(223, 100%, 96%, 1)
$color-blue-+7Global/Blue/blue-+7
hsla(223, 100%, 98%, 1)
$color-blue-+8Global/Blue/blue-+8
hsla(227, 100%, 99%, 1)

Cyan

Token name / Figma path
Value
$color-cyan--4Global/Cyan/cyan--4
hsla(205, 100%, 13%, 1)
$color-cyan--3Global/Cyan/cyan--3
hsla(205, 80%, 24%, 1)
$color-cyan--2Global/Cyan/cyan--2
hsla(205, 73%, 32%, 1)
$color-cyan--1Global/Cyan/cyan--1
hsla(205, 71%, 36%, 1)
$color-cyan-0Global/Cyan/cyan-0
hsla(205, 92%, 38%, 1)
$color-cyan-+1Global/Cyan/cyan-+1
hsla(210, 66%, 60%, 1)
$color-cyan-+2Global/Cyan/cyan-+2
hsla(208, 87%, 72%, 1)
$color-cyan-+3Global/Cyan/cyan-+3
hsla(208, 100%, 88%, 1)
$color-cyan-+4Global/Cyan/cyan-+4
hsla(208, 100%, 90%, 1)
$color-cyan-+5Global/Cyan/cyan-+5
hsla(207, 100%, 94%, 1)
$color-cyan-+6Global/Cyan/cyan-+6
hsla(210, 100%, 96%, 1)
$color-cyan-+7Global/Cyan/cyan-+7
hsla(204, 100%, 97%, 1)
$color-cyan-+8Global/Cyan/cyan-+8
hsla(204, 100%, 99%, 1)

Teal

Token name / Figma path
Value
$color-teal--4Global/Teal/teal--4
hsla(194, 96%, 11%, 1)
$color-teal--3Global/Teal/teal--3
hsla(194, 80%, 20%, 1)
$color-teal--2Global/Teal/teal--2
hsla(194, 65%, 28%, 1)
$color-teal--1Global/Teal/teal--1
hsla(194, 68%, 31%, 1)
$color-teal-0Global/Teal/teal-0
hsla(194, 91%, 31%, 1)
$color-teal-+1Global/Teal/teal-+1
hsla(196, 44%, 52%, 1)
$color-teal-+2Global/Teal/teal-+2
hsla(197, 58%, 67%, 1)
$color-teal-+3Global/Teal/teal-+3
hsla(193, 75%, 84%, 1)
$color-teal-+4Global/Teal/teal-+4
hsla(193, 76%, 87%, 1)
$color-teal-+5Global/Teal/teal-+5
hsla(196, 72%, 93%, 1)
$color-teal-+6Global/Teal/teal-+6
hsla(195, 77%, 95%, 1)
$color-teal-+7Global/Teal/teal-+7
hsla(196, 100%, 97%, 1)
$color-teal-+8Global/Teal/teal-+8
hsla(192, 100%, 99%, 1)

Aquamarine

Token name / Figma path
Value
$color-aquamarine--4Global/Aquamarine/aquamarine--4
hsla(170, 96%, 9%, 1)
$color-aquamarine--3Global/Aquamarine/aquamarine--3
hsla(172, 70%, 17%, 1)
$color-aquamarine--2Global/Aquamarine/aquamarine--2
hsla(172, 66%, 24%, 1)
$color-aquamarine--1Global/Aquamarine/aquamarine--1
hsla(170, 62%, 27%, 1)
$color-aquamarine-0Global/Aquamarine/aquamarine-0
hsla(170, 86%, 26%, 1)
$color-aquamarine-+1Global/Aquamarine/aquamarine-+1
hsla(172, 46%, 44%, 1)
$color-aquamarine-+2Global/Aquamarine/aquamarine-+2
hsla(173, 46%, 61%, 1)
$color-aquamarine-+3Global/Aquamarine/aquamarine-+3
hsla(173, 49%, 83%, 1)
$color-aquamarine-+4Global/Aquamarine/aquamarine-+4
hsla(172, 63%, 86%, 1)
$color-aquamarine-+5Global/Aquamarine/aquamarine-+5
hsla(174, 61%, 91%, 1)
$color-aquamarine-+6Global/Aquamarine/aquamarine-+6
hsla(172, 61%, 93%, 1)
$color-aquamarine-+7Global/Aquamarine/aquamarine-+7
hsla(174, 50%, 96%, 1)
$color-aquamarine-+8Global/Aquamarine/aquamarine-+8
hsla(180, 60%, 99%, 1)

Green

Token name / Figma path
Value
$color-green--4Global/Green/green--4
hsla(152, 76%, 10%, 1)
$color-green--3Global/Green/green--3
hsla(152, 70%, 18%, 1)
$color-green--2Global/Green/green--2
hsla(152, 61%, 25%, 1)
$color-green--1Global/Green/green--1
hsla(152, 58%, 28%, 1)
$color-green-0Global/Green/green-0
hsla(150, 62%, 30%, 1)
$color-green-+1Global/Green/green-+1
hsla(150, 38%, 47%, 1)
$color-green-+2Global/Green/green-+2
hsla(148, 46%, 63%, 1)
$color-green-+3Global/Green/green-+3
hsla(148, 51%, 84%, 1)
$color-green-+4Global/Green/green-+4
hsla(148, 61%, 86%, 1)
$color-green-+5Global/Green/green-+5
hsla(148, 70%, 91%, 1)
$color-green-+6Global/Green/green-+6
hsla(148, 61%, 94%, 1)
$color-green-+7Global/Green/green-+7
hsla(146, 47%, 97%, 1)
$color-green-+8Global/Green/green-+8
hsla(140, 60%, 99%, 1)

Emerald

Token name / Figma path
Value
$color-emerald--4Global/Emerald/emerald--4
hsla(122, 64%, 11%, 1)
$color-emerald--3Global/Emerald/emerald--3
hsla(122, 63%, 20%, 1)
$color-emerald--2Global/Emerald/emerald--2
hsla(122, 48%, 27%, 1)
$color-emerald--1Global/Emerald/emerald--1
hsla(120, 41%, 31%, 1)
$color-emerald-0Global/Emerald/emerald-0
hsla(120, 38%, 33%, 1)
$color-emerald-+1Global/Emerald/emerald-+1
hsla(120, 32%, 49%, 1)
$color-emerald-+2Global/Emerald/emerald-+2
hsla(120, 38%, 66%, 1)
$color-emerald-+3Global/Emerald/emerald-+3
hsla(120, 50%, 85%, 1)
$color-emerald-+4Global/Emerald/emerald-+4
hsla(120, 57%, 88%, 1)
$color-emerald-+5Global/Emerald/emerald-+5
hsla(120, 56%, 92%, 1)
$color-emerald-+6Global/Emerald/emerald-+6
hsla(120, 61%, 94%, 1)
$color-emerald-+7Global/Emerald/emerald-+7
hsla(120, 47%, 97%, 1)
$color-emerald-+8Global/Emerald/emerald-+8
hsla(120, 60%, 99%, 1)

Orange

Token name / Figma path
Value
$color-orange--4Global/Orange/orange--4
hsla(30, 78%, 16%, 1)
$color-orange--3Global/Orange/orange--3
hsla(30, 77%, 27%, 1)
$color-orange--2Global/Orange/orange--2
hsla(29, 70%, 37%, 1)
$color-orange--1Global/Orange/orange--1
hsla(30, 86%, 38%, 1)
$color-orange-0Global/Orange/orange-0
hsla(30, 90%, 59%, 1)
$color-orange-+1Global/Orange/orange-+1
hsla(30, 90%, 64%, 1)
$color-orange-+2Global/Orange/orange-+2
hsla(30, 99%, 72%, 1)
$color-orange-+3Global/Orange/orange-+3
hsla(30, 100%, 83%, 1)
$color-orange-+4Global/Orange/orange-+4
hsla(30, 91%, 87%, 1)
$color-orange-+5Global/Orange/orange-+5
hsla(30, 100%, 91%, 1)
$color-orange-+6Global/Orange/orange-+6
hsla(31, 100%, 94%, 1)
$color-orange-+7Global/Orange/orange-+7
hsla(30, 100%, 96%, 1)
$color-orange-+8Global/Orange/orange-+8
hsla(24, 100%, 99%, 1)

Transparent

Aliases

Semantic

Brand

Token name / Figma path
Value
$color-semantic-brand--4Semantic/Brand/brand.-4
$color-blue--4
$color-semantic-brand--3Semantic/Brand/brand.-3
$color-blue--3
$color-semantic-brand--2Semantic/Brand/brand.-2
$color-blue--2
$color-semantic-brand--1Semantic/Brand/brand.-1
$color-blue--1
$color-semantic-brand-0Semantic/Brand/brand.0
$color-blue-0
$color-semantic-brand-+1Semantic/Brand/brand.+1
$color-blue-+1
$color-semantic-brand-+2Semantic/Brand/brand.+2
$color-blue-+2
$color-semantic-brand-+3Semantic/Brand/brand.+3
$color-blue-+3
$color-semantic-brand-+4Semantic/Brand/brand.+4
$color-blue-+4
$color-semantic-brand-+5Semantic/Brand/brand.+5
$color-blue-+5
$color-semantic-brand-+6Semantic/Brand/brand.+6
$color-blue-+6
$color-semantic-brand-+7Semantic/Brand/brand.+7
$color-blue-+7
$color-semantic-brand-+8Semantic/Brand/brand.+8
$color-blue-+8

Neutral

Token name / Figma path
Value
$color-semantic-neutral--4Semantic/Neutral/neutral.-4
$color-coolGrey--4
$color-semantic-neutral--3Semantic/Neutral/neutral.-3
$color-coolGrey--3
$color-semantic-neutral--2Semantic/Neutral/neutral.-2
$color-coolGrey--2
$color-semantic-neutral--1Semantic/Neutral/neutral.-1
$color-coolGrey--1
$color-semantic-neutral-0Semantic/Neutral/neutral.0
$color-coolGrey-0
$color-semantic-neutral-+1Semantic/Neutral/neutral.+1
$color-coolGrey-+1
$color-semantic-neutral-+2Semantic/Neutral/neutral.+2
$color-coolGrey-+2
$color-semantic-neutral-+3Semantic/Neutral/neutral.+3
$color-coolGrey-+3
$color-semantic-neutral-+4Semantic/Neutral/neutral.+4
$color-coolGrey-+4
$color-semantic-neutral-+5Semantic/Neutral/neutral.+5
$color-coolGrey-+5
$color-semantic-neutral-+6Semantic/Neutral/neutral.+6
$color-coolGrey-+6
$color-semantic-neutral-+7Semantic/Neutral/neutral.+7
$color-coolGrey-+7
$color-semantic-neutral-+8Semantic/Neutral/neutral.+8
$color-coolGrey-+8

Neutral Alpha

Token name / Figma path
Value
$color-semantic-neutralA--4Semantic/Neutral Alpha/neutralA.-4
$color-coolGreyA--4
$color-semantic-neutralA--3Semantic/Neutral Alpha/neutralA.-3
$color-coolGreyA--3
$color-semantic-neutralA--2Semantic/Neutral Alpha/neutralA.-2
$color-coolGreyA--2
$color-semantic-neutralA--1Semantic/Neutral Alpha/neutralA.-1
$color-coolGreyA--1
$color-semantic-neutralA-0Semantic/Neutral Alpha/neutralA.0
$color-coolGreyA-0
$color-semantic-neutralA-+1Semantic/Neutral Alpha/neutralA.+1
$color-coolGreyA-+1
$color-semantic-neutralA-+2Semantic/Neutral Alpha/neutralA.+2
$color-coolGreyA-+2
$color-semantic-neutralA-+3Semantic/Neutral Alpha/neutralA.+3
$color-coolGreyA-+3
$color-semantic-neutralA-+4Semantic/Neutral Alpha/neutralA.+4
$color-coolGreyA-+4
$color-semantic-neutralA-+5Semantic/Neutral Alpha/neutralA.+5
$color-coolGreyA-+5
$color-semantic-neutralA-+6Semantic/Neutral Alpha/neutralA.+6
$color-coolGreyA-+6
$color-semantic-neutralA-+7Semantic/Neutral Alpha/neutralA.+7
$color-coolGreyA-+7
$color-semantic-neutralA-+8Semantic/Neutral Alpha/neutralA.+8
$color-coolGreyA-+8

Informative

Token name / Figma path
Value
$color-semantic-informative--4Semantic/Informative/informative.-4
$color-blue--4
$color-semantic-informative--3Semantic/Informative/informative.-3
$color-blue--3
$color-semantic-informative--2Semantic/Informative/informative.-2
$color-blue--2
$color-semantic-informative--1Semantic/Informative/informative.-1
$color-blue--1
$color-semantic-informative-0Semantic/Informative/informative.0
$color-blue-0
$color-semantic-informative-+1Semantic/Informative/informative.+1
$color-blue-+1
$color-semantic-informative-+2Semantic/Informative/informative.+2
$color-blue-+2
$color-semantic-informative-+3Semantic/Informative/informative.+3
$color-blue-+3
$color-semantic-informative-+4Semantic/Informative/informative.+4
$color-blue-+4
$color-semantic-informative-+5Semantic/Informative/informative.+5
$color-blue-+5
$color-semantic-informative-+6Semantic/Informative/informative.+6
$color-blue-+6
$color-semantic-informative-+7Semantic/Informative/informative.+7
$color-blue-+7
$color-semantic-informative-+8Semantic/Informative/informative.+8
$color-blue-+8

Positive

Token name / Figma path
Value
$color-semantic-positive--4Semantic/Positive/positive.-4
$color-green--4
$color-semantic-positive--3Semantic/Positive/positive.-3
$color-green--3
$color-semantic-positive--2Semantic/Positive/positive.-2
$color-green--2
$color-semantic-positive--1Semantic/Positive/positive.-1
$color-green--1
$color-semantic-positive-0Semantic/Positive/positive.0
$color-green-0
$color-semantic-positive-+1Semantic/Positive/positive.+1
$color-green-+1
$color-semantic-positive-+2Semantic/Positive/positive.+2
$color-green-+2
$color-semantic-positive-+3Semantic/Positive/positive.+3
$color-green-+3
$color-semantic-positive-+4Semantic/Positive/positive.+4
$color-green-+4
$color-semantic-positive-+5Semantic/Positive/positive.+5
$color-green-+5
$color-semantic-positive-+6Semantic/Positive/positive.+6
$color-green-+6
$color-semantic-positive-+7Semantic/Positive/positive.+7
$color-green-+7
$color-semantic-positive-+8Semantic/Positive/positive.+8
$color-green-+8

Warning

Token name / Figma path
Value
$color-semantic-warning--4Semantic/Warning/warning.-4
$color-orange--4
$color-semantic-warning--3Semantic/Warning/warning.-3
$color-orange--3
$color-semantic-warning--2Semantic/Warning/warning.-2
$color-orange--2
$color-semantic-warning--1Semantic/Warning/warning.-1
$color-orange--1
$color-semantic-warning-0Semantic/Warning/warning.0
$color-orange-0
$color-semantic-warning-+1Semantic/Warning/warning.+1
$color-orange-+1
$color-semantic-warning-+2Semantic/Warning/warning.+2
$color-orange-+2
$color-semantic-warning-+3Semantic/Warning/warning.+3
$color-orange-+3
$color-semantic-warning-+4Semantic/Warning/warning.+4
$color-orange-+4
$color-semantic-warning-+5Semantic/Warning/warning.+5
$color-orange-+5
$color-semantic-warning-+6Semantic/Warning/warning.+6
$color-orange-+6
$color-semantic-warning-+7Semantic/Warning/warning.+7
$color-orange-+7
$color-semantic-warning-+8Semantic/Warning/warning.+8
$color-orange-+8

Negative

Token name / Figma path
Value
$color-semantic-negative--4Semantic/Negative/negative.-4
$color-red--4
$color-semantic-negative--3Semantic/Negative/negative.-3
$color-red--3
$color-semantic-negative--2Semantic/Negative/negative.-2
$color-red--2
$color-semantic-negative--1Semantic/Negative/negative.-1
$color-red--1
$color-semantic-negative-0Semantic/Negative/negative.0
$color-red-0
$color-semantic-negative-+1Semantic/Negative/negative.+1
$color-red-+1
$color-semantic-negative-+2Semantic/Negative/negative.+2
$color-red-+2
$color-semantic-negative-+3Semantic/Negative/negative.+3
$color-red-+3
$color-semantic-negative-+4Semantic/Negative/negative.+4
$color-red-+4
$color-semantic-negative-+5Semantic/Negative/negative.+5
$color-red-+5
$color-semantic-negative-+6Semantic/Negative/negative.+6
$color-red-+6
$color-semantic-negative-+7Semantic/Negative/negative.+7
$color-red-+7
$color-semantic-negative-+8Semantic/Negative/negative.+8
$color-red-+8

Content

Token name / Figma path
Value
$color-content-primaryContent/Primary
$color-semantic-neutral--3
$color-content-secondaryContent/Secondary
$color-semantic-neutral-0
$color-content-tertiaryContent/Tertiary
$color-semantic-neutral-+1
$color-content-disabledContent/Disabled
$color-semantic-neutral-+2
$color-content-primary-invertedContent/Inverted Primary
$color-whiteA-0
$color-content-secondary-invertedContent/Inverted Secondary
$color-whiteA--4
$color-content-tertiary-invertedContent/Inverted Tertiary
$color-whiteA--5
$color-content-disabled-invertedContent/Inverted Disabled
$color-whiteA--6
$color-content-informative-primaryContent/Informative/Primary
$color-semantic-informative--3
$color-content-informative-secondaryContent/Informative/Secondary
$color-semantic-informative-0
$color-content-positive-primaryContent/Positive/Primary
$color-semantic-positive--3
$color-content-positive-secondaryContent/Positive/Secondary
$color-semantic-positive-0
$color-content-warning-primaryContent/Warning/Primary
$color-semantic-warning--3
$color-content-warning-secondaryContent/Warning/Secondary
$color-semantic-warning-0
$color-content-negative-primaryContent/Negative/Primary
$color-semantic-negative--3
$color-content-negative-secondaryContent/Negative/Secondary
$color-semantic-negative-0
$color-content-brand-primaryContent/Brand/Primary
$color-semantic-brand--3
$color-content-brand-secondaryContent/Brand/Secondary
$color-semantic-brand-0

Border

Token name / Figma path
Value
$color-border-defaultBorder/Default
$color-semantic-neutral-+5
$color-border-defaultABorder/Default Alpha
$color-semantic-neutralA-+5
$color-border-invertedBorder/Inverted
$color-whiteA-0
$color-border-neutral-strongBorder/Neutral/Strong
$color-semantic-neutral-0
$color-border-neutral-subtleBorder/Neutral/Subtle
$color-semantic-neutral-+3
$color-border-informative-strongBorder/Informative/Strong
$color-semantic-informative-0
$color-border-informative-subtleBorder/Informative/Subtle
$color-semantic-informative-+3
$color-border-positive-strongBorder/Positive/Strong
$color-semantic-positive-0
$color-border-positive-subtleBorder/Positive/Subtle
$color-semantic-positive-+3
$color-border-warning-strongBorder/Warning/Strong
$color-semantic-warning-0
$color-border-warning-subtleBorder/Warning/Subtle
$color-semantic-warning-+3
$color-border-negative-strongBorder/Negative/Strong
$color-semantic-negative-0
$color-border-negative-subtleBorder/Negative/Subtle
$color-semantic-negative-+3
$color-border-brand-strongBorder/Brand/Strong
$color-semantic-brand-0
$color-border-brand-subtleBorder/Brand/Subtle
$color-semantic-brand-+3

Background

Token name / Figma path
Value
$color-background-defaultBackground/Default
$color-whiteA-0
$color-background-invertedBackground/Inverted
$color-semantic-neutral--3
$color-background-neutral-strongBackground/Neutral/Strong
$color-semantic-neutral-0
$color-background-neutral-mutedBackground/Neutral/Muted
$color-semantic-neutral-+4
$color-background-neutral-onSubtleBackground/Neutral/On Subtle
$color-semantic-neutral-+5
$color-background-neutral-subtleBackground/Neutral/Subtle
$color-semantic-neutral-+7
$color-background-neutral-surfaceBackground/Neutral/Surface
$color-semantic-neutral-+8
$color-background-informative-strongBackground/Informative/Strong
$color-semantic-informative-0
$color-background-informative-mutedBackground/Informative/Muted
$color-semantic-informative-+4
$color-background-informative-onSubtleBackground/Informative/On Subtle
$color-semantic-informative-+5
$color-background-informative-subtleBackground/Informative/Subtle
$color-semantic-informative-+7
$color-background-informative-surfaceBackground/Informative/Surface
$color-semantic-informative-+8
$color-background-positive-strongBackground/Positive/Strong
$color-semantic-positive-0
$color-background-positive-mutedBackground/Positive/Muted
$color-semantic-positive-+4
$color-background-positive-onSubtleBackground/Positive/On Subtle
$color-semantic-positive-+5
$color-background-positive-subtleBackground/Positive/Subtle
$color-semantic-positive-+7
$color-background-positive-surfaceBackground/Positive/Surface
$color-semantic-positive-+8
$color-background-warning-strongBackground/Warning/Strong
$color-semantic-warning-0
$color-background-warning-mutedBackground/Warning/Muted
$color-semantic-warning-+4
$color-background-warning-onSubtleBackground/Warning/On Subtle
$color-semantic-warning-+5
$color-background-warning-subtleBackground/Warning/Subtle
$color-semantic-warning-+7
$color-background-warning-surfaceBackground/Warning/Surface
$color-semantic-warning-+8
$color-background-negative-strongBackground/Negative/Strong
$color-semantic-negative-0
$color-background-negative-mutedBackground/Negative/Muted
$color-semantic-negative-+4
$color-background-negative-onSubtleBackground/Negative/On Subtle
$color-semantic-negative-+5
$color-background-negative-subtleBackground/Negative/Subtle
$color-semantic-negative-+7
$color-background-negative-surfaceBackground/Negative/Surface
$color-semantic-negative-+8
$color-background-brand-strongBackground/Brand/Strong
$color-semantic-brand-0
$color-background-brand-mutedBackground/Brand/Muted
$color-semantic-brand-+4
$color-background-brand-onSubtleBackground/Brand/On Subtle
$color-semantic-brand-+5
$color-background-brand-subtleBackground/Brand/Subtle
$color-semantic-brand-+7
$color-background-brand-surfaceBackground/Brand/Surface
$color-semantic-brand-+8

Action

Primary

Token name / Figma path
Value
$color-action-primary-normalAction/Primary/Normal
$color-semantic-brand-0
$color-action-primary-hoverAction/Primary/Hover
$color-semantic-brand--2
$color-action-primary-activeAction/Primary/Active
$color-semantic-brand--3
$color-action-primary-selectedAction/Primary/Selected
$color-semantic-brand--2
$color-action-primary-subtle-normalAction/Primary/Subtle Normal
$color-semantic-brand-+6
$color-action-primary-subtle-hoverAction/Primary/Subtle Hover
$color-semantic-brand-+5
$color-action-primary-subtle-activeAction/Primary/Subtle Active
$color-semantic-brand-+3
$color-action-primary-subtle-selectedAction/Primary/Subtle Selected
$color-semantic-brand-+5

Neutral

Token name / Figma path
Value
$color-action-neutral-normalAction/Neutral/Normal
$color-semantic-neutral--1
$color-action-neutral-hoverAction/Neutral/Hover
$color-semantic-neutral--2
$color-action-neutral-activeAction/Neutral/Active
$color-semantic-neutral--3
$color-action-neutral-selectedAction/Neutral/Selected
$color-semantic-neutral--2
$color-action-neutral-subtle-normalAction/Neutral/Subtle Normal
$color-semantic-neutral-+6
$color-action-neutral-subtle-hoverAction/Neutral/Subtle Hover
$color-semantic-neutral-+5
$color-action-neutral-subtle-activeAction/Neutral/Subtle Active
$color-semantic-neutral-+3
$color-action-neutral-subtle-selectedAction/Neutral/Subtle Selected
$color-semantic-neutral-+5

Success

Token name / Figma path
Value
$color-action-success-normalAction/Success/Normal
$color-semantic-positive-0
$color-action-success-hoverAction/Success/Hover
$color-semantic-positive--2
$color-action-success-activeAction/Success/Active
$color-semantic-positive--3
$color-action-success-selectedAction/Success/Selected
$color-semantic-positive--2
$color-action-success-subtle-normalAction/Success/Subtle Normal
$color-semantic-positive-+6
$color-action-success-subtle-hoverAction/Success/Subtle Hover
$color-semantic-positive-+5
$color-action-success-subtle-activeAction/Success/Subtle Active
$color-semantic-positive-+3
$color-action-success-subtle-selectedAction/Success/Subtle Selected
$color-semantic-positive-+5

Destructive

Token name / Figma path
Value
$color-action-destructive-normalAction/Destructive/Normal
$color-semantic-negative-0
$color-action-destructive-hoverAction/Destructive/Hover
$color-semantic-negative--2
$color-action-destructive-activeAction/Destructive/Active
$color-semantic-negative--3
$color-action-destructive-selectedAction/Destructive/Selected
$color-semantic-negative--2
$color-action-destructive-subtle-normalAction/Destructive/Subtle Normal
$color-semantic-negative-+6
$color-action-destructive-subtle-hoverAction/Destructive/Subtle Hover
$color-semantic-negative-+5
$color-action-destructive-subtle-activeAction/Destructive/Subtle Active
$color-semantic-negative-+3
$color-action-destructive-subtle-selectedAction/Destructive/Subtle Selected
$color-semantic-negative-+5

Ghost

Token name / Figma path
Value
$color-action-ghost-normalAction/Ghost/Normal
$color-transparent
$color-action-ghost-hoverAction/Ghost/Hover
$color-semantic-neutralA-+6
$color-action-ghost-activeAction/Ghost/Active
$color-semantic-neutralA-+5
$color-action-ghost-selectedAction/Ghost/Selected
$color-semantic-neutralA-+6
$color-action-ghost-inverted-hoverAction/Ghost/Inverted Hover
$color-whiteA--8
$color-action-ghost-inverted-activeAction/Ghost/Inverted Active
$color-whiteA--7
$color-action-ghost-inverted-selectedAction/Ghost/Inverted Selected
$color-whiteA--8
$color-action-ghost-destructive-hoverAction/Ghost/Destructive Hover
$color-semantic-negative-+6
$color-action-ghost-destructive-activeAction/Ghost/Destructive Active
$color-semantic-negative-+5
$color-action-ghost-destructive-selectedAction/Ghost/Destructive Selected
$color-semantic-negative-+6

Outline

Token name / Figma path
Value
$color-action-outline-normalAction/Outline/Normal
$color-semantic-neutral-+3
$color-action-outline-hoverAction/Outline/Hover
$color-semantic-neutral-+2
$color-action-outline-activeAction/Outline/Active
$color-semantic-neutral-+1
$color-action-outline-selectedAction/Outline/Selected
$color-semantic-neutral-+2

Inverted

Token name / Figma path
Value
$color-action-inverted-normalAction/Inverted/Normal
$color-whiteA-0
$color-action-inverted-hoverAction/Inverted/Hover
$color-whiteA--1
$color-action-inverted-activeAction/Inverted/Active
$color-whiteA--2
$color-action-inverted-selectedAction/Inverted/Selected
$color-whiteA--1

ReverseInverted

Token name / Figma path
Value
$color-action-reverseInverted-normalAction/Reverse Inverted/Normal
$color-semantic-neutralA--3
$color-action-reverseInverted-hoverAction/Reverse Inverted/Hover
$color-semantic-neutralA--1
$color-action-reverseInverted-activeAction/Reverse Inverted/Active
$color-semantic-neutralA-0
$color-action-reverseInverted-selectedAction/Reverse Inverted/Selected
$color-semantic-neutralA--1

Interaction

Default

Token name / Figma path
Value
$color-interaction-default-normalInteraction/Default/Normal
$color-blue-0
$color-interaction-default-hoverInteraction/Default/Hover
$color-blue--2
$color-interaction-default-activeInteraction/Default/Active
$color-blue--3
$color-interaction-default-selectedInteraction/Default/Selected
$color-blue--2
$color-interaction-default-subtle-normalInteraction/Default/Subtle Normal
$color-blue-+6
$color-interaction-default-subtle-hoverInteraction/Default/Subtle Hover
$color-blue-+5
$color-interaction-default-subtle-activeInteraction/Default/Subtle Active
$color-blue-+3
$color-interaction-default-subtle-selectedInteraction/Default/Subtle Selected
$color-blue-+5

Neutral

Token name / Figma path
Value
$color-interaction-neutral-normalInteraction/Neutral/Normal
$color-semantic-neutral--1
$color-interaction-neutral-hoverInteraction/Neutral/Hover
$color-semantic-neutral--2
$color-interaction-neutral-activeInteraction/Neutral/Active
$color-semantic-neutral--3
$color-interaction-neutral-selectedInteraction/Neutral/Selected
$color-semantic-neutral--2
$color-interaction-neutral-subtle-normalInteraction/Neutral/Subtle Normal
$color-semantic-neutral-+6
$color-interaction-neutral-subtle-hoverInteraction/Neutral/Subtle Hover
$color-semantic-neutral-+5
$color-interaction-neutral-subtle-activeInteraction/Neutral/Subtle Active
$color-semantic-neutral-+3
$color-interaction-neutral-subtle-selectedInteraction/Neutral/Subtle Selected
$color-semantic-neutral-+5

Alert

Token name / Figma path
Value
$color-interaction-alert-normalInteraction/Alert/Normal
$color-semantic-negative-0
$color-interaction-alert-hoverInteraction/Alert/Hover
$color-semantic-negative--2
$color-interaction-alert-activeInteraction/Alert/Active
$color-semantic-negative--3
$color-interaction-alert-selectedInteraction/Alert/Selected
$color-semantic-negative--2
$color-interaction-alert-subtle-normalInteraction/Alert/Subtle Normal
$color-semantic-negative-+6
$color-interaction-alert-subtle-hoverInteraction/Alert/Subtle Hover
$color-semantic-negative-+5
$color-interaction-alert-subtle-activeInteraction/Alert/Subtle Active
$color-semantic-negative-+3
$color-interaction-alert-subtle-selectedInteraction/Alert/Subtle Selected
$color-semantic-negative-+5

Ghost

Token name / Figma path
Value
$color-interaction-ghost-normalInteraction/Ghost/Normal
$color-transparent
$color-interaction-ghost-hoverInteraction/Ghost/Hover
$color-semantic-neutralA-+6
$color-interaction-ghost-activeInteraction/Ghost/Active
$color-semantic-neutralA-+5
$color-interaction-ghost-selectedInteraction/Ghost/Selected
$color-semantic-neutralA-+6
$color-interaction-ghost-inverted-hoverInteraction/Ghost/Inverted Hover
$color-whiteA--8
$color-interaction-ghost-inverted-normalInteraction/Ghost/Inverted Active
$color-whiteA--7
$color-interaction-ghost-inverted-selectedInteraction/Ghost/Inverted Selected
$color-whiteA--8
$color-interaction-ghost-destructive-hoverInteraction/Ghost/Destructive Hover
$color-semantic-negative-+6
$color-interaction-ghost-destructive-normalInteraction/Ghost/Destructive Active
$color-semantic-negative-+5
$color-interaction-ghost-destructive-selectedInteraction/Ghost/Destructive Selected
$color-semantic-negative-+6

Disabled

Token name / Figma path
Value
$color-interaction-disabled-normalInteraction/Disabled/Normal
$color-semantic-neutral-+2
$color-interaction-disabled-hoverInteraction/Disabled/Hover
$color-semantic-neutral-+1
$color-interaction-disabled-activeInteraction/Disabled/Active
$color-semantic-neutral-0
$color-interaction-disabled-subtle-normalInteraction/Disabled/Subtle Normal
$color-semantic-neutral-+5
$color-interaction-disabled-subtle-hoverInteraction/Disabled/Subtle Hover
$color-semantic-neutral-+4
$color-interaction-disabled-subtle-activeInteraction/Disabled/Subtle Active
$color-semantic-neutral-+3

Border

Token name / Figma path
Value
$color-interaction-border-normalInteraction/Border/Normal
$color-blue-+2
$color-interaction-border-hoverInteraction/Border/Hover
$color-blue-+1
$color-interaction-border-activeInteraction/Border/Active
$color-blue--1
$color-interaction-border-selectedInteraction/Border/Selected
$color-blue-0
$color-interaction-border-neutral-normalInteraction/Border/Neutral Normal
$color-semantic-neutral-+3
$color-interaction-border-neutral-hoverInteraction/Border/Neutral Hover
$color-semantic-neutral-+2
$color-interaction-border-neutral-activeInteraction/Border/Neutral Active
$color-semantic-neutral-+1
$color-interaction-border-neutral-selectedInteraction/Border/Neutral Selected
$color-semantic-neutral-+2
$color-interaction-border-alertInteraction/Border/Alert
$color-semantic-negative-+1

Background

Token name / Figma path
Value
$color-interaction-background-modalInteraction/Background/Modal
$color-background-default
$color-interaction-background-modelessInteraction/Background/Modeless
$color-background-default
$color-interaction-background-modeless-invertedInteraction/Background/Inverted Modeless
$color-background-inverted
$color-interaction-background-sidepanelInteraction/Background/Sidepanel
$color-background-default
$color-interaction-background-formFieldInteraction/Background/Form Field
$color-background-default
$color-interaction-background-dimmerBackground/Default Dimmer
$color-semantic-neutralA-0

Inverted

Token name / Figma path
Value
$color-interaction-inverted-normalInteraction/Inverted/Normal
$color-whiteA-0
$color-interaction-inverted-hoverInteraction/Inverted/Hover
$color-whiteA--1
$color-interaction-inverted-activeInteraction/Inverted/Active
$color-whiteA--2
$color-interaction-inverted-selectedInteraction/Inverted/Selected
$color-whiteA--1

Focus

Token name / Figma path
Value
$color-interaction-focus-defaultInteraction/Focus/Default
$color-blue-+1

NonSemantic

Grey

Token name / Figma path
Value
$color-nonSemantic-grey-content-primaryNon-semantic/Content/Grey/Primary
$color-semantic-neutral--3
$color-nonSemantic-grey-content-secondaryNon-semantic/Content/Grey/Secondary
$color-semantic-neutral-0
$color-nonSemantic-grey-border-defaultNon-semantic/Border/Grey/Default
$color-semantic-neutral-+5
$color-nonSemantic-grey-border-strongNon-semantic/Border/Grey/Strong
$color-semantic-neutral-0
$color-nonSemantic-grey-border-subtleNon-semantic/Border/Grey/Subtle
$color-semantic-neutral-+3
$color-nonSemantic-grey-background-strongNon-semantic/Background/Grey/Strong
$color-semantic-neutral-0
$color-nonSemantic-grey-background-mutedNon-semantic/Background/Grey/Muted
$color-semantic-neutral-+4
$color-nonSemantic-grey-background-onSubtleNon-semantic/Background/Grey/On Subtle
$color-semantic-neutral-+5
$color-nonSemantic-grey-background-subtleNon-semantic/Background/Grey/Subtle
$color-semantic-neutral-+7
$color-nonSemantic-grey-background-surfaceNon-semantic/Background/Grey/Surface
$color-semantic-neutral-+8

White

Token name / Figma path
Value
$color-nonSemantic-white-content-primaryNon-semantic/Content/White/Primary
$color-whiteA-0
$color-nonSemantic-white-content-secondaryNon-semantic/Content/White/Secondary
$color-whiteA--4
$color-nonSemantic-white-border-defaultNon-semantic/Border/White/Default
$color-whiteA--5
$color-nonSemantic-white-border-strongNon-semantic/Border/White/Strong
$color-whiteA-0
$color-nonSemantic-white-border-subtleNon-semantic/Border/White/Subtle
$color-whiteA--3
$color-nonSemantic-white-background-strongNon-semantic/Background/White/Strong
$color-whiteA-0
$color-nonSemantic-white-background-mutedNon-semantic/Background/White/Muted
$color-whiteA--4
$color-nonSemantic-white-background-onSubtleNon-semantic/Background/White/On Subtle
$color-whiteA--5
$color-nonSemantic-white-background-subtleNon-semantic/Background/White/Subtle
$color-whiteA--7
$color-nonSemantic-white-background-surfaceNon-semantic/Background/White/Surface
$color-whiteA--8

Red

Token name / Figma path
Value
$color-nonSemantic-red-content-primaryNon-semantic/Content/Red/Primary
$color-red--3
$color-nonSemantic-red-content-secondaryNon-semantic/Content/Red/Secondary
$color-red-0
$color-nonSemantic-red-border-defaultNon-semantic/Border/Red/Default
$color-red-+5
$color-nonSemantic-red-border-strongNon-semantic/Border/Red/Strong
$color-red-0
$color-nonSemantic-red-border-subtleNon-semantic/Border/Red/Subtle
$color-red-+3
$color-nonSemantic-red-background-strongNon-semantic/Background/Red/Strong
$color-red-0
$color-nonSemantic-red-background-mutedNon-semantic/Background/Red/Muted
$color-red-+4
$color-nonSemantic-red-background-onSubtleNon-semantic/Background/Red/On Subtle
$color-red-+5
$color-nonSemantic-red-background-subtleNon-semantic/Background/Red/Subtle
$color-red-+7
$color-nonSemantic-red-background-surfaceNon-semantic/Background/Red/Surface
$color-red-+8

Raspberry

Token name / Figma path
Value
$color-nonSemantic-raspberry-content-primaryNon-semantic/Content/Raspberry/Primary
$color-raspberry--3
$color-nonSemantic-raspberry-content-secondaryNon-semantic/Content/Raspberry/Secondary
$color-raspberry-0
$color-nonSemantic-raspberry-border-defaultNon-semantic/Border/Raspberry/Default
$color-raspberry-+5
$color-nonSemantic-raspberry-border-strongNon-semantic/Border/Raspberry/Strong
$color-raspberry-0
$color-nonSemantic-raspberry-border-subtleNon-semantic/Border/Raspberry/Subtle
$color-raspberry-+3
$color-nonSemantic-raspberry-background-strongNon-semantic/Background/Raspberry/Strong
$color-raspberry-0
$color-nonSemantic-raspberry-background-mutedNon-semantic/Background/Raspberry/Muted
$color-raspberry-+4
$color-nonSemantic-raspberry-background-onSubtleNon-semantic/Background/Raspberry/On Subtle
$color-raspberry-+5
$color-nonSemantic-raspberry-background-subtleNon-semantic/Background/Raspberry/Subtle
$color-raspberry-+7
$color-nonSemantic-raspberry-background-surfaceNon-semantic/Background/Raspberry/Surface
$color-raspberry-+8

Magenta

Token name / Figma path
Value
$color-nonSemantic-magenta-content-primaryNon-semantic/Content/Magenta/Primary
$color-magenta--3
$color-nonSemantic-magenta-content-secondaryNon-semantic/Content/Magenta/Secondary
$color-magenta-0
$color-nonSemantic-magenta-border-defaultNon-semantic/Border/Magenta/Default
$color-magenta-+5
$color-nonSemantic-magenta-border-strongNon-semantic/Border/Magenta/Strong
$color-magenta-0
$color-nonSemantic-magenta-border-subtleNon-semantic/Border/Magenta/Subtle
$color-magenta-+3
$color-nonSemantic-magenta-background-strongNon-semantic/Background/Magenta/Strong
$color-magenta-0
$color-nonSemantic-magenta-background-mutedNon-semantic/Background/Magenta/Muted
$color-magenta-+4
$color-nonSemantic-magenta-background-onSubtleNon-semantic/Background/Magenta/On Subtle
$color-magenta-+5
$color-nonSemantic-magenta-background-subtleNon-semantic/Background/Magenta/Subtle
$color-magenta-+7
$color-nonSemantic-magenta-background-surfaceNon-semantic/Background/Magenta/Surface
$color-magenta-+8

Purple

Token name / Figma path
Value
$color-nonSemantic-purple-content-primaryNon-semantic/Content/Purple/Primary
$color-purple--3
$color-nonSemantic-purple-content-secondaryNon-semantic/Content/Purple/Secondary
$color-purple-0
$color-nonSemantic-purple-border-defaultNon-semantic/Border/Purple/Default
$color-purple-+5
$color-nonSemantic-purple-border-strongNon-semantic/Border/Purple/Strong
$color-purple-0
$color-nonSemantic-purple-border-subtleNon-semantic/Border/Purple/Subtle
$color-purple-+3
$color-nonSemantic-purple-background-strongNon-semantic/Background/Purple/Strong
$color-purple-0
$color-nonSemantic-purple-background-mutedNon-semantic/Background/Purple/Muted
$color-purple-+4
$color-nonSemantic-purple-background-onSubtleNon-semantic/Background/Purple/On Subtle
$color-purple-+5
$color-nonSemantic-purple-background-subtleNon-semantic/Background/Purple/Subtle
$color-purple-+7
$color-nonSemantic-purple-background-surfaceNon-semantic/Background/Purple/Surface
$color-purple-+8

Grape

Token name / Figma path
Value
$color-nonSemantic-grape-content-primaryNon-semantic/Content/Grape/Primary
$color-grape--3
$color-nonSemantic-grape-content-secondaryNon-semantic/Content/Grape/Secondary
$color-grape-0
$color-nonSemantic-grape-border-defaultNon-semantic/Border/Grape/Default
$color-grape-+5
$color-nonSemantic-grape-border-strongNon-semantic/Border/Grape/Strong
$color-grape-0
$color-nonSemantic-grape-border-subtleNon-semantic/Border/Grape/Subtle
$color-grape-+3
$color-nonSemantic-grape-background-strongNon-semantic/Background/Grape/Strong
$color-grape-0
$color-nonSemantic-grape-background-mutedNon-semantic/Background/Grape/Muted
$color-grape-+4
$color-nonSemantic-grape-background-onSubtleNon-semantic/Background/Grape/On Subtle
$color-grape-+5
$color-nonSemantic-grape-background-subtleNon-semantic/Background/Grape/Subtle
$color-grape-+7
$color-nonSemantic-grape-background-surfaceNon-semantic/Background/Grape/Surface
$color-grape-+8

Violet

Token name / Figma path
Value
$color-nonSemantic-violet-content-primaryNon-semantic/Content/Violet/Primary
$color-violet--3
$color-nonSemantic-violet-content-secondaryNon-semantic/Content/Violet/Secondary
$color-violet-0
$color-nonSemantic-violet-border-defaultNon-semantic/Border/Violet/Default
$color-violet-+5
$color-nonSemantic-violet-border-strongNon-semantic/Border/Violet/Strong
$color-violet-0
$color-nonSemantic-violet-border-subtleNon-semantic/Border/Violet/Subtle
$color-violet-+3
$color-nonSemantic-violet-background-strongNon-semantic/Background/Violet/Strong
$color-violet-0
$color-nonSemantic-violet-background-mutedNon-semantic/Background/Violet/Muted
$color-violet-+4
$color-nonSemantic-violet-background-onSubtleNon-semantic/Background/Violet/On Subtle
$color-violet-+5
$color-nonSemantic-violet-background-subtleNon-semantic/Background/Violet/Subtle
$color-violet-+7
$color-nonSemantic-violet-background-surfaceNon-semantic/Background/Violet/Surface
$color-violet-+8

Blue

Token name / Figma path
Value
$color-nonSemantic-blue-content-primaryNon-semantic/Content/Blue/Primary
$color-blue--3
$color-nonSemantic-blue-content-secondaryNon-semantic/Content/Blue/Secondary
$color-blue-0
$color-nonSemantic-blue-border-defaultNon-semantic/Border/Blue/Default
$color-blue-+5
$color-nonSemantic-blue-border-strongNon-semantic/Border/Blue/Strong
$color-blue-0
$color-nonSemantic-blue-border-subtleNon-semantic/Border/Blue/Subtle
$color-blue-+3
$color-nonSemantic-blue-background-strongNon-semantic/Background/Blue/Strong
$color-blue-0
$color-nonSemantic-blue-background-mutedNon-semantic/Background/Blue/Muted
$color-blue-+4
$color-nonSemantic-blue-background-onSubtleNon-semantic/Background/Blue/On Subtle
$color-blue-+5
$color-nonSemantic-blue-background-subtleNon-semantic/Background/Blue/Subtle
$color-blue-+7
$color-nonSemantic-blue-background-surfaceNon-semantic/Background/Blue/Surface
$color-blue-+8

Cyan

Token name / Figma path
Value
$color-nonSemantic-cyan-content-primaryNon-semantic/Content/Cyan/Primary
$color-cyan--3
$color-nonSemantic-cyan-content-secondaryNon-semantic/Content/Cyan/Secondary
$color-cyan-0
$color-nonSemantic-cyan-border-defaultNon-semantic/Border/Cyan/Default
$color-cyan-+5
$color-nonSemantic-cyan-border-strongNon-semantic/Border/Cyan/Strong
$color-cyan-0
$color-nonSemantic-cyan-border-subtleNon-semantic/Border/Cyan/Subtle
$color-cyan-+3
$color-nonSemantic-cyan-background-strongNon-semantic/Background/Cyan/Strong
$color-cyan-0
$color-nonSemantic-cyan-background-mutedNon-semantic/Background/Cyan/Muted
$color-cyan-+4
$color-nonSemantic-cyan-background-onSubtleNon-semantic/Background/Cyan/On Subtle
$color-cyan-+5
$color-nonSemantic-cyan-background-subtleNon-semantic/Background/Cyan/Subtle
$color-cyan-+7
$color-nonSemantic-cyan-background-surfaceNon-semantic/Background/Cyan/Surface
$color-cyan-+8

Teal

Token name / Figma path
Value
$color-nonSemantic-teal-content-primaryNon-semantic/Content/Teal/Primary
$color-teal--3
$color-nonSemantic-teal-content-secondaryNon-semantic/Content/Teal/Secondary
$color-teal-0
$color-nonSemantic-teal-border-defaultNon-semantic/Border/Teal/Default
$color-teal-+5
$color-nonSemantic-teal-border-strongNon-semantic/Border/Teal/Strong
$color-teal-0
$color-nonSemantic-teal-border-subtleNon-semantic/Border/Teal/Subtle
$color-teal-+3
$color-nonSemantic-teal-background-strongNon-semantic/Background/Teal/Strong
$color-teal-0
$color-nonSemantic-teal-background-mutedNon-semantic/Background/Teal/Muted
$color-teal-+4
$color-nonSemantic-teal-background-onSubtleNon-semantic/Background/Teal/On Subtle
$color-teal-+5
$color-nonSemantic-teal-background-subtleNon-semantic/Background/Teal/Subtle
$color-teal-+7
$color-nonSemantic-teal-background-surfaceNon-semantic/Background/Teal/Surface
$color-teal-+8

Aquamarine

Token name / Figma path
Value
$color-nonSemantic-aquamarine-content-primaryNon-semantic/Content/Aquamarine/Primary
$color-aquamarine--3
$color-nonSemantic-aquamarine-content-secondaryNon-semantic/Content/Aquamarine/Secondary
$color-aquamarine-0
$color-nonSemantic-aquamarine-border-defaultNon-semantic/Border/Aquamarine/Default
$color-aquamarine-+5
$color-nonSemantic-aquamarine-border-strongNon-semantic/Border/Aquamarine/Strong
$color-aquamarine-0
$color-nonSemantic-aquamarine-border-subtleNon-semantic/Border/Aquamarine/Subtle
$color-aquamarine-+3
$color-nonSemantic-aquamarine-background-strongNon-semantic/Background/Aquamarine/Strong
$color-aquamarine-0
$color-nonSemantic-aquamarine-background-mutedNon-semantic/Background/Aquamarine/Muted
$color-aquamarine-+4
$color-nonSemantic-aquamarine-background-onSubtleNon-semantic/Background/Aquamarine/On Subtle
$color-aquamarine-+5
$color-nonSemantic-aquamarine-background-subtleNon-semantic/Background/Aquamarine/Subtle
$color-aquamarine-+7
$color-nonSemantic-aquamarine-background-surfaceNon-semantic/Background/Aquamarine/Surface
$color-aquamarine-+8

Green

Token name / Figma path
Value
$color-nonSemantic-green-content-primaryNon-semantic/Content/Green/Primary
$color-green--3
$color-nonSemantic-green-content-secondaryNon-semantic/Content/Green/Secondary
$color-green-0
$color-nonSemantic-green-border-defaultNon-semantic/Border/Green/Default
$color-green-+5
$color-nonSemantic-green-border-strongNon-semantic/Border/Green/Strong
$color-green-0
$color-nonSemantic-green-border-subtleNon-semantic/Border/Green/Subtle
$color-green-+3
$color-nonSemantic-green-background-strongNon-semantic/Background/Green/Strong
$color-green-0
$color-nonSemantic-green-background-mutedNon-semantic/Background/Green/Muted
$color-green-+4
$color-nonSemantic-green-background-onSubtleNon-semantic/Background/Green/On Subtle
$color-green-+5
$color-nonSemantic-green-background-subtleNon-semantic/Background/Green/Subtle
$color-green-+7
$color-nonSemantic-green-background-surfaceNon-semantic/Background/Green/Surface
$color-green-+8

Emerald

Token name / Figma path
Value
$color-nonSemantic-emerald-content-primaryNon-semantic/Content/Emerald/Primary
$color-emerald--3
$color-nonSemantic-emerald-content-secondaryNon-semantic/Content/Emerald/Secondary
$color-emerald-0
$color-nonSemantic-emerald-border-defaultNon-semantic/Border/Emerald/Default
$color-emerald-+5
$color-nonSemantic-emerald-border-strongNon-semantic/Border/Emerald/Strong
$color-emerald-0
$color-nonSemantic-emerald-border-subtleNon-semantic/Border/Emerald/Subtle
$color-emerald-+3
$color-nonSemantic-emerald-background-strongNon-semantic/Background/Emerald/Strong
$color-emerald-0
$color-nonSemantic-emerald-background-mutedNon-semantic/Background/Emerald/Muted
$color-emerald-+4
$color-nonSemantic-emerald-background-onSubtleNon-semantic/Background/Emerald/On Subtle
$color-emerald-+5
$color-nonSemantic-emerald-background-subtleNon-semantic/Background/Emerald/Subtle
$color-emerald-+7
$color-nonSemantic-emerald-background-surfaceNon-semantic/Background/Emerald/Surface
$color-emerald-+8

Orange

Token name / Figma path
Value
$color-nonSemantic-orange-content-primaryNon-semantic/Content/Orange/Primary
$color-orange--3
$color-nonSemantic-orange-content-secondaryNon-semantic/Content/Orange/Secondary
$color-orange-0
$color-nonSemantic-orange-border-defaultNon-semantic/Border/Orange/Default
$color-orange-+5
$color-nonSemantic-orange-border-strongNon-semantic/Border/Orange/Strong
$color-orange-0
$color-nonSemantic-orange-border-subtleNon-semantic/Border/Orange/Subtle
$color-orange-+3
$color-nonSemantic-orange-background-strongNon-semantic/Background/Orange/Strong
$color-orange-0
$color-nonSemantic-orange-background-mutedNon-semantic/Background/Orange/Muted
$color-orange-+4
$color-nonSemantic-orange-background-onSubtleNon-semantic/Background/Orange/On Subtle
$color-orange-+5
$color-nonSemantic-orange-background-subtleNon-semantic/Background/Orange/Subtle
$color-orange-+7
$color-nonSemantic-orange-background-surfaceNon-semantic/Background/Orange/Surface
$color-orange-+8