Color Tokens

Color tokens are semantically named colors that allow designers and developers to understand where and how to apply our palette. They are used to bridge the gap between naming and usage. Color tokens help to establish an organized and systematic application of color across the system.

Color Tokens Intro

This example show how a fairly simple layout uses many color tokens, and why a systematic approach is critical to managing complexity.

gs-brand

7399C6

115, 153, 198

#7399C6

global-header

11294D

17, 41, 77

Blue 90

Eight surface tokens provide designers and engineers a flexible and consistent range of grays for base application layers, panels and side bars, etc. Any container that houses content has a surface token.

Color Tokens Surface

surface-primary

FFFFFF

255, 255, 255

White

surface-secondary

F2F5F7

242, 245, 247

Gray 10

surface-tertiary

DCE3E8

220, 227, 232

Gray 20

surface-moderate

C1CCD6

193, 204, 214

Gray 30

surface-bold

9FB1BD

159, 177, 189

Gray 40

surface-strong

5B7282

91, 114, 130

Gray 60

surface-contrast

1C2B36

28, 43, 54

Gray 90

surface-overlay

1C2B36

28, 43, 54

Gray 90 @80%

80% Opacity

Borders and dividers help to group and separate content on a page or within a component. A range of border tokens are provided to allow for flexibility in hierarchy and emphasis.

Color Token Border

border-minimal

DCE3E8

220, 227, 232

Gray 20

border-subtle

C1CCD6

193, 204, 214

Gray 30

border-moderate

9FB1BD

159, 177, 189

Gray 40

border-bold

5B7282

91, 114, 130

Gray 60

border-contrast

1C2B36

28, 43, 54

Gray 90

Use button color tokens for hierarchy of importance between Primary, Secondary, Tertiary, Minimal and Destructive buttons. Go to the Buttons page for full documentation.

Buttons

button-primary

186ADE

24, 106, 222

Blue 60

button-secondary

DCE3E8

220, 227, 232

Gray 20

button-tertiary

FFFFFF

255, 255, 255

Transparent

0% Opacity

button-destructive

D91F11

217, 31, 17

Red 60

button-primary-minimal

FFFFFF

255, 255, 255

Transparent

0% Opacity

button-secondary-minimal

FFFFFF

255, 255, 255

Transparent

0% Opacity

button-text-primary

FFFFFF

255, 255, 255

White

button-destructive-minimal

FFFFFF

255, 255, 255

Transparent

0% Opacity

button-text-tertiary

1C2B36

28, 43, 54

Gray 90

button-text-secondary

1C2B36

28, 43, 54

Gray 90

button-text-destructive

FFFFFF

255, 255, 255

White

button-text-secondary-minimal

1C2B36

28, 43, 54

Gray 90

button-text-destructive-minimal

D91F11

217, 31, 17

Red 60

button-text-primary-minimal

186ADE

24, 106, 222

Blue 60

Color Tokens Button Hover

button-primary-hover

1762CB

23, 98, 203

Blue 60 and Gray 100 @ 10%

10% Opacity

button-secondary-hover

C7CFD4

199, 207, 212

Gray 20 and Gray 100 @10%

10% Opacity

button-tertiary-hover

F5F7F8

245, 247, 248

Gray 40 @10%

10% Opacity

button-destructive-hover

C51E12

197, 30, 18

Red 60 and Gray 100 @10%

10% Opacity

button-minimal-primary-hover

E8F0FC

232, 240, 252

Blue 60 @10%

10% Opacity

button-minimal-secondary-hover

EEF1F2

238, 241, 242

Gray 60 @20%

20% Opacity

button-minimal-destructive-hover

FBE9E7

251, 233, 231

Red 60 @10%

10% Opacity

text-link-hover

0D4EA6

13, 78, 166

Blue 70

button-primary-active

1659B8

22, 89, 184

Blue 60 and Gray 100 @20%

20% Opacity

button-secondary-active

B3BAC0

179, 186, 192

