The Design System
How Protuno's Global Style Manager works, what the protuno-globals block is, where it lives, and how CSS variables, typography classes, and layout utilities flow to every Proton widget.
The Global Style Manager is where you define design decisions that should be consistent across every section of your site: brand colors, font sizes, spacing tokens, layout utilities, and typography classes. Define them once here and every Proton widget on every page can use them.
How It Works
Everything you put in the Global Style Manager lives in a single <style> block injected into your site's <head>:
<style id="protuno-globals">
:root {
/* Colors */
--color-brand: #4F46E5;
--color-text: #1a1a1a;
--color-bg: #ffffff;
/* Typography */
--font-heading: 'Inter', sans-serif;
--font-size-base: 1rem;
}
.text-heading-h1 {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
}
.pr-boxed {
max-width: 1200px;
margin-inline: auto;
padding-inline: 1.5rem;
}
</style>
This block is present on every page of your site, not just pages where Protuno is active. That means any Proton widget, any Theme Builder template, and even non-Proton elements on your site can use these variables and classes.
What You Can Store
The Global Style Manager has three types of content:
| Type | What it is | Example |
|---|---|---|
| CSS Variables | CSS custom properties in :root, colors, fonts, spacing tokens | --color-brand: #4F46E5 |
| Typography Classes | .text-* classes that define heading and body text styles | .text-heading-h1 { font-size: 3rem; } |
| Component Classes | Any other utility class for layout, spacing, or component patterns | .pr-boxed { max-width: 1200px; } |
The manager also preserves @media rules and any other CSS you write in the globals block.
Accessing The Manager
Go to Protuno → Global Style in the WordPress dashboard. The editor shows:
- Variables tab, all CSS custom properties, organized into collections, with color pickers for color values and text inputs for other values
- Classes tab, typography and component class definitions
- Raw CSS tab, direct edit of the full
<style id="protuno-globals">block
Using Global Values In A Proton Widget
Once you define a variable like --color-brand: #4F46E5, you can use it in any Proton widget's CSS panel:
.hero {
background: var(--color-brand);
}
.cta-button {
background: var(--color-brand);
color: var(--color-text-on-brand);
}
And you can apply typography or layout classes directly in the HTML panel:
<div class="pr-boxed">
<h1 class="text-heading-h1">{{ post.title }}</h1>
<p class="text-body">{{ post.excerpt }}</p>
</div>
Because pr-boxed and text-heading-h1 are defined globally, every Proton widget that uses them gets the same styling, and changing the global definition updates every widget at once.
The MCP Connection
When you connect an AI client via MCP, it can read your current globals (protuno/get-globals-css) and write new or updated globals (protuno/set-globals-css). This means an AI agent building a full site can:
- Read your existing design tokens
- Use them in any new sections it creates (
var(--color-brand), etc.) - Extend the globals with new tokens if the design requires it
Your design system becomes part of the AI's working context.
Frequently Asked Questions
Do I need to use the Global Style Manager to use Protuno? No. You can write all CSS directly in each Proton widget. The Global Style Manager becomes valuable when you want consistent design tokens across many sections and want a single place to update them.
Can I use CSS variables from another source (Elementor Global Colors, theme variables)?
Yes. var(--color-brand) in a Proton widget resolves from whatever :root declaration the browser finds, whether that is in Protuno's globals block or elsewhere. There is no conflict, but be careful not to duplicate variable names across sources.
What happens to the globals block if I deactivate Protuno Pro?
The <style id="protuno-globals"> block is removed from the page head. Pages may lose styling that relied on global variables or classes until Pro is reactivated.