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.

Background Color

TokenExample
$color-background
rgb(244, 246, 249)
$color-background-alt
rgb(255, 255, 255)
$color-background-alt-2
rgb(238, 241, 246)
$color-background-alt-inverse
rgb(22, 50, 92)
$color-background-row-hover
rgb(244, 246, 249)
$color-background-row-active
rgb(238, 241, 246)
$color-background-row-selected
rgb(240, 248, 252)
$color-background-row-new
rgb(250, 255, 189)
$color-background-inverse
rgb(6, 28, 63)
$color-background-anchor
rgb(244, 246, 249)
$color-background-browser
rgb(84, 105, 141)
$color-background-chrome-mobile
rgb(0, 112, 210)
$color-background-chrome-desktop
rgb(255, 255, 255)
$color-background-customer
rgb(255, 154, 60)
$color-background-highlight
rgb(250, 255, 189)
$color-background-actionbar-icon-utility
rgb(84, 105, 141)
$color-background-indicator-dot
rgb(159, 170, 181)
$color-background-modal
rgb(255, 255, 255)
$color-background-modal-brand
rgb(0, 112, 210)
$color-background-notification-badge
rgb(194, 57, 52)
$color-background-notification-badge-hover
rgb(0, 95, 178)
$color-background-notification-badge-focus
rgb(0, 95, 178)
$color-background-notification-badge-active
rgb(0, 57, 107)
$color-background-notification-new
rgb(240, 248, 252)
$color-background-org-switcher-arrow
rgb(6, 28, 63)
$color-background-payload
rgb(244, 246, 249)
$color-background-shade
rgb(224, 229, 238)
$color-background-stencil
rgb(238, 241, 246)
$color-background-stencil-alt
rgb(224, 229, 238)
$color-background-temp-modal
rgba(126, 140, 153, 0.8)
$color-background-temp-modal-tint
rgba(126, 140, 153, 0.8)
$color-background-temp-modal-tint-alt
rgba(255, 255, 255, 0.75)
$color-background-scrollbar
rgb(224, 229, 238)
$color-background-scrollbar-track
rgb(168, 183, 199)
$color-brand
rgb(21, 137, 238)
$color-brand-dark
rgb(0, 112, 210)
$color-background-button-brand
rgb(0, 112, 210)
$color-background-button-brand-active
rgb(0, 57, 107)
$color-background-button-brand-hover
rgb(0, 95, 178)
$color-background-button-brand-disabled
rgb(224, 229, 238)
$color-background-button-default
rgb(255, 255, 255)
$color-background-button-default-hover
rgb(244, 246, 249)
$color-background-button-default-focus
rgb(244, 246, 249)
$color-background-button-default-active
rgb(238, 241, 246)
$color-background-button-default-disabled
rgb(255, 255, 255)
$color-background-button-icon
rgba(0, 0, 0, 0)
$color-background-button-icon-hover
rgb(244, 246, 249)
$color-background-button-icon-focus
rgb(244, 246, 249)
$color-background-button-icon-active
rgb(238, 241, 246)
$color-background-button-icon-disabled
rgb(255, 255, 255)
$color-background-button-inverse
rgba(0, 0, 0, 0)
$color-background-button-inverse-active
rgba(0, 0, 0, 0.24)
$color-background-button-inverse-disabled
rgba(0, 0, 0, 0)
$color-background-modal-button
rgba(0, 0, 0, 0.07)
$color-background-modal-button-active
rgba(0, 0, 0, 0.16)
$color-background-input
rgb(255, 255, 255)
$color-background-input-active
rgb(255, 255, 255)
$color-background-input-checkbox
rgb(255, 255, 255)
$color-background-input-checkbox-disabled
rgb(216, 221, 230)
$color-background-input-checkbox-selected
rgb(21, 137, 238)
$color-background-input-disabled
rgb(224, 229, 238)
$color-background-input-error
rgb(255, 221, 225)
$color-background-input-search
rgba(0, 0, 0, 0.16)
$color-background-pill
rgb(255, 255, 255)
$color-background-error
rgb(212, 80, 76)
$color-background-error-alt
rgb(234, 130, 136)
$color-background-success
rgb(75, 202, 129)
$color-background-toast
rgb(84, 105, 141)
$color-background-toast-success
rgb(4, 132, 75)
$color-background-toast-error
rgb(194, 57, 52)
$color-background-warning
rgb(255, 183, 93)

