---
schema_version: "1"
id: 8d8c0491d61983ac83e92309a3bbd97c9a03f5ffae670d5e9783836a153769cb
title: Styling with Design Tokens and Styling Hooks
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/tokens/tokens-intro.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-intro.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 37f27ddeb2d8d92bcd8af6d4615ca2d840d5b7866d243e0ed85df7097840d25c
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Styling with Design Tokens and Styling Hooks

Capture the essential values of your visual design into named tokens or global styling hooks. Reuse these values throughout your Lightning components CSS resources. Tokens and styling hooks make it easy to ensure that your design is consistent, and even easier to update your design as it evolves.

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

Design tokens and styling hooks are visual design “atoms” for building a design for your components or apps. Specifically, they’re named entities that store visual design attributes: pixel values for margins and spacing, font sizes and families, or hex values for colors. Both design tokens and styling hooks are a terrific way to centralize the low-level values, which you then use to compose the styles that make up the design of your component or app.

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


    Tokens are a type of bundle, just like components, events, and interfaces.

-   **[Create a Tokens Bundle](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-create-bundle.md)**  


    Create a tokens bundle in your org using the Developer Console.

-   **[Defining and Using Tokens](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-using.md)**  


    A token is a name-value pair that you specify using the `<aura:token>` component. Define tokens in a tokens bundle, and then use tokens in your components’ CSS styles resources.

-   **[Using Expressions in Tokens](https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-expressions.md)**  


    Tokens support a restricted set of expressions. Use expressions to reuse one token value in another token, or to combine tokens to form a more complex style property.

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


    Use the `extends` attribute to extend one tokens bundle from another.

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


    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.

-   **[Replace Design Tokens with Styling Hooks](https://developer.salesforce.com/docs/platform/aura-platform/guide/styling-hooks.md)**  


    If you use design tokens to customize the styling of your Aura components, use SLDS global styling hooks instead. Custom components that use design tokens still work, but they no longer receive updates after LWC API version 61.0. By using styling hooks, you can cleanly adopt future product innovations and updated web accessibility standards.