Variables: Site-Wide Design Tokens

title: Variables: Site-Wide Design Tokens description: How to define and organize CSS custom properties in the Global Style Manager so every Proton widget on your site can use consistent colors, fonts, and spacing.

CSS variables (also called design tokens or custom properties) are the foundation of a consistent design system. Define a color or spacing value once in the Global Style Manager and reference it across every Proton widget, change it in one place and every widget updates automatically.

Adding A Variable

1. Go to Protuno → Global Style
2. Click the Variables tab
3. Click Add Variable
4. Enter:
   • Name: the CSS custom property name, starting with -- (e.g. --color-brand)
   • Value: the CSS value (e.g. #4F46E5)
   • Collection: the group this variable belongs to (e.g. "Colors", "Typography", "Spacing")
5. Click Save

The variable is immediately available on every page of your site as var(--color-brand).

Organizing Variables Into Collections

Collections are named groups displayed as sections in the manager's Variables tab. Use them to keep related variables together:

Collections are displayed in the manager in the order you create them. The underlying CSS looks like:

:root {
  /* Colors */
  --color-brand: #4F46E5;
  --color-brand-dark: #3730A3;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
}

Color Variables

When the manager detects that a variable's value is a color, hex, rgb(), hsl(), or a gradient, it shows a color picker instead of a text input. This makes it easy to choose exact colors without remembering syntax.

Supported color formats:

--color-brand: #4F46E5;              /* hex */
--color-brand-alpha: #4F46E580;      /* hex with alpha */
--color-overlay: rgba(0,0,0,0.5);    /* rgba */
--color-accent: hsl(243, 75%, 59%);  /* hsl */
--color-gradient: linear-gradient(135deg, #667eea, #764ba2); /* gradient */
--color-text: #1a1a1a;               /* plain string (shown as color picker if it matches a color pattern) */

Non-Color Variables

Any value that is not detected as a color is shown as a plain text input. Use these for font families, spacing values, sizing, and anything else:

--font-heading: 'Inter', sans-serif;
--font-size-base: 1rem;
--font-size-sm: 0.875rem;
--font-size-lg: 1.25rem;
--space-section: 5rem;
--radius-card: 12px;
--shadow-card: 0 4px 24px rgba(0,0,0,0.08);
--max-width-content: 680px;
--max-width-site: 1200px;

Using Variables In A Proton Widget

Reference any global variable in a Proton widget's CSS panel with var():

.hero {
  background: var(--color-bg-alt);
  padding-block: var(--space-xl);
}

.hero h1 {
  color: var(--color-text);
  font-family: var(--font-heading);
}

.cta-button {
  background: var(--color-brand);
  color: white;
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
}

Variables also work in Twig expressions for inline styles:

<div style="--accent: {{ post.meta('brand_color') }}; background: var(--accent);">

Editing And Deleting Variables

• To edit a variable, click its name or value in the Variables tab and update the field. Click Save.
• To delete a variable, click the trash icon next to it.
• Deleting a variable does not update any Proton widget CSS that references it, those widgets will fall back to the browser default for that property.
• To rename a variable, you must delete the old one and create a new one. Update any Proton widget CSS that referenced the old name.

Frequently Asked Questions

How many variables can I have? There is no enforced limit. Practical limits come from page load speed, a very large globals block (hundreds of variables) adds weight to every page head. Keep the globals focused on reusable design tokens, not one-off values.

Can I use variables from the Elementor Global Colors system alongside Protuno variables? Yes. Elementor Global Colors outputs its own CSS custom properties. You can use both sets in the same Proton widget CSS. Just make sure the names do not conflict.

Do global variables work inside CSS keyframe animations? Yes. CSS custom properties resolve inside @keyframes normally. You can define an animation in a Proton widget that uses global color or spacing variables.

Related

• The Design System
• Typography Classes
• Reusable CSS Classes