Text Color

TokenExample
$color-text-button-brand
Aa
rgb(255, 255, 255)
$color-text-button-brand-hover
Aa
rgb(255, 255, 255)
$color-text-button-brand-active
Aa
rgb(255, 255, 255)
$color-text-button-brand-disabled
Aa
rgb(255, 255, 255)
$color-text-button-default
Aa
rgb(0, 112, 210)
$color-text-button-default-hover
Aa
rgb(0, 112, 210)
$color-text-button-default-active
Aa
rgb(0, 112, 210)
$color-text-button-default-disabled
Aa
rgb(216, 221, 230)
$color-text-button-default-hint
Aa
rgb(159, 170, 181)
$color-text-button-inverse
Aa
rgb(224, 229, 238)
$color-text-button-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
$color-text-icon-default
Aa
rgb(84, 105, 141)
$color-text-icon-default-hint
Aa
rgb(159, 170, 181)
$color-text-icon-default-hover
Aa
rgb(0, 112, 210)
$color-text-icon-default-active
Aa
rgb(0, 57, 107)
$color-text-icon-default-disabled
Aa
rgb(216, 221, 230)
$color-text-icon-inverse
Aa
rgb(255, 255, 255)
$color-text-icon-inverse-hover
Aa
rgb(255, 255, 255)
$color-text-icon-inverse-active
Aa
rgb(255, 255, 255)
$color-text-icon-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
$color-text-label
Aa
rgb(84, 105, 141)
$color-text-placeholder
Aa
rgb(84, 105, 141)
$color-text-placeholder-inverse
Aa
rgb(224, 229, 238)
$color-text-required
Aa
rgb(212, 80, 76)
$color-text-pill
Aa
rgb(0, 112, 210)
$color-text-action-label
Aa
rgb(84, 105, 141)
$color-text-action-label-active
Aa
rgb(22, 50, 92)
$color-text-browser
Aa
rgb(255, 255, 255)
$color-text-browser-active
Aa
rgba(0, 0, 0, 0.4)
$color-text-customer
Aa
rgb(255, 154, 60)
$color-text-default
Aa
rgb(22, 50, 92)
$color-text-error
Aa
rgb(194, 57, 52)
$color-text-input-disabled
Aa
rgb(84, 105, 141)
$color-text-input-focus-inverse
Aa
rgb(22, 50, 92)
$color-text-input-icon
Aa
rgb(159, 170, 181)
$color-text-inverse
Aa
rgb(255, 255, 255)
$color-text-inverse-weak
Aa
rgb(159, 170, 181)
$color-text-inverse-active
Aa
rgb(94, 180, 255)
$color-text-inverse-hover
Aa
rgb(159, 170, 181)
$color-text-link
Aa
rgb(0, 112, 210)
$color-text-link-active
Aa
rgb(0, 57, 107)
$color-text-link-disabled
Aa
rgb(22, 50, 92)
$color-text-link-focus
Aa
rgb(0, 95, 178)
$color-text-link-hover
Aa
rgb(0, 95, 178)
$color-text-link-inverse
Aa
rgb(255, 255, 255)
$color-text-link-inverse-hover
Aa
rgba(255, 255, 255, 0.75)
$color-text-link-inverse-active
Aa
rgba(255, 255, 255, 0.5)
$color-text-link-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
$color-text-modal
Aa
rgb(255, 255, 255)
$color-text-modal-button
Aa
rgb(84, 105, 141)
$color-text-stage-left
Aa
rgb(224, 229, 238)
$color-text-tab-label
Aa
rgb(22, 50, 92)
$color-text-tab-label-selected
Aa
rgb(0, 112, 210)
$color-text-tab-label-hover
Aa
rgb(0, 95, 178)
$color-text-tab-label-focus
Aa
rgb(0, 95, 178)
$color-text-tab-label-active
Aa
rgb(0, 57, 107)
$color-text-tab-label-disabled
Aa
rgb(224, 229, 238)
$color-text-toast
Aa
rgb(224, 229, 238)
$color-text-warning
Aa
rgb(255, 183, 93)
$color-text-weak
Aa
rgb(84, 105, 141)
$color-text-icon-brand
Aa
rgb(0, 112, 210)

