> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Variables

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

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](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/variables/cover.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=56b206b2390f205088b956cd3176dfd5)

## 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 a [GitHub repository](https://wonder.design/docs/bring-your-code-onto-the-canvas.md)
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](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/variables/import-from-codebase.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=9acf5e17b5ce7cb0471afb9691f1b91b)

### 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](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/variables/create-manually.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=876906ec716df3be2f6bd11370df0713)

## 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](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/variables/variable-naming.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=c40404a9f46b8bb3dbcee04944831e7b)

## 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](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/variables/use-variables.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=fdcb4d211eb624ebe2acc664cf06711c)

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](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/variables/detach-variable.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=cc716098e6e87a2646d148b6becb2d1e)

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.

> [!NOTE]
>
> **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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.