> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.
# 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 `
```
### What You Can Store
| Type | Description | Example |
|---|---|---|
| CSS Variables | Custom properties in `:root`, organized into collections you name and create yourself | `--color-brand: #4F46E5` |
| Typography Classes | `.text-*` classes for heading/body text | `.text-heading-h1` |
| Other Classes | Any reusable class without text styling, cards, buttons, containers, and more, written as plain CSS | `.uc-boxed` |
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](/uichemy-composer/getting-started/free-vs-pro).
### Accessing the Manager
Select a Composer widget and click **Code** in the switcher at the top of the panel (**Chat**, **Editor**, **Code**).
Click the **Globals** tab. It shows a summary of your globals: **Colors**, **Text**, and **Sizes**, with a count for each.
Click a row, for example **Colors**, to open the Globals manager on that section.
The Globals tab summary: click a row to open the Globals manager
The Globals manager, open on the Colors collection
Variable collections (you name each one, for example Colors or Dimensions) and Classes (Typography, Others) live together in one manager with a left-hand list, there's no separate tab for each.
#### Inside the Globals Manager
The left-hand list of your variable collections, each with a count, for example **Colors 32** or **Spacing 3**. Click one to open it.
Creates a new variable collection that you name yourself. Free allows up to 2 collections, Pro removes the cap.
The class lists, **Typography** and **Others**, each with a count. Click one to see and edit those classes.
The open collection's variables, each with a swatch or preview, its name (like **Primary**), and its value (like `#6366F1`). Click a variable to edit it.
The trash icon beside the collection name. Deletes the collection and every variable in it.
Finds a global by name across your collections and classes.
Adds a new global. Pick what to add: a **Color**, a **Text style**, an **Other value**, or a **Class**.
**Export** your globals to a file, **Import…** globals from a file, or **Sync with the builder…** to match your globals with Elementor. See [Sync with Elementor Globals](/uichemy-composer/uichemy-widget/code-tab#sync-with-elementor-globals).
The status line at the bottom. It confirms your changes are saved.
Direct raw-CSS editing of the same style block happens in a different place entirely, the Code tab's **Site** scope, under "Before ``". See [Code Tab](/uichemy-composer/uichemy-widget/code-tab#standard-page-site-and-globals).
### 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 ``.
### 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](/ai-to-wordpress/set-up).
### 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.
### Frequently Asked Questions
No. You can write all CSS directly in each Composer widget. The Global Style Manager becomes valuable when you want consistent design tokens across many sections and a single place to update them.
Yes. `var(--color-brand)` in a Composer widget resolves from whatever `:root` declaration the browser finds, whether that's in UiChemy's globals block or elsewhere. There's no conflict, but be careful not to duplicate variable names across sources.
Variables and classes beyond the free plan's caps stop being editable in the Global Style Manager, but they continue to render on your site until you change them. Reactivating Pro restores full editing.
### Related
Set the color and spacing values every widget can reuse.
Define site-wide heading and body text styles.
Build reusable classes on top of your variables.
See which Global Style features are Pro-only.