Design Tokens

Design Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Using Lightning Components? Read the Developer Guide on Styling with Design Tokens.

Token Support Legend:

GAGlobal Access
Available to use on the Salesforce Platform.
IInternal
Available to internal Salesforce developers only. Subject to change.

ColorsColors

Generic colors to use within a Salesforce application. Tokens that have the prefix of "BRAND" are brandable tokens and are subject to change when a customer applies theming to their org. Please refer to the description of each token for their intended usage.

TokenExampleReleasedThemeableSupport
$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(1, 118, 211)
#0176d3
BRAND_ACCESSIBLE
2.6.0
YesGA
$brand-accessible-active

Active / Hover state of BRAND_A11Y

rgb(1, 68, 134)
#014486
BRAND_ACCESSIBLE_ACTIVE
2.6.0
YesGA
$brand-background-dark

Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color

rgb(1, 68, 134)
#014486
BRAND_BACKGROUND_DARK
2.6.0
YesGA
$brand-background-dark-transparent

These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug

rgba(1, 68, 134, 0)
rgba(1,68,134,0)
2.6.0
YesI
$brand-background-primary

Primary page background color

rgb(238, 244, 255)
#eef4ff
BRAND_BACKGROUND_PRIMARY
2.6.0
YesGA
$brand-background-primary-transparent

These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug

rgba(176, 196, 223, 0)
rgba(176,196,223,0)
2.6.0
YesI
$brand-contrast

Variant of BRAND that is accessible with BRAND

rgb(26, 27, 30)
#1a1b1e
BRAND_CONTRAST
2.6.0
YesGA
$brand-contrast-active

Active / Hover state of BRAND_CONTRAST

rgb(13, 14, 18)
#0d0e12
BRAND_CONTRAST_ACTIVE
2.6.0
YesGA
$brand-dark

Dark variant of BRAND that is accessible with light colors

rgb(1, 118, 211)
#0176d3
BRAND_DARK
2.6.0
YesGA
$brand-dark-active

Active / Hover state of BRAND_DARK

rgb(37, 48, 69)
#253045
BRAND_DARK_ACTIVE
2.6.0
YesGA
$brand-disabled

Disabled state of BRAND_A11Y

rgb(201, 199, 197)
#c9c7c5
BRAND_DISABLED
2.6.0
YesGA
$brand-header

Background color a branded app header

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
2.6.0
YesI
$brand-header-contrast

Variant of BRAND_HEADER that is accessible with BRAND_HEADER

rgb(94, 94, 94)
#5e5e5e
2.6.0
YesI
$brand-header-contrast-active

Active / Hover state of BRAND_HEADER_CONTRAST

rgb(80, 80, 80)
#505050
2.6.0
YesI
$brand-header-contrast-cool

Variant of BRAND_HEADER_CONTRAST that provides a cool color

rgb(1, 68, 134)
#014486
PALETTE_BLUE_30
2.6.0
YesI
$brand-header-contrast-cool-active

Active / Hover state of BRAND_HEADER_CONTRAST_COOL

rgb(1, 68, 134)
#014486
PALETTE_BLUE_30
2.6.0
YesI
$brand-header-contrast-inverse

Variant of BRAND_HEADER that is accessible with BRAND_HEADER

rgb(255, 255, 255)
#ffffff
2.6.0
YesI
$brand-header-contrast-inverse-active

Active / Hover state of BRAND_HEADER_CONTRAST

rgb(238, 238, 238)
#eeeeee
2.6.0
YesI
$brand-header-contrast-warm

Variant of BRAND_HEADER_CONTRAST that provides a warm color

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
2.6.0
YesI
$brand-header-contrast-warm-active

Active / Hover state of BRAND_HEADER_CONTRAST_WARM

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
2.6.0
YesI
$brand-header-contrast-weak

Weak contrast ratio, useful for iconography

rgb(145, 145, 145)
#919191
2.6.0
YesI
$brand-header-contrast-weak-active

Active / Hover state of BRAND_HEADER_CONTRAST_WEAK

rgb(129, 129, 129)
#818181
2.6.0
YesI
$brand-header-contrast-weak-disabled

Disabled state of BRAND_HEADER_CONTRAST_WEAK

rgba(166, 166, 166, 0.25)
rgba(166,166,166,0.25)
2.6.0
YesI
$brand-header-icon

Icons of BRAND_HEADER that is accessible with BRAND_HEADER

rgb(145, 145, 145)
#919191
2.6.0
YesI
$brand-header-icon-active

Active / Hover state of BRAND_HEADER_ICON

rgb(129, 129, 129)
#818181
2.6.0
YesI
$brand-header-icon-disabled

Disabled state of BRAND_HEADER_ICON

rgba(145, 145, 145, 0.25)
rgba(145,145,145,0.25)
2.6.0
YesI
$brand-light

Light variant of BRAND that is accessible with dark colors

rgb(244, 246, 254)
#f4f6fe
BRAND_LIGHT
2.6.0
YesGA
$brand-light-active

Active / Hover state of BRAND_LIGHT

rgb(227, 229, 237)
#e3e5ed
BRAND_LIGHT_ACTIVE
2.6.0
YesGA
$brand-primary

Primary brand color

rgb(27, 150, 255)
#1b96ff
BRAND_PRIMARY
2.6.0
YesGA
$brand-primary-active

Active / Hover state of BRAND_PRIMARY

rgb(1, 118, 211)
#0176d3
BRAND_PRIMARY_ACTIVE
2.6.0
YesGA
$brand-primary-transparent

Transparent value of BRAND_PRIMARY

rgba(21, 137, 238, 0.1)
rgba(21,137,238,0.1)
2.6.0
YesGA
$brand-primary-transparent-10

Transparent value of BRAND_PRIMARY at 10%

rgba(21, 137, 238, 0.1)
rgba(21,137,238,0.1)
2.6.0
YesI
$brand-primary-transparent-40

Transparent value of BRAND_PRIMARY at 40%

rgba(21, 137, 238, 0.4)
rgba(21,137,238,0.4)
2.6.0
YesI
$brand-text-link

Primary text link brand color

rgb(1, 118, 211)
#0176d3
BRAND_TEXT_LINK
2.6.0
YesGA
$brand-text-link-active

Active / Hover state of BRAND_TEXT_LINK

rgb(1, 68, 134)
#014486
BRAND_TEXT_LINK_ACTIVE
2.6.0
YesGA
$color-gray-1

Gray Color 1

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
2.5.0
NoI
$color-gray-2

Gray Color 2

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
2.5.0
NoI
$color-gray-3

Gray Color 3

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
2.5.0
NoI
$color-gray-4

Gray Color 4

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
2.5.0
NoI
$color-gray-5

Gray Color 5

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
2.5.0
NoI
$color-gray-6

Gray Color 6

rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
2.5.0
NoI
$color-gray-7

Gray Color 7

rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
2.5.0
NoI
$color-gray-8

Gray Color 8

rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
2.5.0
NoI
$color-gray-9

Gray Color 9

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
2.5.0
NoI
$color-gray-10

Gray Color 10

rgb(81, 79, 77)
#514f4d
PALETTE_GRAY_10
2.5.0
NoI
$color-gray-11

Gray Color 11

rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
2.5.0
NoI
$color-gray-12

Gray Color 12

rgb(43, 40, 38)
#2b2826
PALETTE_GRAY_12
2.5.0
NoI
$color-gray-13

Gray Color 13

rgb(8, 7, 7)
#080707
PALETTE_GRAY_13
2.5.0
NoI
$palette-blue-10

Blue 10

rgb(0, 22, 57)
#001639
PALETTE_BLUE_10
2.14.0
NoI
$palette-blue-15

Blue 15

rgb(3, 35, 77)
#03234d
PALETTE_BLUE_15
2.14.0
NoI
$palette-blue-20

Blue 20

rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
2.14.0
NoI
$palette-blue-30

Blue 30

rgb(1, 68, 134)
#014486
PALETTE_BLUE_30
2.14.0
NoI
$palette-blue-40

