Global Style: The Design System
How UiChemy's Global Style Manager works: the globals style block, what it stores, and how CSS variables, typography classes, and utility classes flow to every Composer widget.
The Global Style Manager creates a single <style> block injected into your site's <head>, containing CSS custom properties, typography definitions, and utility classes. This block appears on every page of your site, not just pages where a Composer widget is active.
<style id="uichemy-globals">
:root {
--color-brand: #4F46E5;
--color-text: #1a1a1a;
--color-bg: #ffffff;
--font-heading: 'Inter', sans-serif;
--font-size-base: 1rem;
}
.text-heading-h1 { font-size: 3rem; font-weight: 700; }
.uc-boxed { max-width: 1200px; margin-inline: auto; }
</style>
What You Can Store
| Type | Description | Example |
|---|---|---|
| CSS Variables | Custom properties in :root, organized into collections | --color-brand: #4F46E5 |
| Typography Classes | .text-* classes for heading/body text | .text-heading-h1 |
| Component Classes | Layout, spacing, and component patterns | .uc-boxed |
| Buttons | A compound token: background, text, icon, border, shadow, spacing, plus a hover state, in one reusable style | .btn-primary and .btn-primary:hover |
The manager preserves @media rules and any custom CSS you add.
On the free plan, Global Style supports up to 2 variable collections, 1 typography class, and 1 other class (component or button). UiChemy Pro removes all three caps. See Free vs Pro.
Accessing the Manager
Switch to Developer
Open a Composer widget, then switch the Editor tab to Developer to reveal the Code tab.
Open the manager
Go to Code → Globals and click Open Globals Manager.
Variable collections (Colors, Fonts, Layout, or any you add) and Classes (Typography, Others) live together in one unified manager with a left-hand navigation list, there's no separate tab for each.
The manager also has Export, Import, and Elementor Sync buttons at the top for moving your globals between sites or pulling in Elementor's own global colors and fonts.
Direct raw-CSS editing of the same style block happens in a different place entirely, the Code tab's Site scope, under "Before </head>". See Code Tab.
Using Global Values in Composer Widgets
Reference a variable in any widget's CSS with var(), for example background: var(--color-brand). They also work inside Twig expressions for dynamic inline styles. Apply a class directly in the widget's HTML, for example <h1 class="text-heading-h1">.
AI Access Over MCP
Connected AI clients can read and update your Global Style CSS through UiChemy's MCP integration, included in Free, so design tokens stay part of AI-driven workflows too. See Set up UiChemy MCP.
Use Cases
- Keeping a client's brand consistent, define colors, fonts, and spacing once instead of redefining them per widget.
- Rebranding a site in one place, change a variable or class once and every Composer widget using it updates automatically.
- Letting a connected AI tool adjust design tokens, read and update Global Style CSS over MCP instead of editing it by hand.