---
schema_version: "1"
id: b05377adfa645016bb665fca62ed8555d56b0897a8a6486b2fd4d017a4e85f22
title: Defining and Using 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-using.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-using.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 649898d6a3b089772e508a4589e7e54a5a6c0ee2900d992f3691693a77c05720
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Defining and Using Tokens

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.

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

## Defining Tokens

Add new tokens as child components of the bundle’s `<aura:tokens>` component. For example:

```nolang
<aura:tokens>
    <aura:token name="myBodyTextFontFace" 
               value="'Salesforce Sans', Helvetica, Arial, sans-serif"/>
    <aura:token name="myBodyTextFontWeight" value="normal"/>
    <aura:token name="myBackgroundColor" value="#f4f6f9"/>
    <aura:token name="myDefaultMargin" value="6px"/>
</aura:tokens>
```

The only allowed attributes for the `<aura:token>` tag are `name` and `value`.

## Using Tokens

Tokens created in the `defaultTokens` bundle are automatically available in components in your namespace. To use a design token, reference it using the `token()` function and the token name in the CSS resource of a component bundle. For example:

```nolang
.THIS p {
    font-family: token(myBodyTextFontFace);
    font-weight: token(myBodyTextFontWeight);
}
```

If you prefer a more concise function name for referencing tokens, you can use the `t()` function instead of `token()`. The two are equivalent. If your token names follow a naming convention or are sufficiently descriptive, the use of the more terse function name won’t affect the clarity of your CSS styles.