Setting a brand color once and having it apply everywhere sounds like a basic feature. On a lot of WordPress builds it isn’t: change your primary color and you’re hunting through headings, buttons, and section backgrounds one block at a time. Nexter’s Global Styles Manager, revamped in the May 2025 update, is built to make that a one-place change — and getting the three settings (color, typography, spacing) right, in the right order, matters more than most builds treat it.
Global Styles Manager vs. Global Block Styles: Don’t Confuse Them
Nexter ships two different “global” style systems, and mixing them up is the most common confusion in the docs comments. The Global Styles Manager (this post) controls your site’s shared design tokens: brand colors, typography, and spacing, applied automatically to headings and paragraphs sitewide. Global Block Styles is a separate, per-block-type system for setting a default style (border, shadow, background) that every instance of a specific block inherits. You’ll likely use both, but they solve different problems.
What the Global Styles Manager Actually Sets
- Brand colors — define your palette once; headings, text, and compatible blocks pull from it instead of a hardcoded hex value per block.
- Typography — sitewide font family, sizing, and weight defaults for headings and paragraphs, without setting them block by block.
- Spacing — consistent spacing defaults across the site, rather than each section reinventing its own padding values.
Because these apply directly to headings and paragraphs sitewide, a rebrand — a new primary color, a new heading font — becomes a change in one settings screen instead of a page-by-page audit.
Also Read: Nexter Blocks Global Border and Block Presets: Speeding Up Your Design Workflow — a related but distinct global system, this time for border and radius styling specifically.
Choosing a Brand Color Palette That Actually Holds Up
Before typing hex values into the Global Styles Manager, it’s worth borrowing a structure from print and product design: the 60-30-10 rule, where a dominant neutral covers roughly 60% of the interface, a secondary color covers about 30%, and an accent color used sparingly for calls-to-action and highlights covers the remaining 10%. Sites that skip this and treat every brand color as equally weighted tend to end up visually noisy, with no clear signal for where a visitor’s eye should land first (usually the call-to-action button, which is exactly what the 10% accent color exists to protect).
Accessibility has to factor into this choice too, not as an afterthought. WCAG’s Level AA standard requires a contrast ratio of at least 4.5:1 between normal body text and its background (3:1 for large text, 18px+ or 14px+ bold), and a separate 3:1 minimum applies to UI components like button borders. Because the Global Styles Manager applies your color choices to headings and text sitewide in one action, a contrast problem in your palette becomes a sitewide problem the moment you save — check your primary text-on-background and button-text-on-button-background pairs with a contrast checker (WebAIM’s is a common free option) before finalizing the palette, not after a visitor or an audit flags it.
Typography: Set a Scale, Not Just a Font
Picking a heading and body font is only the first half of the typography setting. The second, easier-to-skip half is the size relationship between H1, H2, H3, and body text — commonly called a type scale. A well-set type scale makes each heading level visually distinct at a glance without a visitor having to read the text to tell an H2 from an H3; a poorly set one (sizes too close together, or jumps that feel arbitrary) undermines the page’s visual hierarchy even if the font choice itself is good. Setting this once, correctly, in the Global Styles Manager is significantly less error-prone than trusting every future page-builder session to eyeball consistent heading sizes from scratch.
Spacing: The 8px Grid, Explained
The specific spacing values worth setting as your sitewide defaults aren’t arbitrary either. An 8px (or 4px, for finer control) baseline grid — where every margin, padding, and gap is a multiple of that base unit (8, 16, 24, 32, 48, 64px, and so on) — is the convention both Apple’s and Google’s own design systems standardize on, for a simple reason: it removes the guesswork from spacing decisions and keeps every section’s rhythm visually consistent, without a designer re-deriving “does this look right” from scratch on every new section. Setting your baseline spacing values in the Global Styles Manager to follow this kind of scale, rather than picking whatever pixel value happened to look fine in the moment, is what makes the sitewide spacing actually feel consistent rather than merely “set.”
Pairing a Heading Font With a Body Font
A common typography mistake worth avoiding while setting sitewide defaults: picking two fonts that are too similar to each other. If a heading font and a body font sit close together in style and weight, the visual hierarchy between them weakens — a page can end up looking like one undifferentiated block of text rather than a clear heading-then-body structure, even if both fonts individually look fine. The more reliable pairing approach is deliberate contrast: a distinctive, higher-personality font for headings (where a visitor reads only a few words at a time, so character is an asset) paired with a plain, highly legible font for body copy (where a visitor reads many words in a row, so legibility matters more than personality). Setting this pairing once in the Global Styles Manager, rather than re-deciding it per page, keeps that hierarchy consistent everywhere the site adds new content.
How to Set It Up
- Open the Nexter dashboard and go to the Global Styles Manager section.
- Set your brand color palette first — this feeds into typography and block color pickers across the editor. Apply the 60-30-10 weighting and check contrast ratios before moving on.
- Set sitewide typography defaults for headings and body text, thinking in terms of a full type scale rather than font choice alone.
- Set your baseline spacing values, ideally following an 8px (or 4px) multiple-based scale.
- Check a few existing pages after saving; headings and paragraphs update automatically, but manually-overridden blocks (a heading you explicitly colored differently) keep their override, by design.
Also Read: WordPress Dark Mode: How to Add a Site-Wide Light/Dark Toggle — a dark-mode palette needs its own dark-mode counterpart for every brand color token you set here.
A Worked Example: Running a Rebrand Through Global Styles
Consider a real scenario: a company rebrands from a blue primary color to a green one, six months after the site launched. On a site built without Global Styles, this means locating every heading, button, icon, and background that referenced the old blue — scattered across dozens of pages built at different times by different people — and updating each one, then hoping nothing was missed. It’s exactly the kind of task that produces a site with 90% of its blue swapped to green and a handful of stray blue accents nobody noticed, undermining the rebrand’s consistency.
With Global Styles Manager already holding the brand color as a single token, the same rebrand becomes: open the Global Styles Manager, update the primary color value, save, then spot-check a handful of pages to confirm any manually-overridden blocks (which intentionally don’t inherit the global value) are updated separately if they should be. The manual-override list is typically short, because most builds only override color deliberately for a specific reason — which means the bulk of the rebrand genuinely does happen in one action instead of a page-by-page hunt.
Planning for Dark Mode From the Start
If a site-wide dark mode toggle is even a possibility down the line, it’s worth thinking about while setting up the initial Global Styles palette rather than retrofitting it later. Each brand color token set here effectively needs a dark-mode counterpart — a light background token needs a corresponding dark background token, a body-text token needs a corresponding light-on-dark text token, and so on. Deciding this pairing up front, even if dark mode isn’t built immediately, means the color-naming and structure chosen in Global Styles Manager won’t need to be reworked later; deciding it as an afterthought, once dozens of pages already reference the light-mode-only tokens, is a meaningfully bigger job.
Common Global Styles Mistakes
- Setting spacing or typography before the color palette: both depend on the palette in practice (a type scale’s weight choices interact with color contrast; spacing decisions often follow a section’s background color), so doing them out of order tends to require redoing work.
- Treating every brand color as equal weight: without a 60-30-10 style hierarchy, accent colors lose their power to draw attention to the one thing that matters most, like a call-to-action button.
- Skipping the contrast check: a palette that looks fine to the person who chose it can still fail WCAG’s 4.5:1 text contrast minimum, especially with lighter brand colors used as text on white or near-white backgrounds. Running the primary text-on-background pair and the button-text-on-button-background pair through a checker takes minutes and catches problems before they’re sitewide.
- Picking arbitrary spacing values: “whatever looked fine in the moment” spacing, repeated across dozens of sections built at different times, is exactly the kind of drift a baseline grid exists to prevent.
- Never planning a dark-mode counterpart for each color token: even if dark mode isn’t being built right now, deciding the pairing structure up front is far cheaper than retrofitting it once dozens of pages reference light-mode-only values.
FAQ
Will changing my Global Styles override blocks I’ve already customized manually?
No. A block with an explicit manual override keeps that override; Global Styles fill in the default for everything that hasn’t been manually set.
What’s the difference between this and Global Block Styles?
Global Styles Manager sets sitewide brand colors, typography, and spacing applied to headings/paragraphs. Global Block Styles sets a default style per block type (for example, every Infobox block) independent of the sitewide brand tokens.
Do I need to redo this after a Nexter update?
No. Global Styles settings persist across plugin and theme updates like any other saved configuration.
What contrast ratio do my brand colors need to meet?
For WCAG Level AA, normal body text needs at least a 4.5:1 contrast ratio against its background, large text (roughly 18px+ or 14px+ bold) needs at least 3:1, and UI components like button borders need at least 3:1 as well. Since Global Styles applies your color choices sitewide, it’s worth checking these ratios before saving rather than after.
What is the 60-30-10 rule and do I have to follow it exactly?
It’s a design convention, not a hard requirement: a dominant neutral covering roughly 60% of the interface, a secondary color around 30%, and an accent color reserved for calls-to-action around 10%. Treat it as a useful default weighting to start from rather than an exact rule to hit precisely.
Should my heading font and body font be similar or different?
Deliberately different is usually the stronger choice. A heading font with more personality paired with a plain, highly legible body font creates a clearer visual hierarchy than two fonts that look similar to each other, which can make a page read as one undifferentiated block of text.
Conclusion
Set your brand color palette first, since typography and spacing decisions both reference it — doing these three in the wrong order is the most common reason a Global Styles setup feels inconsistent. Weight your colors with a 60-30-10 style hierarchy, check contrast ratios before saving, set a real typographic scale rather than just picking fonts, and base spacing on an 8px (or 4px) grid instead of arbitrary values. Once set correctly, a rebrand becomes a five-minute settings change instead of a page-by-page audit.
Suggested Reading
- Nexter Blocks Global Border and Block Presets: Speeding Up Your Design Workflow
- The Nexter Grid View Theme Builder: What It Is and How to Use It
- WordPress Theme Customization Without Touching Code
