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.

Available Tokens

Important

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
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.