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
$color-background-path-incomplete-hover
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$slider-handle-color-background-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-modal-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-docked-panel-header
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$global-header-color-background
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-notification
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-notification-new
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$brand-band-group-public-default-image-small
$color-background-notification-badge-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-notification-badge-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-contrast-primary
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-background-row-hover
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-background-button-default-focus
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-foreground-primary
rgb(255, 255, 255)
#ffffff
PALETTE_COOL_GRAY_1
$table-color-background-stripes
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-error-dark
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$slider-handle-color-background-active
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$button-color-background-brand-primary
rgb(0, 112, 210)
#0070d2
BLUE_BACKGROUND_PRIMARY
$color-background-info
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-background-temp-modal-tint
rgba(126, 140, 153, 0.8)
REGENT_GREY_TRANSPARENT_80
$brand-band-user-default-image-small
$color-background-button-inverse-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-path-incomplete
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$slider-handle-color-background
rgb(21, 137, 238)
#1589ee
AZURE
$brand-band-color-background-secondary-transparent
rgba(0, 0, 0, 0)
transparent
$color-background-notification-badge
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-indicator-dot
rgb(22, 50, 92)
#16325c
BISCAY
$brand-band-group-private-default-image-medium
$color-background-alt-inverse
rgb(22, 50, 92)
#16325c
BISCAY
$utility-bar-color-background-notification-badge
rgb(212, 80, 76)
#d4504c
VALENCIA
$color-background-input-disabled
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-background-button-default-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-row-new
rgb(217, 255, 223)
#d9ffdf
SNOWY_MINT
$slider-track-color-background-fill
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-toggle-hover
rgb(145, 146, 151)
#919297
PALETTE_COOL_GRAY_8
$brand-band-group-unlisted-default-image
$color-background-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-background-stencil
rgb(242, 242, 243)
#f2f2f3
PALETTE_COOL_GRAY_3
$color-background-alt-2
rgb(242, 242, 243)
#f2f2f3
PALETTE_COOL_GRAY_3
$color-background-progress-ring-content
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-background-button-success-hover
rgb(4, 132, 75)
#04844b
SALEM
$progress-bar-color-background
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-background-utility-bar-hover
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-background-highlight-search
rgb(255, 240, 63)
#fff03f
GORSE
$color-background-path-lost
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-toggle
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-background-button-default
rgb(255, 255, 255)
#ffffff
WHITE_PRIMARY
$badge-color-background-lightest
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$table-color-background-header-focus
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-background-button-icon-disabled
rgb(255, 255, 255)
#ffffff
WHITE_PRIMARY
$color-background-button-icon-focus
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$progress-color-background-shade
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$brand-band-default-image
$color-background-button-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-backdrop
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-brand
rgb(21, 137, 238)
#1589ee
AZURE
$button-color-background-secondary
rgba(255, 255, 255, 0.8)
WHITE_TRANSPARENT_80
$color-background-chrome-desktop
rgb(255, 255, 255)
#ffffff
WHITE
$page-header-color-background
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-button-brand-disabled
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-modal-button-active
rgba(0, 0, 0, 0.16)
BLACK_TRANSPARENT_16
$color-background-button-brand-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-docked-panel
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-guidance
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-input-checkbox-selected
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-button-inverse-active
rgba(0, 0, 0, 0.24)
BLACK_TRANSPARENT_24
$color-background-input-checkbox
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-primary
rgb(255, 255, 255)
#ffffff
PALETTE_COOL_GRAY_1
$color-background-context-bar
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-input-checkbox-disabled
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-background-pill
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-spinner-dot
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-background-brand-primary-focus
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-offline
rgb(62, 64, 65)
#3e4041
PALETTE_COOL_GRAY_11
$brand-band-group-unlisted-default-image-medium
$table-color-background-header-hover
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$brand-band-group-unlisted-default-image-small
$color-background-context-tab-bar-item
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-icon-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$notification-color-background-inverse
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$brand-band-group-private-default-image
$color-background-backdrop-tint
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-background-button-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$vertical-navigation-color-background-shade-row-active
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-brand-primary-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-input-active
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-icon
rgba(0, 0, 0, 0)
TRANSPARENT
$brand-band-color-background-secondary
rgba(0, 0, 0, 0)
transparent
$color-background-path-current-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$table-color-background-header
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-stencil-alt
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-background-scrollbar
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-background-toggle-disabled
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-background-toast
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$vertical-navigation-color-background-shade-row-hover
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-background-brand-primary-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-chrome-mobile
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-button-default-disabled
rgb(255, 255, 255)
#ffffff
WHITE_PRIMARY
$brand-band-color-background-primary-transparent
rgba(0, 0, 0, 0)
transparent
$color-background-customer
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-background-error
rgb(212, 80, 76)
#d4504c
VALENCIA
$color-background-context-bar-brand-accent
rgb(0, 161, 223)
#00a1df
CERULEAN
$slider-color-background-disabled
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-contrast-secondary
rgb(255, 255, 255)
#ffffff
PALETTE_COOL_GRAY_1
$color-background-browser
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-background-icon-waffle
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-path-current
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-button-icon-active
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-alt
rgb(255, 255, 255)
#ffffff
PALETTE_COOL_GRAY_1
$color-background-post
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-background-brand-primary
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-row-selected
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-background-input
rgb(255, 255, 255)
#ffffff
WHITE
$page-header-color-background-alt
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-toast-success
rgb(4, 132, 75)
#04844b
SALEM
$color-background-button-brand-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$split-view-color-background-row-hover
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$badge-color-background-inverse
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-background-image-overlay
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$brand-band-group-private-default-image-small
$color-brand-darker
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-temp-modal
rgb(145, 146, 151)
#919297
PALETTE_COOL_GRAY_8
$color-background-selection
rgb(216, 237, 255)
#d8edff
PATTEN_BLUE
$color-background-button-inverse
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-shade
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-background-modal
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-destructive-active
rgb(135, 5, 0)
#870500
MAROON
$card-color-background
rgb(255, 255, 255)
#ffffff
PALETTE_GRAY_1
$color-background-toggle-active-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-payload
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$brand-band-user-default-image-medium
$brand-band-group-public-default-image
$color-background-modal-button
rgba(0, 0, 0, 0.07)
BLACK_TRANSPARENT_07
$color-background-utility-bar-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-button-success-active
rgb(4, 132, 75)
#04844b
SALEM
$utility-bar-color-background-notification-focus
rgb(201, 199, 197)
#c9c7c5
PALETTE_GRAY_6
$progress-bar-color-background-fill
rgb(94, 180, 255)
#5eb4ff
MALIBU
$button-color-background-primary
rgb(255, 255, 255)
#ffffff
WHITE_PRIMARY
$color-background-toast-error
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$brand-band-user-default-image
$color-background-path-complete-hover
rgb(4, 132, 75)
#04844b
SALEM
$color-background-org-switcher-arrow
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$brand-band-group-public-default-image-medium
$color-background-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-button-default-active
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$slider-handle-color-background-focus
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$slider-track-color-background
rgb(236, 235, 234)
#ecebea
PALETTE_GRAY_4
$color-background-toggle-active
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$progress-color-background
rgb(255, 255, 255)
#ffffff
WHITE
$color-picker-slider-thumb-color-background
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$page-color-background-primary
rgb(255, 255, 255)
#ffffff
PALETTE_COOL_GRAY_1
$color-background-shade-dark
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-background-notification-badge-focus
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-actionbar-icon-utility
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-background-scrollbar-track
rgb(196, 198, 202)
#c4c6ca
PALETTE_COOL_GRAY_6
$color-background-path-complete
rgb(75, 202, 129)
#4bca81
EMERALD
$progress-bar-color-background-fill-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-path-expanded
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-input-error
rgb(255, 221, 225)
#ffdde1
PIPPIN
$brand-band-color-background-primary
rgba(0, 0, 0, 0)
transparent
$color-background-highlight
rgb(250, 255, 189)
#faffbd
LEMON_CHIFFON
$split-view-color-background
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-background-secondary
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2

