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.

Background ColorBackground Color

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

TokenExample
$button-color-background-primary
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$card-wrapper-color-background
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background

Default background color for the whole app.

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-actionbar-icon-utility

Background for utility icons that live in the action bar on mobile.

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-alt

Second default background color for the app.

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-alt-2

Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.

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

Alternative background color for dark portions of the app.

rgb(22, 50, 92)
#16325c
BISCAY
$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
$color-background-backdrop-tint

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

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-brand-primary
rgb(0, 112, 210)
#0070d2
BLUE_BACKGROUND_PRIMARY
$color-background-brand-primary-active
rgb(0, 95, 178)
#005fb2
BLUE_BACKGROUND_SECONDARY
$color-background-brand-primary-focus
rgb(0, 95, 178)
#005fb2
BLUE_BACKGROUND_SECONDARY
$color-background-brand-primary-hover
rgb(0, 95, 178)
#005fb2
BLUE_BACKGROUND_SECONDARY
$color-background-browser

Secondary top bar background color (child browser, file preview, etc.)

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-button-success

Background color for success buttons

rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-button-success-active

Active background color for success buttons

rgb(4, 132, 75)
#04844b
SALEM
$color-background-button-success-hover

Hovered background color for success buttons

rgb(4, 132, 75)
#04844b
SALEM
$color-background-chrome-desktop

Background color for default desktop chrome (ex. global header)

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-chrome-mobile

Background color for default mobile chrome (ex. global header)

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-customer

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

rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-background-destructive

Color for UI elements related to destructive actions.

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

Active color for UI elements related to destructive actions.

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

Hover color for UI elements related to destructive actions.

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

Color for UI elements related to errors.

rgb(212, 80, 76)
#d4504c
VALENCIA
$color-background-error-dark

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

rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-highlight

Background color for highlighting UI elements.

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

Background color for highlighting text in search results.

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

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

rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-background-indicator-dot

Color of the indicator dot.

rgb(22, 50, 92)
#16325c
BISCAY
$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
$color-background-input

Default input field

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-active

Selected input field (when user has clicked or tabbed into field)

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-checkbox

Default checkboxes

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-checkbox-disabled

Disabled checkboxes

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-background-input-checkbox-selected

Selected checkboxes

rgb(21, 137, 238)
#1589ee
AZURE
$color-background-input-disabled

Disabled input

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-input-error

Background color for input field that has encountered an error.

rgb(255, 221, 225)
#ffdde1
PIPPIN
$color-background-inverse

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

rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-modal

Standard modal header

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-modal-brand

Brandable modal header

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-modal-button

Button backgrounds on modal headers

rgba(0, 0, 0, 0.07)
BLACK_TRANSPARENT_07
$color-background-modal-button-active

Active button backgrounds on modal headers

rgba(0, 0, 0, 0.16)
BLACK_TRANSPARENT_16
$color-background-notification

Background color for notification list item.

rgb(255, 255, 255)
#ffffff
WHITE
$color-background-notification-badge

Notifications badge background color.

rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-notification-badge-active

Notifications badge background color.

rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-notification-badge-focus

Notifications badge background color.

rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-notification-badge-hover

Notifications badge background color.

rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-notification-new

Background color for a new notification list item.

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

Color for UI elements related to the offline state.

rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-background-org-switcher-arrow

Stage left org switcher dropdown arrow background color.

rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-payload

Background color for payloads in the feed.

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-pill

Background color for pills.

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-post

Background color of comment posts in the feed.

rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-primary
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-reminder

Background color for reminder notification

rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-reminder-hover

Background color for reminder notification on hover

rgb(255, 255, 255)
#ffffff
WHITE
$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
$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
$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
$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
$color-background-scrollbar

The background color of an internal scrollbar.

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

The background color of an internal scrollbar track.

rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
$color-background-secondary
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-selection

Background color for text selected with a mouse.

rgb(216, 237, 255)
#d8edff
PATTEN_BLUE
$color-background-shade

Used as gray background when more contrast is desired.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-shade-dark

Used as gray background in conjunction with Shade when more contrast is desired.

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-background-spinner-dot

Color of the spinner dot.

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

Used as background for loading stencils on white background.

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

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

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

