The standard tokens available are a subset of the design tokens offered in the Salesforce Lightning Design System (SLDS). The following tokens are available when extending from force:base.
important: Salesforce recommends that you use Styling Hooks instead of design tokens if possible. While existing design tokens still work, styling hooks are the future of customization for Lightning web components and Aura components. See Replace Design Tokens with Styling Hooks.
Available Tokens
important: The standard token values evolve along with SLDS. Available tokens and their values can change without notice. Token values presented here are for example only.
| Token Name | Example Value |
|---|---|
borderWidthThin |
1px |
borderWidthThick |
2px |
spacingXxxSmall |
0.125rem |
spacingXxSmall |
0.25rem |
spacingXSmall |
0.5rem |
spacingSmall |
0.75rem |
spacingMedium |
1rem |
spacingLarge |
1.5rem |
spacingXLarge |
2rem |
varSpacingXxSmall |
0.25rem |
varSpacingXSmall |
0.5rem |
varSpacingSmall |
0.75rem |
varSpacingMedium |
1rem |
varSpacingLarge |
1.5rem |
varSpacingXLarge |
2rem |
varSpacingXxLarge |
3rem |
varSpacingVerticalXxSmall |
0.25rem |
varSpacingVerticalXSmall |
0.5rem |
varSpacingVerticalSmall |
0.75rem |
varSpacingVerticalMedium |
1rem |
varSpacingVerticalLarge |
1.5rem |
varSpacingVerticalXLarge |
2rem |
varSpacingVerticalXxLarge |
3rem |
varSpacingHorizontalXxSmall |
0.25rem |
varSpacingHorizontalXSmall |
0.5rem |
varSpacingHorizontalSmall |
0.75rem |
varSpacingHorizontalMedium |
1rem |
varSpacingHorizontalLarge |
1.5rem |
varSpacingHorizontalXLarge |
2rem |
varSpacingHorizontalXxLarge |
3rem |
sizeXxSmall |
6rem |
sizeXSmall |
12rem |
sizeSmall |
15rem |
sizeMedium |
20rem |
sizeLarge |
25rem |
sizeXLarge |
40rem |
sizeXxLarge |
60rem |
squareIconUtilitySmall |
1rem |
squareIconUtilityMedium |
1.25rem |
squareIconUtilityLarge |
1.5rem |
squareIconLargeBoundary |
3rem |
squareIconLargeBoundaryAlt |
5rem |
squareIconLargeContent |
2rem |
squareIconMediumBoundary |
2rem |
squareIconMediumBoundaryAlt |
2.25rem |
squareIconMediumContent |
1rem |
squareIconSmallBoundary |
1.5rem |
squareIconSmallContent |
.75rem |
squareIconXSmallBoundary |
1.25rem |
squareIconXSmallContent |
.5rem |
fontWeightLight |
300 |
fontWeightRegular |
400 |
fontWeightBold |
700 |
lineHeightHeading |
1.25 |
lineHeightText |
1.375 |
lineHeightReset |
1 |
lineHeightTab |
2.5rem |
fontFamily |
'Salesforce Sans', Arial, sans-serif |
borderRadiusSmall |
.125rem |
borderRadiusMedium |
.25rem |
borderRadiusLarge |
.5rem |
borderRadiusPill |
15rem |
borderRadiusCircle |
50% |
colorBorder |
rgb(216, 221, 230) |
colorBorderBrand |
rgb(21, 137, 238) |
colorBorderError |
rgb(194, 57, 52) |
colorBorderSuccess |
rgb(75, 202, 129) |
colorBorderWarning |
rgb(255, 183, 93) |
colorBorderTabSelected |
rgb(0, 112, 210) |
colorBorderSeparator |
rgb(244, 246, 249) |
colorBorderSeparatorAlt |
rgb(216, 221, 230) |
colorBorderSeparatorInverse |
rgb(42, 66, 108) |
colorBorderRowSelected |
rgb(0, 112, 210) |
colorBorderRowSelectedHover |
rgb(21, 137, 238) |
colorBorderButtonBrand |
rgb(0, 112, 210) |
colorBorderButtonBrandDisabled |
rgba(0, 0, 0, 0) |
colorBorderButtonDefault |
rgb(216, 221, 230) |
colorBorderButtonInverseDisabled |
rgba(255, 255, 255, 0.15) |
colorBorderInput |
rgb(216, 221, 230) |
colorBorderInputActive |
rgb(21, 137, 238) |
colorBorderInputDisabled |
rgb(168, 183, 199) |
colorBorderInputCheckboxSelectedCheckmark |
rgb(255, 255, 255) |
colorBackground |
rgb(244, 246, 249) |
colorBackgroundAlt |
rgb(255, 255, 255) |
colorBackgroundAltInverse |
rgb(22, 50, 92) |
colorBackgroundRowHover |
rgb(244, 246, 249) |
colorBackgroundRowActive |
rgb(238, 241, 246) |
colorBackgroundRowSelected |
rgb(240, 248, 252) |
colorBackgroundRowNew |
rgb(217, 255, 223) |
colorBackgroundInverse |
rgb(6, 28, 63) |
colorBackgroundBrowser |
rgb(84, 105, 141) |
colorBackgroundChromeMobile |
rgb(0, 112, 210) |
colorBackgroundChromeDesktop |
rgb(255, 255, 255) |
colorBackgroundHighlight |
rgb(250, 255, 189) |
colorBackgroundModal |
rgb(255, 255, 255) |
colorBackgroundModalBrand |
rgb(0, 112, 210) |
colorBackgroundNotificationBadge |
rgb(194, 57, 52) |
colorBackgroundNotificationBadgeHover |
rgb(0, 95, 178) |
colorBackgroundNotificationBadgeFocus |
rgb(0, 95, 178) |
colorBackgroundNotificationBadgeActive |
rgb(0, 57, 107) |
colorBackgroundNotificationNew |
rgb(240, 248, 252) |
colorBackgroundPayload |
rgb(244, 246, 249) |
colorBackgroundShade |
rgb(224, 229, 238) |
colorBackgroundStencil |
rgb(238, 241, 246) |
colorBackgroundStencilAlt |
rgb(224, 229, 238) |
colorBackgroundScrollbar |
rgb(224, 229, 238) |
colorBackgroundScrollbarTrack |
rgb(168, 183, 199) |
colorBrand |
rgb(21, 137, 238) |
colorBrandDark |
rgb(0, 112, 210) |
colorBackgroundModalButton |
rgba(0, 0, 0, 0.07) |
colorBackgroundModalButtonActive |
rgba(0, 0, 0, 0.16) |
colorBackgroundInput |
rgb(255, 255, 255) |
colorBackgroundInputActive |
rgb(255, 255, 255) |
colorBackgroundInputCheckbox |
rgb(255, 255, 255) |
colorBackgroundInputCheckboxDisabled |
rgb(216, 221, 230) |
colorBackgroundInputCheckboxSelected |
rgb(21, 137, 238) |
colorBackgroundInputDisabled |
rgb(224, 229, 238) |
colorBackgroundInputError |
rgb(255, 221, 225) |
colorBackgroundPill |
rgb(255, 255, 255) |
colorBackgroundToast |
rgba(84, 105, 141, 0.95) |
colorBackgroundToastSuccess |
rgb(4, 132, 75) |
colorBackgroundToastError |
rgba(194, 57, 52, 0.95) |
shadowDrag |
0 2px 4px 0 rgba(0, 0, 0, 0.40) |
shadowDropDown |
0 2px 3px 0 rgba(0, 0, 0, 0.16) |
shadowHeader |
0 2px 4px rgba(0, 0, 0, 0.07) |
shadowButtonFocus |
0 0 3px #0070D2 |
shadowButtonFocusInverse |
0 0 3px #E0E5EE |
colorTextActionLabel |
rgb(84, 105, 141) |
colorTextActionLabelActive |
rgb(22, 50, 92) |
colorTextBrand |
rgb(21, 137, 238) |
colorTextBrowser |
rgb(255, 255, 255) |
colorTextBrowserActive |
rgba(0, 0, 0, 0.4) |
colorTextDefault |
rgb(22, 50, 92) |
colorTextError |
rgb(194, 57, 52) |
colorTextInputDisabled |
rgb(84, 105, 141) |
colorTextInputFocusInverse |
rgb(22, 50, 92) |
colorTextInputIcon |
rgb(159, 170, 181) |
colorTextInverse |
rgb(255, 255, 255) |
colorTextInverseWeak |
rgb(159, 170, 181) |
colorTextInverseActive |
rgb(94, 180, 255) |
colorTextInverseHover |
rgb(159, 170, 181) |
colorTextLink |
rgb(0, 112, 210) |
colorTextLinkActive |
rgb(0, 57, 107) |
colorTextLinkDisabled |
rgb(22, 50, 92) |
colorTextLinkFocus |
rgb(0, 95, 178) |
colorTextLinkHover |
rgb(0, 95, 178) |
colorTextLinkInverse |
rgb(255, 255, 255) |
colorTextLinkInverseHover |
rgba(255, 255, 255, 0.75) |
colorTextLinkInverseActive |
rgba(255, 255, 255, 0.5) |
colorTextLinkInverseDisabled |
rgba(255, 255, 255, 0.15) |
colorTextModal |
rgb(255, 255, 255) |
colorTextModalButton |
rgb(84, 105, 141) |
colorTextStageLeft |
rgb(224, 229, 238) |
colorTextTabLabel |
rgb(22, 50, 92) |
colorTextTabLabelSelected |
rgb(0, 112, 210) |
colorTextTabLabelHover |
rgb(0, 95, 178) |
colorTextTabLabelFocus |
rgb(0, 95, 178) |
colorTextTabLabelActive |
rgb(0, 57, 107) |
colorTextTabLabelDisabled |
rgb(224, 229, 238) |
colorTextToast |
rgb(224, 229, 238) |
colorTextWeak |
rgb(84, 105, 141) |
colorTextIconBrand |
rgb(0, 112, 210) |
colorTextButtonBrand |
rgb(255, 255, 255) |
colorTextButtonBrandHover |
rgb(255, 255, 255) |
colorTextButtonBrandActive |
rgb(255, 255, 255) |
colorTextButtonBrandDisabled |
rgb(255, 255, 255) |
colorTextButtonDefault |
rgb(0, 112, 210) |
colorTextButtonDefaultHover |
rgb(0, 112, 210) |
colorTextButtonDefaultActive |
rgb(0, 112, 210) |
colorTextButtonDefaultDisabled |
rgb(216, 221, 230) |
colorTextButtonDefaultHint |
rgb(159, 170, 181) |
colorTextButtonInverse |
rgb(224, 229, 238) |
colorTextButtonInverseDisabled |
rgba(255, 255, 255, 0.15) |
colorTextIconDefault |
rgb(84, 105, 141) |
colorTextIconDefaultHint |
rgb(159, 170, 181) |
colorTextIconDefaultHover |
rgb(0, 112, 210) |
colorTextIconDefaultActive |
rgb(0, 57, 107) |
colorTextIconDefaultDisabled |
rgb(216, 221, 230) |
colorTextIconInverse |
rgb(255, 255, 255) |
colorTextIconInverseHover |
rgb(255, 255, 255) |
colorTextIconInverseActive |
rgb(255, 255, 255) |
colorTextIconInverseDisabled |
rgba(255, 255, 255, 0.15) |
colorTextLabel |
rgb(84, 105, 141) |
colorTextPlaceholder |
rgb(84, 105, 141) |
colorTextPlaceholderInverse |
rgb(224, 229, 238) |
colorTextRequired |
rgb(194, 57, 52) |
colorTextPill |
rgb(0, 112, 210) |
durationInstantly |
0s |
durationImmediately |
0.05s |
durationQuickly |
0.1s |
durationPromptly |
0.2s |
durationSlowly |
0.4s |
durationPaused |
3.2s |
colorBackgroundButtonBrand |
rgb(0, 112, 210) |
colorBackgroundButtonBrandActive |
rgb(0, 57, 107) |
colorBackgroundButtonBrandHover |
rgb(0, 95, 178) |
colorBackgroundButtonBrandDisabled |
rgb(224, 229, 238) |
colorBackgroundButtonDefault |
rgb(255, 255, 255) |
colorBackgroundButtonDefaultHover |
rgb(244, 246, 249) |
colorBackgroundButtonDefaultFocus |
rgb(244, 246, 249) |
colorBackgroundButtonDefaultActive |
rgb(238, 241, 246) |
colorBackgroundButtonDefaultDisabled |
rgb(255, 255, 255) |
colorBackgroundButtonIcon |
rgba(0, 0, 0, 0) |
colorBackgroundButtonIconHover |
rgb(244, 246, 249) |
colorBackgroundButtonIconFocus |
rgb(244, 246, 249) |
colorBackgroundButtonIconActive |
rgb(238, 241, 246) |
colorBackgroundButtonIconDisabled |
rgb(255, 255, 255) |
colorBackgroundButtonInverse |
rgba(0, 0, 0, 0) |
colorBackgroundButtonInverseActive |
rgba(0, 0, 0, 0.24) |
colorBackgroundButtonInverseDisabled |
rgba(0, 0, 0, 0) |
lineHeightButton |
1.875rem |
lineHeightButtonSmall |
1.75rem |
colorBackgroundAnchor |
rgb(244, 246, 249) |
For a complete list of the design tokens available in the SLDS, see Design Tokens on the Lightning Design System site.
See Also