Text ColorText Color

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

TokenExample
$color-text-action-label
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-link-inverse
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-icon-inverse-hint-hover
Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-input-icon
Aa
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-text-link-inverse-active
Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-text-action-label-active
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-icon-inverse-active
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-tab-label-selected
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-warning
Aa
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-text-icon-inverse-hint
Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$input-static-color
Aa
rgb(43, 40, 38)
#2b2826
PALETTE_GRAY_12
$color-text-tab-label-disabled
Aa
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-text-button-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-input-disabled
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-tertiary
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-link-focus
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-button-default
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-default-disabled
Aa
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-text-link-disabled
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-default
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-inverse-active
Aa
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-text-button-brand-disabled
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-primary
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-link-primary-focus
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-brand-hover
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-link-hover
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-focus
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-success
Aa
rgb(2, 128, 72)
#028048
FUN_GREEN
$color-text-context-bar
Aa
rgb(112, 110, 107)
#706e6b
PALETTE_GRAY_9
$color-text-weak
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-placeholder-inverse
Aa
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-text-icon-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-default-hint-borderless
Aa
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-text-pill
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-link-primary-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-link
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-warning-alt
Aa
rgb(132, 72, 0)
#844800
CINNAMON
$color-text-button-brand
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-tab-label-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-icon-default
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-brand
Aa
rgb(21, 137, 238)
#1589ee
AZURE
$color-text-tab-label-hover
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-button-default-disabled
Aa
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-text-toast
Aa
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-text-toggle-disabled
Aa
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$table-color-text-header
Aa
rgb(81, 79, 77)
#514f4d
PALETTE_GRAY_10
$color-text-browser
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-link-primary-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-error
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-link-primary
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-browser-active
Aa
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-text-tab-label
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-customer
Aa
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-text-icon-default-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-brand-primary
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-link-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-icon-default-hint
Aa
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-text-button-brand-active
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-required
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-icon-brand
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-inverse-hover
Aa
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-text-modal
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-inverse
Aa
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$button-color-text-primary
Aa
rgb(255, 255, 255)
#ffffff
WHITE_PRIMARY
$color-text-modal-button
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-link-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-inverse
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-default-active
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-button-default-hint
Aa
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-text-icon-utility
Aa
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-text-icon-inverse-hover
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-placeholder
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-inverse-weak
Aa
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-text-secondary
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-text-input-focus-inverse
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-stage-left
Aa
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-text-link-inverse-hover
Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-success-inverse
Aa
rgb(75, 202, 129)
#4bca81
EMERALD
$color-text-label
Aa
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9

