Standard Design Tokens— force:base

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.

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.

Important

Available Tokens

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.

Important

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

Extending Tokens Bundles