Gray 20 and Gray 100 @20%

20% Opacity

button-tertiary-active

ECEFF2

236, 239, 242

Gray 40 @20%

20% Opacity

button-destructive-active

B01D14

176, 29, 20

Red 60 and Gray 100 @20%

20% Opacity

button-primary-minimal-active

186ADE

24, 106, 222

Blue 60 @20%

20% Opacity

button-secondary-minimal-active

DEE3E6

222, 227, 230

Gray 60 @20%

20% Opacity

button-destructive-minimal-active

F7D2CF

247, 210, 207

RED 60 @ 20%

20% Opacity

Text Colors

text-primary

1C2B36

28, 43, 54

Gray 90

text-secondary

#3E5463

62, 84, 99

Gray 70

text-tertiary

9FB1BD

159, 177, 189

Gray 40

text-link

186ADE

24, 106, 222

Blue 60

text-reversed

#FFFFFF

255, 255, 255

White

text-destructive

D91F11

217,31,17

Red 60

Color Icons

icon-action

186ADE

24, 106, 222

Blue 60

icon-secondary

9FB1BD

159, 177, 189

Gray 40

icon-reversed

FFFFFF

255, 255, 255

White

icon-primary

1C2B36

28, 43, 54

Gray 90

icon-destructive

D91F11

217, 31, 17

Red 60

icon-contrast

000000

0, 0, 0

Black

Color Tokens Form

form-input-border

9FB1BD

159, 177, 189

Gray 40

form-input-background

FFFFFF

255, 255, 255

White

status-none-bold

5B7282

91, 114, 130

Gray 60

status-error-bold

D91F11

217, 31, 17

Red 60

status-success-bold

077D55

7, 125, 85

Green 60

status-warning-bold

F5C518

245, 197, 24

Yellow 30

status-information-bold

186ADE

24, 106, 222

Blue 60

status-none-subtle

DCE3E8

220, 227, 232

Gray 20

status-error-subtle

FADCD9

250, 220, 217

Red 20

status-success-subtle

#C7EBD1

199, 235, 209

Green 20

status-information-subtle

#D4E4FA

212, 228, 250

Blue 20

status-warning-subtle

FAF6CF

250, 246, 207

Yellow 10

status-error-subtle-text

A1160A

161, 22, 10

Red 70

status-error-subtle-icon

A1160A

161, 22, 10

Red 70

Color Tokens Tags

tag-text-minimal

3E5463

62, 84, 99

Gray 70

tag-minimal

FFFFFF

255, 255, 255

Transparent

0% Opacity

tag-subtle

D4E4FA

212, 228, 250

Blue 20

tag-bold

186ADE

24,106,222

Blue 60

tag-text-subtle

0D4EA6

13, 78, 166

Blue 70

tag-text-bold

FFFFFF

255, 255, 255

White

Grid Colors

grid-row-default

FFFFFF

255, 255, 255

White

grid-column-header-default

F2F5F7

242, 245, 247

Gray 10

grid-row-alternative

F2F5F7

242, 245, 247

Gray 10

grid-row-section-minimal

DCE3E8

220, 227, 232

Gray 20

grid-row-section-bold

5B7282

91, 114, 130

Gray 60

grid-row-section-contrast

2A3F4D

42, 63, 77

Gray 80

grid-bid-default

ADCCF7

173, 204, 247

Blue 30

grid-bid-depth-1

D4E4FA

212, 228, 250

Blue 20

grid-bid-depth-2

F0F4FA

240, 244, 250

Blue 10

grid-bid-row-hover

8FB8F2

143, 184, 242

Blue 60 @ 20%

20% Opacity

grid-bid-cell-hover

186ADE

24, 106, 222

Blue 60

grid-ask-default

FABBB4

250, 187, 180

Red 30

grid-ask-depth-1

FADCD9

250, 220, 217

Red 20

grid-ask-row-hover

F39C93

243, 156, 147

Red 60 @ 20%

20% Opacity

grid-ask-depth-2