Border ColorBorder Color

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

TokenExample
$color-border-input-checkbox-selected-checkmark
rgb(255, 255, 255)
#ffffff
WHITE
$color-border-button-inverse-disabled
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-border-icon-inverse-hint-hover
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-picker-slider-thumb-border-color
rgb(81, 79, 77)
#514f4d
PALETTE_GRAY_10
$color-border-context-bar-theme-default-alt
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-border-error-dark
rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$color-border-icon-inverse-hint
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-border-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-info
rgb(107, 109, 112)
#6b6d70
PALETTE_COOL_GRAY_9
$color-border-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-border-context-bar-item
rgba(0, 0, 0, 0.2)
BLACK_TRANSPARENT_20
$color-border-tab-active
rgb(255, 255, 255)
#ffffff
WHITE
$color-stroke-disabled
rgb(233, 234, 236)
#e9eaec
PALETTE_COOL_GRAY_4
$color-border-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-border
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$progress-color-border-shade
rgb(250, 250, 249)
#fafaf9
PALETTE_GRAY_2
$color-border-input-disabled
rgb(196, 198, 202)
#c4c6ca
PALETTE_COOL_GRAY_6
$color-border-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-border-reminder
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-stroke-brand-active
rgb(22, 50, 92)
#16325c
BISCAY
$color-border-button-brand-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$button-color-border-secondary
rgba(255, 255, 255, 0.8)
WHITE_TRANSPARENT_80
$page-header-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-primary
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$progress-color-border-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-button-default
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-border-separator-alt-2
rgb(196, 198, 202)
#c4c6ca
PALETTE_COOL_GRAY_6
$color-border-offline
rgb(62, 64, 65)
#3e4041
PALETTE_COOL_GRAY_11
$color-border-brand-primary-focus
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-border-context-bar-theme-default-active
rgb(243, 242, 242)
#f3f2f2
PALETTE_GRAY_3
$color-border-separator
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-border-brand
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-brand-primary-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-selection-active
rgb(249, 249, 250)
#f9f9fa
PALETTE_COOL_GRAY_2
$color-border-button-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-error
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-selection-hover
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-brand-primary-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-border-input-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-input
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-border-brand-primary
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-toggle-checked
rgb(255, 255, 255)
#ffffff
WHITE
$color-border-row-selected-hover
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-context-bar-theme-default-hover
rgb(11, 35, 153)
#0b2399
TOREA_BAY
$color-border-customer
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-border-selection
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-canvas-element-selection-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-border-path-divider
rgb(255, 255, 255)
#ffffff
WHITE
$card-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-row-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$progress-color-border-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$button-color-border-primary
rgb(216, 221, 230)
#d8dde6
GRAY_BORDER_PRIMARY
$color-border-separator-alt
rgb(217, 219, 221)
#d9dbdd
PALETTE_COOL_GRAY_5
$color-border-context-bar-theme-default
rgb(0, 161, 223)
#00a1df
CERULEAN
$color-border-canvas-element-selection
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-stroke-brand-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-stroke-header-button
rgb(171, 173, 176)
#abadb0
PALETTE_COOL_GRAY_7
$color-border-destructive-active
rgb(135, 5, 0)
#870500
MAROON
$progress-color-border
rgb(255, 255, 255)
#ffffff
WHITE
$color-border-error-alt
rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$page-header-joined-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-stroke-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-tab-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$card-footer-color-border
rgba(0, 0, 0, 0)
transparent
$split-view-color-border
rgb(221, 219, 218)
#dddbda
PALETTE_GRAY_5
$color-border-separator-inverse
rgb(42, 66, 108)
#2a426c
SAN_JUAN

