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 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(0, 112, 210) #0070d2	2.6.0	Yes	I
`$brand-accessible-active` Active / Hover state of BRAND_A11Y	rgb(0, 95, 178) #005fb2	2.6.0	Yes	I
`$brand-background-dark` Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color	rgb(232, 232, 232) #e8e8e8	2.6.0	Yes	I
`$brand-background-dark-transparent` These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug	rgba(221, 219, 218, 0) rgba(221,219,218,0)	2.6.0	Yes	I
`$brand-background-primary` Primary page background color	rgb(250, 250, 249) #fafaf9	2.6.0	Yes	I
`$brand-background-primary-transparent` These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug	rgba(250, 250, 249, 0) rgba(250,250,249,0)	2.6.0	Yes	I
`$brand-contrast` Variant of BRAND that is accessible with BRAND	rgb(26, 27, 30) #1a1b1e	2.6.0	Yes	I
`$brand-contrast-active` Active / Hover state of BRAND_CONTRAST	rgb(13, 14, 18) #0d0e12	2.6.0	Yes	I
`$brand-dark` Dark variant of BRAND that is accessible with light colors	rgb(24, 35, 55) #182337	2.6.0	Yes	I
`$brand-dark-active` Active / Hover state of BRAND_DARK	rgb(37, 48, 69) #253045	2.6.0	Yes	I
`$brand-disabled` Disabled state of BRAND_A11Y	rgb(201, 199, 197) #c9c7c5	2.6.0	Yes	I
`$brand-header` Background color a branded app header	rgb(255, 255, 255) #ffffff	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(0, 85, 131) #005583	2.6.0	Yes	I
`$brand-header-contrast-cool-active` Active / Hover state of BRAND_HEADER_CONTRAST_COOL	rgb(0, 85, 131) #005583	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(191, 2, 1) #bf0201	2.6.0	Yes	I
`$brand-header-contrast-warm-active` Active / Hover state of BRAND_HEADER_CONTRAST_WARM	rgb(172, 0, 0) #ac0000	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	2.6.0	Yes	I
`$brand-light-active` Active / Hover state of BRAND_LIGHT	rgb(227, 229, 237) #e3e5ed	2.6.0	Yes	I
`$brand-primary` Primary brand color	rgb(21, 137, 238) #1589ee	2.6.0	Yes	I
`$brand-primary-active` Active / Hover state of BRAND_PRIMARY	rgb(0, 122, 221) #007add	2.6.0	Yes	I
`$brand-primary-transparent` Transparent value of BRAND_PRIMARY	rgba(21, 137, 238, 0.1) rgba(21,137,238,0.1)	2.6.0	Yes	I
`$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(0, 109, 204) #006dcc	2.6.0	Yes	I
`$brand-text-link-active` Active / Hover state of BRAND_TEXT_LINK	rgb(0, 95, 178) #005fb2	2.6.0	Yes	I
`$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

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(22, 50, 92) #16325c BISCAY	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-customer` Background color for UI elements related to the concept of an external user or customer.	rgb(255, 154, 60) #ff9a3c TANGERINE	1.0.0	No	I
`$color-background-dark` Light 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(194, 57, 52) #c23934 FLUSH_MAHOGANY	1.0.0	No	I
`$color-background-destructive-active` Active color for UI elements related to destructive actions.	rgb(135, 5, 0) #870500 MAROON	1.0.0	No	I
`$color-background-destructive-hover` Hover color for UI elements related to destructive actions.	rgb(166, 26, 20) #a61a14 TABASCO	1.0.0	No	I
`$color-background-error` Color for UI elements related to errors.	rgb(212, 80, 76) #d4504c VALENCIA	1.0.0	No	I
`$color-background-error-dark` Dark color for UI elements related to errors. Accessible with white text.	rgb(194, 57, 52) #c23934 FLUSH_MAHOGANY	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-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-inverse` Default background color for dark portions of the app (like Stage Left or tooltips).	rgb(6, 28, 63) #061c3f DEEP_COVE	1.0.0	No	GA
`$color-background-inverse-light` Light variant of COLOR_BACKGROUND_INVERSE.	rgb(22, 50, 92) #16325c BISCAY	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-offline` Color for UI elements related to the offline state.	rgb(62, 64, 65) #3e4041 PALETTE_COOL_GRAY_11	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	GA
`$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	GA
`$color-background-row-new` Used as the background color for the new state on rows or items on list-like components.	rgb(217, 255, 223) #d9ffdf SNOWY_MINT	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	GA
`$color-background-selection` Background color for text selected with a mouse.	rgb(216, 237, 255) #d8edff PATTEN_BLUE	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(75, 202, 129) #4bca81 EMERALD	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(4, 132, 75) #04844b SALEM	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(0, 74, 41) #004a29 KAITOKE_GREEN	1.0.0	No	I
`$color-background-warning` Color for UI elements that have to do with warning.	rgb(255, 183, 93) #ffb75d KOROMIKO	1.0.0	No	I
`$color-background-warning-dark` Dark Color for UI elements that have to do with warning.	rgb(255, 158, 44) #ff9e2c SUNSHADE	1.0.0	No	I
`$color-brand` Our product brand blue.	rgb(21, 137, 238) #1589ee AZURE	1.0.0	No	GA
`$color-brand-dark` Our product brand blue, darkened to meet accessibility color contrast ratios with white text.	rgb(0, 112, 210) #0070d2 SCIENCE_BLUE	1.0.0	No	GA
`$color-brand-darker` Our product brand blue, darkened even further.	rgb(0, 95, 178) #005fb2 ENDEAVOUR	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(21, 137, 238) #1589ee AZURE	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-customer` Customer text used in anchor subtitle	Aa rgb(255, 154, 60) #ff9a3c TANGERINE	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(194, 57, 52) #c23934 FLUSH_MAHOGANY	1.0.0	No	I
`$color-text-destructive-hover` Text color for destructive actions - hover state	Aa rgb(161, 43, 43) #a12b2b MEXICAN_RED	1.0.0	No	I
`$color-text-error` Error text for inputs and error misc	Aa rgb(194, 57, 52) #c23934 FLUSH_MAHOGANY	1.0.0	No	I
`$color-text-icon-default` Default icon color.	Aa rgb(112, 110, 107) #706e6b PALETTE_GRAY_9	1.0.0	No	GA
`$color-text-inverse` Inverse text color for dark backgrounds	Aa rgb(255, 255, 255) #ffffff PALETTE_GRAY_1	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	I
`$color-text-link` Link text (508)	Aa rgb(0, 109, 204) #006dcc SANTORINI	1.0.0	No	GA
`$color-text-link-active` Active link text	Aa rgb(0, 57, 107) #00396b MIDNIGHT_BLUE	1.0.0	No	GA
`$color-text-link-disabled` Disabled link text	Aa rgb(22, 50, 92) #16325c BISCAY	1.0.0	No	GA
`$color-text-link-focus` Focus link text	Aa rgb(0, 95, 178) #005fb2 ENDEAVOUR	1.0.0	No	GA
`$color-text-link-hover` Hover link text	Aa rgb(0, 95, 178) #005fb2 ENDEAVOUR	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(62, 62, 60) #3e3e3c PALETTE_GRAY_11	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	I
`$color-text-primary` Primary body text color	Aa rgb(8, 7, 7) #080707 PALETTE_GRAY_13	1.0.0	No	I
`$color-text-required` Color of required field marker.	Aa rgb(194, 57, 52) #c23934 FLUSH_MAHOGANY	1.0.0	No	I
`$color-text-success` Text color for success text.	Aa rgb(2, 126, 70) #027e46 FOREST_GREEN	1.0.0	No	I
`$color-text-success-inverse` Text color for success text on dark backgrounds.	Aa rgb(75, 202, 129) #4bca81 EMERALD	1.0.0	No	I
`$color-text-warning` Color for texts or icons that are related to warnings on a dark background.	Aa rgb(255, 183, 93) #ffb75d KOROMIKO	1.0.0	No	I
`$color-text-warning-alt` Color for texts that are related to warnings on a light background.	Aa rgb(132, 72, 0) #844800 CINNAMON	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
`$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(21, 137, 238) #1589ee AZURE	1.0.0	No	GA
`$color-border-brand-dark` Our product brand blue, darkened to meet accessibility color contrast ratios with white text.	rgb(0, 112, 210) #0070d2 SCIENCE_BLUE	1.0.0	No	I
`$color-border-customer` Border color for UI elements related to the concept of an external user or customer.	rgb(255, 154, 60) #ff9a3c TANGERINE	1.0.0	No	I
`$color-border-destructive` Border color for UI elements that have to do with destructive actions.	rgb(194, 57, 52) #c23934 FLUSH_MAHOGANY	1.0.0	No	I
`$color-border-destructive-active` Active border color for UI elements that have to do with destructive actions.	rgb(135, 5, 0) #870500 MAROON	1.0.0	No	I
`$color-border-destructive-hover` Hover border color for UI elements that have to do with destructive actions.	rgb(166, 26, 20) #a61a14 TABASCO	1.0.0	No	I
`$color-border-error` Border color for UI elements that have to do with errors.	rgb(194, 57, 52) #c23934 FLUSH_MAHOGANY	1.0.0	No	GA
`$color-border-error-alt` Alternative border color for UI elements related to errors.	rgb(234, 130, 136) #ea8288 DEEP_BLUSH	1.0.0	No	I
`$color-border-error-dark` Dark alternative border color for UI elements related to errors.	rgb(234, 130, 136) #ea8288 DEEP_BLUSH	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-inverse` Border color to match UI elements using color-background-inverse.	rgb(6, 28, 63) #061c3f DEEP_COVE	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-row-selected` Used as the border color for selected rows or items on list-like components.	rgb(0, 112, 210) #0070d2 SCIENCE_BLUE	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(21, 137, 238) #1589ee AZURE	1.0.0	No	GA
`$color-border-selection` Used to delineate the boundary of a selected component. Specific to builders.	rgb(0, 112, 210) #0070d2 SCIENCE_BLUE	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(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	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(21, 137, 238) #1589ee AZURE	1.0.0	No	I
`$color-border-separator` Lightest separator color - used as default separator on white backgrounds.	rgb(243, 242, 242) #f3f2f2 PALETTE_GRAY_3	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	GA
`$color-border-separator-inverse` Used as a separator on dark backgrounds, such as stage left navigation.	rgb(42, 66, 108) #2a426c SAN_JUAN	1.0.0	No	GA
`$color-border-success` Border color for UI elements that have to do with success.	rgb(75, 202, 129) #4bca81 EMERALD	1.0.0	No	I
`$color-border-success-dark` Dark alternative border color for UI elements that have to do with success.	rgb(4, 132, 75) #04844b SALEM	1.0.0	No	I
`$color-border-warning` Border color for UI elements that have to do with warnings.	rgb(255, 183, 93) #ffb75d KOROMIKO	1.0.0	No	GA