Blue 40

rgb(11, 92, 171)
#0b5cab
PALETTE_BLUE_40
2.14.0
NoI
$palette-blue-50

Blue 50

rgb(1, 118, 211)
#0176d3
PALETTE_BLUE_50
2.14.0
NoI
$palette-blue-60

Blue 60

rgb(27, 150, 255)
#1b96ff
PALETTE_BLUE_60
2.14.0
NoI
$palette-blue-65

Blue 65

rgb(87, 163, 253)
#57a3fd
PALETTE_BLUE_65
2.14.0
NoI
$palette-blue-70

Blue 70

rgb(120, 176, 253)
#78b0fd
PALETTE_BLUE_70
2.14.0
NoI
$palette-blue-80

Blue 80

rgb(170, 203, 255)
#aacbff
PALETTE_BLUE_80
2.14.0
NoI
$palette-blue-90

Blue 90

rgb(216, 230, 254)
#d8e6fe
PALETTE_BLUE_90
2.14.0
NoI
$palette-blue-95

Blue 95

rgb(238, 244, 255)
#eef4ff
PALETTE_BLUE_95
2.14.0
NoI
$palette-cloud-blue-10

Cloud Blue 10

rgb(0, 26, 40)
#001a28
PALETTE_CLOUD_BLUE_10
2.14.0
NoI
$palette-cloud-blue-15

Cloud Blue 15

rgb(10, 38, 54)
#0a2636
PALETTE_CLOUD_BLUE_15
2.14.0
NoI
$palette-cloud-blue-20

Cloud Blue 20

rgb(2, 50, 72)
#023248
PALETTE_CLOUD_BLUE_20
2.14.0
NoI
$palette-cloud-blue-30

Cloud Blue 30

rgb(8, 73, 104)
#084968
PALETTE_CLOUD_BLUE_30
2.14.0
NoI
$palette-cloud-blue-40

Cloud Blue 40

rgb(5, 98, 138)
#05628a
PALETTE_CLOUD_BLUE_40
2.14.0
NoI
$palette-cloud-blue-50

Cloud Blue 50

rgb(16, 124, 173)
#107cad
PALETTE_CLOUD_BLUE_50
2.14.0
NoI
$palette-cloud-blue-60

Cloud Blue 60

rgb(13, 157, 218)
#0d9dda
PALETTE_CLOUD_BLUE_60
2.14.0
NoI
$palette-cloud-blue-65

Cloud Blue 65

rgb(8, 171, 237)
#08abed
PALETTE_CLOUD_BLUE_65
2.14.0
NoI
$palette-cloud-blue-70

Cloud Blue 70

rgb(26, 185, 255)
#1ab9ff
PALETTE_CLOUD_BLUE_70
2.14.0
NoI
$palette-cloud-blue-80

Cloud Blue 80

rgb(144, 208, 254)
#90d0fe
PALETTE_CLOUD_BLUE_80
2.14.0
NoI
$palette-cloud-blue-90

Cloud Blue 90

rgb(207, 233, 254)
#cfe9fe
PALETTE_CLOUD_BLUE_90
2.14.0
NoI
$palette-cloud-blue-95

Cloud Blue 95

rgb(234, 245, 254)
#eaf5fe
PALETTE_CLOUD_BLUE_95
2.14.0
NoI
$palette-green-10

Green 10

rgb(7, 27, 18)
#071b12
PALETTE_GREEN_10
2.14.0
NoI
$palette-green-15

Green 15

rgb(12, 41, 18)
#0c2912
PALETTE_GREEN_15
2.14.0
NoI
$palette-green-20

Green 20

rgb(14, 53, 34)
#0e3522
PALETTE_GREEN_20
2.14.0
NoI
$palette-green-30

Green 30

rgb(25, 78, 49)
#194e31
PALETTE_GREEN_30
2.14.0
NoI
$palette-green-40

Green 40

rgb(34, 104, 62)
#22683e
PALETTE_GREEN_40
2.14.0
NoI
$palette-green-50

Green 50

rgb(46, 132, 74)
#2e844a
PALETTE_GREEN_50
2.14.0
NoI
$palette-green-60

Green 60

rgb(59, 167, 85)
#3ba755
PALETTE_GREEN_60
2.14.0
NoI
$palette-green-65

Green 65

rgb(65, 182, 88)
#41b658
PALETTE_GREEN_65
2.14.0
NoI
$palette-green-70

Green 70

rgb(69, 198, 90)
#45c65a
PALETTE_GREEN_70
2.14.0
NoI
$palette-green-80

Green 80

rgb(145, 219, 139)
#91db8b
PALETTE_GREEN_80
2.14.0
NoI
$palette-green-90

Green 90

rgb(205, 239, 196)
#cdefc4
PALETTE_GREEN_90
2.14.0
NoI
$palette-green-95

Green 95

rgb(235, 247, 230)
#ebf7e6
PALETTE_GREEN_95
2.14.0
NoI
$palette-hot-orange-10

Hot Orange 10

rgb(40, 18, 2)
#281202
PALETTE_HOT_ORANGE_10
2.14.0
NoI
$palette-hot-orange-15

Hot Orange 15

rgb(66, 22, 4)
#421604
PALETTE_HOT_ORANGE_15
2.14.0
NoI
$palette-hot-orange-20

Hot Orange 20

rgb(84, 29, 1)
#541d01
PALETTE_HOT_ORANGE_20
2.14.0
NoI
$palette-hot-orange-30

Hot Orange 30

rgb(126, 38, 0)
#7e2600
PALETTE_HOT_ORANGE_30
2.14.0
NoI
$palette-hot-orange-40

Hot Orange 40

rgb(170, 48, 1)
#aa3001
PALETTE_HOT_ORANGE_40
2.14.0
NoI
$palette-hot-orange-50

Hot Orange 50

rgb(216, 58, 0)
#d83a00
PALETTE_HOT_ORANGE_50
2.14.0
NoI
$palette-hot-orange-60

Hot Orange 60

rgb(255, 93, 45)
#ff5d2d
PALETTE_HOT_ORANGE_60
2.14.0
NoI
$palette-hot-orange-65

Hot Orange 65

rgb(255, 120, 79)
#ff784f
PALETTE_HOT_ORANGE_65
2.14.0
NoI
$palette-hot-orange-70

Hot Orange 70

rgb(255, 144, 110)
#ff906e
PALETTE_HOT_ORANGE_70
2.14.0
NoI
$palette-hot-orange-80

Hot Orange 80

rgb(254, 185, 165)
#feb9a5
PALETTE_HOT_ORANGE_80
2.14.0
NoI
$palette-hot-orange-90

Hot Orange 90

rgb(255, 222, 213)
#ffded5
PALETTE_HOT_ORANGE_90
2.14.0
NoI
$palette-hot-orange-95

Hot Orange 95

rgb(254, 241, 237)
#fef1ed
PALETTE_HOT_ORANGE_95
2.14.0
NoI
$palette-indigo-10

Indigo 10

rgb(32, 6, 71)
#200647
PALETTE_INDIGO_10
2.14.0
NoI
$palette-indigo-15

Indigo 15

rgb(31, 9, 116)
#1f0974
PALETTE_INDIGO_15
2.14.0
NoI
$palette-indigo-20

Indigo 20

rgb(38, 15, 143)
#260f8f
PALETTE_INDIGO_20
2.14.0
NoI
$palette-indigo-30

Indigo 30

rgb(47, 44, 183)
#2f2cb7
PALETTE_INDIGO_30
2.14.0
NoI
$palette-indigo-40

Indigo 40

rgb(58, 73, 218)
#3a49da
PALETTE_INDIGO_40
2.14.0
NoI
$palette-indigo-50

Indigo 50

rgb(88, 103, 232)
#5867e8
PALETTE_INDIGO_50
2.14.0
NoI
$palette-indigo-60

Indigo 60

rgb(127, 140, 237)
#7f8ced
PALETTE_INDIGO_60
2.14.0
NoI
$palette-indigo-65

