---
schema_version: "1"
id: 21e0266fcd6a3db414b11f908b81b2f3c7d1710d1c2fb5dc4e70de918988e799
title: Standard Design Tokens for Experience Builder Sites
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-communities.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/tokens-standard-communities.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 7e552498fd3fddfe1019952433c545d8caa95d6607da71d107f1d70872208005
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# 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](https://developer.salesforce.com/docs/platform/aura-platform/guide/styling-hooks.md).

![Experience Builder Theme panel](https://developer.salesforce.com/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`](https://developer.salesforce.com/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](https://developer.salesforce.com/docs/platform/aura-platform/components/components-config-for-builder.md)