Design Tokens - Lightning Design System

Find Token

Format:

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.

Token	Example	Released	Themeable	Support
`$brand-accessible` Dark variant of BRAND that is accessible with white	rgb(1, 118, 211) #0176d3 BRAND_ACCESSIBLE	2.6.0	Yes	GA
`$brand-accessible-active` Active / Hover state of BRAND_A11Y	rgb(1, 68, 134) #014486 BRAND_ACCESSIBLE_ACTIVE	2.6.0	Yes	GA
`$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	Yes	GA
`$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	Yes	I
`$brand-background-primary` Primary page background color	rgb(238, 244, 255) #eef4ff BRAND_BACKGROUND_PRIMARY	2.6.0	Yes	GA
`$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	Yes	I
`$brand-contrast` Variant of BRAND that is accessible with BRAND	rgb(26, 27, 30) #1a1b1e BRAND_CONTRAST	2.6.0	Yes	GA
`$brand-contrast-active` Active / Hover state of BRAND_CONTRAST	rgb(13, 14, 18) #0d0e12 BRAND_CONTRAST_ACTIVE	2.6.0	Yes	GA
`$brand-dark` Dark variant of BRAND that is accessible with light colors	rgb(1, 118, 211) #0176d3 BRAND_DARK	2.6.0	Yes	GA
`$brand-dark-active` Active / Hover state of BRAND_DARK	rgb(37, 48, 69) #253045 BRAND_DARK_ACTIVE	2.6.0	Yes	GA
`$brand-disabled` Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED	2.6.0	Yes	GA
`$brand-header` Background color a branded app header	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.6.0	Yes	I
`$brand-header-contrast` Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(94, 94, 94) #5e5e5e	2.6.0	Yes	I
`$brand-header-contrast-active` Active / Hover state of BRAND_HEADER_CONTRAST	rgb(80, 80, 80) #505050	2.6.0	Yes	I
`$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	Yes	I
`$brand-header-contrast-cool-active` Active / Hover state of BRAND_HEADER_CONTRAST_COOL	rgb(1, 68, 134) #014486 PALETTE_BLUE_30	2.6.0	Yes	I
`$brand-header-contrast-inverse` Variant of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(255, 255, 255) #ffffff	2.6.0	Yes	I
`$brand-header-contrast-inverse-active` Active / Hover state of BRAND_HEADER_CONTRAST	rgb(238, 238, 238) #eeeeee	2.6.0	Yes	I
`$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	Yes	I
`$brand-header-contrast-warm-active` Active / Hover state of BRAND_HEADER_CONTRAST_WARM	rgb(186, 5, 23) #ba0517 PALETTE_RED_40	2.6.0	Yes	I
`$brand-header-contrast-weak` Weak contrast ratio, useful for iconography	rgb(145, 145, 145) #919191	2.6.0	Yes	I
`$brand-header-contrast-weak-active` Active / Hover state of BRAND_HEADER_CONTRAST_WEAK	rgb(129, 129, 129) #818181	2.6.0	Yes	I
`$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	Yes	I
`$brand-header-icon` Icons of BRAND_HEADER that is accessible with BRAND_HEADER	rgb(145, 145, 145) #919191	2.6.0	Yes	I
`$brand-header-icon-active` Active / Hover state of BRAND_HEADER_ICON	rgb(129, 129, 129) #818181	2.6.0	Yes	I
`$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	Yes	I
`$brand-light` Light variant of BRAND that is accessible with dark colors	rgb(244, 246, 254) #f4f6fe BRAND_LIGHT	2.6.0	Yes	GA
`$brand-light-active` Active / Hover state of BRAND_LIGHT	rgb(227, 229, 237) #e3e5ed BRAND_LIGHT_ACTIVE	2.6.0	Yes	GA
`$brand-primary` Primary brand color	rgb(27, 150, 255) #1b96ff BRAND_PRIMARY	2.6.0	Yes	GA
`$brand-primary-active` Active / Hover state of BRAND_PRIMARY	rgb(1, 118, 211) #0176d3 BRAND_PRIMARY_ACTIVE	2.6.0	Yes	GA
`$brand-primary-transparent` Transparent value of BRAND_PRIMARY	rgba(21, 137, 238, 0.1) rgba(21,137,238,0.1)	2.6.0	Yes	GA
`$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	Yes	I
`$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	Yes	I
`$brand-text-link` Primary text link brand color	rgb(1, 118, 211) #0176d3 BRAND_TEXT_LINK	2.6.0	Yes	GA
`$brand-text-link-active` Active / Hover state of BRAND_TEXT_LINK	rgb(1, 68, 134) #014486 BRAND_TEXT_LINK_ACTIVE	2.6.0	Yes	GA
`$color-gray-1` Gray Color 1	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.5.0	No	I
`$color-gray-2` Gray Color 2	rgb(250, 250, 249) #fafaf9 PALETTE_GRAY_2	2.5.0	No	I
`$color-gray-3` Gray Color 3	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	2.5.0	No	I
`$color-gray-4` Gray Color 4	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	2.5.0	No	I
`$color-gray-5` Gray Color 5	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	2.5.0	No	I
`$color-gray-6` Gray Color 6	rgb(201, 199, 197) #c9c7c5 PALETTE_GRAY_6	2.5.0	No	I
`$color-gray-7` Gray Color 7	rgb(176, 173, 171) #b0adab PALETTE_GRAY_7	2.5.0	No	I
`$color-gray-8` Gray Color 8	rgb(150, 148, 146) #969492 PALETTE_GRAY_8	2.5.0	No	I
`$color-gray-9` Gray Color 9	rgb(112, 110, 107) #706e6b PALETTE_GRAY_9	2.5.0	No	I
`$color-gray-10` Gray Color 10	rgb(81, 79, 77) #514f4d PALETTE_GRAY_10	2.5.0	No	I
`$color-gray-11` Gray Color 11	rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11	2.5.0	No	I
`$color-gray-12` Gray Color 12	rgb(43, 40, 38) #2b2826 PALETTE_GRAY_12	2.5.0	No	I
`$color-gray-13` Gray Color 13	rgb(8, 7, 7) #080707 PALETTE_GRAY_13	2.5.0	No	I
`$palette-blue-10` Blue 10	rgb(0, 22, 57) #001639 PALETTE_BLUE_10	2.14.0	No	I
`$palette-blue-15` Blue 15	rgb(3, 35, 77) #03234d PALETTE_BLUE_15	2.14.0	No	I
`$palette-blue-20` Blue 20	rgb(3, 45, 96) #032d60 PALETTE_BLUE_20	2.14.0	No	I
`$palette-blue-30` Blue 30	rgb(1, 68, 134) #014486 PALETTE_BLUE_30	2.14.0	No	I
`$palette-blue-40` Blue 40	rgb(11, 92, 171) #0b5cab PALETTE_BLUE_40	2.14.0	No	I
`$palette-blue-50` Blue 50	rgb(1, 118, 211) #0176d3 PALETTE_BLUE_50	2.14.0	No	I
`$palette-blue-60` Blue 60	rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60	2.14.0	No	I
`$palette-blue-65` Blue 65	rgb(87, 163, 253) #57a3fd PALETTE_BLUE_65	2.14.0	No	I
`$palette-blue-70` Blue 70	rgb(120, 176, 253) #78b0fd PALETTE_BLUE_70	2.14.0	No	I
`$palette-blue-80` Blue 80	rgb(170, 203, 255) #aacbff PALETTE_BLUE_80	2.14.0	No	I
`$palette-blue-90` Blue 90	rgb(216, 230, 254) #d8e6fe PALETTE_BLUE_90	2.14.0	No	I
`$palette-blue-95` Blue 95	rgb(238, 244, 255) #eef4ff PALETTE_BLUE_95	2.14.0	No	I
`$palette-cloud-blue-10` Cloud Blue 10	rgb(0, 26, 40) #001a28 PALETTE_CLOUD_BLUE_10	2.14.0	No	I
`$palette-cloud-blue-15` Cloud Blue 15	rgb(10, 38, 54) #0a2636 PALETTE_CLOUD_BLUE_15	2.14.0	No	I
`$palette-cloud-blue-20` Cloud Blue 20	rgb(2, 50, 72) #023248 PALETTE_CLOUD_BLUE_20	2.14.0	No	I
`$palette-cloud-blue-30` Cloud Blue 30	rgb(8, 73, 104) #084968 PALETTE_CLOUD_BLUE_30	2.14.0	No	I
`$palette-cloud-blue-40` Cloud Blue 40	rgb(5, 98, 138) #05628a PALETTE_CLOUD_BLUE_40	2.14.0	No	I
`$palette-cloud-blue-50` Cloud Blue 50	rgb(16, 124, 173) #107cad PALETTE_CLOUD_BLUE_50	2.14.0	No	I
`$palette-cloud-blue-60` Cloud Blue 60	rgb(13, 157, 218) #0d9dda PALETTE_CLOUD_BLUE_60	2.14.0	No	I
`$palette-cloud-blue-65` Cloud Blue 65	rgb(8, 171, 237) #08abed PALETTE_CLOUD_BLUE_65	2.14.0	No	I
`$palette-cloud-blue-70` Cloud Blue 70	rgb(26, 185, 255) #1ab9ff PALETTE_CLOUD_BLUE_70	2.14.0	No	I
`$palette-cloud-blue-80` Cloud Blue 80	rgb(144, 208, 254) #90d0fe PALETTE_CLOUD_BLUE_80	2.14.0	No	I
`$palette-cloud-blue-90` Cloud Blue 90	rgb(207, 233, 254) #cfe9fe PALETTE_CLOUD_BLUE_90	2.14.0	No	I
`$palette-cloud-blue-95` Cloud Blue 95	rgb(234, 245, 254) #eaf5fe PALETTE_CLOUD_BLUE_95	2.14.0	No	I
`$palette-green-10` Green 10	rgb(7, 27, 18) #071b12 PALETTE_GREEN_10	2.14.0	No	I
`$palette-green-15` Green 15	rgb(12, 41, 18) #0c2912 PALETTE_GREEN_15	2.14.0	No	I
`$palette-green-20` Green 20	rgb(14, 53, 34) #0e3522 PALETTE_GREEN_20	2.14.0	No	I
`$palette-green-30` Green 30	rgb(25, 78, 49) #194e31 PALETTE_GREEN_30	2.14.0	No	I
`$palette-green-40` Green 40	rgb(34, 104, 62) #22683e PALETTE_GREEN_40	2.14.0	No	I
`$palette-green-50` Green 50	rgb(46, 132, 74) #2e844a PALETTE_GREEN_50	2.14.0	No	I
`$palette-green-60` Green 60	rgb(59, 167, 85) #3ba755 PALETTE_GREEN_60	2.14.0	No	I
`$palette-green-65` Green 65	rgb(65, 182, 88) #41b658 PALETTE_GREEN_65	2.14.0	No	I
`$palette-green-70` Green 70	rgb(69, 198, 90) #45c65a PALETTE_GREEN_70	2.14.0	No	I
`$palette-green-80` Green 80	rgb(145, 219, 139) #91db8b PALETTE_GREEN_80	2.14.0	No	I
`$palette-green-90` Green 90	rgb(205, 239, 196) #cdefc4 PALETTE_GREEN_90	2.14.0	No	I
`$palette-green-95` Green 95	rgb(235, 247, 230) #ebf7e6 PALETTE_GREEN_95	2.14.0	No	I
`$palette-hot-orange-10` Hot Orange 10	rgb(40, 18, 2) #281202 PALETTE_HOT_ORANGE_10	2.14.0	No	I
`$palette-hot-orange-15` Hot Orange 15	rgb(66, 22, 4) #421604 PALETTE_HOT_ORANGE_15	2.14.0	No	I
`$palette-hot-orange-20` Hot Orange 20	rgb(84, 29, 1) #541d01 PALETTE_HOT_ORANGE_20	2.14.0	No	I
`$palette-hot-orange-30` Hot Orange 30	rgb(126, 38, 0) #7e2600 PALETTE_HOT_ORANGE_30	2.14.0	No	I
`$palette-hot-orange-40` Hot Orange 40	rgb(170, 48, 1) #aa3001 PALETTE_HOT_ORANGE_40	2.14.0	No	I
`$palette-hot-orange-50` Hot Orange 50	rgb(216, 58, 0) #d83a00 PALETTE_HOT_ORANGE_50	2.14.0	No	I
`$palette-hot-orange-60` Hot Orange 60	rgb(255, 93, 45) #ff5d2d PALETTE_HOT_ORANGE_60	2.14.0	No	I
`$palette-hot-orange-65` Hot Orange 65	rgb(255, 120, 79) #ff784f PALETTE_HOT_ORANGE_65	2.14.0	No	I
`$palette-hot-orange-70` Hot Orange 70	rgb(255, 144, 110) #ff906e PALETTE_HOT_ORANGE_70	2.14.0	No	I
`$palette-hot-orange-80` Hot Orange 80	rgb(254, 185, 165) #feb9a5 PALETTE_HOT_ORANGE_80	2.14.0	No	I
`$palette-hot-orange-90` Hot Orange 90	rgb(255, 222, 213) #ffded5 PALETTE_HOT_ORANGE_90	2.14.0	No	I
`$palette-hot-orange-95` Hot Orange 95	rgb(254, 241, 237) #fef1ed PALETTE_HOT_ORANGE_95	2.14.0	No	I
`$palette-indigo-10` Indigo 10	rgb(32, 6, 71) #200647 PALETTE_INDIGO_10	2.14.0	No	I
`$palette-indigo-15` Indigo 15	rgb(31, 9, 116) #1f0974 PALETTE_INDIGO_15	2.14.0	No	I
`$palette-indigo-20` Indigo 20	rgb(38, 15, 143) #260f8f PALETTE_INDIGO_20	2.14.0	No	I
`$palette-indigo-30` Indigo 30	rgb(47, 44, 183) #2f2cb7 PALETTE_INDIGO_30	2.14.0	No	I
`$palette-indigo-40` Indigo 40	rgb(58, 73, 218) #3a49da PALETTE_INDIGO_40	2.14.0	No	I
`$palette-indigo-50` Indigo 50	rgb(88, 103, 232) #5867e8 PALETTE_INDIGO_50	2.14.0	No	I
`$palette-indigo-60` Indigo 60	rgb(127, 140, 237) #7f8ced PALETTE_INDIGO_60	2.14.0	No	I
`$palette-indigo-65` Indigo 65	rgb(142, 155, 239) #8e9bef PALETTE_INDIGO_65	2.14.0	No	I
`$palette-indigo-70` Indigo 70	rgb(158, 169, 241) #9ea9f1 PALETTE_INDIGO_70	2.14.0	No	I
`$palette-indigo-80` Indigo 80	rgb(190, 199, 246) #bec7f6 PALETTE_INDIGO_80	2.14.0	No	I
`$palette-indigo-90` Indigo 90	rgb(224, 229, 248) #e0e5f8 PALETTE_INDIGO_90	2.14.0	No	I
`$palette-indigo-95` Indigo 95	rgb(241, 243, 251) #f1f3fb PALETTE_INDIGO_95	2.14.0	No	I
`$palette-orange-10` Orange 10	rgb(32, 22, 0) #201600 PALETTE_ORANGE_10	2.14.0	No	I
`$palette-orange-15` Orange 15	rgb(55, 30, 3) #371e03 PALETTE_ORANGE_15	2.14.0	No	I
`$palette-orange-20` Orange 20	rgb(62, 43, 2) #3e2b02 PALETTE_ORANGE_20	2.14.0	No	I
`$palette-orange-30` Orange 30	rgb(95, 62, 2) #5f3e02 PALETTE_ORANGE_30	2.14.0	No	I
`$palette-orange-40` Orange 40	rgb(130, 81, 1) #825101 PALETTE_ORANGE_40	2.14.0	No	I
`$palette-orange-50` Orange 50	rgb(169, 100, 4) #a96404 PALETTE_ORANGE_50	2.14.0	No	I
`$palette-orange-60` Orange 60	rgb(221, 122, 1) #dd7a01 PALETTE_ORANGE_60	2.14.0	No	I
`$palette-orange-65` Orange 65	rgb(243, 131, 3) #f38303 PALETTE_ORANGE_65	2.14.0	No	I
`$palette-orange-70` Orange 70	rgb(254, 147, 57) #fe9339 PALETTE_ORANGE_70	2.14.0	No	I
`$palette-orange-80` Orange 80	rgb(255, 186, 144) #ffba90 PALETTE_ORANGE_80	2.14.0	No	I
`$palette-orange-90` Orange 90	rgb(254, 223, 208) #fedfd0 PALETTE_ORANGE_90	2.14.0	No	I
`$palette-orange-95` Orange 95	rgb(255, 241, 234) #fff1ea PALETTE_ORANGE_95	2.14.0	No	I
`$palette-pink-10` Pink 10	rgb(55, 1, 20) #370114 PALETTE_PINK_10	2.14.0	No	I
`$palette-pink-15` Pink 15	rgb(75, 6, 32) #4b0620 PALETTE_PINK_15	2.14.0	No	I
`$palette-pink-20` Pink 20	rgb(97, 2, 42) #61022a PALETTE_PINK_20	2.14.0	No	I
`$palette-pink-30` Pink 30	rgb(138, 3, 62) #8a033e PALETTE_PINK_30	2.14.0	No	I
`$palette-pink-40` Pink 40	rgb(182, 5, 84) #b60554 PALETTE_PINK_40	2.14.0	No	I
`$palette-pink-50` Pink 50	rgb(227, 6, 106) #e3066a PALETTE_PINK_50	2.14.0	No	I
`$palette-pink-60` Pink 60	rgb(255, 83, 138) #ff538a PALETTE_PINK_60	2.14.0	No	I
`$palette-pink-65` Pink 65	rgb(254, 114, 152) #fe7298 PALETTE_PINK_65	2.14.0	No	I
`$palette-pink-70` Pink 70	rgb(254, 138, 167) #fe8aa7 PALETTE_PINK_70	2.14.0	No	I
`$palette-pink-80` Pink 80	rgb(253, 182, 197) #fdb6c5 PALETTE_PINK_80	2.14.0	No	I
`$palette-pink-90` Pink 90	rgb(253, 221, 227) #fddde3 PALETTE_PINK_90	2.14.0	No	I
`$palette-pink-95` Pink 95	rgb(254, 240, 243) #fef0f3 PALETTE_PINK_95	2.14.0	No	I
`$palette-purple-10` Purple 10	rgb(36, 6, 67) #240643 PALETTE_PURPLE_10	2.14.0	No	I
`$palette-purple-15` Purple 15	rgb(48, 11, 96) #300b60 PALETTE_PURPLE_15	2.14.0	No	I
`$palette-purple-20` Purple 20	rgb(64, 16, 117) #401075 PALETTE_PURPLE_20	2.14.0	No	I
`$palette-purple-30` Purple 30	rgb(90, 27, 169) #5a1ba9 PALETTE_PURPLE_30	2.14.0	No	I
`$palette-purple-40` Purple 40	rgb(117, 38, 227) #7526e3 PALETTE_PURPLE_40	2.14.0	No	I
`$palette-purple-50` Purple 50	rgb(144, 80, 233) #9050e9 PALETTE_PURPLE_50	2.14.0	No	I
`$palette-purple-60` Purple 60	rgb(173, 123, 238) #ad7bee PALETTE_PURPLE_60	2.14.0	No	I
`$palette-purple-65` Purple 65	rgb(183, 141, 239) #b78def PALETTE_PURPLE_65	2.14.0	No	I
`$palette-purple-70` Purple 70	rgb(194, 158, 241) #c29ef1 PALETTE_PURPLE_70	2.14.0	No	I
`$palette-purple-80` Purple 80	rgb(215, 143, 245) #d78ff5 PALETTE_PURPLE_80	2.14.0	No	I
`$palette-purple-90` Purple 90	rgb(236, 225, 249) #ece1f9 PALETTE_PURPLE_90	2.14.0	No	I
`$palette-purple-95` Purple 95	rgb(246, 242, 251) #f6f2fb PALETTE_PURPLE_95	2.14.0	No	I
`$palette-red-10` Red 10	rgb(48, 12, 1) #300c01 PALETTE_RED_10	2.14.0	No	I
`$palette-red-15` Red 15	rgb(74, 12, 4) #4a0c04 PALETTE_RED_15	2.14.0	No	I
`$palette-red-20` Red 20	rgb(100, 1, 3) #640103 PALETTE_RED_20	2.14.0	No	I
`$palette-red-30` Red 30	rgb(142, 3, 15) #8e030f PALETTE_RED_30	2.14.0	No	I
`$palette-red-40` Red 40	rgb(186, 5, 23) #ba0517 PALETTE_RED_40	2.14.0	No	I
`$palette-red-50` Red 50	rgb(234, 0, 30) #ea001e PALETTE_RED_50	2.14.0	No	I
`$palette-red-60` Red 60	rgb(254, 92, 76) #fe5c4c PALETTE_RED_60	2.14.0	No	I
`$palette-red-65` Red 65	rgb(254, 119, 101) #fe7765 PALETTE_RED_65	2.14.0	No	I
`$palette-red-70` Red 70	rgb(254, 143, 125) #fe8f7d PALETTE_RED_70	2.14.0	No	I
`$palette-red-80` Red 80	rgb(254, 184, 171) #feb8ab PALETTE_RED_80	2.14.0	No	I
`$palette-red-90` Red 90	rgb(254, 222, 216) #feded8 PALETTE_RED_90	2.14.0	No	I
`$palette-red-95` Red 95	rgb(254, 241, 238) #fef1ee PALETTE_RED_95	2.14.0	No	I
`$palette-teal-10` Teal 10	rgb(7, 27, 18) #071b12 PALETTE_TEAL_10	2.14.0	No	I
`$palette-teal-15` Teal 15	rgb(7, 40, 37) #072825 PALETTE_TEAL_15	2.14.0	No	I
`$palette-teal-20` Teal 20	rgb(2, 52, 52) #023434 PALETTE_TEAL_20	2.14.0	No	I
`$palette-teal-30` Teal 30	rgb(2, 77, 76) #024d4c PALETTE_TEAL_30	2.14.0	No	I
`$palette-teal-40` Teal 40	rgb(5, 103, 100) #056764 PALETTE_TEAL_40	2.14.0	No	I
`$palette-teal-50` Teal 50	rgb(11, 130, 124) #0b827c PALETTE_TEAL_50	2.14.0	No	I
`$palette-teal-60` Teal 60	rgb(6, 165, 154) #06a59a PALETTE_TEAL_60	2.14.0	No	I
`$palette-teal-65` Teal 65	rgb(3, 180, 167) #03b4a7 PALETTE_TEAL_65	2.14.0	No	I
`$palette-teal-70` Teal 70	rgb(1, 195, 179) #01c3b3 PALETTE_TEAL_70	2.14.0	No	I
`$palette-teal-80` Teal 80	rgb(4, 225, 203) #04e1cb PALETTE_TEAL_80	2.14.0	No	I
`$palette-teal-90` Teal 90	rgb(172, 243, 228) #acf3e4 PALETTE_TEAL_90	2.14.0	No	I
`$palette-teal-95` Teal 95	rgb(222, 249, 243) #def9f3 PALETTE_TEAL_95	2.14.0	No	I
`$palette-violet-10` Violet 10	rgb(46, 0, 57) #2e0039 PALETTE_VIOLET_10	2.14.0	No	I
`$palette-violet-15` Violet 15	rgb(61, 1, 87) #3d0157 PALETTE_VIOLET_15	2.14.0	No	I
`$palette-violet-20` Violet 20	rgb(82, 0, 102) #520066 PALETTE_VIOLET_20	2.14.0	No	I
`$palette-violet-30` Violet 30	rgb(115, 3, 148) #730394 PALETTE_VIOLET_30	2.14.0	No	I
`$palette-violet-40` Violet 40	rgb(150, 2, 199) #9602c7 PALETTE_VIOLET_40	2.14.0	No	I
`$palette-violet-50` Violet 50	rgb(186, 1, 255) #ba01ff PALETTE_VIOLET_50	2.14.0	No	I
`$palette-violet-60` Violet 60	rgb(203, 101, 255) #cb65ff PALETTE_VIOLET_60	2.14.0	No	I
`$palette-violet-65` Violet 65	rgb(209, 125, 254) #d17dfe PALETTE_VIOLET_65	2.14.0	No	I
`$palette-violet-70` Violet 70	rgb(216, 146, 254) #d892fe PALETTE_VIOLET_70	2.14.0	No	I
`$palette-violet-80` Violet 80	rgb(229, 185, 254) #e5b9fe PALETTE_VIOLET_80	2.14.0	No	I
`$palette-violet-90` Violet 90	rgb(242, 222, 254) #f2defe PALETTE_VIOLET_90	2.14.0	No	I
`$palette-violet-95` Violet 95	rgb(249, 240, 255) #f9f0ff PALETTE_VIOLET_95	2.14.0	No	I
`$palette-yellow-10` Yellow 10	rgb(40, 18, 2) #281202 PALETTE_YELLOW_10	2.14.0	No	I
`$palette-yellow-15` Yellow 15	rgb(46, 34, 4) #2e2204 PALETTE_YELLOW_15	2.14.0	No	I
`$palette-yellow-20` Yellow 20	rgb(79, 33, 0) #4f2100 PALETTE_YELLOW_20	2.14.0	No	I
`$palette-yellow-30` Yellow 30	rgb(111, 52, 0) #6f3400 PALETTE_YELLOW_30	2.14.0	No	I
`$palette-yellow-40` Yellow 40	rgb(140, 75, 2) #8c4b02 PALETTE_YELLOW_40	2.14.0	No	I
`$palette-yellow-50` Yellow 50	rgb(168, 100, 3) #a86403 PALETTE_YELLOW_50	2.14.0	No	I
`$palette-yellow-60` Yellow 60	rgb(202, 133, 1) #ca8501 PALETTE_YELLOW_60	2.14.0	No	I
`$palette-yellow-65` Yellow 65	rgb(215, 147, 4) #d79304 PALETTE_YELLOW_65	2.14.0	No	I
`$palette-yellow-70` Yellow 70	rgb(228, 162, 1) #e4a201 PALETTE_YELLOW_70	2.14.0	No	I
`$palette-yellow-80` Yellow 80	rgb(252, 192, 3) #fcc003 PALETTE_YELLOW_80	2.14.0	No	I
`$palette-yellow-90` Yellow 90	rgb(249, 227, 182) #f9e3b6 PALETTE_YELLOW_90	2.14.0	No	I
`$palette-yellow-95` Yellow 95	rgb(251, 243, 224) #fbf3e0 PALETTE_YELLOW_95	2.14.0	No	I

Background ColorBackground Color

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

Token	Example	Released	Themeable	Support
`$color-background` Default background color for the whole app.	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	GA
`$color-background-alt` Second default background color for the app.	rgb(255, 255, 255) #ffffff WHITE	1.0.0	No	GA
`$color-background-alt-inverse` Alternative background color for dark portions of the app.	rgb(3, 45, 96) #032d60 PALETTE_BLUE_20	1.0.0	No	GA
`$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	No	I
`$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	No	I
`$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	No	I
`$color-background-dark` Dark variant of COLOR_BACKGROUND.	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	2.8.0	No	I
`$color-background-destructive` Color for UI elements related to destructive actions.	rgb(186, 5, 23) #ba0517 PALETTE_RED_40	1.0.0	No	I
`$color-background-destructive-active` Active color for UI elements related to destructive actions.	rgb(142, 3, 15) #8e030f PALETTE_RED_30	1.0.0	No	I
`$color-background-destructive-hover` Hover color for UI elements related to destructive actions.	rgb(186, 5, 23) #ba0517 PALETTE_RED_40	1.0.0	No	I
`$color-background-error` Color for UI elements related to errors.	rgb(254, 92, 76) #fe5c4c PALETTE_RED_60	1.0.0	No	I
`$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	No	I
`$color-background-highlight` Background color for highlighting UI elements.	rgb(250, 255, 189) #faffbd LEMON_CHIFFON	1.0.0	No	GA
`$color-background-highlight-search` Background color for highlighting text in search results.	rgb(255, 240, 63) #fff03f GORSE	1.0.0	No	I
`$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	No	I
`$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	No	I
`$color-background-input-checkbox-disabled` Disabled checkboxes	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$color-background-input-disabled` Disabled input	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	1.0.0	No	I
`$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	No	GA
`$color-background-inverse-light` Light variant of COLOR_BACKGROUND_INVERSE.	rgb(3, 45, 96) #032d60 PALETTE_BLUE_20	2.8.0	No	I
`$color-background-light` Light variant of COLOR_BACKGROUND.	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	2.8.0	No	I
`$color-background-notification-new` Background color for a new notification list item.	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$color-background-offline` Color for UI elements related to the offline state.	rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11	1.0.0	No	I
`$color-background-post` Background color of comment posts in the feed.	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$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	No	I
`$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	No	I
`$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	No	GA
`$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	No	I
`$color-background-scrollbar` The background color of an internal scrollbar.	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	1.0.0	No	I
`$color-background-scrollbar-track` The background color of an internal scrollbar track.	rgb(201, 199, 197) #c9c7c5 PALETTE_GRAY_6	1.0.0	No	I
`$color-background-selection` Background color for text selected with a mouse.	rgb(216, 230, 254) #d8e6fe PALETTE_BLUE_90	1.0.0	No	I
`$color-background-spinner-dot` Color of the spinner dot.	rgb(176, 173, 171) #b0adab PALETTE_GRAY_7	1.0.0	No	I
`$color-background-stencil` Used as background for loading stencils on white background.	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$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	No	I
`$color-background-success` Color for UI elements that have to do with success.	rgb(69, 198, 90) #45c65a PALETTE_GREEN_70	1.0.0	No	I
`$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	No	I
`$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	No	I
`$color-background-toast` Background color for toast messaging.	rgb(112, 110, 107) #706e6b PALETTE_GRAY_9	1.0.0	No	I
`$color-background-toggle` Toggle background color.	rgb(176, 173, 171) #b0adab PALETTE_GRAY_7	1.0.0	No	I
`$color-background-toggle-disabled` Disabled toggle background color.	rgb(176, 173, 171) #b0adab PALETTE_GRAY_7	1.0.0	No	I
`$color-background-toggle-hover` Hovered toggle background color.	rgb(150, 148, 146) #969492 PALETTE_GRAY_8	1.0.0	No	I
`$color-background-warning` Color for UI elements that have to do with warning.	rgb(254, 147, 57) #fe9339 PALETTE_ORANGE_70	1.0.0	No	I
`$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	No	I
`$color-brand` Our product brand blue.	rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60	1.0.0	No	GA
`$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	No	GA
`$color-brand-darker` Our product brand blue, darkened even further.	rgb(1, 68, 134) #014486 PALETTE_BLUE_30	1.0.0	No	I
`$color-picker-slider-thumb-color-background`	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$page-header-color-background` Default Page Header background color	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$popover-walkthrough-alt-image`	/assets/images/popovers/popover-action.png	1.0.0	No	I
`$popover-walkthrough-alt-nubbin-color-background`	rgb(1, 118, 211) #0176d3 PALETTE_BLUE_50	1.0.0	No	I
`$popover-walkthrough-color-background`	rgb(0, 22, 57) #001639 PALETTE_BLUE_10	1.0.0	No	I
`$popover-walkthrough-color-background-alt`	rgb(1, 118, 211) #0176d3 PALETTE_BLUE_50	1.0.0	No	I
`$popover-walkthrough-header-color-background`	rgb(3, 45, 96) #032d60 PALETTE_BLUE_20	1.0.0	No	I
`$popover-walkthrough-header-image`	/assets/images/popovers/popover-header.png	1.0.0	No	I
`$progress-color-background-shade`	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$progress-color-border-shade`	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	1.0.0	No	I
`$table-color-background-header`	rgb(250, 250, 249) #fafaf9 PALETTE_GRAY_2	1.0.0	No	I
`$table-color-background-header-hover`	rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	1.0.0	No	I

