🖌️Design Tokens

Design Tokens enable the creation of consistent designs by packaging up multiple styles so that on any instance you add that Token, those styles will show up and stay in sync.

Why Tokens instead of classes?

If you’ve ever made a website with CSS or with Webflow, you’ve used “classes” to manage your website’s layout and visual styles. Sometimes we love classes. They give us a way to re-use styles which saves us valuable time. However, they have some limitations that make classes very frustrating to use in the context of visual development tools.

Scenario: You’re building a website with Webflow. You have two separate elements, a button, and a card, and you want to give them the same box shadow. Buttons and cards have unique styles so they each already have a unique class. What do you do?

• A: Manually configure the box shadow on the existing Button and Card classes individually. With this option you’re doing the same thing twice. It would save time if we could reuse the box shadow styles.

• B: Apply the Box Shadow class on top of the existing Button and Card classes, making a combo class. Now you can’t edit the styles on Button or Card without first removing the Box Shadow class. Don’t forget to re-apply it! And good luck managing the classes on a different breakpoint. To edit the Button or Card classes you must first remove the Box Shadow combo class, then Webflow will kick you back to the desktop breakpoint, then you select the intended breakpoint again, then make your style changes, then re-apply the combo class. Experienced Webflowers know the pain.

There’s a better way. It’s Design Tokens.

What are Design Tokens?

Design Tokens are everything that you wish classes would be - a way to reuse styles without limitations.

• Mix-and-match Tokens freely: You can apply as many Tokens as you want to an instance in any order. There is no combo class silliness and no limitations with breakpoints.

• Universal format: We didn’t invent Design Tokens. There is an independent spec (by the Design Tokens Community Group) that defines a data format for Tokens, meaning you can potentially import and export tokens between multiple apps. Soon you’ll be able to sync tokens between Webstudio and Figma through the Tokens Studio for Figma plugin!

How to use Tokens

The workflow for styling Tokens in Webstudio is nearly the same as styling classes in Webflow, except better.

First, it's recommended to create CSS variables to use within the Tokens.

You can style your site using Local or Tokens like this:

	The top of the Style Panel contains Style Sources. Here is where you can add new Tokens, select existing ones, and switch to Local styling.
	Want to style something immediately without making a Token? Use the Local Style Source. Styles applied on Local only impact that instance, but you can easily convert styles from Local to a new Token.
	To make a new Token, click inside the Style Sources input, type a name, and hit enter.
	The Token you’re currently styling will be blue in the Style Sources input, while others are gray. Simply click on another style source to select it. Any styling you do will be applied to the current Token and reflected across all instances of that Token.
	Hover the label for a helpful description of where the styles on this property come from. In this case, we see that the width value that we just applied is coming from the Base breakpoint, the “new token” token on the Body instance. See Label Colors to understand what the different colors mean.
	A circle in the Token indicates that there are no styles applied to the Token. This will go away as soon as you apply a style. For Local, a dot is added to the center of the circle when styles are added.

Exporting human-readable classes

By default, Tokens are converted to atomic styles, significantly reducing the amount of CSS, ultimately leading to a faster-loading website.

While the majority of users aren't concerned with how the classes are output and should use atomic styles, they can be optionally disabled.

See Atomic CSS for more info.

Advanced Token Techniques

Token Composition

Combine multiple tokens to create flexible, modular designs:

1. Base token: Contains core styles (e.g., "card" with padding, background, border-radius)

2. Modifier tokens: Contains variations (e.g., "small" for smaller padding, "featured" for highlight border)

Apply both to an instance: The styles merge, with later tokens overriding earlier ones for conflicting properties.

Example: A card system

• "card" token: padding, background, border-radius

• "card-small" token: smaller padding

• "card-featured" token: accent border color

Apply "card" + "card-featured" for a featured card variant.

Token Priority (Cascading)

When multiple tokens define the same property, the rightmost token wins:

[card] [small] [featured]
       ↑        ↑
       │        └── Takes priority for any shared properties
       └── Overrides card for any shared properties

This allows you to build up styles modularly while maintaining precise control.

Local Overrides

To override token styles for a specific instance:

1. Apply your tokens

2. Drag Local to the end (rightmost position)

3. Add your override styles on Local

Since Local is rightmost, its styles take priority over the tokens.

Resetting Values

To remove a style from a specific token or Local:

1. Select the token in Style Sources

2. Hover over the property label

3. Click the reset icon (or use Option+click on Mac)

This removes the property from that specific token, allowing inherited values to show through.

Duplicating Tokens

Create variations from existing tokens:

1. Select the token in Style Sources

2. Open the token menu (three dots)

3. Choose Duplicate

4. Rename and modify the duplicate

This is faster than creating tokens from scratch when building design systems.

Related

• CSS Variables – Define reusable style values to use within Tokens

• Anatomy of the Webstudio Builder – Learn about the Style Panel and Style Sources

• Project Settings – Configure atomic CSS output

• Commands & Search – Quickly manage and search Tokens