FCF3F2

252, 243, 242

Red 10

grid-ask-cell-hover

D91F11

217, 31, 17

Red 60

grid-cell-warning-default

FAF6CF

250, 246, 207

Yellow 10

grid-cell-warning-depth-1

F7E379

247, 227, 121

Yellow 20

grid-cell-error-default

FADCD9

250, 220, 217

Red 20

grid-cell-error-depth-1

FABBB4

250, 187, 180

Red 30

grid-cell-success-default

EBF7ED

235, 247, 237

Green 10

grid-cell-success-depth-1

C7EBD1

199, 235, 209

Green 20

surface-minimal-hover

9FB1BD

159, 177, 189

Gray 40 @10%

10% Opacity

surface-subtle-hover

9FB1BD

159, 177, 189

Gray 40 @40%

40% Opacity

surface-bold-hover

2A3F4D

42, 63, 77

Gray 80

border-minimal-hover

C1CCD6

193, 204, 214

Gray 30

border-subtle-hover

9FB1BD

159, 177, 189

Gray 40

border-moderate-hover

7A909E

122, 144, 158

Gray 50

border-bold-hover

3E5463

62, 84, 99

Gray 70

border-contrast-hover

0E171F

14, 23, 31

Gray 100

active-minimal

9FB1BD

159, 177, 189

Gray 40 @ 20%

20% Opacity

active-subtle

9FB1BD

159, 177, 189

Gray 40 @ 60%

60% Opacity

active-bold

1C2B36

28, 43, 54

Gray 90

selected-minimal

186ADE

24, 106, 222

Blue 60 @20%

20% Opacity

selected-subtle

186ADE

24, 106, 222

Blue 60 @40%

40% Opacity

selected-bold

186ADE

24, 106, 222

Blue 60

text-minimal-selected

0D4EA6

13, 78, 166

Blue 70

text-bold-selected

FFFFFF

255, 255, 255

White

minimal-disabled

5B7282

91, 114, 130

Gray 60 @20%

20% Opacity

bold-disabled

5B7282

91, 114, 130

Gray 60 @50%

50% Opacity

strong-disabled

DCE3E8

220, 227, 232

Gray 20

text-disabled

5B7282

91, 114, 130

Gray 60 @50%

50% Opacity

border-disabled

5B7282

91, 114, 130

Gray 60 @40%

40% Opacity

Color Token Focus

border-focus

186ADE

24, 106, 222

Blue 60

background-focus

9FB1BD

159, 177, 189

Gray 40 @10%

10% Opacity

gray-ramp-bold-background

5B7282

91, 114, 130

Gray 60

red-ramp-bold-background

D91F11

217, 31, 17

Red 60

orange-ramp-bold-background

E86427

232, 100, 39

Orange 50

yellow-ramp-bold-background

F5C518

245, 197, 24

Yellow 30

lime-ramp-bold-background

3C7D0E

60, 125, 14

Lime 60

green-ramp-bold-background

077D55

7, 125, 85

Green 60

teal-ramp-bold-background

167B7D

22, 123, 125

Teal 60

turquoise-ramp-bold-background

067A91

6, 122, 145

Turquoise 60

aqua-ramp-bold-background

0073BA

0, 115, 186

Aqua 60

blue-ramp-bold-background

186ADE

24, 106, 222

Blue 60

ultramarine-ramp-bold-background

545FE8

84, 95, 232

Ultramarine 60

purple-ramp-bold-background

8F49DE

143, 73, 222

Purple 60

pink-ramp-bold-background

CC1D92

204, 29, 146

Pink 60

gray-ramp-subtle-background

DCE3E8

220, 227, 232

Gray 20

red-ramp-subtle-background

FADCD9

250, 220, 217

Red 20

orange-ramp-subtle-background

FCDDC7

252, 221, 199

Orange 20

yellow-ramp-subtle-background

FAF6CF

250, 246, 207

Yellow 10

lime-ramp-subtle-background

D5F0B1