Indigo 65

rgb(142, 155, 239)
#8e9bef
PALETTE_INDIGO_65
2.14.0
NoI
$palette-indigo-70

Indigo 70

rgb(158, 169, 241)
#9ea9f1
PALETTE_INDIGO_70
2.14.0
NoI
$palette-indigo-80

Indigo 80

rgb(190, 199, 246)
#bec7f6
PALETTE_INDIGO_80
2.14.0
NoI
$palette-indigo-90

Indigo 90

rgb(224, 229, 248)
#e0e5f8
PALETTE_INDIGO_90
2.14.0
NoI
$palette-indigo-95

Indigo 95

rgb(241, 243, 251)
#f1f3fb
PALETTE_INDIGO_95
2.14.0
NoI
$palette-orange-10

Orange 10

rgb(32, 22, 0)
#201600
PALETTE_ORANGE_10
2.14.0
NoI
$palette-orange-15

Orange 15

rgb(55, 30, 3)
#371e03
PALETTE_ORANGE_15
2.14.0
NoI
$palette-orange-20

Orange 20

rgb(62, 43, 2)
#3e2b02
PALETTE_ORANGE_20
2.14.0
NoI
$palette-orange-30

Orange 30

rgb(95, 62, 2)
#5f3e02
PALETTE_ORANGE_30
2.14.0
NoI
$palette-orange-40

Orange 40

rgb(130, 81, 1)
#825101
PALETTE_ORANGE_40
2.14.0
NoI
$palette-orange-50

Orange 50

rgb(169, 100, 4)
#a96404
PALETTE_ORANGE_50
2.14.0
NoI
$palette-orange-60

Orange 60

rgb(221, 122, 1)
#dd7a01
PALETTE_ORANGE_60
2.14.0
NoI
$palette-orange-65

Orange 65

rgb(243, 131, 3)
#f38303
PALETTE_ORANGE_65
2.14.0
NoI
$palette-orange-70

Orange 70

rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
2.14.0
NoI
$palette-orange-80

Orange 80

rgb(255, 186, 144)
#ffba90
PALETTE_ORANGE_80
2.14.0
NoI
$palette-orange-90

Orange 90

rgb(254, 223, 208)
#fedfd0
PALETTE_ORANGE_90
2.14.0
NoI
$palette-orange-95

Orange 95

rgb(255, 241, 234)
#fff1ea
PALETTE_ORANGE_95
2.14.0
NoI
$palette-pink-10

Pink 10

rgb(55, 1, 20)
#370114
PALETTE_PINK_10
2.14.0
NoI
$palette-pink-15

Pink 15

rgb(75, 6, 32)
#4b0620
PALETTE_PINK_15
2.14.0
NoI
$palette-pink-20

Pink 20

rgb(97, 2, 42)
#61022a
PALETTE_PINK_20
2.14.0
NoI
$palette-pink-30

Pink 30

rgb(138, 3, 62)
#8a033e
PALETTE_PINK_30
2.14.0
NoI
$palette-pink-40

Pink 40

rgb(182, 5, 84)
#b60554
PALETTE_PINK_40
2.14.0
NoI
$palette-pink-50

Pink 50

rgb(227, 6, 106)
#e3066a
PALETTE_PINK_50
2.14.0
NoI
$palette-pink-60

Pink 60

rgb(255, 83, 138)
#ff538a
PALETTE_PINK_60
2.14.0
NoI
$palette-pink-65

Pink 65

rgb(254, 114, 152)
#fe7298
PALETTE_PINK_65
2.14.0
NoI
$palette-pink-70

Pink 70

rgb(254, 138, 167)
#fe8aa7
PALETTE_PINK_70
2.14.0
NoI
$palette-pink-80

Pink 80

rgb(253, 182, 197)
#fdb6c5
PALETTE_PINK_80
2.14.0
NoI
$palette-pink-90

Pink 90

rgb(253, 221, 227)
#fddde3
PALETTE_PINK_90
2.14.0
NoI
$palette-pink-95

Pink 95

rgb(254, 240, 243)
#fef0f3
PALETTE_PINK_95
2.14.0
NoI
$palette-purple-10

Purple 10

rgb(36, 6, 67)
#240643
PALETTE_PURPLE_10
2.14.0
NoI
$palette-purple-15

Purple 15

rgb(48, 11, 96)
#300b60
PALETTE_PURPLE_15
2.14.0
NoI
$palette-purple-20

Purple 20

rgb(64, 16, 117)
#401075
PALETTE_PURPLE_20
2.14.0
NoI
$palette-purple-30

Purple 30

rgb(90, 27, 169)
#5a1ba9
PALETTE_PURPLE_30
2.14.0
NoI
$palette-purple-40

Purple 40

rgb(117, 38, 227)
#7526e3
PALETTE_PURPLE_40
2.14.0
NoI
$palette-purple-50

Purple 50

rgb(144, 80, 233)
#9050e9
PALETTE_PURPLE_50
2.14.0
NoI
$palette-purple-60

Purple 60

rgb(173, 123, 238)
#ad7bee
PALETTE_PURPLE_60
2.14.0
NoI
$palette-purple-65

Purple 65

rgb(183, 141, 239)
#b78def
PALETTE_PURPLE_65
2.14.0
NoI
$palette-purple-70

Purple 70

rgb(194, 158, 241)
#c29ef1
PALETTE_PURPLE_70
2.14.0
NoI
$palette-purple-80

Purple 80

rgb(215, 143, 245)
#d78ff5
PALETTE_PURPLE_80
2.14.0
NoI
$palette-purple-90

Purple 90

rgb(236, 225, 249)
#ece1f9
PALETTE_PURPLE_90
2.14.0
NoI
$palette-purple-95

Purple 95

rgb(246, 242, 251)
#f6f2fb
PALETTE_PURPLE_95
2.14.0
NoI
$palette-red-10

Red 10

rgb(48, 12, 1)
#300c01
PALETTE_RED_10
2.14.0
NoI
$palette-red-15

Red 15

rgb(74, 12, 4)
#4a0c04
PALETTE_RED_15
2.14.0
NoI
$palette-red-20

Red 20

rgb(100, 1, 3)
#640103
PALETTE_RED_20
2.14.0
NoI
$palette-red-30

Red 30

rgb(142, 3, 15)
#8e030f
PALETTE_RED_30
2.14.0
NoI
$palette-red-40

Red 40

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
2.14.0
NoI
$palette-red-50

Red 50

rgb(234, 0, 30)
#ea001e
PALETTE_RED_50
2.14.0
NoI
$palette-red-60

Red 60

rgb(254, 92, 76)
#fe5c4c
PALETTE_RED_60
2.14.0
NoI
$palette-red-65

Red 65

rgb(254, 119, 101)
#fe7765
PALETTE_RED_65
2.14.0
NoI
$palette-red-70

Red 70

rgb(254, 143, 125)
#fe8f7d
PALETTE_RED_70
2.14.0
NoI
$palette-red-80

Red 80

rgb(254, 184, 171)
#feb8ab
PALETTE_RED_80
2.14.0
NoI
$palette-red-90

Red 90

rgb(254, 222, 216)
#feded8
PALETTE_RED_90
2.14.0
NoI
$palette-red-95

Red 95

rgb(254, 241, 238)
#fef1ee
PALETTE_RED_95
2.14.0
NoI
$palette-teal-10

Teal 10

rgb(7, 27, 18)
#071b12
PALETTE_TEAL_10
2.14.0
NoI
$palette-teal-15

Teal 15

rgb(7, 40, 37)
#072825
PALETTE_TEAL_15
2.14.0
NoI
$palette-teal-20

Teal 20

rgb(2, 52, 52)
#023434
PALETTE_TEAL_20
2.14.0
NoI
$palette-teal-30

Teal 30

rgb(2, 77, 76)
#024d4c
PALETTE_TEAL_30
2.14.0
NoI
$palette-teal-40

Teal 40

