---
schema_version: "1"
id: 07800c7ca8915123d487ab73fea79976a3966f23303042b5bc681f984a53d470
title: Standard Design Tokens— force:base
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/tokens/tokens-standard-force-base.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-standard-force-base.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 913ded141f4fcad00e98d64f55ce895ad003466778326cb4b1235ae25f83530f
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

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

**important:** Salesforce recommends that you use [Styling Hooks](https://www.lightningdesignsystem.com/platforms/lightning/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](https://developer.salesforce.com/docs/platform/aura-platform/guide/styling-hooks.md).

## 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](https://www.lightningdesignsystem.com/design-tokens/) on the Lightning Design System site.

**See Also**  


-   [Extending Tokens Bundles](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-extending.md)