Global styles are the brand and design settings — colors, fonts, and typography — that apply to every page across your entire site. When you change a global style, it updates all pages at once, so you only need to set your brand identity in one place.
Access the Global Styles Editor
From the Page Groups screen, click Edit Global Styles.
The global styles editor. Numbered callouts are referenced throughout this article.
| # | Area | What it's for |
| 1 | Right panel | Set colors, fonts, and other global styling options |
| 2 | Page preview | Live preview of your changes as you make them |
| 4 | Page group / entity toggle | Switch between page groups, entities, and locales to preview |
| 6 | Panel toggle | Collapse or expand the right panel for more workspace |
| 7 | Viewport controls | Switch between desktop, tablet, and mobile; zoom in and out |
| 8 | Change controls | Undo, redo, discard, or publish your changes |
| 9 | Preview / live links | Open a shareable preview or your live site in a new tab |
| 10 | Update Library | Pull in the latest product updates (only appears when you're behind) |
Set Your Color Palette
In the right panel (1), define your site's color palette by entering four base colors:
- Primary
- Secondary
- Tertiary
- Quaternary
Use the color picker to enter each color's value. Once set, the system automatically generates six additional tints and shades — lighter and darker variations — that can be applied as background colors throughout your site without any manual adjustments.
About accessibility: The color system prioritizes accessibility. Auto-generated colors are automatically paired with foreground text colors that meet WCAG AA contrast requirements. The four base colors can be used as backgrounds, but WCAG AA compliance cannot be guaranteed for these since their exact values are user-defined.
| Background | Foreground | WCAG AA Compliant |
| White | Black | ✓ |
| Primary 98% Brightness | Black | ✓ |
| Secondary 98% Brightness | Black | ✓ |
| Tertiary 98% Brightness | Black | ✓ |
| Quaternary 98% Brightness | Black | ✓ |
| Primary 20% Brightness | White | ✓ |
| Secondary 20% Brightness | White | ✓ |
| Base colors (Primary, Secondary, Tertiary, Quaternary) | White or Black | Not guaranteed |
Set Your Fonts
In the right panel (1), select the font family and size for each level of your site's typography hierarchy:
- Heading levels (H1–H6)
- Body text
- Links
- Buttons
Over 1,500 font options are available. Currently, only fonts with Latin characters are supported.
Preview Your Changes
Before publishing, use the editor to validate how your styles look across the site.
- Page preview (2) — Your changes are reflected live in the preview as you make them.
- Page group / entity toggle (4) — Switch between different page groups and entities to confirm your styles look correct across the site. You can also open an entity in the Knowledge Graph directly from here to make content changes.
- Viewport controls (7) — Switch between desktop, tablet, and mobile views to check responsiveness.
- Preview Changes (9) — Generates a shareable preview link with all your unpublished edits. Use this to collect feedback from stakeholders before going live. The preview reflects local changes; your live site only reflects published changes.
- Panel toggle (6) — Collapse the right panel to get a larger preview workspace.
Note: You can toggle between page groups and entities to preview, but you cannot add, reorder, or remove sections from the global styles editor. To change page structure, use the layout editor.
Publish Your Changes
Changes are saved automatically as you work. When you're ready to push updates live:
- Click Publish in the change controls (8). If your pages are already live, this button reads Update # Pages.
Your styles go live across every page and every page group simultaneously.
To verify: after publishing, open your live site (9) and refresh to confirm the updates are visible.