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(216, 221, 230)
#d8dde6
GEYSER
$color-background-modal-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-docked-panel-header
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-notification
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-notification-new
rgb(240, 248, 252)
#f0f8fc
FOAM
$color-background-context-bar-item-hover
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-notification-badge-active
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-background-notification-badge-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-context-bar-item-active
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-row-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-button-default-focus
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-error-dark
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-info
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-temp-modal-tint
rgba(126, 140, 153, 0.8)
REGENT_GREY_TRANSPARENT_80
$color-background-button-inverse-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-path-incomplete
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-notification-badge
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-indicator-dot
rgb(22, 50, 92)
#16325c
BISCAY
$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(224, 229, 238)
#e0e5ee
STEAM
$color-background-button-default-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-row-new
rgb(217, 255, 223)
#d9ffdf
SNOWY_MINT
$color-background-toggle-hover
rgb(126, 140, 153)
#7e8c99
REGENT_GREY
$color-background-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-background-stencil
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-alt-2
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-warning
rgb(255, 183, 93)
#ffb75d
KOROMIKO
$color-background-button-success-hover
rgb(4, 132, 75)
#04844b
SALEM
$color-background-page-header
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$progress-bar-color-background
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-background-utility-bar-hover
rgb(224, 229, 238)
#e0e5ee
STEAM
$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(159, 170, 181)
#9faab5
CASPER
$color-background-button-default
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-background-button-icon-disabled
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-icon-focus
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$progress-color-background-shade
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-brand-dark
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$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
$color-background-chrome-desktop
rgb(255, 255, 255)
#ffffff
WHITE
$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-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$color-background-guidance
rgb(250, 250, 251)
#fafafb
ATHENS_GRAY
$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-context-bar
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-input-checkbox-disabled
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-background-pill
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-spinner-dot
rgb(159, 170, 181)
#9faab5
CASPER
$color-background-offline
rgb(68, 68, 68)
#444444
TUNDORA
$color-background-context-tab-bar-item
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-icon-hover
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-background-backdrop-tint
rgba(240, 248, 252, 0.75)
FOAM_TRANSPARENT_75
$color-background-button-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$vertical-navigation-color-background-shade-row-active
rgb(232, 236, 243)
#e8ecf3
SOLITUDE
$color-background-input-active
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-button-icon
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-path-current-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-stencil-alt
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-scrollbar
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-background-toggle-disabled
rgb(159, 170, 181)
#9faab5
CASPER
$color-background-toast
rgba(84, 105, 141, 0.95)
KASHMIR_BLUE_TRANSPARENT_95
$vertical-navigation-color-background-shade-row-hover
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-chrome-mobile
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-background-button-default-disabled
rgb(255, 255, 255)
#ffffff
WHITE
$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
$color-background-browser
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-icon-waffle
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$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(253, 253, 253)
#fdfdfd
ROMANCE
$color-background-post
rgb(247, 249, 251)
#f7f9fb
CATSKILL_WHITE
$color-background-row-selected
rgb(240, 248, 252)
#f0f8fc
FOAM
$color-background-input
rgb(255, 255, 255)
#ffffff
WHITE
$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(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-image-overlay
rgba(0, 0, 0, 0.4)
BLACK_TRANSPARENT_40
$color-brand-darker
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-temp-modal
rgba(126, 140, 153, 0.8)
REGENT_GREY_TRANSPARENT_80
$color-background-selection
rgb(216, 237, 255)
#d8edff
PATTEN_BLUE
$color-background-button-inverse
rgba(0, 0, 0, 0)
TRANSPARENT
$color-background-shade
rgb(224, 229, 238)
#e0e5ee
STEAM
$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
WHITE
$color-background-toggle-active-hover
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-payload
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$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(168, 183, 199)
#a8b7c7
CADET_BLUE
$progress-bar-color-background-fill
rgb(94, 180, 255)
#5eb4ff
MALIBU
$color-background-toast-error
rgba(194, 57, 52, 0.95)
FLUSH_MAHOGANY_TRANSPARENT_95
$color-background-path-complete-hover
rgb(4, 132, 75)
#04844b
SALEM
$color-background-org-switcher-arrow
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-inverse
rgb(6, 28, 63)
#061c3f
DEEP_COVE
$color-background-button-default-active
rgb(238, 241, 246)
#eef1f6
WHITE_LILAC
$color-background-toggle-active
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$progress-color-background
rgb(255, 255, 255)
#ffffff
WHITE
$color-background-shade-dark
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-background-notification-badge-focus
rgb(0, 95, 178)
#005fb2
ENDEAVOUR
$color-background-actionbar-icon-utility
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-background-scrollbar-track
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-background-path-complete
rgb(75, 202, 129)
#4bca81
EMERALD
$color-background-input-error
rgb(255, 221, 225)
#ffdde1
PIPPIN
$color-background-highlight
rgb(250, 255, 189)
#faffbd
LEMON_CHIFFON
$split-view-color-background
rgb(228, 233, 243)
#e4e9f3
MYSTIC

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-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(159, 170, 181)
#9faab5
CASPER
$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
$color-text-tab-label-disabled
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-button-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-input-disabled
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$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(216, 221, 230)
#d8dde6
GEYSER
$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-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(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-weak
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-placeholder-inverse
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-icon-default-hover
Aa
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-text-icon-default-hint-borderless
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-pill
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(84, 105, 141)
#54698d
KASHMIR_BLUE
$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(216, 221, 230)
#d8dde6
GEYSER
$color-text-toast
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-toggle-disabled
Aa
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-text-browser
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-error
Aa
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$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-link-active
Aa
rgb(0, 57, 107)
#00396b
MIDNIGHT_BLUE
$color-text-icon-default-hint
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$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(159, 170, 181)
#9faab5
CASPER
$color-text-modal
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-button-inverse
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$color-text-modal-button
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$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(159, 170, 181)
#9faab5
CASPER
$color-text-icon-utility
Aa
rgb(159, 170, 181)
#9faab5
HIT_GREY
$color-text-icon-inverse-hover
Aa
rgb(255, 255, 255)
#ffffff
WHITE
$color-text-placeholder
Aa
rgb(84, 105, 141)
#54698d
KASHMIR_BLUE
$color-text-inverse-weak
Aa
rgb(159, 170, 181)
#9faab5
CASPER
$color-text-input-focus-inverse
Aa
rgb(22, 50, 92)
#16325c
BISCAY
$color-text-stage-left
Aa
rgb(224, 229, 238)
#e0e5ee
STEAM
$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(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-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-border-context-bar-theme-default-alt
rgb(228, 233, 243)
#e4e9f3
MYSTIC
$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(84, 105, 141)
#54698d
KASHMIR_BLUE
$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(224, 229, 238)
#e0e5ee
STEAM
$color-border-destructive-hover
rgb(166, 26, 20)
#a61a14
TABASCO
$color-border
rgb(216, 221, 230)
#d8dde6
GEYSER
$progress-color-border-shade
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-border-input-disabled
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-border-success-dark
rgb(4, 132, 75)
#04844b
SALEM
$color-stroke-brand-active
rgb(22, 50, 92)
#16325c
BISCAY
$color-border-button-brand-disabled
rgba(0, 0, 0, 0)
TRANSPARENT
$color-border-destructive
rgb(194, 57, 52)
#c23934
FLUSH_MAHOGANY
$progress-color-border-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-button-default
rgb(216, 221, 230)
#d8dde6
GEYSER
$color-border-separator-alt-2
rgb(168, 183, 199)
#a8b7c7
CADET_BLUE
$color-border-offline
rgb(68, 68, 68)
#444444
TUNDORA
$color-border-success
rgb(75, 202, 129)
#4bca81
EMERALD
$color-border-context-bar-theme-default-active
rgb(228, 233, 243)
#e4e9f3
MYSTIC
$color-border-separator
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$color-border-brand
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-selection-active
rgb(244, 246, 249)
#f4f6f9
LINK_WATER
$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-input-active
rgb(21, 137, 238)
#1589ee
AZURE
$color-border-input
rgb(216, 221, 230)
#d8dde6
GEYSER
$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
$color-border-row-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$progress-color-border-hover
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-separator-alt
rgb(216, 221, 230)
#d8dde6
GEYSER
$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(159, 170, 181)
#9faab5
CASPER
$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
$color-stroke-brand
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$color-border-tab-selected
rgb(0, 112, 210)
#0070d2
SCIENCE_BLUE
$split-view-color-border
rgb(206, 213, 225)
#ced5e1
MISCHKA
$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-family-heading
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
$font-family-text
Aa
'Salesforce Sans', Arial, sans-serif
SANS_SERIF
$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
$font-size-heading-x-large
Aa
2rem
FONT_SIZE_9
32px
$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
$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
$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
$spacing-small
0.75rem
SPACING_SMALL
12px
$card-spacing-large
1.5rem
SPACING_LARGE
24px
$border-stroke-width-thick
2px
$border-width-thick
2px
$spacing-medium
1rem
SPACING_MEDIUM
16px
$table-spacing-x-small
0.5rem
SPACING_X_SMALL
8px
$spacing-none
0
SPACING_NONE
$spacing-x-large
2rem
SPACING_X_LARGE
32px
$spacing-xx-large
3rem
SPACING_XX_LARGE
48px
$card-spacing-small
0.75rem
SPACING_SMALL
12px
$spacing-large
1.5rem
SPACING_LARGE
24px

RadiusRadius

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

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

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
$size-xx-small
6rem
96px
$square-icon-small-boundary
1.5rem
24px
$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
$square-icon-utility-small
1rem
16px
$height-sales-path
2rem
32px
$square-icon-medium-boundary
2rem
32px
$square-icon-large-content
2rem
32px
$height-pill
1.625rem
26px
$square-icon-large-boundary
3rem
48px
$size-medium
20rem
320px
$square-icon-medium-content
1rem
16px
$size-x-large
40rem
640px
$square-icon-x-small-content
.5rem
8px
$square-icon-medium-boundary-alt
2.25rem
36px
$size-xx-large
60rem
960px
$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
$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
$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-action-overflow-footer
0 -2px 4px #F4F6F9
OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!LINK_WATER
$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
$shadow-button-focus-inverse
0 0 3px #E0E5EE
OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!STEAM
$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-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