Text ColorText Color

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

Token	Example	Released	Themeable	Support
`$color-text-action-label` Action label text color	Aa rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11	1.0.0	No	GA
`$color-text-action-label-active` Action label active text color	Aa rgb(8, 7, 7) #080707 PALETTE_GRAY_13	1.0.0	No	GA
`$color-text-brand` Our product brand blue.	Aa rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60	1.0.0	No	GA
`$color-text-brand-primary` Text color found on any primary brand color	Aa rgb(255, 255, 255) #ffffff WHITE	1.0.0	No	I
`$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	No	I
`$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	No	I
`$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	No	I
`$color-text-customer` Customer text used in anchor subtitle	Aa rgb(254, 147, 57) #fe9339 PALETTE_ORANGE_70	1.0.0	No	I
`$color-text-default` Body text color	Aa rgb(8, 7, 7) #080707 PALETTE_GRAY_13	1.0.0	No	GA
`$color-text-destructive` Text color for destructive actions	Aa rgb(234, 0, 30) #ea001e PALETTE_RED_50	1.0.0	No	I
`$color-text-destructive-hover` Text color for destructive actions - hover state	Aa rgb(186, 5, 23) #ba0517 PALETTE_RED_40	1.0.0	No	I
`$color-text-error` Error text for inputs and error misc	Aa rgb(234, 0, 30) #ea001e PALETTE_RED_50	1.0.0	No	GA
`$color-text-icon-default` Default icon color.	Aa rgb(112, 110, 107) #706e6b PALETTE_GRAY_9	1.0.0	No	I
`$color-text-icon-default-disabled` Default icon color - disabled state	Aa rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$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	No	I
`$color-text-icon-inverse` Icon color on dark background	Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	1.0.0	No	I
`$color-text-icon-inverse-active` Icon color on dark background - active state	Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	1.0.0	No	I
`$color-text-icon-inverse-hover` Icon color on dark background - hover state	Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	1.0.0	No	I
`$color-text-input-disabled` Input disabled text	Aa rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11	1.0.0	No	I
`$color-text-input-icon` Input icon	Aa rgb(176, 173, 171) #b0adab PALETTE_GRAY_7	1.0.0	No	I
`$color-text-inverse` Inverse text color for dark backgrounds	Aa rgb(255, 255, 255) #ffffff WHITE	1.0.0	No	GA
`$color-text-inverse-weak` Weak inverse text color for dark backgrounds	Aa rgb(176, 173, 171) #b0adab PALETTE_GRAY_7	1.0.0	No	GA
`$color-text-label` Text color for field labels.	Aa rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11	1.0.0	No	GA
`$color-text-link` Link text (508)	Aa rgb(1, 118, 211) #0176d3 BRAND_TEXT_LINK	1.0.0	No	GA
`$color-text-link-active` Active link text	Aa rgb(3, 45, 96) #032d60 PALETTE_BLUE_20	1.0.0	No	GA
`$color-text-link-disabled` Disabled link text	Aa rgb(3, 45, 96) #032d60 PALETTE_BLUE_20	1.0.0	No	GA
`$color-text-link-focus` Focus link text	Aa rgb(1, 68, 134) #014486 PALETTE_BLUE_30	1.0.0	No	GA
`$color-text-link-hover` Hover link text	Aa rgb(1, 68, 134) #014486 BRAND_TEXT_LINK_ACTIVE	1.0.0	No	GA
`$color-text-link-inverse` Link color on dark background	Aa rgb(255, 255, 255) #ffffff WHITE	1.0.0	No	GA
`$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	No	GA
`$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	No	GA
`$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	No	GA
`$color-text-placeholder` Input placeholder text.	Aa rgb(112, 110, 107) #706e6b PALETTE_GRAY_9	1.0.0	No	GA
`$color-text-placeholder-inverse` Input placeholder text on dark backgrounds.	Aa rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	1.0.0	No	GA
`$color-text-required` Color of required field marker.	Aa rgb(234, 0, 30) #ea001e PALETTE_RED_50	1.0.0	No	GA
`$color-text-success` Text color for success text.	Aa rgb(46, 132, 74) #2e844a PALETTE_GREEN_50	1.0.0	No	I
`$color-text-success-inverse` Text color for success text on dark backgrounds.	Aa rgb(69, 198, 90) #45c65a PALETTE_GREEN_70	1.0.0	No	I
`$color-text-tab-label` Color for default text in a tab group.	Aa rgb(43, 40, 38) #2b2826 PALETTE_GRAY_12	1.0.0	No	I
`$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	No	I
`$color-text-toggle-disabled` Color for disabled toggles	Aa rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$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	No	I
`$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	No	I
`$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	No	GA

Border ColorBorder Color

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

Token	Example	Released	Themeable	Support
`$button-color-border-primary`	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$card-color-border`	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$card-footer-color-border`	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$color-border` Default border color for UI elements.	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	GA
`$color-border-brand` Our product brand blue.	rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60	1.0.0	No	GA
`$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	No	I
`$color-border-button-default` Border color for default secondary button	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$color-border-button-focus-inverse`	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	1.0.0	No	I
`$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	No	I
`$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	No	I
`$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	No	I
`$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	No	I
`$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	No	GA
`$color-border-error-alt` Alternative border color for UI elements related to errors.	rgb(254, 143, 125) #fe8f7d PALETTE_RED_70	1.0.0	No	I
`$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	No	I
`$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	No	I
`$color-border-input` Border color on form elements.	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$color-border-input-disabled` Border color on disabled form elements.	rgb(201, 199, 197) #c9c7c5 PALETTE_GRAY_6	1.0.0	No	I
`$color-border-inverse` Border color to match UI elements using color-background-inverse.	rgb(0, 22, 57) #001639 PALETTE_BLUE_10	1.0.0	No	I
`$color-border-link-focus-inverse`	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	1.0.0	No	I
`$color-border-offline` Border color for UI elements related to the offline state.	rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11	1.0.0	No	I
`$color-border-reminder` Border color on notification reminders.	rgb(236, 235, 234) #ecebea PALETTE_GRAY_4	1.0.0	No	I
`$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	No	GA
`$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	No	GA
`$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	No	I
`$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	No	I
`$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	No	I
`$color-border-separator` Lightest separator color - used as default separator on white backgrounds.	rgb(250, 250, 249) #fafaf9 PALETTE_GRAY_2	1.0.0	No	GA
`$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	No	GA
`$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	No	I
`$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	No	GA
`$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	No	GA
`$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	No	I
`$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	No	GA
`$page-header-color-border`	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I
`$page-header-joined-color-border`	rgb(221, 219, 218) #dddbda PALETTE_GRAY_5	1.0.0	No	I

FontFont

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

Token	Example	Released	Themeable	Support
`$card-font-weight` Use for active tab.	Aa 700 FONT_WEIGHT_BOLD	1.0.0	No	I
`$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	No	GA
`$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	No	I
`$font-family-monospace`	Aa Consolas, Menlo, Monaco, Courier, monospace MONOSPACE	1.0.0	No	I
`$font-weight-bold` Used sparingly for emphasized text within regular body copy.	Aa 700 FONT_WEIGHT_BOLD	1.0.0	No	GA
`$font-weight-regular` Most all body copy.	Aa 400 FONT_WEIGHT_REGULAR	1.0.0	No	GA
`$form-label-font-size`	Aa 0.75rem FONT_SIZE_2 12px	1.0.0	No	I
`$input-static-font-size`	Aa 0.875rem FONT_SIZE_4 14px	1.0.0	No	I
`$input-static-font-weight`	Aa 400 FONT_WEIGHT_REGULAR	1.0.0	No	I
`$page-header-title-font-weight`	Aa 700 FONT_WEIGHT_BOLD	1.0.0	No	I
`$tabs-font-weight` Use for active tab.	Aa 700 FONT_WEIGHT_BOLD	1.0.0	No	I

Font SizeFont Size

Use these sizing tokens for font sizes.

Token	Example	Released	Themeable	Support
`$font-size-1` Constant typography token for font size 1	Aa 0.625rem FONT_SIZE_1 10px	1.0.0	No	I
`$font-size-2` Constant typography token for font size 2	Aa 0.75rem FONT_SIZE_2 12px	1.0.0	No	I
`$font-size-3` Constant typography token for font size 3	Aa 0.8125rem FONT_SIZE_3 13px	1.0.0	No	I
`$font-size-4` Constant typography token for font size 4	Aa 0.875rem FONT_SIZE_4 14px	1.0.0	No	I
`$font-size-5` Constant typography token for font size 5	Aa 1rem FONT_SIZE_5 16px	1.0.0	No	I
`$font-size-6` Constant typography token for font size 6	Aa 1.125rem FONT_SIZE_6 18px	1.0.0	No	I
`$font-size-7` Constant typography token for font size 7	Aa 1.25rem FONT_SIZE_7 20px	1.0.0	No	I
`$font-size-8` Constant typography token for font size 8	Aa 1.5rem FONT_SIZE_8 24px	1.0.0	No	I
`$font-size-9` Constant typography token for font size 9	Aa 1.75rem FONT_SIZE_9 28px	1.0.0	No	I
`$font-size-10` Constant typography token for font size 10	Aa 2rem FONT_SIZE_10 32px	1.0.0	No	I
`$font-size-11` Constant typography token for font size 11	Aa 2.625rem FONT_SIZE_11 42px	1.0.0	No	I
`$var-font-size-1` Variable typography token for font size 1	Aa 0.625rem FONT_SIZE_1 10px	1.0.0	No	I
`$var-font-size-2` Variable typography token for font size 2	Aa 0.75rem FONT_SIZE_2 12px	1.0.0	No	I
`$var-font-size-3` Variable typography token for font size 3	Aa 0.8125rem FONT_SIZE_3 13px	1.0.0	No	I
`$var-font-size-4` Variable typography token for font size 4	Aa 0.875rem FONT_SIZE_4 14px	1.0.0	No	I
`$var-font-size-5` Variable typography token for font size 5	Aa 1rem FONT_SIZE_5 16px	1.0.0	No	I
`$var-font-size-6` Variable typography token for font size 6	Aa 1.125rem FONT_SIZE_6 18px	1.0.0	No	I
`$var-font-size-7` Variable typography token for font size 7	Aa 1.25rem FONT_SIZE_7 20px	1.0.0	No	I
`$var-font-size-8` Variable typography token for font size 8	Aa 1.5rem FONT_SIZE_8 24px	1.0.0	No	I
`$var-font-size-9` Variable typography token for font size 9	Aa 1.75rem FONT_SIZE_9 28px	1.0.0	No	I
`$var-font-size-10` Variable typography token for font size 10	Aa 2rem FONT_SIZE_10 32px	1.0.0	No	I
`$var-font-size-11` Variable typography token for font size 11	Aa 2.625rem FONT_SIZE_11 42px	1.0.0	No	I

OpacityOpacity

Use these opacity tokens for element transparency.

Token	Example	Released	Themeable	Support
`$opacity-5` 50% transparency of an element	0.5	1.0.0	No	I
`$opacity-8` 80% transparency of an element	0.8	1.0.0	No	I

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.

Token	Example	Released	Themeable	Support
`$line-height-heading` Unitless line-heights for reusability	The quick brown fox jumps over the lazy dog 1.25	1.0.0	No	GA
`$line-height-reset` Remove extra leading. Unitless line-heights for reusability	The quick brown fox jumps over the lazy dog 1	1.0.0	No	GA
`$line-height-text` Unitless line-heights for reusability	The quick brown fox jumps over the lazy dog 1.5	1.0.0	No	GA
`$var-line-height-text` Variable unitless line-heights for reusability	The quick brown fox jumps over the lazy dog 1.5	1.0.0	No	I

SpacingSpacing

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

Token	Example	Released	Themeable	Support
`$spacing-large` Constant spacing token for size Large	1.5rem SPACING_LARGE 24px	1.0.0	No	GA
`$spacing-medium` Constant spacing token for size Medium	1rem SPACING_MEDIUM 16px	1.0.0	No	GA
`$spacing-none` Constant spacing token for 0	0 SPACING_NONE	1.0.0	No	I
`$spacing-small` Constant spacing token for size Small	0.75rem SPACING_SMALL 12px	1.0.0	No	GA
`$spacing-x-large` Constant spacing token for size X Large	2rem SPACING_X_LARGE 32px	1.0.0	No	GA
`$spacing-x-small` Constant spacing token for size X small	0.5rem SPACING_X_SMALL 8px	1.0.0	No	GA
`$spacing-xx-large` Constant spacing token for size XX Large	3rem SPACING_XX_LARGE 48px	1.0.0	No	GA
`$spacing-xx-small` Constant spacing token for size XX small	0.25rem SPACING_XX_SMALL 4px	1.0.0	No	GA
`$spacing-xxx-small` Constant spacing token for size XXX small	0.125rem SPACING_XXX_SMALL 2px	1.0.0	No	GA
`$table-cell-spacing`	0.25rem 0.5rem SPACING_XX_SMALL SPACING_X_SMALL 4px 8px	1.0.0	No	I
`$template-gutters`	0.75rem SPACING_SMALL 12px	1.0.0	No	I
`$template-profile-gutters`	8rem 0.75rem 0.75rem 8rem SPACING_SMALL SPACING_SMALL 128px 12px 12px	1.0.0	No	I
`$var-spacing-horizontal-large` Variable horizontal spacing token for size Large	1.5rem SPACING_LARGE 24px	2.7.0	No	GA
`$var-spacing-horizontal-medium` Variable horizontal spacing token for size Medium	1rem SPACING_MEDIUM 16px	2.7.0	No	GA
`$var-spacing-horizontal-small` Variable horizontal spacing token for size Small	0.75rem SPACING_SMALL 12px	2.7.0	No	GA
`$var-spacing-horizontal-x-large` Variable horizontal spacing token for size X Large	2rem SPACING_X_LARGE 32px	2.7.0	No	GA
`$var-spacing-horizontal-x-small` Variable horizontal spacing token for size X Small	0.5rem SPACING_X_SMALL 8px	2.7.0	No	GA
`$var-spacing-horizontal-xx-large` Variable horizontal spacing token for size XX Large	3rem SPACING_XX_LARGE 48px	2.7.0	No	GA
`$var-spacing-horizontal-xx-small` Variable horizontal spacing token for size XX Small	0.25rem SPACING_XX_SMALL 4px	2.7.0	No	GA
`$var-spacing-horizontal-xxx-small` Variable horizontal spacing token for size XXX Small	0.125rem SPACING_XXX_SMALL 2px	2.7.0	No	GA
`$var-spacing-large` Variable spacing token for size Large	1.5rem SPACING_LARGE 24px	2.7.0	No	GA
`$var-spacing-medium` Variable spacing token for size Medium	1rem SPACING_MEDIUM 16px	2.7.0	No	GA
`$var-spacing-small` Variable spacing token for size Small	0.75rem SPACING_SMALL 12px	2.7.0	No	GA
`$var-spacing-vertical-large` Variable vertical spacing token for size Large	1.5rem SPACING_LARGE 24px	2.7.0	No	GA
`$var-spacing-vertical-medium` Variable vertical spacing token for size Medium	1rem SPACING_MEDIUM 16px	2.7.0	No	GA
`$var-spacing-vertical-small` Variable vertical spacing token for size Small	0.75rem SPACING_SMALL 12px	2.7.0	No	GA
`$var-spacing-vertical-x-large` Variable vertical spacing token for size X Large	2rem SPACING_X_LARGE 32px	2.7.0	No	GA
`$var-spacing-vertical-x-small` Variable vertical spacing token for size X Small	0.5rem SPACING_X_SMALL 8px	2.7.0	No	GA
`$var-spacing-vertical-xx-large` Variable vertical spacing token for size XX Large	3rem SPACING_XX_LARGE 48px	2.7.0	No	GA
`$var-spacing-vertical-xx-small` Variable vertical spacing token for size XX Small	0.25rem SPACING_XX_SMALL 4px	2.7.0	No	GA
`$var-spacing-vertical-xxx-small` Variable vertical spacing token for size XXX Small	0.125rem SPACING_XXX_SMALL 2px	2.7.0	No	GA
`$var-spacing-x-large` Variable spacing token for size X Large	2rem SPACING_X_LARGE 32px	2.7.0	No	GA
`$var-spacing-x-small` Variable spacing token for size X Small	0.5rem SPACING_X_SMALL 8px	2.7.0	No	GA
`$var-spacing-xx-large` Variable spacing token for size XX Large	3rem SPACING_XX_LARGE 48px	2.7.0	No	GA
`$var-spacing-xx-small` Variable spacing token for size XX Small	0.25rem SPACING_XX_SMALL 4px	2.7.0	No	GA
`$var-spacing-xxx-small` Variable spacing token for size XXX Small	0.125rem SPACING_XXX_SMALL 2px	2.7.0	No	GA

RadiusRadius

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

Token	Example	Released	Themeable	Support
`$border-radius-circle` Circle for global use, action icon bgd shape	50% BORDER_RADIUS_CIRCLE	1.0.0	No	GA
`$border-radius-large`	0.5rem BORDER_RADIUS_LARGE 8px	1.0.0	No	GA
`$border-radius-medium` Icons in lists, record home icon, unbound input elements	0.25rem BORDER_RADIUS_MEDIUM 4px	1.0.0	No	GA
`$border-radius-small`	0.125rem BORDER_RADIUS_SMALL 2px	1.0.0	No	GA
`$page-header-border-radius`	0.25rem BORDER_RADIUS_MEDIUM 4px	1.0.0	No	I
`$table-border-radius`	0 0 0.25rem 0.25rem 0 0 BORDER_RADIUS_MEDIUM BORDER_RADIUS_MEDIUM 0 0 4px 4px	1.0.0	No	I

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.

Token	Example	Released	Themeable	Support
`$height-header` Header for desktop.	3.125rem 50px	1.0.0	No	GA
`$size-large` Generic sizing token scale for UI components.	25rem SIZE_LARGE 400px	1.0.0	No	GA
`$size-medium` Generic sizing token scale for UI components.	20rem SIZE_MEDIUM 320px	1.0.0	No	GA
`$size-small` Generic sizing token scale for UI components.	15rem SIZE_SMALL 240px	1.0.0	No	GA
`$size-x-large` Generic sizing token scale for UI components.	40rem SIZE_X_LARGE 640px	1.0.0	No	GA
`$size-x-small` Generic sizing token scale for UI components.	12rem SIZE_X_SMALL 192px	1.0.0	No	GA
`$size-xx-large` Generic sizing token scale for UI components.	60rem SIZE_XX_LARGE 960px	1.0.0	No	GA
`$size-xx-small` Generic sizing token scale for UI components.	6rem SIZE_XX_SMALL 96px	1.0.0	No	GA
`$size-xxx-small` Generic sizing token scale for UI components.	3rem SIZE_XXX_SMALL 48px	1.0.0	No	I
`$square-icon-large-boundary` Anchor: Outer colored tile	3rem 48px	1.0.0	No	GA
`$square-icon-large-boundary-alt` Anchor: avatar	5rem 80px	1.0.0	No	GA
`$square-icon-large-content` Anchor: Icon content (white shape)	2rem SIZE_SQUARE_XX_LARGE 32px	1.0.0	No	GA
`$square-icon-medium` Medium tap target size	2rem 32px	1.0.0	No	I
`$square-icon-medium-boundary` Stage left & actions: Outer colored tile	2rem SIZE_SQUARE_XX_LARGE 32px	1.0.0	No	GA
`$square-icon-medium-boundary-alt` Icon button boundary.	2.25rem SIZE_SQUARE_XXX_LARGE 36px	1.0.0	No	GA
`$square-icon-medium-content` Stage left & actions: Icon content (white shape)	1rem SIZE_SQUARE_MEDIUM 16px	1.0.0	No	GA
`$square-icon-medium-content-alt` Alternate medium tap target size	0.875rem SIZE_SQUARE_SMALL 14px	1.0.0	No	I
`$square-icon-small-boundary` Search Results: Outer colored tile	1.5rem SIZE_SQUARE_X_LARGE 24px	1.0.0	No	GA
`$square-icon-small-content` Search Results: Icon content (white shape)	0.75rem SIZE_SQUARE_XX_SMALL 12px	1.0.0	No	GA
`$square-icon-utility-large` Large utility icon without border.	1.5rem SIZE_SQUARE_X_LARGE 24px	1.0.0	No	GA
`$square-icon-utility-medium` Medium utility icon without border.	1.25rem SIZE_SQUARE_LARGE 20px	1.0.0	No	GA
`$square-icon-utility-small` Small utility icon without border.	1rem SIZE_SQUARE_MEDIUM 16px	1.0.0	No	GA
`$square-icon-x-small-boundary` Very small icon button boundary.	1.25rem SIZE_SQUARE_LARGE 20px	1.0.0	No	GA
`$square-icon-x-small-content` Very small icons in icon buttons.	0.5rem SIZE_SQUARE_XXX_SMALL 8px	1.0.0	No	GA
`$square-icon-xx-small-boundary` Very very small icon button boundary.	1rem SIZE_SQUARE_MEDIUM 16px	1.0.0	No	I
`$var-square-icon-medium-boundary` Variable medium boundary for square icons	2rem SIZE_SQUARE_XX_LARGE 32px	1.0.0	No	I

ShadowShadow

Use shadow tokens to set a box shadow.

Token	Example	Released	Themeable	Support
`$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	No	I
`$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	No	I
`$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	No	I
`$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	No	GA
`$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	No	GA