FontFont

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

TokenExample
$font-weight-regular
Aa
400
$tabs-font-weight
Aa
400
$input-static-font-weight
Aa
400
$font-family-heading
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
$font-family-text
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
$card-font-weight
Aa
400
$font-weight-bold
Aa
700
$font-weight-light
Aa
300

Font SizeFont Size

Use these sizing tokens for font sizes.

TokenExample
$font-size-text-small
Aa
.8125rem
FONT_SIZE_3
13px
$page-header-title-font-size
Aa
1.125rem
FONT_SIZE_6
18px
$font-size-heading-x-large
Aa
2rem
FONT_SIZE_9
32px
$color-picker-input-custom-hex-font-size
Aa
0.75rem
12px
$form-label-font-size
Aa
0.75rem
12px
$font-size-text-xx-small
Aa
.625rem
FONT_SIZE_1
10px
$font-size-heading-large
Aa
1.5rem
FONT_SIZE_8
24px
$font-size-text-x-large
Aa
1.25rem
FONT_SIZE_7
20px
$font-size-heading-xx-small
Aa
.625rem
FONT_SIZE_1
10px
$input-static-font-size
Aa
.8125rem
FONT_SIZE_3
13px
$font-size-heading-x-small
Aa
.75rem
FONT_SIZE_2
12px
$font-size-text-large
Aa
1.125rem
FONT_SIZE_6
18px
$font-size-text-medium
Aa
1rem
FONT_SIZE_5
16px
$font-size-text-x-small
Aa
.75rem
FONT_SIZE_2
12px
$font-size-heading-small
Aa
.875rem
FONT_SIZE_4
14px

OpacityOpacity

Use these opacity tokens for element transparency.

TokenExample
$opacity-8
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-reset
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-salespath
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.5rem
24px
$line-height-button-small
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.75rem
28px
$line-height-tab
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-heading
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-text
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
$line-height-button
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.875rem
30px

SpacingSpacing

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

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

RadiusRadius

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

