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
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-alt
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-alt-2
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-alt-inverse
rgb(22, 50, 92)
#16325c
BISCAY
$color-background-row-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-row-active
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-row-selected
rgb(240, 248, 252)
#f0f8fc
FOAM
$color-background-row-new
rgb(217, 255, 223)
#d9ffdf
SNOWY_MINT
$color-background-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-browser
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-chrome-mobile
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-chrome-desktop
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-customer
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-background-highlight
rgb(250, 255, 189)
#faffbd
LEMON_CHIFFON
$color-background-highlight-search
rgb(255, 240, 63)
#fff03f
GORSE
$color-background-selection
rgb(216, 237, 255)
#d8edff
PATTEN_BLUE
$color-background-actionbar-icon-utility
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-indicator-dot
rgb(22, 50, 92)
#16325c
BISCAY
$color-background-spinner-dot
rgb(159, 170, 181)
#9faab5
CASPER
$color-background-modal
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-modal-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-notification-badge
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-notification-badge-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-notification-badge-focus
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-notification-badge-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-notification
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-notification-new
rgb(240, 248, 252)
#f0f8fc
FOAM
$color-background-org-switcher-arrow
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-payload
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-post
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-utility-bar-hover
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-utility-bar-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-shade
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-shade-dark
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-background-stencil
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-stencil-alt
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-temp-modal
rgba(126, 140, 153, 0.8)
REGENT_GREY_TRANSPARENT_80
$color-background-temp-modal-tint
rgba(126, 140, 153, 0.8)
REGENT_GREY_TRANSPARENT_80
$color-background-backdrop
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-background-backdrop-tint
rgba(240, 248, 252, 0.75)
FOAM_TRANSPARENT_75
$color-background-scrollbar
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-scrollbar-track
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-brand
rgb(21, 137, 238)
#1589ee
AZURE
$color-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-brand-darker
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-toggle
rgb(159, 170, 181)
#9faab5
CASPER
$color-background-toggle-disabled
rgb(159, 170, 181)
#9faab5
CASPER
$color-background-toggle-hover
rgb(126, 140, 153)
#7e8c99
REGENT_GREY
$color-background-toggle-active
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-toggle-active-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-modal-button
rgba(0, 0, 0, 0.07)
BLACK_TRANSPARENT_07
$color-background-modal-button-active
rgba(0, 0, 0, 0.16)
BLACK_TRANSPARENT_16
$color-background-input
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-input-active
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-input-checkbox
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-input-checkbox-disabled
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-background-input-checkbox-selected
rgb(21, 137, 238)
#1589ee
AZURE
$color-background-input-disabled
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-input-error
rgb(255, 221, 225)
#ffdde1
PIPPIN
$color-background-pill
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-image-overlay
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-background-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-background-destructive-active
rgb(135, 5, 0)
#870500
MAROON
$color-background-info
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-error
rgb(212, 80, 76)
#d4504c
VALENCIA
$color-background-error-dark
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-offline
rgb(68, 68, 68)
#444444
TUNDORA
$color-background-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-background-toast
rgba(84, 105, 141, 0.95)
KASHMIR_BLUE_TRANSPARENT_95
$color-background-toast-success
rgba(4, 132, 75, 0.95)
SALEM_TRANSPARENT_95
$color-background-toast-error
rgba(194, 57, 52, 0.95)
FLUSH_MAHOGANY_TRANSPARENT_95
$color-background-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-background-button-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-button-success-hover
rgb(4, 132, 75)
#04844b
SALEM
$color-background-button-success-active
rgb(4, 132, 75)
#04844b
SALEM
$color-background-button-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-button-brand-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-button-brand-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-button-brand-disabled
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-button-default
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-default-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-button-default-focus
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-button-default-active
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-button-default-disabled
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-icon
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-button-icon-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-button-icon-focus
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-button-icon-active
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-button-icon-disabled
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-inverse
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-button-inverse-active
rgba(0, 0, 0, 0.24)
BLACK_TRANSPARENT_24
$color-background-button-inverse-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$card-color-background
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-docked-panel-header
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-context-bar
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-context-bar-brand-accent
rgb(0, 161, 223)
#00a1df
CERULEAN
$color-background-context-bar-item-hover
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-context-bar-item-active
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-context-tab-bar-item
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-icon-waffle
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-page-header
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-path-complete
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-path-complete-hover
rgba(4, 132, 75, 0.95)
SALEM_TRANSPARENT_95
$color-background-path-current
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-path-current-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-path-incomplete
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-path-incomplete-hover
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-background-path-lost
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-guidance
rgb(250, 250, 251)
#fafafb
ATHENS_GRAY
$progress-color-background
rgb(255, 255, 255)
#ffffff
WHITE
$progress-color-background-shade
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$progress-bar-color-background
rgb(216, 221, 230)
#d8dde6
GEYSER
$progress-bar-color-background-fill
rgb(94, 180, 255)
#5eb4ff
MALIBU
$split-view-color-background
rgb(51, 62, 79)
#333e4f
OXFORD_BLUE
$split-view-color-background-row-hover
rgb(65, 76, 94)
#414c5e
RIVER_BED

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(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-action-label-active
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-brand
Aa
rgb(21, 137, 238)
#1589ee
AZURE
$color-text-browser
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-browser-active
Aa
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-text-customer
Aa
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-text-default
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-error
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-input-disabled
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-input-focus-inverse
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-input-icon
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$color-text-inverse
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-inverse-weak
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$color-text-inverse-active
Aa
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-text-inverse-hover
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$color-text-link
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-link-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-link-disabled
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-link-focus
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-link-hover
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-link-inverse
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-link-inverse-hover
Aa
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-text-link-inverse-active
Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-text-link-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-modal
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-modal-button
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-stage-left
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-tab-label
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-tab-label-selected
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-tab-label-hover
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-focus
Aa
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-text-tab-label-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-tab-label-disabled
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-toast
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-warning
Aa
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-text-warning-alt
Aa
rgb(132, 72, 0)
#844800
CINNAMON
$color-text-weak
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-icon-brand
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-utility
Aa
rgb(159, 170, 181)
#9faab5
HIT_GREY
$color-text-toggle-disabled
Aa
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-text-button-brand
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-brand-hover
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-brand-active
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-brand-disabled
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-default
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-active
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-button-default-disabled
Aa
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-text-button-default-hint
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$color-text-button-inverse
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-button-inverse-disabled
Aa
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-text-icon-default
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-icon-default-hint
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$color-text-icon-inverse-hint
Aa
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-text-icon-default-hint-borderless
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-icon-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-default-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-icon-default-disabled
Aa
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-text-icon-inverse
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-icon-inverse-hover
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-icon-inverse-active
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-icon-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-label
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-placeholder
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-placeholder-inverse
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-required
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-text-pill
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-success
Aa
rgb(2, 128, 72)
#028048
FUN_GREEN
$color-text-success-inverse
Aa
rgb(75, 202, 129)
#4bca81
EMERALD
$color-text-context-bar
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE

Border ColorBorder Color

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

TokenExample
$color-border
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-border-brand
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-customer
rgb(255, 154, 60)
#ff9a3c
TANGERINE
$color-border-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-border-destructive-active
rgb(135, 5, 0)
#870500
MAROON
$color-border-info
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-border-error
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-border-error-alt
rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$color-border-error-dark
rgb(234, 130, 136)
#ea8288
DEEP_BLUSH
$color-border-offline
rgb(68, 68, 68)
#444444
TUNDORA
$color-border-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-border-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-border-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-border-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-border-tab-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-tab-active
rgb(255, 255, 255)
#ffffff
WHITE
$color-border-separator
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-border-separator-alt
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-border-separator-alt-2
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-border-separator-inverse
rgb(42, 66, 108)
#2a426c
SAN_JUAN
$color-border-row-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-row-selected-hover
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-selection
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-selection-hover
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-selection-active
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-border-canvas-element-selection
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-border-canvas-element-selection-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-border-icon-inverse-hint
rgba(255, 255, 255, 0.5)
WHITE_TRANSPARENT_50
$color-border-icon-inverse-hint-hover
rgba(255, 255, 255, 0.75)
WHITE_TRANSPARENT_75
$color-border-button-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-button-brand-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$color-border-button-default
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-border-button-inverse-disabled
rgba(255, 255, 255, 0.15)
WHITE_TRANSPARENT_15
$color-border-input
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-border-input-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-input-disabled
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-border-input-checkbox-selected-checkmark
rgb(255, 255, 255)
#ffffff
WHITE
$color-border-toggle-checked
rgb(255, 255, 255)
#ffffff
WHITE
$color-stroke-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-stroke-brand-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-stroke-brand-active
rgb(22, 50, 92)
#16325c
BISCAY
$color-stroke-disabled
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-stroke-header-button
rgb(159, 170, 181)
#9faab5
CASPER
$color-border-context-bar-item
rgba(0, 0, 0, 0.2)
BLACK_TRANSPARENT_20
$color-border-context-bar-theme-default
rgb(0, 161, 223)
#00a1df
CERULEAN
$color-border-context-bar-theme-default-alt
rgb(223, 228, 238)
#dfe4ee
MYSTIC
$color-border-context-bar-theme-default-hover
rgb(11, 35, 153)
#0b2399
TOREA_BAY
$color-border-context-bar-theme-default-active
rgb(223, 228, 238)
#dfe4ee
MYSTIC
$color-border-path-divider
rgb(255, 255, 255)
#ffffff
WHITE
$progress-color-border
rgb(255, 255, 255)
#ffffff
WHITE
$progress-color-border-shade
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$progress-color-border-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$progress-color-border-active
rgb(21, 137, 238)
#1589ee
AZURE
$split-view-color-border
rgb(44, 54, 70)
#2c3646
EBONY_CLAY

FontFont

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

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

Font SizeFont Size

Use these sizing tokens for font sizes.

TokenExample
$font-size-text-xx-small
Aa
.625rem
FONT_SIZE_1
10px
$font-size-text-x-small
Aa
.75rem
FONT_SIZE_2
12px
$font-size-text-small
Aa
.8125rem
FONT_SIZE_3
13px
$font-size-text-medium
Aa
1rem
FONT_SIZE_5
16px
$font-size-text-large
Aa
1.125rem
FONT_SIZE_6
18px
$font-size-text-x-large
Aa
1.25rem
FONT_SIZE_7
20px
$font-size-heading-xx-small
Aa
.625rem
FONT_SIZE_1
10px
$font-size-heading-x-small
Aa
.75rem
FONT_SIZE_2
12px
$font-size-heading-small
Aa
.875rem
FONT_SIZE_4
14px
$font-size-heading-medium
Aa
1.125rem
FONT_SIZE_6
18px
$font-size-heading-large
Aa
1.5rem
FONT_SIZE_8
24px
$font-size-heading-x-large
Aa
2rem
FONT_SIZE_9
32px

OpacityOpacity

Use these opacity tokens for element transparency.

TokenExample
$opacity-5
0.5
$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-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.5
$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.
2.5rem
40px
$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
$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-toggle
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.3rem
20.8px
$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

SpacingSpacing

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

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

RadiusRadius

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

TokenExample
$border-radius-small
.125rem
2px
$border-radius-medium
.25rem
4px
$border-radius-large
.5rem
8px
$border-radius-pill
15rem
240px
$border-radius-circle
50%

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
$size-xx-small
6rem
96px
$size-x-small
12rem
192px
$size-small
15rem
240px
$size-medium
20rem
320px
$size-large
25rem
400px
$size-x-large
40rem
640px
$size-xx-large
60rem
960px
$square-icon-utility-small
1rem
16px
$square-icon-utility-medium
1.25rem
20px
$square-icon-utility-large
1.5rem
24px
$square-icon-large-boundary
3rem
48px
$square-icon-large-boundary-alt
5rem
80px
$square-icon-large-content
2rem
32px
$square-icon-medium
2rem
32px
$square-icon-medium-boundary
2rem
32px
$square-icon-medium-boundary-alt
2.25rem
36px
$square-icon-medium-content
1rem
16px
$square-icon-medium-content-alt
0.875rem
14px
$square-icon-small-boundary
1.5rem
24px
$square-icon-small-content
.75rem
12px
$square-icon-x-small-boundary
1.25rem
20px
$square-icon-x-small-content
.5rem
8px
$square-icon-xx-small-boundary
1rem
16px
$square-icon-xx-small-content
.875rem
14px
$height-pill
1.625rem
26px
$height-docked-bar
2.5rem
40px
$square-toggle-slider
1.25rem
20px
$width-toggle
3rem
48px
$height-toggle
1.5rem
24px
$square-icon-global-identity-icon
1.25rem
20px
$height-context-bar
2.5rem
40px
$height-sales-path
2rem
32px
$progress-bar-height
0.125rem
2px
$width-stage-left
88%
$height-footer
3.75rem
60px
$height-header
3.125rem
50px
$height-input
1.875rem
30px
$height-overflow-start
144px
$max-height-action-overflow-menu
628px
$max-width-action-bar
600px
$max-width-action-bar-item
120px
$max-width-action-bar-with-labels
320px
$max-width-action-overflow-menu
512px
$square-tappable
2.75rem
44px
$flex-master-panel
7
$square-tooltip-nubbin
1rem
16px
$flex-detail-panel
3

ShadowShadow

Use shadow tokens to set a box shadow.

TokenExample
$shadow-action-overflow-footer
0 -2px 4px #F4F6F9
OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!LINK_WATER
$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-header
0 2px 4px rgba(0, 0, 0, 0.07)
OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!BLACK_TRANSPARENT_07
$shadow-button-focus
0 0 3px #0070D2
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!SCIENCE_BLUE
$shadow-button-focus-inverse
0 0 3px #E0E5EE
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!STEAM
$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-focus-inset
0 0 2px 2px #1589EE inset
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_X_SMALL}px {!OFFSET_X_SMALL}px {!AZURE} inset
$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-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-instantly
0s
$duration-immediately
0.05s
$duration-quickly
0.1s
$duration-promptly
0.2s
$duration-slowly
0.4s
$duration-paused
3.2s
$duration-toast-short
4.8s
$duration-toast-medium
9.6s
$duration-slide
0.25s

Media QueryMedia Query

Use media query tokens to set media query width ranges.

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-indexZ-index

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

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-sticky
100
$z-index-default
1
$z-index-deepdive
-99999