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

# Variables Manager: Create and Manage Design Tokens

> Use AtomicKit's Variables Manager to create, edit, and delete Elementor global CSS variables for colors, fonts, sizes, and custom tokens across your site.

The Variables Manager lets you create and maintain the CSS design tokens that power your Elementor site. Changes apply globally — update a color variable once and every element using that variable updates automatically across all pages. This makes the Variables Manager the best place to start when setting up a new design system or rebranding an existing one.

## Variable Types

AtomicKit organises variables into four tabs. Each tab is tailored to a specific kind of token with an input designed for that value type.

<CardGroup cols={2}>
  <Card title="Colors" icon="droplet">
    Enter a hex color string directly or use the live color picker that syncs alongside the text field. Any valid hex value is accepted, including shorthand (`#fff`).
  </Card>

  <Card title="Fonts" icon="font">
    Choose from a curated Google Fonts dropdown: **Inter**, **Roboto**, **Outfit**, **Playfair Display**, **Fira Code**, and **System Default**. The selected family is saved as a CSS variable you can reference in Typography settings.
  </Card>

  <Card title="Sizes" icon="ruler-horizontal">
    Enter numeric values with any CSS unit (`px`, `rem`, `em`, `%`). Use this tab for consistent spacing, line heights, border radii, or any scalar measurement in your system.
  </Card>

  <Card title="Custom" icon="code">
    Write freeform values including viewport units (`vw`, `vh`), `clamp()` expressions, or any complex CSS value. Use this tab for fluid typography scales, responsive spacing, and other non-trivial tokens.
  </Card>
</CardGroup>

## Creating a Variable

<Steps>
  <Step title="Open the Variables Manager">
    In your WordPress admin, go to **Elementor → AtomicKit** and select the **Variables Manager** tab.
  </Step>

  <Step title="Select the correct tab">
    Choose **Colors**, **Fonts**, **Sizes**, or **Custom** depending on the type of token you want to create.
  </Step>

  <Step title="Click Add and enter a name">
    Click the **Add Variable** button. Enter a descriptive name using lowercase letters and hyphens — for example, `primary-color` or `spacing-lg`. This name becomes the CSS custom property name (e.g. `--primary-color`).
  </Step>

  <Step title="Set the value">
    Enter the value in the provided input. For Colors, the live color picker updates as you type. For Fonts, select from the dropdown. For Sizes and Custom, type the value directly.
  </Step>

  <Step title="Save the variable">
    Click **Save**. The variable is now registered in Elementor and available in every design control that supports CSS variables.
  </Step>
</Steps>

<Tip>
  Use a naming convention that reflects role, not appearance. Prefer `--color-primary` over `--blue-500` so the token stays meaningful if you rebrand. Hyphens are required — spaces and underscores are not valid in CSS custom property names.
</Tip>

## Editing a Variable

To change the value of an existing variable, click its row in the Variables Manager list. The input field becomes editable inline. Make your change and press **Save**. The updated value propagates immediately to every Elementor element that references the variable.

Renaming a variable (changing its name, not just its value) generates a new CSS custom property. If you rename, update any hardcoded references in your classes or custom CSS to use the new name.

## Deleting Variables

### Delete a Single Variable

Click the **Delete** icon (trash can) next to any variable row. The variable is removed from Elementor immediately. Any classes or elements that were referencing it will fall back to the browser default for that property.

### Wipe All Variables

The **Wipe All** button removes every variable in the currently active tab in a single action.

<Warning>
  **Wipe All is destructive and cannot be undone** from within the Variables Manager. Create a [Snapshot](/plugin/snapshot-history) before using this action so you can restore your variables if needed.
</Warning>

## Using Variables in Elementor

Once a variable is saved, you can reference it anywhere Elementor exposes a design control:

1. Open any element's style settings in the Elementor editor.
2. Look for the **CSS Variable** picker icon in a supported control (color swatches, typography fields, spacing inputs).
3. Select the variable from the picker — Elementor inserts the `var(--your-variable-name)` reference automatically.

Variables are also available in the AtomicKit [Class Creator](/plugin/class-creator), where you can drag them from the Design Tokens sidebar directly into property value fields.

<Tip>
  Combine variables with utility classes for a two-layer design system: variables define your raw tokens (colors, sizes, fonts), and classes apply those tokens as patterns (e.g. a `btn-primary` class that references `--color-primary` and `--spacing-md`). This keeps both layers easy to update independently.
</Tip>