Color for UI elements that have to do with success.

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

Used as the default background color for temporary dialog elements, such as the progress spinner background.

rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
$color-background-temp-modal-tint

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

rgba(43, 40, 38, 0.6)
PALETTE_DARK_GRAY_TRANSPARENT_60
$color-background-toast

Background color for toast messaging.

rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-toast-error

Background color for error toast messaging.

rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-toast-success

Background color for success toast messaging.

rgb(4, 132, 75)
#04844b
SALEM
$color-background-toggle

Toggle background color.

rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-background-toggle-active

Active toggle background color.

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-toggle-active-hover

Hovered active toggle background color.

rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-toggle-disabled

Disabled toggle background color.

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

Hovered toggle background color.

rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
$color-background-utility-bar-active

Active color for utility bar item.

rgb(21, 137, 238)
#1589ee
AZURE
$color-background-utility-bar-hover

Hover color for utility bar item.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-warning

Color for UI elements that have to do with warning.

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

Our product brand blue.

rgb(21, 137, 238)
#1589ee
AZURE
$color-brand-dark

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

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-brand-darker

Our product brand blue, darkened even further.

rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-contrast-primary
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-contrast-secondary
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-foreground-primary
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-picker-slider-thumb-color-background
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$page-header-color-background

Default Page Header background color

rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$popover-walkthrough-alt-image
/assets/images/popovers/popover-action.png
$popover-walkthrough-alt-nubbin-color-background
rgb(33, 92, 160)
#215ca0
$popover-walkthrough-color-background
rgb(3, 46, 97)
#032e61
$popover-walkthrough-color-background-alt
rgb(22, 74, 133)
#164a85
$popover-walkthrough-header-color-background
rgb(22, 74, 133)
#164a85
$popover-walkthrough-header-image
/assets/images/popovers/popover-header.png
$progress-color-background-shade
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$progress-color-border-shade
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$table-color-background-header
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$table-color-background-header-hover
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1

Text ColorText Color

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

TokenExample
$button-color-text-primary
Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-action-label

Action label text color

Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-action-label-active

Action label active text color

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-text-brand

Our product brand blue.

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

Text color found on any primary brand color

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-browser

Top bar icon color

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-browser-active

Top bar active icon color

Aa
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-text-button-brand

Text color for brandable primary button

Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-brand-active

Text color for brandable primary button - active state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-button-brand-disabled

Text color for brandable primary button - disabled state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-button-brand-hover

Text color for brandable primary button - hover state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-button-default

Text color for default secondary button

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-active

Text color for default secondary button - active state

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-disabled

Text color for default secondary button - disabled state

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

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

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-button-default-hover

Text color for default secondary button - hover state

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-inverse

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

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-button-inverse-disabled

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

Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-customer

Customer text used in anchor subtitle

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

Body text color

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-text-error

Error text for inputs and error misc

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

Color for non-interactive icons that represent a selected item in a list

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-default

Default icon color.

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

Default icon color - active state.

Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-icon-default-disabled

Default icon color - disabled state

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

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

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-icon-default-hint-borderless

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

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-icon-default-hover

Default icon color - hover state.

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-inverse

Icon color on dark background

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

Icon color on dark background - active state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-icon-inverse-disabled

Icon color on dark background - disabled state

Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-icon-inverse-hint

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

Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-text-icon-inverse-hint-hover

Hovered icon color for a button that has a parent element that has a hover state

Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-icon-inverse-hover

Icon color on dark background - hover state

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-icon-utility

Color for interactive utility icons

Aa
rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$color-text-input-disabled

Input disabled text

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

Typed input text

Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-input-icon

Input icon

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

Inverse text color for dark backgrounds

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

Active state on a standalone link on a dark background.

Aa
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-text-inverse-hover

Hover state on a standalone link on a dark background.

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

Weak inverse text color for dark backgrounds

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

Text color for field labels.

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

Link text (508)

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

Active link text

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

Disabled link text

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

Focus link text

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

Hover link text

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

Link color on dark background

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-link-inverse-active

Link color on dark background - active state

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

Link color on dark background - disabled state

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