213, 240, 177

Lime 20

green-ramp-subtle-background

C7EBD1

199, 235, 209

Green 20

teal-ramp-subtle-background

BEEBE7

190, 235, 231

Teal 20

turquoise-ramp-subtle-background

C7E8ED

199, 232, 237

Turquoise 20

aqua-ramp-subtle-background

C9E7F5

201, 231, 245

Aqua 20

blue-ramp-subtle-background

D4E4FA

212, 228, 250

Blue 20

ultramarine-ramp-subtle-background

DEE0FA

222, 224, 250

Ultramarine 20

purple-ramp-subtle-background

EADCFC

234, 220, 252

Purple 20

pink-ramp-subtle-background

F7DAED

247, 218, 237

Pink 20

The following color tokens are to be used for the color of the text against each of the corresponding colored bold backgrounds.

Color Token Ramps Bold

gray-ramp-bold-text

FFFFFF

255, 255, 255

White

red-ramp-bold-text

FFFFFF

255, 255, 255

White

orange-ramp-bold-text

FFFFFF

255, 255, 255

White

yellow-ramp-bold-text

1C2B36

28, 43, 54

Gray 110

lime-ramp-bold-text

FFFFFF

255, 255, 255

White

green-ramp-bold-text

FFFFFF

255, 255, 255

White

teal-ramp-bold-text

FFFFFF

255, 255, 255

White

turquoise-ramp-bold-text

FFFFFF

255, 255, 255

White

aqua-ramp-bold-text

FFFFFF

255, 255, 255

White

blue-ramp-bold-text

FFFFFF

255, 255, 255

White

ultramarine-ramp-bold-text

FFFFFF

255, 255, 255

White

purple-ramp-bold-text

FFFFFF

255, 255, 255

White

pink-ramp-bold-text

FFFFFF

255, 255, 255

White

The following color tokens are to be used for the color of the text against each of the corresponding colored subtle backgrounds.

Color Tokens Ramp Subtle

gray-ramp-subtle-text

3E5463

62, 84, 99

Gray 70

red-ramp-subtle-text

A1160A

161, 22, 10

Red 70

orange-ramp-subtle-text

8F3415

143, 52, 21

Orange 70

yellow-ramp-subtle-text

1C2B36

28, 43, 54

Gray 90

lime-ramp-subtle-text

2E5C0E

46, 92, 14

Lime 70

green-ramp-subtle-text

075E45

7, 94, 69

Green 70

teal-ramp-subtle-text

155C5E

21, 92, 94

Teal 70

turquoise-ramp-subtle-text

09596B

9, 89, 107

Turquoise 70

aqua-ramp-subtle-text

08548A

8, 84, 138

Aqua 70

blue-ramp-subtle-text

0D4EA6

13, 78, 166

Blue 70

ultramarine-ramp-subtle-text

3A45B0

58, 69, 176

Ultramarine 70

purple-ramp-subtle-text

6B30AB

107, 48, 171

Purple 70

pink-ramp-subtle-text

961574

150, 21, 116

Pink 70

The data visualization color tokens include enough distinct colors for numerous datasets to be represented, and allows users with color blindness to discern differences between data points.

dataviz-default-sequence-01

0D4EA6

13, 78, 166

Blue 70

dataviz-default-sequence-02

E86427

232, 100, 39

Orange 50

dataviz-default-sequence-03

279C9C

39, 156, 156

Teal 50

dataviz-default-sequence-04

D9A514

217, 165, 20

Yellow 40

dataviz-default-sequence-05

AC71F0

172, 113, 240

Purple 50

dataviz-default-sequence-06

23254D

35, 37, 77

Ultramarine 90

dataviz-default-sequence-07

52A31D

82, 163, 29

Lime 50

dataviz-default-sequence-08

CC1D92

204, 29, 146

Pink 60

dataviz-default-sequence-09

48B8F0

72, 184, 240

Aqua 40

dataviz-default-sequence-10

077D55

7, 125, 85

Green 60