TimeTime

Use timing tokens for animation durations.

Token	Example	Released	Themeable	Support
`$duration-immediately` 0.05 seconds, 3 frames	0.05s DURATION_IMMEDIATELY	1.0.0	No	GA
`$duration-instantly` 0 seconds, 0 frames	0s DURATION_INSTANTLY	1.0.0	No	GA
`$duration-paused` 3.2 seconds, 192 frames	3.2s DURATION_PAUSED	1.0.0	No	GA
`$duration-promptly` 0.2 seconds, 12 frames	0.2s DURATION_PROMPTLY	1.0.0	No	GA
`$duration-quickly` 0.1 seconds, 6 frames	0.1s DURATION_QUICKLY	1.0.0	No	GA
`$duration-slowly` 0.4 seconds, 24 frames	0.4s DURATION_SLOWLY	1.0.0	No	GA

TouchTouch

Tokens that are specific to touch enabled devices

Token	Example	Released	Themeable	Support
`$height-tappable` Tap target size for elements that rely on height or line-height	2.75rem 44px	2.10.0	No	I
`$height-tappable-small` Small tap target size for elements that rely on height or line-height	2rem 32px	2.10.0	No	I
`$square-tappable` Tap target size for elements that rely on width and height dimensions	2.75rem 44px	1.0.0	No	GA
`$square-tappable-small` Small tap target size for elements that rely on width and height dimensions	2rem 32px	2.10.0	No	I
`$square-tappable-x-small` X-small tap target size for elements that rely on width and height dimensions	1.5rem 24px	2.10.0	No	I
`$square-tappable-xx-small` Xx-small tap target size for elements that rely on width and height dimensions	1.25rem 20px	2.10.0	No	I