rgb(5, 103, 100)
#056764
PALETTE_TEAL_40
2.14.0
NoI
$palette-teal-50

Teal 50

rgb(11, 130, 124)
#0b827c
PALETTE_TEAL_50
2.14.0
NoI
$palette-teal-60

Teal 60

rgb(6, 165, 154)
#06a59a
PALETTE_TEAL_60
2.14.0
NoI
$palette-teal-65

Teal 65

rgb(3, 180, 167)
#03b4a7
PALETTE_TEAL_65
2.14.0
NoI
$palette-teal-70

Teal 70

rgb(1, 195, 179)
#01c3b3
PALETTE_TEAL_70
2.14.0
NoI
$palette-teal-80

Teal 80

rgb(4, 225, 203)
#04e1cb
PALETTE_TEAL_80
2.14.0
NoI
$palette-teal-90

Teal 90

rgb(172, 243, 228)
#acf3e4
PALETTE_TEAL_90
2.14.0
NoI
$palette-teal-95

Teal 95

rgb(222, 249, 243)
#def9f3
PALETTE_TEAL_95
2.14.0
NoI
$palette-violet-10

Violet 10

rgb(46, 0, 57)
#2e0039
PALETTE_VIOLET_10
2.14.0
NoI
$palette-violet-15

Violet 15

rgb(61, 1, 87)
#3d0157
PALETTE_VIOLET_15
2.14.0
NoI
$palette-violet-20

Violet 20

rgb(82, 0, 102)
#520066
PALETTE_VIOLET_20
2.14.0
NoI
$palette-violet-30

Violet 30

rgb(115, 3, 148)
#730394
PALETTE_VIOLET_30
2.14.0
NoI
$palette-violet-40

Violet 40

rgb(150, 2, 199)
#9602c7
PALETTE_VIOLET_40
2.14.0
NoI
$palette-violet-50

Violet 50

rgb(186, 1, 255)
#ba01ff
PALETTE_VIOLET_50
2.14.0
NoI
$palette-violet-60

Violet 60

rgb(203, 101, 255)
#cb65ff
PALETTE_VIOLET_60
2.14.0
NoI
$palette-violet-65

Violet 65

rgb(209, 125, 254)
#d17dfe
PALETTE_VIOLET_65
2.14.0
NoI
$palette-violet-70

Violet 70

rgb(216, 146, 254)
#d892fe
PALETTE_VIOLET_70
2.14.0
NoI
$palette-violet-80

Violet 80

rgb(229, 185, 254)
#e5b9fe
PALETTE_VIOLET_80
2.14.0
NoI
$palette-violet-90

Violet 90

rgb(242, 222, 254)
#f2defe
PALETTE_VIOLET_90
2.14.0
NoI
$palette-violet-95

Violet 95

rgb(249, 240, 255)
#f9f0ff
PALETTE_VIOLET_95
2.14.0
NoI
$palette-yellow-10

Yellow 10

rgb(40, 18, 2)
#281202
PALETTE_YELLOW_10
2.14.0
NoI
$palette-yellow-15

Yellow 15

rgb(46, 34, 4)
#2e2204
PALETTE_YELLOW_15
2.14.0
NoI
$palette-yellow-20

Yellow 20

rgb(79, 33, 0)
#4f2100
PALETTE_YELLOW_20
2.14.0
NoI
$palette-yellow-30

Yellow 30

rgb(111, 52, 0)
#6f3400
PALETTE_YELLOW_30
2.14.0
NoI
$palette-yellow-40

Yellow 40

rgb(140, 75, 2)
#8c4b02
PALETTE_YELLOW_40
2.14.0
NoI
$palette-yellow-50

Yellow 50

rgb(168, 100, 3)
#a86403
PALETTE_YELLOW_50
2.14.0
NoI
$palette-yellow-60

Yellow 60

rgb(202, 133, 1)
#ca8501
PALETTE_YELLOW_60
2.14.0
NoI
$palette-yellow-65

Yellow 65

rgb(215, 147, 4)
#d79304
PALETTE_YELLOW_65
2.14.0
NoI
$palette-yellow-70

Yellow 70

rgb(228, 162, 1)
#e4a201
PALETTE_YELLOW_70
2.14.0
NoI
$palette-yellow-80

Yellow 80

rgb(252, 192, 3)
#fcc003
PALETTE_YELLOW_80
2.14.0
NoI
$palette-yellow-90

Yellow 90

rgb(249, 227, 182)
#f9e3b6
PALETTE_YELLOW_90
2.14.0
NoI
$palette-yellow-95

Yellow 95

rgb(251, 243, 224)
#fbf3e0
PALETTE_YELLOW_95
2.14.0
NoI

Background ColorBackground Color

Use these tokens for background colors only. Do not use these for border colors or text colors.

TokenExampleReleasedThemeableSupport
$color-background

Default background color for the whole app.

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoGA
$color-background-alt

Second default background color for the app.

rgb(255, 255, 255)
#ffffff
WHITE
1.0.0
NoGA
$color-background-alt-inverse

Alternative background color for dark portions of the app.

rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
1.0.0
NoGA
$color-background-backdrop

The color of the mask overlay that appears when you enter a modal state.

rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
1.0.0
NoI
$color-background-backdrop-tint

The color of the mask overlay that provides user feedback on interaction.

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
1.0.0
NoI
$color-background-customer

Background color for UI elements related to the concept of an external user or customer.

rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoI
$color-background-dark

Dark variant of COLOR_BACKGROUND.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
2.8.0
NoI
$color-background-destructive

Color for UI elements related to destructive actions.

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
1.0.0
NoI
$color-background-destructive-active

Active color for UI elements related to destructive actions.

rgb(142, 3, 15)
#8e030f
PALETTE_RED_30
1.0.0
NoI
$color-background-destructive-hover

Hover color for UI elements related to destructive actions.

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
1.0.0
NoI
$color-background-error

Color for UI elements related to errors.

rgb(254, 92, 76)
#fe5c4c
PALETTE_RED_60
1.0.0
NoI
$color-background-error-dark

Dark color for UI elements related to errors. Accessible with white text.

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
1.0.0
NoI
$color-background-highlight

Background color for highlighting UI elements.

rgb(250, 255, 189)
#faffbd
LEMON_CHIFFON
1.0.0
NoGA
$color-background-highlight-search

Background color for highlighting text in search results.

rgb(255, 240, 63)
#fff03f
GORSE
1.0.0
NoI
$color-background-image-overlay

Color of mask overlay that sits on top of an image when text is present.

rgba(0, 0, 0, 0.6)
BLACK_TRANSPARENT_60
1.0.0
NoI
$color-background-info

Background color for UI elements related to providing neutral information (not error, success, or warning).

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
1.0.0
NoI
$color-background-input-checkbox-disabled

Disabled checkboxes

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-background-input-disabled

Disabled input

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-background-inverse

Default background color for dark portions of the app (like Stage Left or tooltips).

rgb(0, 22, 57)
#001639
PALETTE_BLUE_10
1.0.0
NoGA
$color-background-inverse-light

Light variant of COLOR_BACKGROUND_INVERSE.

rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
2.8.0
NoI
$color-background-light

Light variant of COLOR_BACKGROUND.

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
2.8.0
NoI
$color-background-notification-new

Background color for a new notification list item.

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$color-background-offline

Color for UI elements related to the offline state.

rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoI
$color-background-post

Background color of comment posts in the feed.

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$color-background-row-active

Used as the background color for the active state on rows or items on list-like components.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-background-row-hover

Used as the background color for the hover state on rows or items on list-like components.

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$color-background-row-new

Used as the background color for the new state on rows or items on list-like components.

rgb(205, 239, 196)
#cdefc4
PALETTE_GREEN_90
1.0.0
NoGA
$color-background-row-selected

Used as the background color for selected rows or items on list-like components.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-background-scrollbar

The background color of an internal scrollbar.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-background-scrollbar-track

The background color of an internal scrollbar track.

rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
1.0.0
NoI
$color-background-selection

