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. Open a Composer widget, switch the Editor tab to Developer, go to Code → Globals, and click Open Globals Manager.
2. Pick a collection in the left sidebar (Colors, Fonts, Layout, or click + Add collection to create a new one).
3. Click + Add variable at the bottom of that collection's table.
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. Recommended categories:

• Colors, brand, text, background, and state colors.
• Typography, font families, sizes, line heights.
• Spacing, scale values, padding, gaps.
• Shadows, box shadow definitions.
• Borders, radius and color values.
• Breakpoints, media query reference values.

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