Link color on dark background - hover state

Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-link-primary
Aa
rgb(0, 112, 210)
#0070d2
BLUE_TEXT_PRIMARY
$color-text-link-primary-active
Aa
rgb(0, 95, 178)
#005fb2
BLUE_TEXT_SECONDARY
$color-text-link-primary-focus
Aa
rgb(0, 95, 178)
#005fb2
BLUE_TEXT_SECONDARY
$color-text-link-primary-hover
Aa
rgb(0, 95, 178)
#005fb2
BLUE_TEXT_SECONDARY
$color-text-modal

Modal header title

Aa
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-text-modal-button

Modal header button text color

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

Text color for pills.

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-placeholder

Input placeholder text.

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

Input placeholder text on dark backgrounds.

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

Primary body text color

Aa
rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-text-required

Color of required field marker.

Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-secondary

Secondary body text color

Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-stage-left

Text in stage left navigation.

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-success

Text color for success text.

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

Text color for success text on dark backgrounds.

Aa
rgb(75, 202, 129)
#4bca81
EMERALD
$color-text-tab-label

Color for default text in a tab group.

Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-tab-label-active

Color for text in active state in a tab group.

Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-tab-label-disabled

Color for disabled text in a tab group.

Aa
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-text-tab-label-focus

Color for text in focus state in a tab group.

Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-hover

Color for text in hover state in a tab group.

Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-selected

Color for text on a selected tab in a tab group.

Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-tertiary

Tertiary body text color

Aa
rgb(150, 148, 146)
#969492
PALETTE_GRAY_8
$color-text-toast

Color for text on toast messages.

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

Color for disabled toggles

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

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

Aa
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-text-warning-alt

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

Aa
rgb(132, 72, 0)
#844800
CINNAMON
$color-text-weak

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

Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9

Border ColorBorder Color

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

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

Default border color for UI elements.

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

Our product brand blue.

rgb(21, 137, 238)
#1589ee
AZURE
$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
$color-border-brand-primary
rgb(0, 112, 210)
#0070d2
BLUE_BORDER_PRIMARY
$color-border-brand-primary-active
rgb(0, 95, 178)
#005fb2
BLUE_BORDER_SECONDARY
$color-border-brand-primary-focus
rgb(0, 95, 178)
#005fb2
BLUE_BORDER_SECONDARY
$color-border-brand-primary-hover
rgb(0, 95, 178)
#005fb2
BLUE_BORDER_SECONDARY
$color-border-button-brand

Border color for brandable primary button

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-button-brand-disabled

Border color for brandable primary button - disabled state

rgba(0, 0, 0, 0)
TRANSPARENT
$color-border-button-default

Border color for default secondary button

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-button-inverse-disabled

Border color for disabled inverse button.

rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-border-canvas-element-selection

Used to delineate the boundary of a selected canvas element. Specific to builders.

rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-border-canvas-element-selection-hover

Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.

rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-border-customer

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

rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-border-destructive

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

rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-destructive-active

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

rgb(135, 5, 0)
#870500
MAROON
$color-border-destructive-hover

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

rgb(166, 26, 20)
#a61a14
TABASCO
$color-border-error

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

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

Alternative border color for UI elements related to errors.

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

Dark alternative border color for UI elements related to errors.

rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$color-border-icon-inverse-hint

Border color for a button with an icon that has a parent element that has a hover state

rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-border-icon-inverse-hint-hover

Hovered border color for a button with an icon that has a parent element that has a hover state

rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$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
$color-border-input

Border color on form elements.

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-input-active

Border color on active form elements.

rgb(21, 137, 238)
#1589ee
AZURE
$color-border-input-checkbox-selected-checkmark

The borders to create the checkmark

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-border-input-disabled

Border color on disabled form elements.

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

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

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

Border color for UI elements related to the offline state.

rgb(62, 62, 60)
#3e3e3c
PALETTE_GRAY_11
$color-border-primary
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-reminder

Border color on notification reminders.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$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
$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
$color-border-selection

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

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$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
$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
$color-border-separator

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

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

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

rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$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
$color-border-separator-inverse

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

rgb(42, 66, 108)
#2a426c
SAN_JUAN
$color-border-success

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

rgb(75, 202, 129)
#4bca81
EMERALD
$color-border-success-dark

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

rgb(4, 132, 75)
#04844b
SALEM
$color-border-tab-active

