Newer Version Available
Standard Design Tokens
Salesforce exposes a set of
“base” tokens that you can access in your component style resources. Use these “standard tokens”
to mimic the look-and-feel of the Salesforce Lightning Design System (SLDS)
in your own custom components. As the SLDS evolves, components that are styled using the
standard design tokens will evolve along with it.
To add the standard tokens to your org, you extend your
org’s tokens bundle from the base tokens, like
so.
1<aura:tokens extends="force:base">
2 <!-- your own tokens here -->
3</aura:tokens>
Once added to defaultTokens, you can reference tokens from force:base just like your own tokens, using the token() function and token name. For
example:
1.THIS p {
2 font-family: token(fontFamily);
3 font-weight: token(fontWeightRegular);
4}You can mix-and-match your tokens with the standard tokens. It’s a best practice to develop a naming system for your own tokens to make them easily distinguishable from standard tokens. Consider prefixing your token names with “my”, or something else easily identifiable.
Overriding standard token values is undefined behavior and unsupported. If you create a token with the same name as a standard token, it overrides the standard token’s value in some contexts, and has no effect in others. This behavior will change in a future release. Don’t use it.
Available Tokens
This developer preview of Lightning tokens makes available a subset of the design tokens offered in the Salesforce Lightning Design System. The
tokens available when extending from force:base are the
following.
| Token Name | Example Value |
|---|---|
| mqSmall | only screen and (max-width: 47.9375em) |
| mqSmall | only screen and (max-width: 47.9375em) |
| mqMedium | only screen and (min-width: 48em) |
| mqMediumLandscape | only screen and (min-width: 48em) and (min-aspect-ratio: 4/3) |
| mqLarge | only screen and (min-width: 64.0625em) |
| 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) |
| colorBackgroundAnchor | rgb(244, 246, 249) |
| 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) |
| borderWidthThin | 1px |
| borderWidthThick | 2px |
| 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) |
| 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) |
| 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) |
| colorBackgroundModalButton | rgba(0, 0, 0, 0.07) |
| colorBackgroundModalButtonActive | rgba(0, 0, 0, 0.16) |
| colorBorderButtonBrand | rgb(0, 112, 210) |
| colorBorderButtonBrandDisabled | rgba(0, 0, 0, 0) |
| colorBorderButtonDefault | rgb(216, 221, 230) |
| colorBorderButtonInverseDisabled | rgba(255, 255, 255, 0.15) |
| fontFamily | 'Salesforce Sans', Arial, sans-serif |
| fontWeightLight | 300 |
| fontWeightRegular | 400 |
| fontWeightBold | 700 |
| lineHeightHeading | 1.25 |
| lineHeightText | 1.375 |
| lineHeightReset | 1 |
| lineHeightTab | 3rem |
| lineHeightButton | 2.125rem |
| lineHeightButtonSmall | 1.75rem |
| 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) |
| 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) |
| colorBorderInput | rgb(216, 221, 230) |
| colorBorderInputActive | rgb(21, 137, 238) |
| colorBorderInputDisabled | rgb(168, 183, 199) |
| colorBorderInputCheckboxSelectedCheckmark | rgb(255, 255, 255) |
| colorBackgroundToast | rgb(84, 105, 141) |
| colorBackgroundToastSuccess | rgb(4, 132, 75) |
| colorBackgroundToastError | rgb(194, 57, 52) |
| shadowDrag | 0px 2px 4px 0px rgba(0,0,0,.4) |
| shadowDropDown | 0px 2px 3px 0px rgba(0,0,0,.16) |
| shadowHeader | 0 2px 4px rgba(0,0,0,.07) |
| shadowButtonFocus | 0 0 3px #0070D2 |
| shadowButtonFocusIE11 | 0 0 4px #0070D2 |
| shadowButtonFocusInverse | 0 0 3px #E0E5EE |
| 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 |
| spacingXxxSmall | 0.125rem |
| spacingXxSmall | 0.25rem |
| spacingXSmall | 0.5rem |
| spacingSmall | 0.75rem |
| spacingMedium | 1rem |
| spacingLarge | 1.5rem |
| spacingXLarge | 2rem |
| 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) |
| durationInstantly | 0s |
| durationImmediately | 0.05s |
| durationQuickly | 0.1s |
| durationPromptly | 0.2s |
| durationSlowly | 0.4s |
| durationPaused | 3.2s |
For a complete list of the design tokens available in the SLDS, see Design Tokens on the Lightning Design System site.