Background color for text selected with a mouse.

rgb(238, 244, 255)
#eef4ff
PALETTE_BLUE_95
1.0.0
NoI
$color-background-spinner-dot

Color of the spinner dot.

rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoI
$color-background-stencil

Used as background for loading stencils on white background.

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$color-background-stencil-alt

Used as an alternate background for loading stencils on gray backgrounds.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-background-success

Color for UI elements that have to do with success.

rgb(69, 198, 90)
#45c65a
PALETTE_GREEN_70
1.0.0
NoI
$color-background-success-dark

Dark color for UI elements that have to do with success. Accessible with white text.

rgb(46, 132, 74)
#2e844a
PALETTE_GREEN_50
1.0.0
NoI
$color-background-success-darker

Darker color for UI elements that have to do with success. Accessible with white text.

rgb(25, 78, 49)
#194e31
PALETTE_GREEN_30
1.0.0
NoI
$color-background-toast

Background color for toast messaging.

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
1.0.0
NoI
$color-background-toggle

Toggle background color.

rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoI
$color-background-toggle-disabled

Disabled toggle background color.

rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoI
$color-background-toggle-hover

Hovered toggle background color.

rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
1.0.0
NoI
$color-background-warning

Color for UI elements that have to do with warning.

rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoI
$color-background-warning-dark

Dark Color for UI elements that have to do with warning.

rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoI
$color-brand

Our product brand blue.

rgb(27, 150, 255)
#1b96ff
PALETTE_BLUE_60
1.0.0
NoGA
$color-brand-dark

Our product brand blue, darkened to meet accessibility color contrast ratios with white text.

rgb(1, 118, 211)
#0176d3
PALETTE_BLUE_50
1.0.0
NoGA
$color-brand-darker

Our product brand blue, darkened even further.

rgb(1, 68, 134)
#014486
PALETTE_BLUE_30
1.0.0
NoI
$color-picker-slider-thumb-color-background
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$page-header-color-background

Default Page Header background color

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$popover-walkthrough-alt-image
/assets/images/popovers/popover-action.png
1.0.0
NoI
$popover-walkthrough-alt-nubbin-color-background
rgb(1, 118, 211)
#0176d3
PALETTE_BLUE_50
1.0.0
NoI
$popover-walkthrough-color-background
rgb(0, 22, 57)
#001639
PALETTE_BLUE_10
1.0.0
NoI
$popover-walkthrough-color-background-alt
rgb(1, 118, 211)
#0176d3
PALETTE_BLUE_50
1.0.0
NoI
$popover-walkthrough-header-color-background
rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
1.0.0
NoI
$popover-walkthrough-header-image
/assets/images/popovers/popover-header.png
1.0.0
NoI
$progress-color-background-shade
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$progress-color-border-shade
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
1.0.0
NoI
$table-color-background-header
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
1.0.0
NoI
$table-color-background-header-hover
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
1.0.0
NoI

Text ColorText Color

Use these tokens for text colors only. Do not use these for border colors or background colors.

TokenExampleReleasedThemeableSupport
$color-text-action-label

Action label text color

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoGA
$color-text-action-label-active

Action label active text color

Aa
rgb(8, 7, 7)
#080707
PALETTE_GRAY_13
1.0.0
NoGA
$color-text-brand

Our product brand blue.

Aa
rgb(27, 150, 255)
#1b96ff
PALETTE_BLUE_60
1.0.0
NoGA
$color-text-brand-primary

Text color found on any primary brand color

Aa
rgb(255, 255, 255)
#ffffff
WHITE
1.0.0
NoI
$color-text-button-default-disabled

Text color for default secondary button - disabled state

Aa
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-text-button-default-hint

Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoI
$color-text-button-inverse

Text color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-text-customer

Customer text used in anchor subtitle

Aa
rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoI
$color-text-default

Body text color

Aa
rgb(8, 7, 7)
#080707
PALETTE_GRAY_13
1.0.0
NoGA
$color-text-destructive

Text color for destructive actions

Aa
rgb(234, 0, 30)
#ea001e
PALETTE_RED_50
1.0.0
NoI
$color-text-destructive-hover

Text color for destructive actions - hover state

Aa
rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
1.0.0
NoI
$color-text-error

Error text for inputs and error misc

Aa
rgb(234, 0, 30)
#ea001e
PALETTE_RED_50
1.0.0
NoGA
$color-text-icon-default

Default icon color.

Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
1.0.0
NoI
$color-text-icon-default-disabled

Default icon color - disabled state

Aa
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-text-icon-default-hint

Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoI
$color-text-icon-inverse

Icon color on dark background

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
1.0.0
NoI
$color-text-icon-inverse-active

Icon color on dark background - active state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
1.0.0
NoI
$color-text-icon-inverse-hover

Icon color on dark background - hover state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
1.0.0
NoI
$color-text-input-disabled

Input disabled text

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoI
$color-text-input-icon

Input icon

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoI
$color-text-inverse

Inverse text color for dark backgrounds

Aa
rgb(255, 255, 255)
#ffffff
WHITE
1.0.0
NoGA
$color-text-inverse-weak

Weak inverse text color for dark backgrounds

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
1.0.0
NoGA
$color-text-label

Text color for field labels.

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoGA
$color-text-link

Link text (508)

Aa
rgb(1, 118, 211)
#0176d3
BRAND_TEXT_LINK
1.0.0
NoGA
$color-text-link-active

Active link text

Aa
rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
1.0.0
NoGA
$color-text-link-disabled

Disabled link text

Aa
rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
1.0.0
NoGA
$color-text-link-focus

Focus link text

Aa
rgb(1, 68, 134)
#014486
PALETTE_BLUE_30
1.0.0
NoGA
$color-text-link-hover

Hover link text

Aa
rgb(1, 68, 134)
#014486
BRAND_TEXT_LINK_ACTIVE
1.0.0
NoGA
$color-text-link-inverse

Link color on dark background

Aa
rgb(255, 255, 255)
#ffffff
WHITE
1.0.0
NoGA
$color-text-link-inverse-active

Link color on dark background - active state

Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
1.0.0
NoGA
$color-text-link-inverse-disabled

Link color on dark background - disabled state

Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
1.0.0
NoGA
$color-text-link-inverse-hover

Link color on dark background - hover state

Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
1.0.0
NoGA
$color-text-placeholder

Input placeholder text.

Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
1.0.0
NoGA
$color-text-placeholder-inverse

Input placeholder text on dark backgrounds.

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoGA
$color-text-required

Color of required field marker.

Aa
rgb(234, 0, 30)
#ea001e
PALETTE_RED_50
1.0.0
NoGA
$color-text-success

Text color for success text.

Aa
rgb(46, 132, 74)
#2e844a
PALETTE_GREEN_50
1.0.0
NoI
$color-text-success-inverse

Text color for success text on dark backgrounds.

Aa
rgb(69, 198, 90)
#45c65a
PALETTE_GREEN_70
1.0.0
NoI
$color-text-tab-label

Color for default text in a tab group.

Aa
rgb(43, 40, 38)
#2b2826
PALETTE_GRAY_12
1.0.0
NoI
$color-text-tab-label-disabled

Color for disabled text in a tab group.

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-text-toggle-disabled

Color for disabled toggles

Aa
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-text-warning

Color for texts or icons that are related to warnings on a dark background.

Aa
rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoI
$color-text-warning-alt

Color for texts that are related to warnings on a light background.

Aa
rgb(140, 75, 2)
#8c4b02
PALETTE_YELLOW_40
1.0.0
NoI
$color-text-weak

Color for text that is purposefully de-emphasized to create visual hierarchy.

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoGA

Border ColorBorder Color

Use these tokens for border colors only. Do not use these for background colors or text colors.

TokenExampleReleasedThemeableSupport
$button-color-border-primary
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$card-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$card-footer-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-border

Default border color for UI elements.

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoGA
$color-border-brand

Our product brand blue.

