Design Tokens

Design Tokens

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

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

Token Support Legend:

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

ColorsColors

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

TokenExampleReleasedThemeableSupport
$brand-accessible

Dark variant of BRAND that is accessible with white

rgb(0, 112, 210)
#0070d2
2.6.0
YesI
$brand-accessible-active

Active / Hover state of BRAND_A11Y

rgb(0, 95, 178)
#005fb2
2.6.0
YesI
$brand-background-dark

Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color

rgb(232, 232, 232)
#e8e8e8
2.6.0
YesI
$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
YesI
$brand-background-primary

Primary page background color

rgb(250, 250, 249)
#fafaf9
2.6.0
YesI
$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
YesI
$brand-contrast

Variant of BRAND that is accessible with BRAND

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

Active / Hover state of BRAND_CONTRAST

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

Dark variant of BRAND that is accessible with light colors

rgb(24, 35, 55)
#182337
2.6.0
YesI
$brand-dark-active

Active / Hover state of BRAND_DARK

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

Disabled state of BRAND_A11Y

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

Background color a branded app header

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

Variant of BRAND_HEADER that is accessible with BRAND_HEADER

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

Active / Hover state of BRAND_HEADER_CONTRAST

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

Variant of BRAND_HEADER_CONTRAST that provides a cool color

rgb(0, 85, 131)
#005583
2.6.0
YesI
$brand-header-contrast-cool-active

Active / Hover state of BRAND_HEADER_CONTRAST_COOL

rgb(0, 85, 131)
#005583
2.6.0
YesI
$brand-header-contrast-inverse

Variant of BRAND_HEADER that is accessible with BRAND_HEADER

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

Active / Hover state of BRAND_HEADER_CONTRAST

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

Variant of BRAND_HEADER_CONTRAST that provides a warm color

rgb(191, 2, 1)
#bf0201
2.6.0
YesI
$brand-header-contrast-warm-active

Active / Hover state of BRAND_HEADER_CONTRAST_WARM

rgb(172, 0, 0)
#ac0000
2.6.0
YesI
$brand-header-contrast-weak

Weak contrast ratio, useful for iconography

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

Active / Hover state of BRAND_HEADER_CONTRAST_WEAK

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

Disabled state of BRAND_HEADER_CONTRAST_WEAK

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

Icons of BRAND_HEADER that is accessible with BRAND_HEADER

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

Active / Hover state of BRAND_HEADER_ICON

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

Disabled state of BRAND_HEADER_ICON

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

Light variant of BRAND that is accessible with dark colors

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

Active / Hover state of BRAND_LIGHT

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

Primary brand color

rgb(21, 137, 238)
#1589ee
2.6.0
YesI
$brand-primary-active

Active / Hover state of BRAND_PRIMARY

rgb(0, 122, 221)
#007add
2.6.0
YesI
$brand-primary-transparent

Transparent value of BRAND_PRIMARY

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

Transparent value of BRAND_PRIMARY at 10%

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

Transparent value of BRAND_PRIMARY at 40%

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

Primary text link brand color

rgb(0, 109, 204)
#006dcc
2.6.0
YesI
$brand-text-link-active

Active / Hover state of BRAND_TEXT_LINK

rgb(0, 95, 178)
#005fb2
2.6.0
YesI
$color-gray-1

Gray Color 1

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

Gray Color 2

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

Gray Color 3

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

Gray Color 4

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

Gray Color 5

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

Gray Color 6

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

Gray Color 7

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

Gray Color 8

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

Gray Color 9

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

Gray Color 10

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

Gray Color 11

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

Gray Color 12

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

Gray Color 13

rgb(8, 7, 7)
#080707
PALETTE_GRAY_13
2.5.0
NoI

Background ColorBackground Color

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

TokenExampleReleasedThemeableSupport
$color-background

Default background color for the whole app.

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

Second default background color for the app.

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

Alternative background color for dark portions of the app.

rgb(22, 50, 92)
#16325c
BISCAY
1.0.0
NoGA
$color-background-backdrop

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

rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
1.0.0
NoI
$color-background-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
NoI
$color-background-destructive

Color for UI elements related to destructive actions.

rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
1.0.0
NoI
$color-background-destructive-active

Active color for UI elements related to destructive actions.

rgb(135, 5, 0)
#870500
MAROON
1.0.0
NoI
$color-background-destructive-hover

Hover color for UI elements related to destructive actions.

