CSS Variables: Site-Wide Design Tokens

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.

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 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