rgb(27, 150, 255)
#1b96ff
PALETTE_BLUE_60
1.0.0
NoGA
$color-border-brand-dark

Our product brand blue, darkened to meet accessibility color contrast ratios with white text.

rgb(1, 68, 134)
#014486
PALETTE_BLUE_30
1.0.0
NoI
$color-border-button-default

Border color for default secondary button

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-border-button-focus-inverse
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-border-customer

Border color for UI elements related to the concept of an external user or customer.

rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoI
$color-border-destructive

Border color for UI elements that have to do with destructive actions.

rgb(234, 0, 30)
#ea001e
PALETTE_RED_50
1.0.0
NoI
$color-border-destructive-active

Active border color for UI elements that have to do with destructive actions.

rgb(142, 3, 15)
#8e030f
PALETTE_RED_30
1.0.0
NoI
$color-border-destructive-hover

Hover border color for UI elements that have to do with destructive actions.

rgb(186, 5, 23)
#ba0517
PALETTE_RED_40
1.0.0
NoI
$color-border-error

Border color for UI elements that have to do with errors.

rgb(234, 0, 30)
#ea001e
PALETTE_RED_50
1.0.0
NoGA
$color-border-error-alt

Alternative border color for UI elements related to errors.

rgb(254, 143, 125)
#fe8f7d
PALETTE_RED_70
1.0.0
NoI
$color-border-error-dark

Dark alternative border color for UI elements related to errors.

rgb(254, 143, 125)
#fe8f7d
PALETTE_RED_70
1.0.0
NoI
$color-border-info

Border color for UI elements related to providing neutral information (not error, success, or warning).

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
1.0.0
NoI
$color-border-input

Border color on form elements.

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$color-border-input-disabled

Border color on disabled form elements.

rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
1.0.0
NoI
$color-border-inverse

Border color to match UI elements using color-background-inverse.

rgb(0, 22, 57)
#001639
PALETTE_BLUE_10
1.0.0
NoI
$color-border-link-focus-inverse
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-border-offline

Border color for UI elements related to the offline state.

rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoI
$color-border-reminder

Border color on notification reminders.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoI
$color-border-row-selected

Used as the border color for selected rows or items on list-like components.

rgb(1, 118, 211)
#0176d3
PALETTE_BLUE_50
1.0.0
NoGA
$color-border-row-selected-hover

Used as the border color for the hover state on selected rows or items on list-like components.

rgb(27, 150, 255)
#1b96ff
PALETTE_BLUE_60
1.0.0
NoGA
$color-border-selection

Used to delineate the boundary of a selected component. Specific to builders.

rgb(1, 118, 211)
#0176d3
PALETTE_BLUE_50
1.0.0
NoI
$color-border-selection-active

Used to delineate the boundary of a component that is being clicked. Specific to builders.

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
1.0.0
NoI
$color-border-selection-hover

Used to delineate the boundary of a component that is being hovered over. Specific to builders.

rgb(27, 150, 255)
#1b96ff
PALETTE_BLUE_60
1.0.0
NoI
$color-border-separator

Lightest separator color - used as default separator on white backgrounds.

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
1.0.0
NoGA
$color-border-separator-alt

Medium separator color - used as default separator on light gray backgrounds.

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoGA
$color-border-separator-alt-2

Darkest separator color - used as an alternate separator color when more differentiation is desired.

rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
1.0.0
NoI
$color-border-separator-inverse

Used as a separator on dark backgrounds, such as stage left navigation.

rgb(3, 45, 96)
#032d60
PALETTE_BLUE_20
1.0.0
NoGA
$color-border-success

Border color for UI elements that have to do with success.

rgb(145, 219, 139)
#91db8b
PALETTE_GREEN_80
1.0.0
NoGA
$color-border-success-dark

Dark alternative border color for UI elements that have to do with success.

rgb(46, 132, 74)
#2e844a
PALETTE_GREEN_50
1.0.0
NoI
$color-border-warning

Border color for UI elements that have to do with warnings.

rgb(254, 147, 57)
#fe9339
PALETTE_ORANGE_70
1.0.0
NoGA
$page-header-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI
$page-header-joined-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
1.0.0
NoI

FontFont

Use these font weights to change how thin or heavy the weight is for our font.

TokenExampleReleasedThemeableSupport
$card-font-weight

Use for active tab.

Aa
700
FONT_WEIGHT_BOLD
1.0.0
NoI
$font-family

Default font-family for Salesforce applications

Aa
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
SANS_SERIF
1.0.0
NoGA
$font-family-heading
Aa
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
SANS_SERIF
1.0.0
NoI
$font-family-monospace
Aa
Consolas, Menlo, Monaco, Courier, monospace
MONOSPACE
1.0.0
NoI
$font-weight-bold

Used sparingly for emphasized text within regular body copy.

Aa
700
FONT_WEIGHT_BOLD
1.0.0
NoGA
$font-weight-regular

Most all body copy.

Aa
400
FONT_WEIGHT_REGULAR
1.0.0
NoGA
$form-label-font-size
Aa
0.75rem
FONT_SIZE_2
12px
1.0.0
NoI
$input-static-font-size
Aa
0.875rem
FONT_SIZE_4
14px
1.0.0
NoI
$input-static-font-weight
Aa
400
FONT_WEIGHT_REGULAR
1.0.0
NoI
$page-header-title-font-weight
Aa
700
FONT_WEIGHT_BOLD
1.0.0
NoI
$tabs-font-weight

Use for active tab.

Aa
700
FONT_WEIGHT_BOLD
1.0.0
NoI

Font SizeFont Size

Use these sizing tokens for font sizes.

TokenExampleReleasedThemeableSupport
$font-size-1

Constant typography token for font size 1

Aa
0.625rem
FONT_SIZE_1
10px
1.0.0
NoI
$font-size-2

Constant typography token for font size 2

Aa
0.75rem
FONT_SIZE_2
12px
1.0.0
NoI
$font-size-3

Constant typography token for font size 3

Aa
0.8125rem
FONT_SIZE_3
13px
1.0.0
NoI
$font-size-4

Constant typography token for font size 4

Aa
0.875rem
FONT_SIZE_4
14px
1.0.0
NoI
$font-size-5

Constant typography token for font size 5

Aa
1rem
FONT_SIZE_5
16px
1.0.0
NoI
$font-size-6

Constant typography token for font size 6

Aa
1.125rem
FONT_SIZE_6
18px
1.0.0
NoI
$font-size-7

Constant typography token for font size 7

Aa
1.25rem
FONT_SIZE_7
20px
1.0.0
NoI
$font-size-8

Constant typography token for font size 8

Aa
1.5rem
FONT_SIZE_8
24px
1.0.0
NoI
$font-size-9

Constant typography token for font size 9

Aa
1.75rem
FONT_SIZE_9
28px
1.0.0
NoI
$font-size-10

Constant typography token for font size 10

Aa
2rem
FONT_SIZE_10
32px
1.0.0
NoI
$font-size-11

Constant typography token for font size 11

Aa
2.625rem
FONT_SIZE_11
42px
1.0.0
NoI
$var-font-size-1

Variable typography token for font size 1

Aa
0.625rem
FONT_SIZE_1
10px
1.0.0
NoI
$var-font-size-2

Variable typography token for font size 2

Aa
0.75rem
FONT_SIZE_2
12px
1.0.0
NoI
$var-font-size-3

Variable typography token for font size 3

Aa
0.8125rem
FONT_SIZE_3
13px
1.0.0
NoI
$var-font-size-4

Variable typography token for font size 4

Aa
0.875rem
FONT_SIZE_4
14px
1.0.0
NoI
$var-font-size-5

Variable typography token for font size 5

Aa
1rem
FONT_SIZE_5
16px
1.0.0
NoI
$var-font-size-6

Variable typography token for font size 6

Aa
1.125rem
FONT_SIZE_6
18px
1.0.0
NoI
$var-font-size-7

Variable typography token for font size 7

Aa
1.25rem
FONT_SIZE_7
20px
1.0.0
NoI
$var-font-size-8