rgb(166, 26, 20)
#a61a14
TABASCO
1.0.0
NoI
$color-background-error

Color for UI elements related to errors.

rgb(212, 80, 76)
#d4504c
VALENCIA
1.0.0
NoI
$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
NoI
$color-background-highlight

Background color for highlighting UI elements.

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

Background color for highlighting text in search results.

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

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

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
1.0.0
NoI
$color-background-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
NoGA
$color-background-offline

Color for UI elements related to the offline state.

rgb(62, 64, 65)
#3e4041
PALETTE_COOL_GRAY_11
1.0.0
NoI
$color-background-row-active

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

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoGA
$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
NoGA
$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
NoGA
$color-background-row-selected

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

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
1.0.0
NoGA
$color-background-selection

Background color for text selected with a mouse.

rgb(216, 237, 255)
#d8edff
PATTEN_BLUE
1.0.0
NoI
$color-background-stencil

Used as background for loading stencils on white background.

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

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

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

Color for UI elements that have to do with success.

rgb(75, 202, 129)
#4bca81
EMERALD
1.0.0
NoI
$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
NoI
$color-background-warning

Color for UI elements that have to do with warning.

rgb(255, 183, 93)
#ffb75d
KOROMIKO
1.0.0
NoI
$color-brand

Our product brand blue.

rgb(21, 137, 238)
#1589ee
AZURE
1.0.0
NoGA
$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
NoGA
$color-brand-darker

Our product brand blue, darkened even further.

rgb(0, 95, 178)
#005fb2
ENDEAVOUR
1.0.0
NoI

Text ColorText Color

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

TokenExampleReleasedThemeableSupport
$color-text-action-label

Action label text color

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

Action label active text color

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

Our product brand blue.

Aa
rgb(21, 137, 238)
#1589ee
AZURE
1.0.0
NoGA
$color-text-brand-primary

Text color found on any primary brand color

Aa
rgb(255, 255, 255)
#ffffff
WHITE
1.0.0
NoI
$color-text-customer

Customer text used in anchor subtitle

Aa
rgb(255, 154, 60)
#ff9a3c
TANGERINE
1.0.0
NoI
$color-text-default

Body text color

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

Text color for destructive actions

Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
1.0.0
NoI
$color-text-destructive-hover

Text color for destructive actions - hover state

Aa
rgb(161, 43, 43)
#a12b2b
MEXICAN_RED
1.0.0
NoI
$color-text-error

Error text for inputs and error misc

Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
1.0.0
NoI
$color-text-icon-default

Default icon color.

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

Inverse text color for dark backgrounds

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

Weak inverse text color for dark backgrounds

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

Text color for field labels.

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

Link text (508)

Aa
rgb(0, 109, 204)
#006dcc
SANTORINI
1.0.0
NoGA
$color-text-link-active

Active link text

Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
1.0.0
NoGA
$color-text-link-disabled

Disabled link text

Aa
rgb(22, 50, 92)
#16325c
BISCAY
1.0.0
NoGA
$color-text-link-focus

Focus link text

Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
1.0.0
NoGA
$color-text-link-hover

Hover link text

Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
1.0.0
NoGA
$color-text-link-inverse

Link color on dark background

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

Link color on dark background - active state

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

Link color on dark background - disabled state

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

Link color on dark background - hover state

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

Input placeholder text.

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

Input placeholder text on dark backgrounds.

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

Primary body text color

Aa
rgb(8, 7, 7)
#080707
PALETTE_GRAY_13
1.0.0
NoI
$color-text-required

Color of required field marker.

Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
1.0.0
NoI
$color-text-success

Text color for success text.

Aa
rgb(2, 126, 70)
#027e46
FOREST_GREEN
1.0.0
NoI
$color-text-success-inverse

Text color for success text on dark backgrounds.

Aa
rgb(75, 202, 129)
#4bca81
EMERALD
1.0.0
NoI
$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
NoI
$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
NoI
$color-text-weak

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

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

Border ColorBorder Color

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

TokenExampleReleasedThemeableSupport
$color-border

Default border color for UI elements.

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

Our product brand blue.

rgb(21, 137, 238)
#1589ee
AZURE
1.0.0
NoGA
$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
NoI
$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
NoI
$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
NoI
$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
NoI
$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
NoI
$color-border-error

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

rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
1.0.0
NoGA
$color-border-error-alt

Alternative border color for UI elements related to errors.

rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
1.0.0
NoI
$color-border-error-dark

Dark alternative border color for UI elements related to errors.

rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
1.0.0
NoI
$color-border-info

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

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

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

rgb(6, 28, 63)
#061c3f
DEEP_COVE
1.0.0
NoI
$color-border-offline

Border color for UI elements related to the offline state.

rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
1.0.0
NoI
$color-border-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
NoGA
$color-border-row-selected-hover

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

rgb(21, 137, 238)
#1589ee
AZURE
1.0.0
NoGA
$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
NoI
$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
NoI
$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
NoI
$color-border-separator

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

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

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

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

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

rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
1.0.0
NoGA
$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
NoGA
$color-border-success

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

rgb(75, 202, 129)
#4bca81
EMERALD
1.0.0
NoI
$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
NoI
$color-border-warning

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

rgb(255, 183, 93)
#ffb75d
KOROMIKO
1.0.0
NoGA

FontFont

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

TokenExampleReleasedThemeableSupport
$font-family-heading
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
1.0.0
NoI
$font-family-monospace
Aa
Consolas, Menlo, Monaco, Courier, monospace
MONOSPACE
1.0.0
NoI
$font-family-text
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
1.0.0
NoI
$font-weight-bold

Used sparingly for emphasized text within regular body copy.

Aa
700
FONT_WEIGHT_BOLD
1.0.0
NoGA
$font-weight-light

Use for large headings only.

Aa
300
FONT_WEIGHT_LIGHT
1.0.0
NoGA
$font-weight-regular

Most all body copy.

Aa
400
FONT_WEIGHT_REGULAR
1.0.0
NoGA

Font SizeFont Size

Use these sizing tokens for font sizes.

TokenExampleReleasedThemeableSupport
$font-size-1

Constant typography token for font size 1

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

Constant typography token for font size 2

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

Constant typography token for font size 3

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

Constant typography token for font size 4

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

Constant typography token for font size 5

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

Constant typography token for font size 6

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

Constant typography token for font size 7

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

Constant typography token for font size 8

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

Constant typography token for font size 9

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

Constant typography token for font size 10

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

Constant typography token for font size 11

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

Variable typography token for font size 1

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

Variable typography token for font size 2

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

Variable typography token for font size 3

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

Variable typography token for font size 4

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

Variable typography token for font size 5

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

Variable typography token for font size 6

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

Variable typography token for font size 7

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

Variable typography token for font size 8

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

Variable typography token for font size 9

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

Variable typography token for font size 10

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

Variable typography token for font size 11

Aa
2.625rem
FONT_SIZE_11
42px
1.0.0
NoI

OpacityOpacity

Use these opacity tokens for element transparency.

TokenExampleReleasedThemeableSupport
$opacity-5

50% transparency of an element

0.5
1.0.0
NoI
$opacity-8

80% transparency of an element

0.8
1.0.0
NoI

Line HeightLine Height

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

TokenExampleReleasedThemeableSupport
$line-height-heading

Unitless line-heights for reusability

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

Remove extra leading. Unitless line-heights for reusability

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

Line heights for tabs

The quick brown fox jumps over the lazy dog
2.5rem
40px
1.0.0
NoGA
$line-height-text

Unitless line-heights for reusability

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

Variable unitless line-heights for reusability

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

SpacingSpacing

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

TokenExampleReleasedThemeableSupport
$border-width-thick
2px
1.0.0
NoGA
$border-width-thin
1px
1.0.0
NoGA
$spacing-large

Constant spacing token for size Large

1.5rem
SPACING_LARGE
24px
1.0.0
NoGA
$spacing-medium

Constant spacing token for size Medium

1rem
SPACING_MEDIUM
16px
1.0.0
NoGA
$spacing-none

Constant spacing token for 0

0
SPACING_NONE
1.0.0
NoI
$spacing-small

Constant spacing token for size Small

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

Constant spacing token for size X Large

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

Constant spacing token for size X small

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

Constant spacing token for size XX Large

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

Constant spacing token for size XX small

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

Constant spacing token for size XXX small

0.125rem
SPACING_XXX_SMALL
2px
1.0.0
NoGA
$var-spacing-horizontal-large

Variable horizontal spacing token for size Large

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

Variable horizontal spacing token for size Medium

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

Variable horizontal spacing token for size Small

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

Variable horizontal spacing token for size X Large

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

Variable horizontal spacing token for size X Small

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

