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 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 or from the Style Tokens panel.