Border Color

TokenExample
$color-border
rgb(216, 221, 230)
$color-border-brand
rgb(0, 112, 210)
$color-border-error
rgb(194, 57, 52)
$color-border-success
rgb(75, 202, 129)
$color-border-warning
rgb(255, 183, 93)
$color-border-tab-selected
rgb(0, 112, 210)
$color-border-separator
rgb(244, 246, 249)
$color-border-separator-alt
rgb(216, 221, 230)
$color-border-separator-alt-2
rgb(168, 183, 199)
$color-border-separator-inverse
rgb(42, 66, 108)
$color-border-row-selected
rgb(0, 112, 210)
$color-border-row-selected-hover
rgb(21, 137, 238)
$color-border-hint
rgb(42, 66, 108)
$color-border-selection
rgb(0, 112, 210)
$color-border-selection-hover
rgb(21, 137, 238)
$color-border-selection-active
rgb(244, 246, 249)
$color-border-canvas-element-selection
rgb(94, 180, 255)
$color-border-canvas-element-selection-hover
rgb(0, 95, 178)
$color-border-button-brand
rgb(0, 112, 210)
$color-border-button-brand-disabled
rgba(0, 0, 0, 0)
$color-border-button-default
rgb(216, 221, 230)
$color-border-button-inverse-disabled
rgba(255, 255, 255, 0.15)
$color-border-input
rgb(216, 221, 230)
$color-border-input-active
rgb(21, 137, 238)
$color-border-input-disabled
rgb(168, 183, 199)
$color-border-input-checkbox-selected-checkmark
rgb(255, 255, 255)

Font

TokenExample
$font-family
Aa
'Salesforce Sans', Arial, sans-serif
$font-weight-light
Aa
300
$font-weight-regular
Aa
400
$font-weight-bold
Aa
700

Font Size

TokenExample
$font-size-x-small
Aa
0.625rem
$font-size-small
Aa
0.875rem
$font-size-medium
Aa
1rem
$font-size-large
Aa
1.25rem
$font-size-x-large
Aa
1.5rem
$font-size-xx-large
Aa
2rem

Line Height

TokenExample
$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-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-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.
3rem
$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.
2.125rem
$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.875rem

Spacing

TokenExample
$border-width-thin
1px
$border-width-thick
2px
$spacing-xxx-small
0.125rem
$spacing-xx-small
0.25rem
$spacing-x-small
0.5rem
$spacing-small
0.75rem
$spacing-medium
1rem
$spacing-large
1.5rem
$spacing-x-large
2rem

Radius

TokenExample
$border-radius-small
.125rem
$border-radius-medium
.25rem
$border-radius-large
.5rem
$border-radius-pill
15rem
$border-radius-circle
50%

Sizing

