> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://zuora.ferndocs.com/_mcp/server.

# Style tokens in Experience Builder

> Style tokens in Experience Builder are reusable, named values that centralize design properties like color, typography, and spacing so you can maintain consistent styling and easily update branding across your application.

Style tokens in Experience Builder are reusable, named values that centralize design properties like color, typography, and spacing so you can maintain consistent styling and easily update branding across your application.

Style tokens are reusable, named values that help you maintain consistent styling across your application. Instead of defining individual style values such as colors, font sizes, or spacing in multiple places, you define them once and reuse them throughout your project.

When you update a token, all components that reference that token automatically reflect the change.

## Benefits of style tokens

Use style tokens to:

* Maintain consistent styling across pages and components
* Centralize design values such as colors, typography, and spacing
* Simplify branding and theme updates
* Reduce repetitive styling
* Support scalable design systems

## Supported token types

You can create tokens for the following style properties:

* Colors
* Font size
* Font family
* Line height
* Opacity
* Spacing, including margins, padding, width, and height

You can also create tokens that reference other tokens. This lets you build semantic tokens on top of foundational design values.

You can create a style token from the [Design panel](/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/create-a-style-token-from-design-panel) or from the [Style Tokens panel](/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/create-a-style-token-from-style-tokens-panel).

> Style tokens in Experience Builder are reusable, named values that centralize design properties like color, typography, and spacing so you can maintain consistent styling and easily update branding across your application.

## Docs

- [Style token organization and semantic tokens](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/style-token-organization-and-semantic-tokens.md): Learn how to organize style tokens into logical groups and create semantic tokens that reference foundation tokens to keep your design system consistent and easy to manage.
- [Create a style token from the Design panel](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/create-a-style-token-from-design-panel.md): Create a reusable style token from the Design panel so you can apply consistent styling across your project.
- [Create a style token from the Style Tokens panel](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/create-a-style-token-from-style-tokens-panel.md): Create a style token from the Style Tokens panel and add it to the project token library.
- [Apply a style token](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/apply-a-style-token.md): Apply a style token to a component or element so its style property references a reusable token instead of a hard-coded value.
- [Share tokens across projects](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/style-tokens-in-experience-builder/share-tokens-across-projects.md): Reuse a shared token library across multiple projects while allowing local overrides.