# Standard Design Tokens for Experience Builder Sites

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.

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

![Experience Builder Theme panel](https://a.sfdcstatic.com/developer-website/sfdocs/platform/media/aura-platform/design_tokens_community_builder.png)

## Available Tokens for Experience Builder Sites

For Experience Builder sites, these standard tokens are available when extending from [`forceCommunity:base`](/docs/platform/aura-platform/guide/tokens-standard-force-base.md#standard-design-tokens-forcebase).

:::important
The standard token values evolve along with SLDS. Available tokens and their values can change without notice.
:::

:::important
Design tokens are not available for navigation branding properties. To add branding to navigation properties, override the navigation bar within the custom components. See [CSS Overrides Migration for the Navigation Menu](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_nav_menu_css.htm).
:::

| These Branding panel properties... | ...map to these standard design tokens                                                                                                                                   |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Text Color                         | `colorTextDefault`                                                                                                                                                       |
| Detail Text Color                  | `colorTextActionLabel`, `colorTextLabel`, `colorTextPlaceholder`, or `colorTextWeak`                                                                                     |
| Action Color                       | `colorBackgroundButtonBrand`, `colorBorderBrand`, `colorBorderButtonBrand`, `colorBrand`, `colorTextBrand`, `colorTextTabLabelSelected`, or `colorTextActionLabelActive` |
| Link Color                         | `colorTextLink`                                                                                                                                                          |
| Overlay Text Color                 | `colorTextButtonBrand`, `colorTextButtonBrandHover`, or `colorTextInverse`                                                                                               |
| Border Color                       | `colorBorder`, `colorBorderButtonDefault`, `colorBorderInput`, or `colorBorderSeparatorAlt`                                                                              |
| Company Logo                       | `brandLogoImage`                                                                                                                                                         |
| Header Image                       | `headerImageUrl`                                                                                                                                                         |
| Login Pages Background Image       | `LoginBackgroundImage`                                                                                                                                                   |
| Primary Font                       | `fontFamily`                                                                                                                                                             |
| Text Case                          | `textTransform`                                                                                                                                                          |

:::note
As of Summer ’18 `colorBackgroundHighlight` is no longer mapped to Action Color.
:::

In addition, the following standard tokens are available for derived theme properties in the template. You can indirectly access derived properties when you update the properties in the Theme panel. For example, if you change the Action Color property in the Theme panel, the system automatically recalculates the Action Color Darker value based on the new value.

| These derived branding properties...            | ...map to these standard design tokens                                                                                  |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| Action Color Darker (Derived from Action Color) | `colorBackgroundButtonBrandActive` or `colorBackgroundButtonBrandHover`                                                 |
| Hover Color (Derived from Action Color)         | `colorBackgroundButtonDefaultHover`, `colorBackgroundRowHover`, `colorBackgroundRowSelected`, or `colorBackgroundShade` |
| Link Color Darker (Derived from Link Color)     | `colorTextLinkActive` or `colorTextLinkHover`                                                                           |

For a complete list of the design tokens available in the SLDS, see [Design Tokens](http://www.lightningdesignsystem.com/resources/tokens/) on the Lightning Design System site.

**See Also**

- [Configure Components for Experience Builder](/docs/platform/aura-platform/guide/components-config-for-builder.md)