TokenExample
$page-header-border-radius
0
$border-radius-circle
50%
$border-radius-small
.125rem
2px
$border-radius-medium
.25rem
4px
$border-radius-pill
15rem
240px
$table-border-radius
0
$button-border-radius
.25rem
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
$square-icon-global-identity-icon
1.25rem
20px
$square-icon-utility-large
1.5rem
24px
$progress-bar-height
0.125rem
2px
$brand-band-image-height-small
6rem
96px
$size-xx-small
6rem
96px
$square-icon-small-boundary
1.5rem
24px
$color-picker-swatches-width
13.3rem
212.8px
$color-picker-thumb-width
0.375rem
6px
$color-picker-range-indicator-size
0.75rem
12px
$progress-ring-width
0.1875rem
3px
$size-small
15rem
240px
$square-toggle-slider
1.25rem
20px
$height-context-bar
2.5rem
40px
$square-icon-utility-medium
1.25rem
20px
$height-toggle
1.5rem
24px
$width-toggle
3rem
48px
$square-icon-x-small-boundary
1.25rem
20px
$color-picker-swatch-size
1.25rem
20px
$square-icon-utility-small
1rem
16px
$height-sales-path
2rem
32px
$square-icon-medium-boundary
2rem
32px
$color-picker-slider-height
1.5rem
24px
$square-icon-large-content
2rem
32px
$height-pill
1.625rem
26px
$split-view-width
25rem
400px
$brand-band-scrim-height
3.125rem
50px
$square-icon-large-boundary
3rem
48px
$size-medium
20rem
320px
$square-icon-medium-content
1rem
16px
$slider-track-width
100%
$size-x-large
40rem
640px
$square-icon-x-small-content
.5rem
8px
$brand-band-image-height-medium
12.5rem
200px
$slider-track-height
4px
$brand-band-image-height-large
18.75rem
300px
$square-icon-medium-boundary-alt
2.25rem
36px
$slider-handle-size
1rem
16px
$size-xx-large
60rem
960px
$color-picker-selector-width
14rem
224px
$square-icon-large-boundary-alt
5rem
80px
$size-large
25rem
400px
$square-icon-small-content
.75rem
12px
$square-icon-xx-small-boundary
1rem
16px
$square-icon-medium-content-alt
0.875rem
14px
$height-docked-bar
2.5rem
40px
$color-picker-input-custom-hex-width
4.2rem
67.2px
$color-picker-range-height
5rem
80px
$width-stage-left
88%
$height-header
3.125rem
50px
$max-width-action-overflow-menu
512px
$square-tappable
2.75rem
44px
$square-tooltip-nubbin
1rem
16px
$flex-master-panel
7
$height-input
1.875rem
30px
$height-footer
3.75rem
60px
$max-width-action-bar-with-labels
320px
$flex-detail-panel
3
$height-overflow-start
144px

ShadowShadow

Use shadow tokens to set a box shadow.

TokenExample
$page-header-shadow
none
$shadow-soft-primary-hover
none
$shadow-button-focus
0 0 3px #0070D2
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!SCIENCE_BLUE
$shadow-header
0 2px 4px rgba(0, 0, 0, 0.07)
OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07
$shadow-soft-primary
none
$shadow-hard-primary
none
$shadow-action-overflow-footer
0 -2px 4px #F9F9FA
OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!PALETTE_COOL_GRAY_2
$card-shadow
none
$shadow-reminder
0 2px 0 0 rgba(0, 0, 0, 0.1)
OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!OFFSET_NONE} {!BLACK_TRANSPARENT_10
$shadow-docked
0 -2px 2px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16
$shadow-inline-edit
0 2px 4px 4px rgba(0, 0, 0, 0.16)
OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_16
$shadow-drag
0 2px 4px 0 rgba(0, 0, 0, 0.40)
OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_40
$shadow-drop-down
0 2px 3px 0 rgba(0, 0, 0, 0.16)
OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_SMALL}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16
$shadow-focus-inset
0 0 2px 2px #1589EE inset
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!AZURE} inset
$slider-handle-shadow
rgba(0, 0, 0, 0.16) 0 2px 3px
BLACK_TRANSPARENT_16} 0 2px 3px
$shadow-soft-primary-active
none
$shadow-button-focus-inverse
0 0 3px #E9EAEC
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_COOL_GRAY_4
$shadow-image
0 1px 1px rgba(0, 0, 0, 0.16)
OFFSET_NONE} 1px 1px {!BLACK_TRANSPARENT_16

TimeTime

Use timing tokens for animation durations.

TokenExample
$duration-quickly
0.1s
$duration-immediately
0.05s
$duration-toast-medium
9.6s
$duration-slowly
0.4s
$duration-toast-short
4.8s
$duration-paused
3.2s
$duration-promptly
0.2s
$duration-slide
0.25s

Media QueryMedia Query

Use media query tokens to set media query width ranges.

TokenExample
$mq-medium
only screen and (min-width: 48em)
$mq-medium-landscape
only screen and (min-width: 48em) and (min-aspect-ratio: 4/3)
$mq-large
only screen and (min-width: 64.0625em)

Z-indexZ-index

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

TokenExample
$z-index-docked
4
$z-index-reminder
8500
$z-index-spinner
9050
$z-index-default
1
$z-index-deepdive
-99999
$z-index-toast
10000
$z-index-dialog
6000
$z-index-popup
5000
$z-index-modal
9000
$z-index-sticky
100
$z-index-overlay
8000