Variable typography token for font size 8

Aa
1.5rem
FONT_SIZE_8
24px
1.0.0
NoI
$var-font-size-9

Variable typography token for font size 9

Aa
1.75rem
FONT_SIZE_9
28px
1.0.0
NoI
$var-font-size-10

Variable typography token for font size 10

Aa
2rem
FONT_SIZE_10
32px
1.0.0
NoI
$var-font-size-11

Variable typography token for font size 11

Aa
2.625rem
FONT_SIZE_11
42px
1.0.0
NoI

OpacityOpacity

Use these opacity tokens for element transparency.

TokenExampleReleasedThemeableSupport
$opacity-5

50% transparency of an element

0.5
1.0.0
NoI
$opacity-8

80% transparency of an element

0.8
1.0.0
NoI

Line HeightLine Height

Use these tokens for changing the line-height of elements. Usually, the line-height-text is already inherited by default. Only set it if you need to apply it again.

TokenExampleReleasedThemeableSupport
$line-height-heading

Unitless line-heights for reusability

The quick brown fox jumps over the lazy dog
1.25
1.0.0
NoGA
$line-height-reset

Remove extra leading. Unitless line-heights for reusability

The quick brown fox jumps over the lazy dog
1
1.0.0
NoGA
$line-height-text

Unitless line-heights for reusability

The quick brown fox jumps over the lazy dog
1.5
1.0.0
NoGA
$var-line-height-text

Variable unitless line-heights for reusability

The quick brown fox jumps over the lazy dog
1.5
1.0.0
NoI

SpacingSpacing

Spacing tokens are used for padding, margins, and position coordinates. Border-width tokens are used for the border property.

TokenExampleReleasedThemeableSupport
$spacing-large

Constant spacing token for size Large

1.5rem
SPACING_LARGE
24px
1.0.0
NoGA
$spacing-medium

Constant spacing token for size Medium

1rem
SPACING_MEDIUM
16px
1.0.0
NoGA
$spacing-none

Constant spacing token for 0

0
SPACING_NONE
1.0.0
NoI
$spacing-small

Constant spacing token for size Small

0.75rem
SPACING_SMALL
12px
1.0.0
NoGA
$spacing-x-large

Constant spacing token for size X Large

2rem
SPACING_X_LARGE
32px
1.0.0
NoGA
$spacing-x-small

Constant spacing token for size X small

0.5rem
SPACING_X_SMALL
8px
1.0.0
NoGA
$spacing-xx-large

Constant spacing token for size XX Large

3rem
SPACING_XX_LARGE
48px
1.0.0
NoGA
$spacing-xx-small

Constant spacing token for size XX small

0.25rem
SPACING_XX_SMALL
4px
1.0.0
NoGA
$spacing-xxx-small

Constant spacing token for size XXX small

0.125rem
SPACING_XXX_SMALL
2px
1.0.0
NoGA
$table-cell-spacing
0.25rem 0.5rem
SPACING_XX_SMALL SPACING_X_SMALL
4px 8px
1.0.0
NoI
$template-gutters
0.75rem
SPACING_SMALL
12px
1.0.0
NoI
$template-profile-gutters
8rem 0.75rem 0.75rem
8rem SPACING_SMALL SPACING_SMALL
128px 12px 12px
1.0.0
NoI
$var-spacing-horizontal-large

Variable horizontal spacing token for size Large

1.5rem
SPACING_LARGE
24px
2.7.0
NoGA
$var-spacing-horizontal-medium

Variable horizontal spacing token for size Medium

1rem
SPACING_MEDIUM
16px
2.7.0
NoGA
$var-spacing-horizontal-small

Variable horizontal spacing token for size Small

0.75rem
SPACING_SMALL
12px
2.7.0
NoGA
$var-spacing-horizontal-x-large

Variable horizontal spacing token for size X Large

2rem
SPACING_X_LARGE
32px
2.7.0
NoGA
$var-spacing-horizontal-x-small

Variable horizontal spacing token for size X Small

0.5rem
SPACING_X_SMALL
8px
2.7.0
NoGA
$var-spacing-horizontal-xx-large

Variable horizontal spacing token for size XX Large

3rem
SPACING_XX_LARGE
48px
2.7.0
NoGA
$var-spacing-horizontal-xx-small

Variable horizontal spacing token for size XX Small

0.25rem
SPACING_XX_SMALL
4px
2.7.0
NoGA
$var-spacing-horizontal-xxx-small

Variable horizontal spacing token for size XXX Small

0.125rem
SPACING_XXX_SMALL
2px
2.7.0
NoGA
$var-spacing-large

Variable spacing token for size Large

1.5rem
SPACING_LARGE
24px
2.7.0
NoGA
$var-spacing-medium

Variable spacing token for size Medium

1rem
SPACING_MEDIUM
16px
2.7.0
NoGA
$var-spacing-small

Variable spacing token for size Small

0.75rem
SPACING_SMALL
12px
2.7.0
NoGA
$var-spacing-vertical-large

Variable vertical spacing token for size Large

1.5rem
SPACING_LARGE
24px
2.7.0
NoGA
$var-spacing-vertical-medium

Variable vertical spacing token for size Medium

1rem
SPACING_MEDIUM
16px
2.7.0
NoGA
$var-spacing-vertical-small

Variable vertical spacing token for size Small

0.75rem
SPACING_SMALL
12px
2.7.0
NoGA
$var-spacing-vertical-x-large

Variable vertical spacing token for size X Large

2rem
SPACING_X_LARGE
32px
2.7.0
NoGA
$var-spacing-vertical-x-small

Variable vertical spacing token for size X Small

0.5rem
SPACING_X_SMALL
8px
2.7.0
NoGA
$var-spacing-vertical-xx-large

Variable vertical spacing token for size XX Large

3rem
SPACING_XX_LARGE
48px
2.7.0
NoGA
$var-spacing-vertical-xx-small

Variable vertical spacing token for size XX Small

0.25rem
SPACING_XX_SMALL
4px
2.7.0
NoGA
$var-spacing-vertical-xxx-small

Variable vertical spacing token for size XXX Small

0.125rem
SPACING_XXX_SMALL
2px
2.7.0
NoGA
$var-spacing-x-large

Variable spacing token for size X Large

2rem
SPACING_X_LARGE
32px
2.7.0
NoGA
$var-spacing-x-small

Variable spacing token for size X Small

0.5rem
SPACING_X_SMALL
8px
2.7.0
NoGA
$var-spacing-xx-large

Variable spacing token for size XX Large

3rem
SPACING_XX_LARGE
48px
2.7.0
NoGA
$var-spacing-xx-small

Variable spacing token for size XX Small

0.25rem
SPACING_XX_SMALL
4px
2.7.0
NoGA
$var-spacing-xxx-small

Variable spacing token for size XXX Small

0.125rem
SPACING_XXX_SMALL
2px
2.7.0
NoGA

RadiusRadius

Use radius tokens to change the border-radius size (rounded corners).

TokenExampleReleasedThemeableSupport
$border-radius-circle

Circle for global use, action icon bgd shape

50%
BORDER_RADIUS_CIRCLE
1.0.0
NoGA
$border-radius-large
0.5rem
BORDER_RADIUS_LARGE
8px
1.0.0
NoGA
$border-radius-medium

Icons in lists, record home icon, unbound input elements

0.25rem
BORDER_RADIUS_MEDIUM
4px
1.0.0
NoGA
$border-radius-small
0.125rem
BORDER_RADIUS_SMALL
2px
1.0.0
NoGA
$page-header-border-radius
0.25rem
BORDER_RADIUS_MEDIUM
4px
1.0.0
NoI
$table-border-radius
0 0 0.25rem 0.25rem
0 0 BORDER_RADIUS_MEDIUM BORDER_RADIUS_MEDIUM
0 0 4px 4px
1.0.0
NoI

SizingSizing

Use sizing tokens to set elements to our sizing scale. Size tokens can be used for the width and height properties. Square tokens are used for both width and height.