FontFont

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

Token	Example	Released	Themeable	Support
`$font-family-heading`	Aa 'Salesforce Sans', Arial, sans-serif SANS_SERIF	1.0.0	No	I
`$font-family-monospace`	Aa Consolas, Menlo, Monaco, Courier, monospace MONOSPACE	1.0.0	No	I
`$font-family-text`	Aa 'Salesforce Sans', Arial, sans-serif SANS_SERIF	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-light` Use for large headings only.	Aa 300 FONT_WEIGHT_LIGHT	1.0.0	No	GA
`$font-weight-regular` Most all body copy.	Aa 400 FONT_WEIGHT_REGULAR	1.0.0	No	GA

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-tab` Line heights for tabs	The quick brown fox jumps over the lazy dog 2.5rem 40px	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
`$border-width-thick`	2px	1.0.0	No	GA
`$border-width-thin`	1px	1.0.0	No	GA
`$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	I
`$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
`$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-pill`	15rem BORDER_RADIUS_PILL 240px	1.0.0	No	GA
`$border-radius-small`	0.125rem BORDER_RADIUS_SMALL 2px	1.0.0	No	GA

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
`$width-stage-left-collapsed` Stage left for desktop when closed (showing icons only).	4rem 64px	1.0.0	No	GA
`$width-stage-left-expanded` Stage left for desktop when open.	15rem 240px	1.0.0	No	GA

ShadowShadow

Use shadow tokens to set a box shadow.

Token	Example	Released	Themeable	Support
`$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
`$shadow-header` Shadow for header.	0 2px 4px rgba(0, 0, 0, 0.07) OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx BLACK_TRANSPARENT_07	1.0.0	No	GA

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