Media QueryMedia Query

Use media query tokens to set media query width ranges.

Token	Example	Released	Themeable	Support
`$mq-large` Large form factor: devices larger than tablet	only screen and (min-width: 64.0625em)	1.0.0	No	GA
`$mq-medium` Medium form factor: devices larger than phone	only screen and (min-width: 48em)	1.0.0	No	GA
`$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	No	GA
`$mq-small` Small form factor: devices smaller than tablet	only screen and (max-width: 47.9375em)	1.0.0	No	GA

Z-indexZ-index

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

Token	Example	Released	Themeable	Support
`$z-index-deepdive` Deep dive	-99999	1.0.0	No	I
`$z-index-default` Default	1	1.0.0	No	I
`$z-index-dialog` Dialog	6000	1.0.0	No	I
`$z-index-docked` Docked element	4	1.0.0	No	I
`$z-index-dropdown` Dropdown	7000	1.0.0	No	I
`$z-index-modal` Modal	9000	1.0.0	No	I
`$z-index-overlay` Overlay	8000	1.0.0	No	I
`$z-index-popup` Popup	5000	1.0.0	No	I
`$z-index-reminder` Notifications under modals	8500	1.0.0	No	I
`$z-index-spinner` Spinner	9050	1.0.0	No	I
`$z-index-sticky` Stickied element	100	1.0.0	No	I
`$z-index-toast` Toasts	10000	1.0.0	No	I

Categories