TokenExampleReleasedThemeableSupport
$height-header

Header for desktop.

3.125rem
50px
1.0.0
NoGA
$size-large

Generic sizing token scale for UI components.

25rem
SIZE_LARGE
400px
1.0.0
NoGA
$size-medium

Generic sizing token scale for UI components.

20rem
SIZE_MEDIUM
320px
1.0.0
NoGA
$size-small

Generic sizing token scale for UI components.

15rem
SIZE_SMALL
240px
1.0.0
NoGA
$size-x-large

Generic sizing token scale for UI components.

40rem
SIZE_X_LARGE
640px
1.0.0
NoGA
$size-x-small

Generic sizing token scale for UI components.

12rem
SIZE_X_SMALL
192px
1.0.0
NoGA
$size-xx-large

Generic sizing token scale for UI components.

60rem
SIZE_XX_LARGE
960px
1.0.0
NoGA
$size-xx-small

Generic sizing token scale for UI components.

6rem
SIZE_XX_SMALL
96px
1.0.0
NoGA
$size-xxx-small

Generic sizing token scale for UI components.

3rem
SIZE_XXX_SMALL
48px
1.0.0
NoI
$square-icon-large-boundary

Anchor: Outer colored tile

3rem
48px
1.0.0
NoGA
$square-icon-large-boundary-alt

Anchor: avatar

5rem
80px
1.0.0
NoGA
$square-icon-large-content

Anchor: Icon content (white shape)

2rem
SIZE_SQUARE_XX_LARGE
32px
1.0.0
NoGA
$square-icon-medium

Medium tap target size

2rem
32px
1.0.0
NoI
$square-icon-medium-boundary

Stage left & actions: Outer colored tile

2rem
SIZE_SQUARE_XX_LARGE
32px
1.0.0
NoGA
$square-icon-medium-boundary-alt

Icon button boundary.

2.25rem
SIZE_SQUARE_XXX_LARGE
36px
1.0.0
NoGA
$square-icon-medium-content

Stage left & actions: Icon content (white shape)

1rem
SIZE_SQUARE_MEDIUM
16px
1.0.0
NoGA
$square-icon-medium-content-alt

Alternate medium tap target size

0.875rem
SIZE_SQUARE_SMALL
14px
1.0.0
NoI
$square-icon-small-boundary

Search Results: Outer colored tile

1.5rem
SIZE_SQUARE_X_LARGE
24px
1.0.0
NoGA
$square-icon-small-content

Search Results: Icon content (white shape)

0.75rem
SIZE_SQUARE_XX_SMALL
12px
1.0.0
NoGA
$square-icon-utility-large

Large utility icon without border.

1.5rem
SIZE_SQUARE_X_LARGE
24px
1.0.0
NoGA
$square-icon-utility-medium

Medium utility icon without border.

1.25rem
SIZE_SQUARE_LARGE
20px
1.0.0
NoGA
$square-icon-utility-small

Small utility icon without border.

1rem
SIZE_SQUARE_MEDIUM
16px
1.0.0
NoGA
$square-icon-x-small-boundary

Very small icon button boundary.

1.25rem
SIZE_SQUARE_LARGE
20px
1.0.0
NoGA
$square-icon-x-small-content

Very small icons in icon buttons.

0.5rem
SIZE_SQUARE_XXX_SMALL
8px
1.0.0
NoGA
$square-icon-xx-small-boundary

Very very small icon button boundary.

1rem
SIZE_SQUARE_MEDIUM
16px
1.0.0
NoI
$var-square-icon-medium-boundary

Variable medium boundary for square icons

2rem
SIZE_SQUARE_XX_LARGE
32px
1.0.0
NoI

ShadowShadow

Use shadow tokens to set a box shadow.

TokenExampleReleasedThemeableSupport
$card-shadow

Hard dropshadow found on outer cards

0 2px 2px 0 rgba(0, 0, 0, 0.10)
0 2px 2px 0 BLACK_TRANSPARENT_10
1.0.0
NoI
$page-header-shadow

Hard dropshadow on page header

0 2px 2px 0 rgba(0, 0, 0, 0.10)
0 2px 2px 0 BLACK_TRANSPARENT_10
1.0.0
NoI
$shadow-active

Shadow for active states on interactive elements.

0 0 2px #0176d3
OFFSET_NONE OFFSET_NONE OFFSET_X_SMALLpx BRAND_ACCESSIBLE
1.0.0
NoI
$shadow-drag

Shadow for drag-n-drop.

0 2px 4px 0 rgba(0, 0, 0, 0.40)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx OFFSET_NONE BLACK_TRANSPARENT_40
1.0.0
NoGA
$shadow-drop-down

Shadow for drop down.

0 2px 3px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_16
1.0.0
NoGA

TimeTime

Use timing tokens for animation durations.

TokenExampleReleasedThemeableSupport
$duration-immediately

0.05 seconds, 3 frames

0.05s
DURATION_IMMEDIATELY
1.0.0
NoGA
$duration-instantly

0 seconds, 0 frames

0s
DURATION_INSTANTLY
1.0.0
NoGA
$duration-paused

3.2 seconds, 192 frames

3.2s
DURATION_PAUSED
1.0.0
NoGA
$duration-promptly

0.2 seconds, 12 frames

0.2s
DURATION_PROMPTLY
1.0.0
NoGA
$duration-quickly

0.1 seconds, 6 frames

0.1s
DURATION_QUICKLY
1.0.0
NoGA
$duration-slowly

0.4 seconds, 24 frames

0.4s
DURATION_SLOWLY
1.0.0
NoGA

TouchTouch

Tokens that are specific to touch enabled devices

TokenExampleReleasedThemeableSupport
$height-tappable

Tap target size for elements that rely on height or line-height

2.75rem
44px
2.10.0
NoI
$height-tappable-small

Small tap target size for elements that rely on height or line-height

2rem
32px
2.10.0
NoI
$square-tappable

Tap target size for elements that rely on width and height dimensions

2.75rem
44px
1.0.0
NoGA
$square-tappable-small

Small tap target size for elements that rely on width and height dimensions

2rem
32px
2.10.0
NoI
$square-tappable-x-small

X-small tap target size for elements that rely on width and height dimensions

1.5rem
24px
2.10.0
NoI
$square-tappable-xx-small

Xx-small tap target size for elements that rely on width and height dimensions

1.25rem
20px
2.10.0
NoI

Media QueryMedia Query

Use media query tokens to set media query width ranges.

TokenExampleReleasedThemeableSupport
$mq-large

Large form factor: devices larger than tablet

only screen and (min-width: 64.0625em)
1.0.0
NoGA
$mq-medium

Medium form factor: devices larger than phone

only screen and (min-width: 48em)
1.0.0
NoGA
$mq-medium-landscape

Medium form factor, landscape: devices larger than phone, in landscape orientation

only screen and (min-width: 48em) and (min-aspect-ratio: 4/3)
1.0.0
NoGA
$mq-small

Small form factor: devices smaller than tablet

only screen and (max-width: 47.9375em)
1.0.0
NoGA

Z-indexZ-index

Use z-index tokens to set the z order layering of elements.

TokenExampleReleasedThemeableSupport
$z-index-deepdive

Deep dive

-99999
1.0.0
NoI
$z-index-default

Default

1
1.0.0
NoI
$z-index-dialog

Dialog

6000
1.0.0
NoI
$z-index-docked

Docked element

4
1.0.0
NoI
$z-index-dropdown

Dropdown

7000
1.0.0
NoI
$z-index-modal

Modal

9000
1.0.0
NoI
$z-index-overlay

Overlay

8000
1.0.0
NoI
$z-index-popup

Popup

5000
1.0.0
NoI
$z-index-reminder

Notifications under modals

8500
1.0.0
NoI
$z-index-spinner

Spinner

9050
1.0.0
NoI
$z-index-sticky

Stickied element

100
1.0.0
NoI
$z-index-toast

Toasts

10000
1.0.0
NoI