> ## 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.
# Elementor Variables: Shared Design Tokens in AtomicKit
> Learn how Elementor Variables act as shared design tokens and how they work alongside AtomicKit utility classes to keep your site consistent.
Elementor Variables are shared design values you define once and reuse anywhere across your site. When you pair them with AtomicKit utility classes, you get a system where every styling decision — from a brand color to a base spacing unit — flows from a single, authoritative source. This page explains what variables are, how to create and manage them in Elementor, and how to decide when to use a variable versus when to reach for a utility class.
## What variables are and why they help
A variable in Elementor works like a design token: it gives a name to a raw value (a hex color, a font family, a pixel size) so that name can be referenced everywhere instead of the raw value itself. This approach brings several practical benefits to your workflow:
* **Consistency across pages and components.** Every element that references the same variable stays visually in sync automatically.
* **Easier global updates.** Change the variable's value once in the Variables Manager and every element using it updates instantly — no hunting through individual widgets.
* **Cleaner custom CSS.** When shared values come from named tokens, your CSS selectors reference meaningful names rather than scattered magic numbers.
* **Alignment between Elementor controls and AtomicKit utilities.** Variables bridge Elementor's visual controls and the utility classes AtomicKit provides, keeping both sources of styling in agreement.
Elementor currently supports three categories of variables: **Color**, **Font**, and **Size**. Each maps to CSS custom properties that Elementor and AtomicKit can both consume.
***
## How to use variables in Elementor
Select any widget or container in the Elementor editor. In a supported control — such as a color swatch, font selector, or size field — look for the **variable icon** (a small token or link icon) at the edge of the control. Click it to open the variables popup window.
The popup gives you several options:
* **Search** the list of available variables by name to find an existing one quickly.
* **Select a variable** from the list to apply it to the current control. The control will now reference the variable rather than a fixed value.
* **Create a new variable** by clicking the **+** button, entering a name and value, and confirming. The new variable is immediately available to all controls.
Use descriptive names that reflect the role of the value, not the value itself. Prefer `color-brand-primary` over `blue-500` so the name stays meaningful if you later change the brand color.
For a full overview of all variables on your site, click the **settings cog** icon in the variables popup to open the **Variables Manager**. From this central panel you can:
* **Search** all existing variables
* **Create** new Color, Font, or Size variables
* **Edit** the value of any existing variable
* **Delete** variables that are no longer needed
* **Save** all changes to apply them site-wide
Deleting a variable that is actively referenced by widgets will leave those controls without a value. Review usage before deleting, or replace the variable reference first.
***
## Variables vs. utility classes
Variables and utility classes solve related but distinct problems. Knowing when to reach for each one keeps your workflow clean and your site easy to maintain.
| Scenario | Use a Variable | Use a Utility Class |
| ------------------------------------------------- | ----------------------------------- | -------------------------------------------------- |
| A brand color used in dozens of widgets | ✅ Define once, reference everywhere | — |
| A specific shade of blue used in one button | — | ✅ Apply a color utility class directly |
| A base font size token for the design system | ✅ Store as a Size variable | — |
| Adding padding, flex layout, or rounded corners | — | ✅ Compose utility classes in the CSS Classes field |
| A spacing value shared across many containers | ✅ Use a Size variable | — |
| A one-off text size adjustment on a single widget | — | ✅ A `text-*` utility class is simpler |
The rule of thumb is straightforward: **use a variable when the value itself should be reusable across many places; use a utility class when you want to apply a styling pattern or behavior to an element.** Variables and classes complement each other — a utility class can reference a CSS variable internally, so you get both the convenience of a single class name and the flexibility of a globally managed value behind it.
Some AtomicKit utility families — such as border widths and component colors — reference CSS custom properties (e.g. `var(--border-sm)`, `var(--color-surface)`) that you can override with Elementor Variables. This means you can adjust the underlying token in the Variables Manager and have all widgets using the relevant utility class update automatically.
***
## Related references
The AtomicKit Variables Manager is the central panel for creating, editing, and deleting Color, Font, and Size variables across your site.
Border width and color utilities reference `var(--border-*)` tokens. Pair them with Size variables to control border thickness site-wide.
Background and text color utilities map to your Elementor Color variables, keeping your palette centralized in the Variables Manager.