Border color for an active tab.

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-border-tab-selected

Border color for a selected tab in a tab group.

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-toggle-checked

These borders create the faux checkmark when the checkbox toggle is in the checked state.

rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-border-warning

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

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

Our product brand blue.

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-stroke-brand-active

Active stroke color for our product brand blue.

rgb(22, 50, 92)
#16325c
BISCAY
$color-stroke-brand-hover

Hover stroke color for our product brand blue.

rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-stroke-disabled

Disabled stroke color.

rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-stroke-header-button

Stroke color for our global header buttons.

rgb(176, 173, 171)
#b0adab
PALETTE_GRAY_7
$page-header-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$page-header-joined-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5

FontFont

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

TokenExample
$card-font-weight

Use for active tab.

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

Used sparingly for emphasized text within regular body copy.

Aa
700
$font-weight-light

Use for large headings only.

Aa
300
$font-weight-regular

Most all body copy.

Aa
400
$form-label-font-size
Aa
.75rem
12px
$input-static-font-size
Aa
0.875rem
14px
$input-static-font-weight
Aa
400
$page-header-title-font-weight
Aa
700
$tabs-font-weight

Use for active tab.

Aa
700

Font SizeFont Size

Use these sizing tokens for font sizes.

TokenExample
$font-size-heading-large

Large headings.

Aa
1.5rem
FONT_SIZE_8
24px
$font-size-heading-medium

Medium headings.

Aa
1.125rem
FONT_SIZE_6
18px
$font-size-heading-small

Small headings.

Aa
.875rem
FONT_SIZE_4
14px
$font-size-heading-x-large

Extra large headings.

Aa
2rem
FONT_SIZE_9
32px
$font-size-heading-x-small

Extra small headings.

Aa
.75rem
FONT_SIZE_2
12px
$font-size-heading-xx-small

Extra Extra small headings.

Aa
.625rem
FONT_SIZE_1
10px
$font-size-text-large

Large body text.

Aa
1.125rem
FONT_SIZE_6
18px
$font-size-text-medium

Medium body text.

Aa
1rem
FONT_SIZE_5
16px
$font-size-text-small

Small body text.

Aa
.8125rem
FONT_SIZE_3
13px
$font-size-text-x-large

Extra large body text.

Aa
1.25rem
FONT_SIZE_7
20px
$font-size-text-x-small

Extra small body text.

Aa
.75rem
FONT_SIZE_2
12px
$font-size-text-xx-small

Extra extra small text.

Aa
.625rem
FONT_SIZE_1
10px

OpacityOpacity

Use these opacity tokens for element transparency.

TokenExample
$opacity-5

50% transparency of an element

0.5
$opacity-8

80% transparency of an element

0.8

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.

TokenExample
$line-height-heading

Unitless line-heights for reusability

Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
1.25
$line-height-reset

Remove extra leading. Unitless line-heights for reusability

Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
1
$line-height-tab

Line heights for tabs

Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
2.5rem
40px
$line-height-text

Unitless line-heights for reusability

Scenester cliche try-hard 3 wolf moon, lomo banjo cardigan meditation retro. Flannel DIY narwhal cornhole, brunch PBR bicycle rights YOLO seitan Marfa fanny pack XOXO locavore.
1.375

SpacingSpacing

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

TokenExample
$border-stroke-width-thick
2px
$border-stroke-width-thin
1px
$border-width-thick
2px
$border-width-thin
1px
$card-footer-padding
0.75rem 1rem
SPACING_SMALL SPACING_MEDIUM
12px 16px
$card-spacing-margin
0.75rem
SPACING_SMALL
12px
$component-spacing-margin
0.75rem
SPACING_SMALL
12px
$component-spacing-padding
1rem
SPACING_MEDIUM
16px
$spacing-large
1.5rem
SPACING_LARGE
24px
$spacing-medium
1rem
SPACING_MEDIUM
16px
$spacing-none
0
SPACING_NONE
$spacing-small
0.75rem
SPACING_SMALL
12px
$spacing-x-large
2rem
SPACING_X_LARGE
32px
$spacing-x-small
0.5rem
SPACING_X_SMALL
8px
$spacing-xx-large
3rem
SPACING_XX_LARGE
48px
$spacing-xx-small
0.25rem
SPACING_XX_SMALL
4px
$spacing-xxx-small
0.125rem
SPACING_XXX_SMALL
2px
$table-cell-spacing
0.25rem 0.5rem
SPACING_XX_SMALL SPACING_X_SMALL
4px 8px
$template-gutters
0.75rem
SPACING_SMALL
12px
$template-profile-gutters
8rem 0.75rem 0.75rem
8rem SPACING_SMALL SPACING_SMALL
128px 12px 12px

