WonderDocs
Get started
Wonder Docs

Variables & Themes

Define, import, and manage design tokens for color, typography, and spacing, kept in sync with code.

On this page

Variables (also known as Tokens or CSS Variables) are named values for things like colors, spacing, typography, and much more. You can use them in Wonder to keep your codebase and Wonder file in sync. You can either import variables directly from your codebase or create new variables in Wonder via chat or manually. You can manage variables in the Variables sidebar panel.

The Variables panel in Wonder, showing color tokens with their hex values

Token types

Currently we support the following types of variables:

  • colors
  • spacing
  • gap
  • radius
  • width & height
  • opacity
  • typography
    • font family
    • font size
    • font weight
    • letter spacing
    • line height

We're working hard to add support for more properties and additional features such as grouped variables (e.g. classes) for typography and shadows.

Add / Create variables in Wonder

To use variables in Wonder, you can either import them from your codebase, ask Wonder AI to create them for you, or create them manually by hand.

From your codebase

  1. Connect your Wonder file to your codebase via the GitHub integration
  2. Ask Wonder AI to import the variables from your codebase
  3. Enable the variables panel in the sidebar
Prompting Wonder AI in the chat to check the repo and import its CSS variables as variables

Ask Wonder to generate variables

  1. Open the chat panel
  2. Ask Wonder AI to generate variables based on your context
  3. Enable the variables panel in the sidebar

Create manually

  1. Open the variables panel in the sidebar
  2. Click on the little "+" in the top right corner
  3. Select your variable type
  4. Give it the correct name
  5. Change the value
  6. Optional: with a right-click on the value, you can reference another variable.
The add-variable menu in the Variables panel, listing the variable types you can create

Variable naming

You can organize variables in folders by changing the name to neutral/500. This will create a neutral folder and nest the 500 variable inside it. The raw value of that variable when exported will stay neutral-500. So it is just a visual organizing tool for you and your team.

Renaming a color variable to light/black in the Variables panel, nesting it under a light folder

Use a variable

You can assign variables to the supported properties via the visual reference for variables "". By clicking this icon, a dropdown will appear which lets you search for your desired variable.

The variable picker open on a color property, listing the available color tokens

When attached, the property's input field visually shows you that a variable is attached.

To detach a variable, click the little detach icon which appears when hovering over a field with an attached variable "".

An attached background variable in Background Fill, showing the detach button and a Remove variable tooltip

You can also ask Wonder AI or your agent of choice via MCP to apply tokens to a design, just ask for it in the chat or terminal.

Synced with code

When a repo is connected, variable values track the source: edit them in code or on the canvas and both stay aligned. When you update something, you can also open a PR to update the variables in the codebase. To learn more, see create a pull request.