Design Tokens
Categories
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:
Available to use on the Salesforce Platform.
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-accessibleDark variant of BRAND that is accessible with white | rgb(1, 118, 211) #0176d3 BRAND_ACCESSIBLE | 2.6.0 | Yes | GA |
$brand-accessible-activeActive / Hover state of BRAND_A11Y | rgb(1, 68, 134) #014486 BRAND_ACCESSIBLE_ACTIVE | 2.6.0 | Yes | GA |
$brand-background-darkDark 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-transparentThese 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-primaryPrimary page background color | rgb(238, 244, 255) #eef4ff BRAND_BACKGROUND_PRIMARY | 2.6.0 | Yes | GA |
$brand-background-primary-transparentThese 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-contrastVariant of BRAND that is accessible with BRAND | rgb(26, 27, 30) #1a1b1e BRAND_CONTRAST | 2.6.0 | Yes | GA |
$brand-contrast-activeActive / Hover state of BRAND_CONTRAST | rgb(13, 14, 18) #0d0e12 BRAND_CONTRAST_ACTIVE | 2.6.0 | Yes | GA |
$brand-darkDark variant of BRAND that is accessible with light colors | rgb(1, 118, 211) #0176d3 BRAND_DARK | 2.6.0 | Yes | GA |
$brand-dark-activeActive / Hover state of BRAND_DARK | rgb(37, 48, 69) #253045 BRAND_DARK_ACTIVE | 2.6.0 | Yes | GA |
$brand-disabledDisabled state of BRAND_A11Y | rgb(201, 199, 197) #c9c7c5 BRAND_DISABLED | 2.6.0 | Yes | GA |
$brand-headerBackground color a branded app header | rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 2.6.0 | Yes | I |
$brand-header-contrastVariant of BRAND_HEADER that is accessible with BRAND_HEADER | rgb(94, 94, 94) #5e5e5e | 2.6.0 | Yes | I |
$brand-header-contrast-activeActive / Hover state of BRAND_HEADER_CONTRAST | rgb(80, 80, 80) #505050 | 2.6.0 | Yes | I |
$brand-header-contrast-coolVariant 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-activeActive / Hover state of BRAND_HEADER_CONTRAST_COOL | rgb(1, 68, 134) #014486 PALETTE_BLUE_30 | 2.6.0 | Yes | I |
$brand-header-contrast-inverseVariant of BRAND_HEADER that is accessible with BRAND_HEADER | rgb(255, 255, 255) #ffffff | 2.6.0 | Yes | I |
$brand-header-contrast-inverse-activeActive / Hover state of BRAND_HEADER_CONTRAST | rgb(238, 238, 238) #eeeeee | 2.6.0 | Yes | I |
$brand-header-contrast-warmVariant 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-activeActive / Hover state of BRAND_HEADER_CONTRAST_WARM | rgb(186, 5, 23) #ba0517 PALETTE_RED_40 | 2.6.0 | Yes | I |
$brand-header-contrast-weakWeak contrast ratio, useful for iconography | rgb(145, 145, 145) #919191 | 2.6.0 | Yes | I |
$brand-header-contrast-weak-activeActive / Hover state of BRAND_HEADER_CONTRAST_WEAK | rgb(129, 129, 129) #818181 | 2.6.0 | Yes | I |
$brand-header-contrast-weak-disabledDisabled 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-iconIcons of BRAND_HEADER that is accessible with BRAND_HEADER | rgb(145, 145, 145) #919191 | 2.6.0 | Yes | I |
$brand-header-icon-activeActive / Hover state of BRAND_HEADER_ICON | rgb(129, 129, 129) #818181 | 2.6.0 | Yes | I |
$brand-header-icon-disabledDisabled state of BRAND_HEADER_ICON | rgba(145, 145, 145, 0.25) rgba(145,145,145,0.25) | 2.6.0 | Yes | I |
$brand-lightLight variant of BRAND that is accessible with dark colors | rgb(244, 246, 254) #f4f6fe BRAND_LIGHT | 2.6.0 | Yes | GA |
$brand-light-activeActive / Hover state of BRAND_LIGHT | rgb(227, 229, 237) #e3e5ed BRAND_LIGHT_ACTIVE | 2.6.0 | Yes | GA |
$brand-primaryPrimary brand color | rgb(27, 150, 255) #1b96ff BRAND_PRIMARY | 2.6.0 | Yes | GA |
$brand-primary-activeActive / Hover state of BRAND_PRIMARY | rgb(1, 118, 211) #0176d3 BRAND_PRIMARY_ACTIVE | 2.6.0 | Yes | GA |
$brand-primary-transparentTransparent value of BRAND_PRIMARY | rgba(21, 137, 238, 0.1) rgba(21,137,238,0.1) | 2.6.0 | Yes | GA |
$brand-primary-transparent-10Transparent 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-40Transparent 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-linkPrimary text link brand color | rgb(1, 118, 211) #0176d3 BRAND_TEXT_LINK | 2.6.0 | Yes | GA |
$brand-text-link-activeActive / Hover state of BRAND_TEXT_LINK | rgb(1, 68, 134) #014486 BRAND_TEXT_LINK_ACTIVE | 2.6.0 | Yes | GA |
$color-gray-1Gray Color 1 | rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 2.5.0 | No | I |
$color-gray-2Gray Color 2 | rgb(250, 250, 249) #fafaf9 PALETTE_GRAY_2 | 2.5.0 | No | I |
$color-gray-3Gray Color 3 | rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3 | 2.5.0 | No | I |
$color-gray-4Gray Color 4 | rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 2.5.0 | No | I |
$color-gray-5Gray Color 5 | rgb(221, 219, 218) #dddbda PALETTE_GRAY_5 | 2.5.0 | No | I |
$color-gray-6Gray Color 6 | rgb(201, 199, 197) #c9c7c5 PALETTE_GRAY_6 | 2.5.0 | No | I |
$color-gray-7Gray Color 7 | rgb(176, 173, 171) #b0adab PALETTE_GRAY_7 | 2.5.0 | No | I |
$color-gray-8Gray Color 8 | rgb(150, 148, 146) #969492 PALETTE_GRAY_8 | 2.5.0 | No | I |
$color-gray-9Gray Color 9 | rgb(112, 110, 107) #706e6b PALETTE_GRAY_9 | 2.5.0 | No | I |
$color-gray-10Gray Color 10 | rgb(81, 79, 77) #514f4d PALETTE_GRAY_10 | 2.5.0 | No | I |
$color-gray-11Gray Color 11 | rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11 | 2.5.0 | No | I |
$color-gray-12Gray Color 12 | rgb(43, 40, 38) #2b2826 PALETTE_GRAY_12 | 2.5.0 | No | I |
$color-gray-13Gray Color 13 | rgb(8, 7, 7) #080707 PALETTE_GRAY_13 | 2.5.0 | No | I |
$palette-blue-10Blue 10 | rgb(0, 22, 57) #001639 PALETTE_BLUE_10 | 2.14.0 | No | I |
$palette-blue-15Blue 15 | rgb(3, 35, 77) #03234d PALETTE_BLUE_15 | 2.14.0 | No | I |
$palette-blue-20Blue 20 | rgb(3, 45, 96) #032d60 PALETTE_BLUE_20 | 2.14.0 | No | I |
$palette-blue-30Blue 30 | rgb(1, 68, 134) #014486 PALETTE_BLUE_30 | 2.14.0 | No | I |
$palette-blue-40Blue 40 | rgb(11, 92, 171) #0b5cab PALETTE_BLUE_40 | 2.14.0 | No | I |
$palette-blue-50Blue 50 | rgb(1, 118, 211) #0176d3 PALETTE_BLUE_50 | 2.14.0 | No | I |
$palette-blue-60Blue 60 | rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60 | 2.14.0 | No | I |
$palette-blue-65Blue 65 | rgb(87, 163, 253) #57a3fd PALETTE_BLUE_65 | 2.14.0 | No | I |
$palette-blue-70Blue 70 | rgb(120, 176, 253) #78b0fd PALETTE_BLUE_70 | 2.14.0 | No | I |
$palette-blue-80Blue 80 | rgb(170, 203, 255) #aacbff PALETTE_BLUE_80 | 2.14.0 | No | I |
$palette-blue-90Blue 90 | rgb(216, 230, 254) #d8e6fe PALETTE_BLUE_90 | 2.14.0 | No | I |
$palette-blue-95Blue 95 | rgb(238, 244, 255) #eef4ff PALETTE_BLUE_95 | 2.14.0 | No | I |
$palette-cloud-blue-10Cloud Blue 10 | rgb(0, 26, 40) #001a28 PALETTE_CLOUD_BLUE_10 | 2.14.0 | No | I |
$palette-cloud-blue-15Cloud Blue 15 | rgb(10, 38, 54) #0a2636 PALETTE_CLOUD_BLUE_15 | 2.14.0 | No | I |
$palette-cloud-blue-20Cloud Blue 20 | rgb(2, 50, 72) #023248 PALETTE_CLOUD_BLUE_20 | 2.14.0 | No | I |
$palette-cloud-blue-30Cloud Blue 30 | rgb(8, 73, 104) #084968 PALETTE_CLOUD_BLUE_30 | 2.14.0 | No | I |
$palette-cloud-blue-40Cloud Blue 40 | rgb(5, 98, 138) #05628a PALETTE_CLOUD_BLUE_40 | 2.14.0 | No | I |
$palette-cloud-blue-50Cloud Blue 50 | rgb(16, 124, 173) #107cad PALETTE_CLOUD_BLUE_50 | 2.14.0 | No | I |
$palette-cloud-blue-60Cloud Blue 60 | rgb(13, 157, 218) #0d9dda PALETTE_CLOUD_BLUE_60 | 2.14.0 | No | I |
$palette-cloud-blue-65Cloud Blue 65 | rgb(8, 171, 237) #08abed PALETTE_CLOUD_BLUE_65 | 2.14.0 | No | I |
$palette-cloud-blue-70Cloud Blue 70 | rgb(26, 185, 255) #1ab9ff PALETTE_CLOUD_BLUE_70 | 2.14.0 | No | I |
$palette-cloud-blue-80Cloud Blue 80 | rgb(144, 208, 254) #90d0fe PALETTE_CLOUD_BLUE_80 | 2.14.0 | No | I |
$palette-cloud-blue-90Cloud Blue 90 | rgb(207, 233, 254) #cfe9fe PALETTE_CLOUD_BLUE_90 | 2.14.0 | No | I |
$palette-cloud-blue-95Cloud Blue 95 | rgb(234, 245, 254) #eaf5fe PALETTE_CLOUD_BLUE_95 | 2.14.0 | No | I |
$palette-green-10Green 10 | rgb(7, 27, 18) #071b12 PALETTE_GREEN_10 | 2.14.0 | No | I |
$palette-green-15Green 15 | rgb(12, 41, 18) #0c2912 PALETTE_GREEN_15 | 2.14.0 | No | I |
$palette-green-20Green 20 | rgb(14, 53, 34) #0e3522 PALETTE_GREEN_20 | 2.14.0 | No | I |
$palette-green-30Green 30 | rgb(25, 78, 49) #194e31 PALETTE_GREEN_30 | 2.14.0 | No | I |
$palette-green-40Green 40 | rgb(34, 104, 62) #22683e PALETTE_GREEN_40 | 2.14.0 | No | I |
$palette-green-50Green 50 | rgb(46, 132, 74) #2e844a PALETTE_GREEN_50 | 2.14.0 | No | I |
$palette-green-60Green 60 | rgb(59, 167, 85) #3ba755 PALETTE_GREEN_60 | 2.14.0 | No | I |
$palette-green-65Green 65 | rgb(65, 182, 88) #41b658 PALETTE_GREEN_65 | 2.14.0 | No | I |
$palette-green-70Green 70 | rgb(69, 198, 90) #45c65a PALETTE_GREEN_70 | 2.14.0 | No | I |
$palette-green-80Green 80 | rgb(145, 219, 139) #91db8b PALETTE_GREEN_80 | 2.14.0 | No | I |
$palette-green-90Green 90 | rgb(205, 239, 196) #cdefc4 PALETTE_GREEN_90 | 2.14.0 | No | I |
$palette-green-95Green 95 | rgb(235, 247, 230) #ebf7e6 PALETTE_GREEN_95 | 2.14.0 | No | I |
$palette-hot-orange-10Hot Orange 10 | rgb(40, 18, 2) #281202 PALETTE_HOT_ORANGE_10 | 2.14.0 | No | I |
$palette-hot-orange-15Hot Orange 15 | rgb(66, 22, 4) #421604 PALETTE_HOT_ORANGE_15 | 2.14.0 | No | I |
$palette-hot-orange-20Hot Orange 20 | rgb(84, 29, 1) #541d01 PALETTE_HOT_ORANGE_20 | 2.14.0 | No | I |
$palette-hot-orange-30Hot Orange 30 | rgb(126, 38, 0) #7e2600 PALETTE_HOT_ORANGE_30 | 2.14.0 | No | I |
$palette-hot-orange-40Hot Orange 40 | rgb(170, 48, 1) #aa3001 PALETTE_HOT_ORANGE_40 | 2.14.0 | No | I |
$palette-hot-orange-50Hot Orange 50 | rgb(216, 58, 0) #d83a00 PALETTE_HOT_ORANGE_50 | 2.14.0 | No | I |
$palette-hot-orange-60Hot Orange 60 | rgb(255, 93, 45) #ff5d2d PALETTE_HOT_ORANGE_60 | 2.14.0 | No | I |
$palette-hot-orange-65Hot Orange 65 | rgb(255, 120, 79) #ff784f PALETTE_HOT_ORANGE_65 | 2.14.0 | No | I |
$palette-hot-orange-70Hot Orange 70 | rgb(255, 144, 110) #ff906e PALETTE_HOT_ORANGE_70 | 2.14.0 | No | I |
$palette-hot-orange-80Hot Orange 80 | rgb(254, 185, 165) #feb9a5 PALETTE_HOT_ORANGE_80 | 2.14.0 | No | I |
$palette-hot-orange-90Hot Orange 90 | rgb(255, 222, 213) #ffded5 PALETTE_HOT_ORANGE_90 | 2.14.0 | No | I |
$palette-hot-orange-95Hot Orange 95 | rgb(254, 241, 237) #fef1ed PALETTE_HOT_ORANGE_95 | 2.14.0 | No | I |
$palette-indigo-10Indigo 10 | rgb(32, 6, 71) #200647 PALETTE_INDIGO_10 | 2.14.0 | No | I |
$palette-indigo-15Indigo 15 | rgb(31, 9, 116) #1f0974 PALETTE_INDIGO_15 | 2.14.0 | No | I |
$palette-indigo-20Indigo 20 | rgb(38, 15, 143) #260f8f PALETTE_INDIGO_20 | 2.14.0 | No | I |
$palette-indigo-30Indigo 30 | rgb(47, 44, 183) #2f2cb7 PALETTE_INDIGO_30 | 2.14.0 | No | I |
$palette-indigo-40Indigo 40 | rgb(58, 73, 218) #3a49da PALETTE_INDIGO_40 | 2.14.0 | No | I |
$palette-indigo-50Indigo 50 | rgb(88, 103, 232) #5867e8 PALETTE_INDIGO_50 | 2.14.0 | No | I |
$palette-indigo-60Indigo 60 | rgb(127, 140, 237) #7f8ced PALETTE_INDIGO_60 | 2.14.0 | No | I |
$palette-indigo-65Indigo 65 | rgb(142, 155, 239) #8e9bef PALETTE_INDIGO_65 | 2.14.0 | No | I |
$palette-indigo-70Indigo 70 | rgb(158, 169, 241) #9ea9f1 PALETTE_INDIGO_70 | 2.14.0 | No | I |
$palette-indigo-80Indigo 80 | rgb(190, 199, 246) #bec7f6 PALETTE_INDIGO_80 | 2.14.0 | No | I |
$palette-indigo-90Indigo 90 | rgb(224, 229, 248) #e0e5f8 PALETTE_INDIGO_90 | 2.14.0 | No | I |
$palette-indigo-95Indigo 95 | rgb(241, 243, 251) #f1f3fb PALETTE_INDIGO_95 | 2.14.0 | No | I |
$palette-neutral-10Neutral 10 | rgb(24, 24, 24) #181818 PALETTE_NEUTRAL_10 | 2.16.0 | No | I |
$palette-neutral-20Neutral 20 | rgb(46, 46, 46) #2e2e2e PALETTE_NEUTRAL_20 | 2.16.0 | No | I |
$palette-neutral-30Neutral 30 | rgb(68, 68, 68) #444444 PALETTE_NEUTRAL_30 | 2.16.0 | No | I |
$palette-neutral-40Neutral 40 | rgb(92, 92, 92) #5c5c5c PALETTE_NEUTRAL_40 | 2.16.0 | No | I |
$palette-neutral-50Neutral 50 | rgb(116, 116, 116) #747474 PALETTE_NEUTRAL_50 | 2.16.0 | No | I |
$palette-neutral-60Neutral 60 | rgb(147, 147, 147) #939393 PALETTE_NEUTRAL_60 | 2.16.0 | No | I |
$palette-neutral-70Neutral 70 | rgb(174, 174, 174) #aeaeae PALETTE_NEUTRAL_70 | 2.16.0 | No | I |
$palette-neutral-80Neutral 80 | rgb(201, 201, 201) #c9c9c9 PALETTE_NEUTRAL_80 | 2.16.0 | No | I |
$palette-neutral-90Neutral 90 | rgb(229, 229, 229) #e5e5e5 PALETTE_NEUTRAL_90 | 2.16.0 | No | I |
$palette-neutral-95Neutral 95 | rgb(243, 243, 243) #f3f3f3 PALETTE_NEUTRAL_95 | 2.16.0 | No | I |
$palette-neutral-100Neutral 100 | rgb(255, 255, 255) #ffffff PALETTE_NEUTRAL_100 | 2.16.0 | No | I |
$palette-orange-10Orange 10 | rgb(32, 22, 0) #201600 PALETTE_ORANGE_10 | 2.14.0 | No | I |
$palette-orange-15Orange 15 | rgb(55, 30, 3) #371e03 PALETTE_ORANGE_15 | 2.14.0 | No | I |
$palette-orange-20Orange 20 | rgb(62, 43, 2) #3e2b02 PALETTE_ORANGE_20 | 2.14.0 | No | I |
$palette-orange-30Orange 30 | rgb(95, 62, 2) #5f3e02 PALETTE_ORANGE_30 | 2.14.0 | No | I |
$palette-orange-40Orange 40 | rgb(130, 81, 1) #825101 PALETTE_ORANGE_40 | 2.14.0 | No | I |
$palette-orange-50Orange 50 | rgb(169, 100, 4) #a96404 PALETTE_ORANGE_50 | 2.14.0 | No | I |
$palette-orange-60Orange 60 | rgb(221, 122, 1) #dd7a01 PALETTE_ORANGE_60 | 2.14.0 | No | I |
$palette-orange-65Orange 65 | rgb(243, 131, 3) #f38303 PALETTE_ORANGE_65 | 2.14.0 | No | I |
$palette-orange-70Orange 70 | rgb(254, 147, 57) #fe9339 PALETTE_ORANGE_70 | 2.14.0 | No | I |
$palette-orange-80Orange 80 | rgb(255, 186, 144) #ffba90 PALETTE_ORANGE_80 | 2.14.0 | No | I |
$palette-orange-90Orange 90 | rgb(254, 223, 208) #fedfd0 PALETTE_ORANGE_90 | 2.14.0 | No | I |
$palette-orange-95Orange 95 | rgb(255, 241, 234) #fff1ea PALETTE_ORANGE_95 | 2.14.0 | No | I |
$palette-pink-10Pink 10 | rgb(55, 1, 20) #370114 PALETTE_PINK_10 | 2.14.0 | No | I |
$palette-pink-15Pink 15 | rgb(75, 6, 32) #4b0620 PALETTE_PINK_15 | 2.14.0 | No | I |
$palette-pink-20Pink 20 | rgb(97, 2, 42) #61022a PALETTE_PINK_20 | 2.14.0 | No | I |
$palette-pink-30Pink 30 | rgb(138, 3, 62) #8a033e PALETTE_PINK_30 | 2.14.0 | No | I |
$palette-pink-40Pink 40 | rgb(182, 5, 84) #b60554 PALETTE_PINK_40 | 2.14.0 | No | I |
$palette-pink-50Pink 50 | rgb(227, 6, 106) #e3066a PALETTE_PINK_50 | 2.14.0 | No | I |
$palette-pink-60Pink 60 | rgb(255, 83, 138) #ff538a PALETTE_PINK_60 | 2.14.0 | No | I |
$palette-pink-65Pink 65 | rgb(254, 114, 152) #fe7298 PALETTE_PINK_65 | 2.14.0 | No | I |
$palette-pink-70Pink 70 | rgb(254, 138, 167) #fe8aa7 PALETTE_PINK_70 | 2.14.0 | No | I |
$palette-pink-80Pink 80 | rgb(253, 182, 197) #fdb6c5 PALETTE_PINK_80 | 2.14.0 | No | I |
$palette-pink-90Pink 90 | rgb(253, 221, 227) #fddde3 PALETTE_PINK_90 | 2.14.0 | No | I |
$palette-pink-95Pink 95 | rgb(254, 240, 243) #fef0f3 PALETTE_PINK_95 | 2.14.0 | No | I |
$palette-purple-10Purple 10 | rgb(36, 6, 67) #240643 PALETTE_PURPLE_10 | 2.14.0 | No | I |
$palette-purple-15Purple 15 | rgb(48, 11, 96) #300b60 PALETTE_PURPLE_15 | 2.14.0 | No | I |
$palette-purple-20Purple 20 | rgb(64, 16, 117) #401075 PALETTE_PURPLE_20 | 2.14.0 | No | I |
$palette-purple-30Purple 30 | rgb(90, 27, 169) #5a1ba9 PALETTE_PURPLE_30 | 2.14.0 | No | I |
$palette-purple-40Purple 40 | rgb(117, 38, 227) #7526e3 PALETTE_PURPLE_40 | 2.14.0 | No | I |
$palette-purple-50Purple 50 | rgb(144, 80, 233) #9050e9 PALETTE_PURPLE_50 | 2.14.0 | No | I |
$palette-purple-60Purple 60 | rgb(173, 123, 238) #ad7bee PALETTE_PURPLE_60 | 2.14.0 | No | I |
$palette-purple-65Purple 65 | rgb(183, 141, 239) #b78def PALETTE_PURPLE_65 | 2.14.0 | No | I |
$palette-purple-70Purple 70 | rgb(194, 158, 241) #c29ef1 PALETTE_PURPLE_70 | 2.14.0 | No | I |
$palette-purple-80Purple 80 | rgb(215, 143, 245) #d78ff5 PALETTE_PURPLE_80 | 2.14.0 | No | I |
$palette-purple-90Purple 90 | rgb(236, 225, 249) #ece1f9 PALETTE_PURPLE_90 | 2.14.0 | No | I |
$palette-purple-95Purple 95 | rgb(246, 242, 251) #f6f2fb PALETTE_PURPLE_95 | 2.14.0 | No | I |
$palette-red-10Red 10 | rgb(48, 12, 1) #300c01 PALETTE_RED_10 | 2.14.0 | No | I |
$palette-red-15Red 15 | rgb(74, 12, 4) #4a0c04 PALETTE_RED_15 | 2.14.0 | No | I |
$palette-red-20Red 20 | rgb(100, 1, 3) #640103 PALETTE_RED_20 | 2.14.0 | No | I |
$palette-red-30Red 30 | rgb(142, 3, 15) #8e030f PALETTE_RED_30 | 2.14.0 | No | I |
$palette-red-40Red 40 | rgb(186, 5, 23) #ba0517 PALETTE_RED_40 | 2.14.0 | No | I |
$palette-red-50Red 50 | rgb(234, 0, 30) #ea001e PALETTE_RED_50 | 2.14.0 | No | I |
$palette-red-60Red 60 | rgb(254, 92, 76) #fe5c4c PALETTE_RED_60 | 2.14.0 | No | I |
$palette-red-65Red 65 | rgb(254, 119, 101) #fe7765 PALETTE_RED_65 | 2.14.0 | No | I |
$palette-red-70Red 70 | rgb(254, 143, 125) #fe8f7d PALETTE_RED_70 | 2.14.0 | No | I |
$palette-red-80Red 80 | rgb(254, 184, 171) #feb8ab PALETTE_RED_80 | 2.14.0 | No | I |
$palette-red-90Red 90 | rgb(254, 222, 216) #feded8 PALETTE_RED_90 | 2.14.0 | No | I |
$palette-red-95Red 95 | rgb(254, 241, 238) #fef1ee PALETTE_RED_95 | 2.14.0 | No | I |
$palette-teal-10Teal 10 | rgb(7, 27, 18) #071b12 PALETTE_TEAL_10 | 2.14.0 | No | I |
$palette-teal-15Teal 15 | rgb(7, 40, 37) #072825 PALETTE_TEAL_15 | 2.14.0 | No | I |
$palette-teal-20Teal 20 | rgb(2, 52, 52) #023434 PALETTE_TEAL_20 | 2.14.0 | No | I |
$palette-teal-30Teal 30 | rgb(2, 77, 76) #024d4c PALETTE_TEAL_30 | 2.14.0 | No | I |
$palette-teal-40Teal 40 | rgb(5, 103, 100) #056764 PALETTE_TEAL_40 | 2.14.0 | No | I |
$palette-teal-50Teal 50 | rgb(11, 130, 124) #0b827c PALETTE_TEAL_50 | 2.14.0 | No | I |
$palette-teal-60Teal 60 | rgb(6, 165, 154) #06a59a PALETTE_TEAL_60 | 2.14.0 | No | I |
$palette-teal-65Teal 65 | rgb(3, 180, 167) #03b4a7 PALETTE_TEAL_65 | 2.14.0 | No | I |
$palette-teal-70Teal 70 | rgb(1, 195, 179) #01c3b3 PALETTE_TEAL_70 | 2.14.0 | No | I |
$palette-teal-80Teal 80 | rgb(4, 225, 203) #04e1cb PALETTE_TEAL_80 | 2.14.0 | No | I |
$palette-teal-90Teal 90 | rgb(172, 243, 228) #acf3e4 PALETTE_TEAL_90 | 2.14.0 | No | I |
$palette-teal-95Teal 95 | rgb(222, 249, 243) #def9f3 PALETTE_TEAL_95 | 2.14.0 | No | I |
$palette-violet-10Violet 10 | rgb(46, 0, 57) #2e0039 PALETTE_VIOLET_10 | 2.14.0 | No | I |
$palette-violet-15Violet 15 | rgb(61, 1, 87) #3d0157 PALETTE_VIOLET_15 | 2.14.0 | No | I |
$palette-violet-20Violet 20 | rgb(82, 0, 102) #520066 PALETTE_VIOLET_20 | 2.14.0 | No | I |
$palette-violet-30Violet 30 | rgb(115, 3, 148) #730394 PALETTE_VIOLET_30 | 2.14.0 | No | I |
$palette-violet-40Violet 40 | rgb(150, 2, 199) #9602c7 PALETTE_VIOLET_40 | 2.14.0 | No | I |
$palette-violet-50Violet 50 | rgb(186, 1, 255) #ba01ff PALETTE_VIOLET_50 | 2.14.0 | No | I |
$palette-violet-60Violet 60 | rgb(203, 101, 255) #cb65ff PALETTE_VIOLET_60 | 2.14.0 | No | I |
$palette-violet-65Violet 65 | rgb(209, 125, 254) #d17dfe PALETTE_VIOLET_65 | 2.14.0 | No | I |
$palette-violet-70Violet 70 | rgb(216, 146, 254) #d892fe PALETTE_VIOLET_70 | 2.14.0 | No | I |
$palette-violet-80Violet 80 | rgb(229, 185, 254) #e5b9fe PALETTE_VIOLET_80 | 2.14.0 | No | I |
$palette-violet-90Violet 90 | rgb(242, 222, 254) #f2defe PALETTE_VIOLET_90 | 2.14.0 | No | I |
$palette-violet-95Violet 95 | rgb(249, 240, 255) #f9f0ff PALETTE_VIOLET_95 | 2.14.0 | No | I |
$palette-yellow-10Yellow 10 | rgb(40, 18, 2) #281202 PALETTE_YELLOW_10 | 2.14.0 | No | I |
$palette-yellow-15Yellow 15 | rgb(46, 34, 4) #2e2204 PALETTE_YELLOW_15 | 2.14.0 | No | I |
$palette-yellow-20Yellow 20 | rgb(79, 33, 0) #4f2100 PALETTE_YELLOW_20 | 2.14.0 | No | I |
$palette-yellow-30Yellow 30 | rgb(111, 52, 0) #6f3400 PALETTE_YELLOW_30 | 2.14.0 | No | I |
$palette-yellow-40Yellow 40 | rgb(140, 75, 2) #8c4b02 PALETTE_YELLOW_40 | 2.14.0 | No | I |
$palette-yellow-50Yellow 50 | rgb(168, 100, 3) #a86403 PALETTE_YELLOW_50 | 2.14.0 | No | I |
$palette-yellow-60Yellow 60 | rgb(202, 133, 1) #ca8501 PALETTE_YELLOW_60 | 2.14.0 | No | I |
$palette-yellow-65Yellow 65 | rgb(215, 147, 4) #d79304 PALETTE_YELLOW_65 | 2.14.0 | No | I |
$palette-yellow-70Yellow 70 | rgb(228, 162, 1) #e4a201 PALETTE_YELLOW_70 | 2.14.0 | No | I |
$palette-yellow-80Yellow 80 | rgb(252, 192, 3) #fcc003 PALETTE_YELLOW_80 | 2.14.0 | No | I |
$palette-yellow-90Yellow 90 | rgb(249, 227, 182) #f9e3b6 PALETTE_YELLOW_90 | 2.14.0 | No | I |
$palette-yellow-95Yellow 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-backgroundDefault background color for the whole app. | rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3 | 1.0.0 | No | GA |
$color-background-altSecond default background color for the app. | rgb(255, 255, 255) #ffffff WHITE | 1.0.0 | No | GA |
$color-background-alt-inverseAlternative background color for dark portions of the app. | rgb(3, 45, 96) #032d60 PALETTE_BLUE_20 | 1.0.0 | No | GA |
$color-background-backdropThe 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-tintThe 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-customerBackground 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-darkDark variant of COLOR_BACKGROUND. | rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 2.8.0 | No | I |
$color-background-destructiveColor for UI elements related to destructive actions. | rgb(186, 5, 23) #ba0517 PALETTE_RED_40 | 1.0.0 | No | I |
$color-background-destructive-activeActive color for UI elements related to destructive actions. | rgb(142, 3, 15) #8e030f PALETTE_RED_30 | 1.0.0 | No | I |
$color-background-destructive-hoverHover color for UI elements related to destructive actions. | rgb(186, 5, 23) #ba0517 PALETTE_RED_40 | 1.0.0 | No | I |
$color-background-errorColor for UI elements related to errors. | rgb(254, 92, 76) #fe5c4c PALETTE_RED_60 | 1.0.0 | No | I |
$color-background-error-darkDark 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-highlightBackground color for highlighting UI elements. | rgb(250, 255, 189) #faffbd LEMON_CHIFFON | 1.0.0 | No | GA |
$color-background-highlight-searchBackground color for highlighting text in search results. | rgb(255, 240, 63) #fff03f GORSE | 1.0.0 | No | I |
$color-background-image-overlayColor 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-infoBackground 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-disabledDisabled checkboxes | rgb(221, 219, 218) #dddbda PALETTE_GRAY_5 | 1.0.0 | No | I |
$color-background-input-disabledDisabled input | rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 1.0.0 | No | I |
$color-background-inverseDefault 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-lightLight variant of COLOR_BACKGROUND_INVERSE. | rgb(3, 45, 96) #032d60 PALETTE_BLUE_20 | 2.8.0 | No | I |
$color-background-lightLight variant of COLOR_BACKGROUND. | rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 2.8.0 | No | I |
$color-background-notification-newBackground color for a new notification list item. | rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3 | 1.0.0 | No | I |
$color-background-offlineColor for UI elements related to the offline state. | rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11 | 1.0.0 | No | I |
$color-background-postBackground color of comment posts in the feed. | rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3 | 1.0.0 | No | I |
$color-background-row-activeUsed 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-hoverUsed 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-newUsed 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-selectedUsed 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-scrollbarThe background color of an internal scrollbar. | rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 1.0.0 | No | I |
$color-background-scrollbar-trackThe background color of an internal scrollbar track. | rgb(201, 199, 197) #c9c7c5 PALETTE_GRAY_6 | 1.0.0 | No | I |
$color-background-selectionBackground color for text selected with a mouse. | rgb(216, 230, 254) #d8e6fe PALETTE_BLUE_90 | 1.0.0 | No | I |
$color-background-spinner-dotColor of the spinner dot. | rgb(176, 173, 171) #b0adab PALETTE_GRAY_7 | 1.0.0 | No | I |
$color-background-stencilUsed as background for loading stencils on white background. | rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3 | 1.0.0 | No | I |
$color-background-stencil-altUsed 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-successColor 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-darkDark 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-darkerDarker 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-toastBackground color for toast messaging. | rgb(112, 110, 107) #706e6b PALETTE_GRAY_9 | 1.0.0 | No | I |
$color-background-toggleToggle background color. | rgb(176, 173, 171) #b0adab PALETTE_GRAY_7 | 1.0.0 | No | I |
$color-background-toggle-disabledDisabled toggle background color. | rgb(176, 173, 171) #b0adab PALETTE_GRAY_7 | 1.0.0 | No | I |
$color-background-toggle-hoverHovered toggle background color. | rgb(150, 148, 146) #969492 PALETTE_GRAY_8 | 1.0.0 | No | I |
$color-background-warningColor 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-darkDark Color for UI elements that have to do with warning. | rgb(254, 147, 57) #fe9339 PALETTE_ORANGE_70 | 1.0.0 | No | I |
$color-brandOur product brand blue. | rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60 | 1.0.0 | No | GA |
$color-brand-darkOur 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-darkerOur 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-backgroundDefault 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-labelAction label text color | Aa rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11 | 1.0.0 | No | GA |
$color-text-action-label-activeAction label active text color | Aa rgb(8, 7, 7) #080707 PALETTE_GRAY_13 | 1.0.0 | No | GA |
$color-text-brandOur product brand blue. | Aa rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60 | 1.0.0 | No | GA |
$color-text-brand-primaryText color found on any primary brand color | Aa rgb(255, 255, 255) #ffffff WHITE | 1.0.0 | No | I |
$color-text-button-default-disabledText 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-hintText 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-inverseText 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-customerCustomer text used in anchor subtitle | Aa rgb(254, 147, 57) #fe9339 PALETTE_ORANGE_70 | 1.0.0 | No | I |
$color-text-defaultBody text color | Aa rgb(8, 7, 7) #080707 PALETTE_GRAY_13 | 1.0.0 | No | GA |
$color-text-destructiveText color for destructive actions | Aa rgb(234, 0, 30) #ea001e PALETTE_RED_50 | 1.0.0 | No | I |
$color-text-destructive-hoverText color for destructive actions - hover state | Aa rgb(186, 5, 23) #ba0517 PALETTE_RED_40 | 1.0.0 | No | I |
$color-text-errorError text for inputs and error misc | Aa rgb(234, 0, 30) #ea001e PALETTE_RED_50 | 1.0.0 | No | GA |
$color-text-icon-defaultDefault icon color. | Aa rgb(112, 110, 107) #706e6b PALETTE_GRAY_9 | 1.0.0 | No | I |
$color-text-icon-default-disabledDefault icon color - disabled state | Aa rgb(221, 219, 218) #dddbda PALETTE_GRAY_5 | 1.0.0 | No | I |
$color-text-icon-default-hintIcon 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-inverseIcon color on dark background | Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 1.0.0 | No | I |
$color-text-icon-inverse-activeIcon color on dark background - active state | Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 1.0.0 | No | I |
$color-text-icon-inverse-hoverIcon color on dark background - hover state | Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1 | 1.0.0 | No | I |
$color-text-input-disabledInput disabled text | Aa rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11 | 1.0.0 | No | I |
$color-text-input-iconInput icon | Aa rgb(176, 173, 171) #b0adab PALETTE_GRAY_7 | 1.0.0 | No | I |
$color-text-inverseInverse text color for dark backgrounds | Aa rgb(255, 255, 255) #ffffff WHITE | 1.0.0 | No | GA |
$color-text-inverse-weakWeak inverse text color for dark backgrounds | Aa rgb(176, 173, 171) #b0adab PALETTE_GRAY_7 | 1.0.0 | No | GA |
$color-text-labelText color for field labels. | Aa rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11 | 1.0.0 | No | GA |
$color-text-linkLink text (508) | Aa rgb(1, 118, 211) #0176d3 BRAND_TEXT_LINK | 1.0.0 | No | GA |
$color-text-link-activeActive link text | Aa rgb(3, 45, 96) #032d60 PALETTE_BLUE_20 | 1.0.0 | No | GA |
$color-text-link-disabledDisabled link text | Aa rgb(3, 45, 96) #032d60 PALETTE_BLUE_20 | 1.0.0 | No | GA |
$color-text-link-focusFocus link text | Aa rgb(1, 68, 134) #014486 PALETTE_BLUE_30 | 1.0.0 | No | GA |
$color-text-link-hoverHover link text | Aa rgb(1, 68, 134) #014486 BRAND_TEXT_LINK_ACTIVE | 1.0.0 | No | GA |
$color-text-link-inverseLink color on dark background | Aa rgb(255, 255, 255) #ffffff WHITE | 1.0.0 | No | GA |
$color-text-link-inverse-activeLink 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-disabledLink 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-hoverLink color on dark background - hover state | Aa rgba(255, 255, 255, 0.75) WHITE_TRANSPARENT_75 | 1.0.0 | No | GA |
$color-text-placeholderInput placeholder text. | Aa rgb(112, 110, 107) #706e6b PALETTE_GRAY_9 | 1.0.0 | No | GA |
$color-text-placeholder-inverseInput placeholder text on dark backgrounds. | Aa rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 1.0.0 | No | GA |
$color-text-requiredColor of required field marker. | Aa rgb(234, 0, 30) #ea001e PALETTE_RED_50 | 1.0.0 | No | GA |
$color-text-successText color for success text. | Aa rgb(46, 132, 74) #2e844a PALETTE_GREEN_50 | 1.0.0 | No | I |
$color-text-success-inverseText color for success text on dark backgrounds. | Aa rgb(69, 198, 90) #45c65a PALETTE_GREEN_70 | 1.0.0 | No | I |
$color-text-tab-labelColor 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-disabledColor for disabled text in a tab group. | Aa rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 1.0.0 | No | I |
$color-text-toggle-disabledColor for disabled toggles | Aa rgb(221, 219, 218) #dddbda PALETTE_GRAY_5 | 1.0.0 | No | I |
$color-text-warningColor 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-altColor 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-weakColor 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-borderDefault border color for UI elements. | rgb(221, 219, 218) #dddbda PALETTE_GRAY_5 | 1.0.0 | No | GA |
$color-border-brandOur product brand blue. | rgb(27, 150, 255) #1b96ff PALETTE_BLUE_60 | 1.0.0 | No | GA |
$color-border-brand-darkOur 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-defaultBorder 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-customerBorder 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-destructiveBorder 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-activeActive 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-hoverHover 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-errorBorder 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-altAlternative border color for UI elements related to errors. | rgb(254, 143, 125) #fe8f7d PALETTE_RED_70 | 1.0.0 | No | I |
$color-border-error-darkDark alternative border color for UI elements related to errors. | rgb(254, 143, 125) #fe8f7d PALETTE_RED_70 | 1.0.0 | No | I |
$color-border-infoBorder 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-inputBorder color on form elements. | rgb(221, 219, 218) #dddbda PALETTE_GRAY_5 | 1.0.0 | No | I |
$color-border-input-disabledBorder color on disabled form elements. | rgb(201, 199, 197) #c9c7c5 PALETTE_GRAY_6 | 1.0.0 | No | I |
$color-border-inverseBorder 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-offlineBorder color for UI elements related to the offline state. | rgb(62, 62, 60) #3e3e3c PALETTE_GRAY_11 | 1.0.0 | No | I |
$color-border-reminderBorder color on notification reminders. | rgb(236, 235, 234) #ecebea PALETTE_GRAY_4 | 1.0.0 | No | I |
$color-border-row-selectedUsed 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-hoverUsed 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-selectionUsed 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-activeUsed 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-hoverUsed 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-separatorLightest 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-altMedium 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-2Darkest 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-inverseUsed 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-successBorder 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-darkDark 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-warningBorder 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-weightUse for active tab. | Aa 700 FONT_WEIGHT_BOLD | 1.0.0 | No | I |
$font-familyDefault 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-boldUsed sparingly for emphasized text within regular body copy. | Aa 700 FONT_WEIGHT_BOLD | 1.0.0 | No | GA |
$font-weight-regularMost 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-weightUse 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-1Constant typography token for font size 1 | Aa 0.625rem FONT_SIZE_1 10px | 1.0.0 | No | I |
$font-size-2Constant typography token for font size 2 | Aa 0.75rem FONT_SIZE_2 12px | 1.0.0 | No | I |
$font-size-3Constant typography token for font size 3 | Aa 0.8125rem FONT_SIZE_3 13px | 1.0.0 | No | I |
$font-size-4Constant typography token for font size 4 | Aa 0.875rem FONT_SIZE_4 14px | 1.0.0 | No | I |
$font-size-5Constant typography token for font size 5 | Aa 1rem FONT_SIZE_5 16px | 1.0.0 | No | I |
$font-size-6Constant typography token for font size 6 | Aa 1.125rem FONT_SIZE_6 18px | 1.0.0 | No | I |
$font-size-7Constant typography token for font size 7 | Aa 1.25rem FONT_SIZE_7 20px | 1.0.0 | No | I |
$font-size-8Constant typography token for font size 8 | Aa 1.5rem FONT_SIZE_8 24px | 1.0.0 | No | I |
$font-size-9Constant typography token for font size 9 | Aa 1.75rem FONT_SIZE_9 28px | 1.0.0 | No | I |
$font-size-10Constant typography token for font size 10 | Aa 2rem FONT_SIZE_10 32px | 1.0.0 | No | I |
$font-size-11Constant typography token for font size 11 | Aa 2.625rem FONT_SIZE_11 42px | 1.0.0 | No | I |
$var-font-size-1Variable typography token for font size 1 | Aa 0.625rem FONT_SIZE_1 10px | 1.0.0 | No | I |
$var-font-size-2Variable typography token for font size 2 | Aa 0.75rem FONT_SIZE_2 12px | 1.0.0 | No | I |
$var-font-size-3Variable typography token for font size 3 | Aa 0.8125rem FONT_SIZE_3 13px | 1.0.0 | No | I |
$var-font-size-4Variable typography token for font size 4 | Aa 0.875rem FONT_SIZE_4 14px | 1.0.0 | No | I |
$var-font-size-5Variable typography token for font size 5 | Aa 1rem FONT_SIZE_5 16px | 1.0.0 | No | I |
$var-font-size-6Variable typography token for font size 6 | Aa 1.125rem FONT_SIZE_6 18px | 1.0.0 | No | I |
$var-font-size-7Variable typography token for font size 7 | Aa 1.25rem FONT_SIZE_7 20px | 1.0.0 | No | I |
$var-font-size-8Variable typography token for font size 8 | Aa 1.5rem FONT_SIZE_8 24px | 1.0.0 | No | I |
$var-font-size-9Variable typography token for font size 9 | Aa 1.75rem FONT_SIZE_9 28px | 1.0.0 | No | I |
$var-font-size-10Variable typography token for font size 10 | Aa 2rem FONT_SIZE_10 32px | 1.0.0 | No | I |
$var-font-size-11Variable 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-550% transparency of an element | 0.5 | 1.0.0 | No | I |
$opacity-880% 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-headingUnitless line-heights for reusability | The quick brown fox jumps over the lazy dog 1.25 | 1.0.0 | No | GA |
$line-height-resetRemove extra leading. Unitless line-heights for reusability | The quick brown fox jumps over the lazy dog 1 | 1.0.0 | No | GA |
$line-height-textUnitless line-heights for reusability | The quick brown fox jumps over the lazy dog 1.5 | 1.0.0 | No | GA |
$var-line-height-textVariable 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-largeConstant spacing token for size Large | 1.5rem SPACING_LARGE 24px | 1.0.0 | No | GA |
$spacing-mediumConstant spacing token for size Medium | 1rem SPACING_MEDIUM 16px | 1.0.0 | No | GA |
$spacing-noneConstant spacing token for 0 | 0 SPACING_NONE | 1.0.0 | No | I |
$spacing-smallConstant spacing token for size Small | 0.75rem SPACING_SMALL 12px | 1.0.0 | No | GA |
$spacing-x-largeConstant spacing token for size X Large | 2rem SPACING_X_LARGE 32px | 1.0.0 | No | GA |
$spacing-x-smallConstant spacing token for size X small | 0.5rem SPACING_X_SMALL 8px | 1.0.0 | No | GA |
$spacing-xx-largeConstant spacing token for size XX Large | 3rem SPACING_XX_LARGE 48px | 1.0.0 | No | GA |
$spacing-xx-smallConstant spacing token for size XX small | 0.25rem SPACING_XX_SMALL 4px | 1.0.0 | No | GA |
$spacing-xxx-smallConstant 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-largeVariable horizontal spacing token for size Large | 1.5rem SPACING_LARGE 24px | 2.7.0 | No | GA |
$var-spacing-horizontal-mediumVariable horizontal spacing token for size Medium | 1rem SPACING_MEDIUM 16px | 2.7.0 | No | GA |
$var-spacing-horizontal-smallVariable horizontal spacing token for size Small | 0.75rem SPACING_SMALL 12px | 2.7.0 | No | GA |
$var-spacing-horizontal-x-largeVariable horizontal spacing token for size X Large | 2rem SPACING_X_LARGE 32px | 2.7.0 | No | GA |
$var-spacing-horizontal-x-smallVariable horizontal spacing token for size X Small | 0.5rem SPACING_X_SMALL 8px | 2.7.0 | No | GA |
$var-spacing-horizontal-xx-largeVariable horizontal spacing token for size XX Large | 3rem SPACING_XX_LARGE 48px | 2.7.0 | No | GA |
$var-spacing-horizontal-xx-smallVariable horizontal spacing token for size XX Small | 0.25rem SPACING_XX_SMALL 4px | 2.7.0 | No | GA |
$var-spacing-horizontal-xxx-smallVariable horizontal spacing token for size XXX Small | 0.125rem SPACING_XXX_SMALL 2px | 2.7.0 | No | GA |
$var-spacing-largeVariable spacing token for size Large | 1.5rem SPACING_LARGE 24px | 2.7.0 | No | GA |
$var-spacing-mediumVariable spacing token for size Medium | 1rem SPACING_MEDIUM 16px | 2.7.0 | No | GA |
$var-spacing-smallVariable spacing token for size Small | 0.75rem SPACING_SMALL 12px | 2.7.0 | No | GA |
$var-spacing-vertical-largeVariable vertical spacing token for size Large | 1.5rem SPACING_LARGE 24px | 2.7.0 | No | GA |
$var-spacing-vertical-mediumVariable vertical spacing token for size Medium | 1rem SPACING_MEDIUM 16px | 2.7.0 | No | GA |
$var-spacing-vertical-smallVariable vertical spacing token for size Small | 0.75rem SPACING_SMALL 12px | 2.7.0 | No | GA |
$var-spacing-vertical-x-largeVariable vertical spacing token for size X Large | 2rem SPACING_X_LARGE 32px | 2.7.0 | No | GA |
$var-spacing-vertical-x-smallVariable vertical spacing token for size X Small | 0.5rem SPACING_X_SMALL 8px | 2.7.0 | No | GA |
$var-spacing-vertical-xx-largeVariable vertical spacing token for size XX Large | 3rem SPACING_XX_LARGE 48px | 2.7.0 | No | GA |
$var-spacing-vertical-xx-smallVariable vertical spacing token for size XX Small | 0.25rem SPACING_XX_SMALL 4px | 2.7.0 | No | GA |
$var-spacing-vertical-xxx-smallVariable vertical spacing token for size XXX Small | 0.125rem SPACING_XXX_SMALL 2px | 2.7.0 | No | GA |
$var-spacing-x-largeVariable spacing token for size X Large | 2rem SPACING_X_LARGE 32px | 2.7.0 | No | GA |
$var-spacing-x-smallVariable spacing token for size X Small | 0.5rem SPACING_X_SMALL 8px | 2.7.0 | No | GA |
$var-spacing-xx-largeVariable spacing token for size XX Large | 3rem SPACING_XX_LARGE 48px | 2.7.0 | No | GA |
$var-spacing-xx-smallVariable spacing token for size XX Small | 0.25rem SPACING_XX_SMALL 4px | 2.7.0 | No | GA |
$var-spacing-xxx-smallVariable 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-circleCircle 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-mediumIcons 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-headerHeader for desktop. | 3.125rem 50px | 1.0.0 | No | GA |
$size-largeGeneric sizing token scale for UI components. | 25rem SIZE_LARGE 400px | 1.0.0 | No | GA |
$size-mediumGeneric sizing token scale for UI components. | 20rem SIZE_MEDIUM 320px | 1.0.0 | No | GA |
$size-smallGeneric sizing token scale for UI components. | 15rem SIZE_SMALL 240px | 1.0.0 | No | GA |
$size-x-largeGeneric sizing token scale for UI components. | 40rem SIZE_X_LARGE 640px | 1.0.0 | No | GA |
$size-x-smallGeneric sizing token scale for UI components. | 12rem SIZE_X_SMALL 192px | 1.0.0 | No | GA |
$size-xx-largeGeneric sizing token scale for UI components. | 60rem SIZE_XX_LARGE 960px | 1.0.0 | No | GA |
$size-xx-smallGeneric sizing token scale for UI components. | 6rem SIZE_XX_SMALL 96px | 1.0.0 | No | GA |
$size-xxx-smallGeneric sizing token scale for UI components. | 3rem SIZE_XXX_SMALL 48px | 1.0.0 | No | I |
$square-icon-large-boundaryAnchor: Outer colored tile | 3rem 48px | 1.0.0 | No | GA |
$square-icon-large-boundary-altAnchor: avatar | 5rem 80px | 1.0.0 | No | GA |
$square-icon-large-contentAnchor: Icon content (white shape) | 2rem SIZE_SQUARE_XX_LARGE 32px | 1.0.0 | No | GA |
$square-icon-mediumMedium tap target size | 2rem 32px | 1.0.0 | No | I |
$square-icon-medium-boundaryStage left & actions: Outer colored tile | 2rem SIZE_SQUARE_XX_LARGE 32px | 1.0.0 | No | GA |
$square-icon-medium-boundary-altIcon button boundary. | 2.25rem SIZE_SQUARE_XXX_LARGE 36px | 1.0.0 | No | GA |
$square-icon-medium-contentStage left & actions: Icon content (white shape) | 1rem SIZE_SQUARE_MEDIUM 16px | 1.0.0 | No | GA |
$square-icon-medium-content-altAlternate medium tap target size | 0.875rem SIZE_SQUARE_SMALL 14px | 1.0.0 | No | I |
$square-icon-small-boundarySearch Results: Outer colored tile | 1.5rem SIZE_SQUARE_X_LARGE 24px | 1.0.0 | No | GA |
$square-icon-small-contentSearch Results: Icon content (white shape) | 0.75rem SIZE_SQUARE_XX_SMALL 12px | 1.0.0 | No | GA |
$square-icon-utility-largeLarge utility icon without border. | 1.5rem SIZE_SQUARE_X_LARGE 24px | 1.0.0 | No | GA |
$square-icon-utility-mediumMedium utility icon without border. | 1.25rem SIZE_SQUARE_LARGE 20px | 1.0.0 | No | GA |
$square-icon-utility-smallSmall utility icon without border. | 1rem SIZE_SQUARE_MEDIUM 16px | 1.0.0 | No | GA |
$square-icon-x-small-boundaryVery small icon button boundary. | 1.25rem SIZE_SQUARE_LARGE 20px | 1.0.0 | No | GA |
$square-icon-x-small-contentVery small icons in icon buttons. | 0.5rem SIZE_SQUARE_XXX_SMALL 8px | 1.0.0 | No | GA |
$square-icon-xx-small-boundaryVery very small icon button boundary. | 1rem SIZE_SQUARE_MEDIUM 16px | 1.0.0 | No | I |
$var-square-icon-medium-boundaryVariable 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-shadowHard 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-shadowHard 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-activeShadow 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-dragShadow 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-downShadow 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-immediately0.05 seconds, 3 frames | 0.05s DURATION_IMMEDIATELY | 1.0.0 | No | GA |
$duration-instantly0 seconds, 0 frames | 0s DURATION_INSTANTLY | 1.0.0 | No | GA |
$duration-paused3.2 seconds, 192 frames | 3.2s DURATION_PAUSED | 1.0.0 | No | GA |
$duration-promptly0.2 seconds, 12 frames | 0.2s DURATION_PROMPTLY | 1.0.0 | No | GA |
$duration-quickly0.1 seconds, 6 frames | 0.1s DURATION_QUICKLY | 1.0.0 | No | GA |
$duration-slowly0.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-tappableTap target size for elements that rely on height or line-height | 2.75rem 44px | 2.10.0 | No | I |
$height-tappable-smallSmall tap target size for elements that rely on height or line-height | 2rem 32px | 2.10.0 | No | I |
$square-tappableTap target size for elements that rely on width and height dimensions | 2.75rem 44px | 1.0.0 | No | GA |
$square-tappable-smallSmall tap target size for elements that rely on width and height dimensions | 2rem 32px | 2.10.0 | No | I |
$square-tappable-x-smallX-small tap target size for elements that rely on width and height dimensions | 1.5rem 24px | 2.10.0 | No | I |
$square-tappable-xx-smallXx-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-largeLarge form factor: devices larger than tablet | only screen and (min-width: 64.0625em) | 1.0.0 | No | GA |
$mq-mediumMedium form factor: devices larger than phone | only screen and (min-width: 48em) | 1.0.0 | No | GA |
$mq-medium-landscapeMedium 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-smallSmall 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-deepdiveDeep dive | -99999 | 1.0.0 | No | I |
$z-index-defaultDefault | 1 | 1.0.0 | No | I |
$z-index-dialogDialog | 6000 | 1.0.0 | No | I |
$z-index-dockedDocked element | 4 | 1.0.0 | No | I |
$z-index-dropdownDropdown | 7000 | 1.0.0 | No | I |
$z-index-modalModal | 9000 | 1.0.0 | No | I |
$z-index-overlayOverlay | 8000 | 1.0.0 | No | I |
$z-index-popupPopup | 5000 | 1.0.0 | No | I |
$z-index-reminderNotifications under modals | 8500 | 1.0.0 | No | I |
$z-index-spinnerSpinner | 9050 | 1.0.0 | No | I |
$z-index-stickyStickied element | 100 | 1.0.0 | No | I |
$z-index-toastToasts | 10000 | 1.0.0 | No | I |