RadiusRadius

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

TokenExample
$border-radius-circle

Circle for global use, action icon bgd shape

50%
$border-radius-large
.5rem
8px
$border-radius-medium

Icons in lists, record home icon, unbound input elements

.25rem
4px
$border-radius-pill
15rem
240px
$border-radius-small
.125rem
2px
$page-header-border-radius
0.25rem
4px
$table-border-radius
0 0 0.25rem 0.25rem
0 0 4px 4px

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.

TokenExample
$flex-detail-panel

2 Column Layout - Detail

3
$flex-master-panel

2 Column Layout - Master

7
$height-footer

Action footer menu. Phone 44px; Tablet 50px

3.75rem
60px
$height-header

Header for desktop.

3.125rem
50px
$height-input

Text input height

1.875rem
30px
$height-overflow-start

Space above overflow menu before scrolling.

144px
$height-pill

Minimum height of a pill.

1.625rem
26px
$max-width-action-bar-with-labels

Maximum width for action icons in action bar when there are only 2 items with labels.

320px
$max-width-action-overflow-menu

Maximum width for action overflow menu so that it's not full-screen for tablet.

512px
$size-large

Generic sizing token scale for UI components.

25rem
400px
$size-medium

Generic sizing token scale for UI components.

20rem
320px
$size-small

Generic sizing token scale for UI components.

15rem
240px
$size-x-large

Generic sizing token scale for UI components.

40rem
640px
$size-x-small

Generic sizing token scale for UI components.

12rem
192px
$size-xx-large

Generic sizing token scale for UI components.

60rem
960px
$size-xx-small

Generic sizing token scale for UI components.

6rem
96px
$size-xxx-small

Generic sizing token scale for UI components.

3rem
48px
$square-icon-large-boundary

Anchor: Outer colored tile

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

Anchor: avatar

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

Anchor: Icon content (white shape)

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

Stage left & actions: Outer colored tile

2rem
32px
$square-icon-medium-boundary-alt

Icon button boundary.

2.25rem
36px
$square-icon-medium-content

Stage left & actions: Icon content (white shape)

1rem
16px
$square-icon-medium-content-alt

Alternate medium tap target size

0.875rem
14px
$square-icon-small-boundary

Search Results: Outer colored tile

1.5rem
24px
$square-icon-small-content

Search Results: Icon content (white shape)

.75rem
12px
$square-icon-utility-large

Large utility icon without border.

1.5rem
24px
$square-icon-utility-medium

Medium utility icon without border.

1.25rem
20px
$square-icon-utility-small

Small utility icon without border.

1rem
16px
$square-icon-x-small-boundary

Very small icon button boundary.

1.25rem
20px
$square-icon-x-small-content

Very small icons in icon buttons.

.5rem
8px
$square-icon-xx-small-boundary

Very very small icon button boundary.

1rem
16px
$square-tappable

Tap target Size

2.75rem
44px
$square-tooltip-nubbin

Tooltip nubbin square size

1rem
16px
$width-stage-left
88%

ShadowShadow

Use shadow tokens to set a box shadow.

TokenExample
$card-shadow

Hard dropshadow found on outer cards

0 2px 2px 0 rgba(0, 0, 0, 0.1)
0 2px 2px 0 BLACK_TRANSPARENT_10
$page-header-shadow

Hard dropshadow on page header

0 2px 2px 0 rgba(0, 0, 0, 0.1)
0 2px 2px 0 BLACK_TRANSPARENT_10
$panel-docked-left-shadow

Dropshadow found on docked UI panels when positioned to the left of a viewport

1px 0 3px rgba(0,0,0,0.25)
$panel-docked-right-shadow

Dropshadow found on docked UI panels when positioned to the left of a viewport

