---
schema_version: "1"
id: 9b041a04bfbee363d717d2ecec387e992226e59e8d8442026179627dc77c3b8e
title: Using Standard Design Tokens
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.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-standard.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 2aa7796393298b46e8a7dc2d881923b0ecdf63a007e18af9a83dc1521c95451b
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

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

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

To add the standard tokens to your org, extend a tokens bundle from the base tokens, like so.

```nolang
<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:

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

-   **[Overriding Standard Tokens (Deprecated)](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-standard-overrides.md)**  


    If you override design tokens for your custom components, replace them with SLDS styling hooks.

-   **[Standard Design Tokens— force:base](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-standard-force-base.md)**  


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

-   **[Standard Design Tokens for Experience Builder Sites](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-standard-communities.md)**  


    Use a subset of the standard design tokens to make your components compatible with the Theme panel in Experience Builder. The Theme panel enables administrators to quickly style an entire site using these properties. Each property in the Theme panel maps to one or more standard design tokens. When an administrator updates a property in the Theme panel, the system automatically updates any Lightning components that use the tokens associated with that branding property.


**See Also**  


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