> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# CSS Variables: Site-Wide Design Tokens

Define color, spacing, and sizing tokens once in Global Style and reuse them across every Composer widget.


CSS variables (design tokens) let you define a value once in the Global Style Manager and reference it across every Composer widget. Change the variable, and every widget using it updates automatically.

### Adding a Variable

1. Select a Composer widget, click **Code** at the top of the panel, open the **Globals** tab, and click the **Colors** or **Sizes** row to open the Globals manager.
2. Pick a collection in the left sidebar, or click **+ Add collection** to create a new one. A brand-new site starts with a single collection; you name every collection yourself, there's no fixed preset list.
3. Click **+ Add** at the top of the manager and pick **Color** for a color, or **Other value** for anything else, like a size or a font.
4. Fill in the variable name (for example `--color-brand`) and its value (for example `#4F46E5`).

The variable becomes available site-wide as `var(--color-brand)`. Each row also has a **Copy** icon (to copy the `var()` reference) and a trash icon to delete it.

<Callout kind="info">
Free plans get up to **2 variable collections**. UiChemy Pro removes the cap. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### Organizing with Collections

Collections group related variables into sections in the manager, and you decide what each one holds and what it's called. Common ways to split them up:

- **Colors**, brand, text, background, and state colors.
- **Dimensions**, radius, border widths, and other fixed sizes.
- **Typography**, font families, sizes, line heights.
- **Spacing**, scale values, padding, gaps.
- **Shadows**, box shadow definitions.
- **Breakpoints**, media query reference values.

### Export, Import, and Sync

The Globals Manager's header has three more actions, alongside adding variables by hand:

- **Export**, downloads every variable, collection, and class as one file, useful for moving your design tokens to another site.
- **Import**, loads globals from a previously exported file. You choose **Merge** (keeps your own organization, updates matching values) or **Replace** (loads the file exactly as-is).
- **Elementor Sync** *(Pro)* (or **Bricks Sync** / **Theme Sync**, depending on which builder or theme you're using), reconciles UiChemy's colors and typography with that builder or theme's own global colors and fonts, adding whatever's missing on either side without overwriting values that already match.

### Supported Variable Types

**Color variables** show a color picker and accept hex, hex with alpha, `rgba()`, `hsl()`, gradients, and plain strings matching a color pattern.

**Non-color variables** use a text input for fonts, spacing, sizing, and other values, for example `--font-heading: 'Inter', sans-serif` or `--space-section: 5rem`.

### Using Variables in Widgets

Reference a variable in any Composer widget's CSS using `var()` syntax. They also work inside Twig expressions for dynamic inline styles.

### Editing and Deleting

Edit a variable by clicking its field in the Variables tab. Deleting a variable (via the trash icon) doesn't update widget CSS that already references it, those rules will simply resolve to nothing. Renaming a variable means deleting the old one and creating a new one, then updating any widget CSS that used the old name.

### Use Cases

- **Defining a client's brand palette once**, reused as color variables across every section instead of retyping hex values.
- **Building a consistent spacing or sizing scale**, so every widget lines up visually without eyeballing values.
- **Swapping a brand color site-wide**, edit one variable instead of hunting through every widget's CSS.

### Related

<Columns cols={2}>
  <Card title="Global Style Overview" href="/uichemy-composer/global-style/overview">
    See how variables fit into the whole Global Style system.
  </Card>
  <Card title="Typography Classes" href="/uichemy-composer/global-style/typography">
    See variables applied to headings and body text.
  </Card>
  <Card title="CSS Classes" href="/uichemy-composer/global-style/css-classes">
    Build reusable classes on top of these variables.
  </Card>
</Columns>