-1px 0 3px 0 rgba(0,0,0,0.25)
$shadow-action-overflow-footer

Shadow above overflow menu close bar.

0 -2px 4px #fafaf9
OFFSET_NONE -OFFSET_X_SMALLpx OFFSET_MEDIUMpx PALETTE_GRAY_2
$shadow-button-focus

Custom glow for focus states on UI elements with explicit containers.

0 0 3px #0070D2
OFFSET_NONE OFFSET_NONE OFFSET_SMALLpx SCIENCE_BLUE
$shadow-button-focus-inverse

Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.

0 0 3px #ecebea
OFFSET_NONE OFFSET_NONE OFFSET_SMALLpx PALETTE_GRAY_4
$shadow-docked

Shadow on elements that are docked to the bottom of the viewport.

0 -2px 2px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE -OFFSET_X_SMALLpx OFFSET_X_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_16
$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
$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
$shadow-focus-inset

Inset shadow for editable grid

0 0 2px 2px #1589EE inset
OFFSET_NONE OFFSET_NONE OFFSET_X_SMALLpx OFFSET_X_SMALLpx AZURE inset
$shadow-hard-primary

Hard dropshadow found on general UI elements such as containers

rgba(0, 0, 0, 0.1) 0 2px 0
BLACK_TRANSPARENT_10 0 2px 0
$shadow-header

Shadow for header.

0 2px 4px rgba(0, 0, 0, 0.07)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx BLACK_TRANSPARENT_07
$shadow-image

Shadow on images.

0 1px 1px rgba(0, 0, 0, 0.16)
OFFSET_NONE 1px 1px BLACK_TRANSPARENT_16
$shadow-inline-edit

Shadow to make inline edit card pop out.

0 2px 4px 4px rgba(0, 0, 0, 0.16)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_MEDIUMpx OFFSET_MEDIUMpx BLACK_TRANSPARENT_16
$shadow-reminder

Shadow for notifications that should be elevated above other components but under modals.

0 2px 3px 0 rgba(0, 0, 0, 0.20)
OFFSET_NONE OFFSET_X_SMALLpx OFFSET_SMALLpx OFFSET_NONE BLACK_TRANSPARENT_20
$shadow-soft-primary

Soft dropshadow found on general UI elements such as containers

rgba(0, 0, 0, 0.1) 0 2px 2px
BLACK_TRANSPARENT_10 0 2px 2px
$shadow-soft-primary-active
rgba(0, 0, 0, 0.20) 0 1px 1px
BLACK_TRANSPARENT_20 0 1px 1px
$shadow-soft-primary-hover
rgba(0, 0, 0, 0.20) 0 3px 6px
BLACK_TRANSPARENT_20 0 3px 6px

TimeTime

Use timing tokens for animation durations.

TokenExample
$duration-immediately

0.05 seconds, 3 frames

0.05s
$duration-instantly

0 seconds, 0 frames

0s
$duration-paused

3.2 seconds, 192 frames

3.2s
$duration-promptly

0.2 seconds, 12 frames

0.2s
$duration-quickly

0.1 seconds, 6 frames

0.1s
$duration-slide
0.25s
$duration-slowly

0.4 seconds, 24 frames

0.4s
$duration-toast-medium

9.6 seconds

9.6s
$duration-toast-short

4.8 seconds

4.8s

Media QueryMedia Query

Use media query tokens to set media query width ranges.

TokenExample
$mq-large

Large form factor: devices larger than tablet

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

Medium form factor: devices larger than phone

only screen and (min-width: 48em)
$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)
$mq-small

Small form factor: devices smaller than tablet

only screen and (max-width: 47.9375em)

Z-indexZ-index

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

TokenExample
$z-index-deepdive

Deep dive

-99999
$z-index-default

Default

1
$z-index-dialog

Dialog

6000
$z-index-docked

Docked element

4
$z-index-dropdown

Dropdown

7000
$z-index-modal

Modal

9000
$z-index-overlay

Overlay

8000
$z-index-popup

Popup

5000
$z-index-reminder

Notifications under modals

8500
$z-index-spinner

Spinner

9050
$z-index-sticky

Stickied element

100
$z-index-toast

Toasts

10000