Variable horizontal spacing token for size XX Large

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

Variable horizontal spacing token for size XX Small

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

Variable horizontal spacing token for size XXX Small

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

Variable spacing token for size Large

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

Variable spacing token for size Medium

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

Variable spacing token for size Small

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

Variable vertical spacing token for size Large

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

Variable vertical spacing token for size Medium

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

Variable vertical spacing token for size Small

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

Variable vertical spacing token for size X Large

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

Variable vertical spacing token for size X Small

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

Variable vertical spacing token for size XX Large

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

Variable vertical spacing token for size XX Small

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

Variable vertical spacing token for size XXX Small

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

Variable spacing token for size X Large

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

Variable spacing token for size X Small

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

Variable spacing token for size XX Large

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

Variable spacing token for size XX Small

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

Variable spacing token for size XXX Small

0.125rem
SPACING_XXX_SMALL
2px
2.7.0
NoGA

RadiusRadius

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

TokenExampleReleasedThemeableSupport
$border-radius-circle

Circle for global use, action icon bgd shape

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

Icons in lists, record home icon, unbound input elements

0.25rem
BORDER_RADIUS_MEDIUM
4px
1.0.0
NoGA
$border-radius-pill
15rem
BORDER_RADIUS_PILL
240px
1.0.0
NoGA
$border-radius-small
0.125rem
BORDER_RADIUS_SMALL
2px
1.0.0
NoGA

SizingSizing

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

TokenExampleReleasedThemeableSupport
$height-header

Header for desktop.

3.125rem
50px
1.0.0
NoI
$size-large

Generic sizing token scale for UI components.

25rem
SIZE_LARGE
400px
1.0.0
NoGA
$size-medium

Generic sizing token scale for UI components.

20rem
SIZE_MEDIUM
320px
1.0.0
NoGA
$size-small

Generic sizing token scale for UI components.

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

Generic sizing token scale for UI components.

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

Generic sizing token scale for UI components.

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

Generic sizing token scale for UI components.

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

Generic sizing token scale for UI components.

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

Generic sizing token scale for UI components.

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

Anchor: Outer colored tile

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

Anchor: avatar

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

Anchor: Icon content (white shape)

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

Medium tap target size

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

Stage left & actions: Outer colored tile

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

Icon button boundary.

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

Stage left & actions: Icon content (white shape)

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

Alternate medium tap target size

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

Search Results: Outer colored tile

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

Search Results: Icon content (white shape)

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

Large utility icon without border.

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

Medium utility icon without border.

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

Small utility icon without border.

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

Very small icon button boundary.

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

Very small icons in icon buttons.

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

Very very small icon button boundary.

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

Variable medium boundary for square icons

2rem
SIZE_SQUARE_XX_LARGE
32px
1.0.0
NoI
$width-stage-left-collapsed

Stage left for desktop when closed (showing icons only).

4rem
64px
1.0.0
NoI
$width-stage-left-expanded

Stage left for desktop when open.

15rem
240px
1.0.0
NoI

ShadowShadow

Use shadow tokens to set a box shadow.

TokenExampleReleasedThemeableSupport
$shadow-drag

Shadow for drag-n-drop.

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

Shadow for drop down.

0 2px 3px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_16
1.0.0
NoGA
$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
NoGA

Media QueryMedia Query

Use media query tokens to set media query width ranges.

TokenExampleReleasedThemeableSupport
$mq-large

Large form factor: devices larger than tablet

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

Medium form factor: devices larger than phone

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

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

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

Small form factor: devices smaller than tablet

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

Z-indexZ-index

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

TokenExampleReleasedThemeableSupport
$z-index-deepdive

Deep dive

-99999
1.0.0
NoI
$z-index-default

Default

1
1.0.0
NoI
$z-index-dialog

Dialog

6000
1.0.0
NoI
$z-index-docked

Docked element

4
1.0.0
NoI
$z-index-dropdown

Dropdown

7000
1.0.0
NoI
$z-index-modal

Modal

9000
1.0.0
NoI
$z-index-overlay

Overlay

8000
1.0.0
NoI
$z-index-popup

Popup

5000
1.0.0
NoI
$z-index-reminder

Notifications under modals

8500
1.0.0
NoI
$z-index-spinner

Spinner

9050
1.0.0
NoI
$z-index-sticky

Stickied element

100
1.0.0
NoI
$z-index-toast

Toasts

10000
1.0.0
NoI