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

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

To add the standard tokens to your org, extend a tokens bundle from the base tokens, like so.
<aura:tokens extends="force:base">
    <!-- your own tokens here -->
</aura:tokens>
Once added to defaultTokens (or another tokens bundle that defaultTokens extends) you can reference tokens from force:base just like your own tokens, using the token() function and token name. For example:
.THIS p {
    font-family: token(fontFamily);
    font-weight: token(fontWeightRegular);
}

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.