TokenExample
$size-xx-small
6rem
$size-x-small
12rem
$size-small
15rem
$size-medium
20rem
$size-large
25rem
$size-x-large
40rem
$size-xx-large
60rem
$square-icon-utility-small
1rem
$square-icon-utility-medium
1.25rem
$square-icon-utility-large
1.5rem
$square-icon-large-boundary
3rem
$square-icon-large-boundary-alt
5rem
$square-icon-large-content
2rem
$square-icon-medium-boundary
2rem
$square-icon-medium-boundary-alt
2.25rem
$square-icon-medium-content
1rem
$square-icon-small-boundary
1.5rem
$square-icon-small-content
.75rem
$square-icon-x-small-boundary
1.25rem
$square-icon-x-small-content
.5rem

Shadow

TokenExample
$shadow-action-overflow-footer
0 -2px 4px #F4F6F9
$shadow-overlay
0 -2px 4px rgba(0,0,0,.07)
$shadow-drag
0px 2px 4px 0px rgba(0,0,0,.4)
$shadow-button
0px 1px 1px 0px rgba(0,0,0,.05)
$shadow-drop-down
0px 2px 3px 0px rgba(0,0,0,.16)
$shadow-header
0 2px 4px rgba(0,0,0,.07)
$shadow-button-focus
0 0 3px #0070D2
$shadow-button-focus-inverse
0 0 3px #E0E5EE

Atmosphere

TokenExample
$elevation-3-below
-3
$elevation-0
0
$elevation-2
2
$elevation-4
4
$elevation-8
8
$elevation-16
16
$elevation-32
32
$elevation-shadow-3-below
inset 0px 3px 3px 0px rgba(0,0,0,.16)
$elevation-shadow-0
none
$elevation-shadow-2
0px 2px 2px 0px rgba(0,0,0,.16)
$elevation-shadow-4
0px 4px 4px 0px rgba(0,0,0,.16)
$elevation-shadow-8
0px 8px 8px 0px rgba(0,0,0,.16)
$elevation-shadow-16
0px 16px 16px 0px rgba(0,0,0,.16)
$elevation-shadow-32
0px 32px 32px 0px rgba(0,0,0,.16)
$elevation-inverse-shadow-3-below
inset 0px -3px 3px 0px rgba(0,0,0,.16)
$elevation-inverse-shadow-0
none
$elevation-inverse-shadow-2
0px -2px 2px 0px rgba(0,0,0,.16)
$elevation-inverse-shadow-4
0px -4px 4px 0px rgba(0,0,0,.16)
$elevation-inverse-shadow-8
0px -8px 8px 0px rgba(0,0,0,.16)
$elevation-inverse-shadow-16
0px -16px 16px 0px rgba(0,0,0,.16)
$elevation-inverse-shadow-32
0px -32px 32px 0px rgba(0,0,0,.16)

Time

TokenExample
$duration-instantly
0s
$duration-immediately
0.05s
$duration-quickly
0.1s
$duration-promptly
0.2s
$duration-slowly
0.4s
$duration-paused
3.2s

Media Query

TokenExample
$mq-small
only screen and (max-width: 47.9375em)
$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-index

TokenExample
$z-index-toast
10000
$z-index-modal
9000
$z-index-overlay
8000
$z-index-dropdown
7000
$z-index-dialog
6000
$z-index-popup
5000
$z-index-default
1
$z-index-deepdive
-99999

Misc

TokenExample
$square-icon-small
1rem
$square-icon-large
3.125rem
$width-stage-left
88%
$height-footer
3.75rem
$height-header
2.75rem
$height-input
1.875rem
$height-overflow-start
144px
$max-height-action-overflow-menu
628px
$max-height-card-media
144px
$max-height-header-brand
32px
$max-width-action-bar
600px
$max-width-action-bar-item
120px
$max-width-action-bar-with-labels
320px
$max-width-action-overflow-menu
512px
$max-width-header-brand
156px
$square-tappable
2.75rem
$flex-master-panel
7
$square-tooltip
1.25rem
$flex-detail-panel
3
$width-stage-left-collapsed
4rem
$width-stage-left-expanded
15rem
$square-icon-medium
2rem