# 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](/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](/docs/platform/aura-platform/guide/tokens-extending.md)