Customize global styles

How to tune typography, colours, buttons, layout, and accessibility sitewide

Styles & Layouts is the fine-grained styling editor that sits alongside the Theme picker. Where a Theme is a full preset, Styles & Layouts is five focused panels for the specific values that cascade to every component.

What is this for?

Use Styles & Layouts when a swatch got you most of the way but you need to override a specific value — a different body font, a slightly darker primary, wider page gutter, a sharper button radius, a minimum contrast ratio for accessibility.

Good use cases

Example 1: Enforce your brand font. Open the Typography panel, set H1 through Body to your exact font family and scale, Save. Every page picks up the new fonts.

Example 2: Fine-tune the primary colour for Acme Coffee Roasters. The swatch gave you #C83C3C but Acme's brand spec says #4394BE (their signature roastery blue). Open Global Colors, edit Primary, Save. Buttons, links, and focus rings all update. The hero block on Acme's homepage instantly repaints:

Example 3: Meet a WCAG AA contrast target. Open Accessibility, raise minimum contrast ratio and enable focus-ring outlines. Save. Every interactive element gets the new accessibility treatment.

Example 4: Tune page width and gutter for a campaign landing page. Open Layout, drop the container max-width from the default 1280px to 1120px and bump the gutter from 16px to 24px. Save. Every SGB page re-flows with the tighter reading column and a roomier edge.

Example 5: Match button shape to your brand. Open Button Styles, set Primary radius to 0 for sharp corners, padding to 14px 28px, hover darken by 10%. Save. Every Primary button across the site picks up the new shape on the next page load.

What Styles & Layouts writes under the hood

Each panel feeds into the same set of CSS variables your pages read at render time. Knowing which variable each panel writes makes Custom CSS much easier — you can grab the variable name and override a single rule without abandoning the panel values. A typical brand-refresh save produces variables like these:

:root { /* Typography (set on the Typography panel) */ --font-heading: "Poppins", system-ui, sans-serif; --font-body: "Inter", -apple-system, sans-serif; --h1-size: 60px; --h1-weight: 700; --h1-line: 1.1; --body-size: 16px; --body-line: 1.5; /* Palette (Global Colors panel) */ --color-primary: #BF2E2E; --color-accent: #552C32; --color-background: #21141A; --color-text: #F9EDEA; --color-muted: #9A8C8F; /* Layout (Layout panel) */ --container-max: 1120px; --gutter: 24px; --section-spacing: 80px; /* Buttons (Button Styles panel) */ --btn-primary-bg: var(--color-primary); --btn-primary-radius: 0px; --btn-primary-padding: 14px 28px; /* Accessibility (Accessibility panel) */ --min-contrast: 4.5; --focus-ring: 2px solid var(--color-primary);
}

What NOT to use this for

• Do not use Styles & Layouts as a one-off CSS escape hatch. If you need fully custom CSS (selector-by-selector overrides, keyframes, media queries), write it in Custom → CSS instead.
• Do not edit the preset through the URL. The five panels use ?p=typography, ?p=global_colors, ?p=layout, ?p=buttons, ?p=accessibility. Always edit through the admin UI — it makes sure all five panels stay in sync.

How this connects to other features

• Themes — picking a swatch in Themes merges the preset's defaults onto Styles & Layouts. Any values you customised here can be overwritten.
• Custom CSS — for rules Styles & Layouts can't express, write a Custom CSS entry.
• Custom Fonts — fonts you upload under Custom → Fonts appear in the Typography panel's font picker.
• Templates — the templates (header/footer/mobile menu) render through the styles_layout values you set here.

Before you start

• You are signed in as an admin with Appearance access.
• You have your brand hex codes, font specs, and any accessibility targets ready.
• You know which panel owns the change you want to make (the five panels are below).

Where to go

1. Open the left navigation.
2. Click Appearance → Theme Editor. The Theme Editor's last five tabs are the five Styles & Layouts panels:

Steps

1. Typography — set fonts and scale

Pick a family for H1–H6 and Body, set sizes, weights, and line heights. Saves independently — changing typography does not touch colours.

2. Global Colors — palette tokens

The palette tokens (Primary, Accent, Background, Text, Muted) cascade to every component that references them. Edit the hex value, hit Save.

3. Layout — page widths and gutters

Max-width of the content column, gutter widths, section spacing. Applies to every SGB page.

4. Button Styles — per-button look

Primary, Secondary, Outline, Text buttons — each has its own colour, radius, padding, hover state.

5. Accessibility — contrast and focus

Minimum contrast ratios, focus-ring outlines, skip-to-content link, reduced-motion fallbacks.

The complete flow

To reset the whole look without using a swatch:

1. Typography — set your brand fonts.
2. Global Colors — set your brand palette.
3. Layout — tune gutters and max-width.
4. Button Styles — match buttons to the brand.
5. Accessibility — flip on AA defaults.
6. Save Changes on each panel; the site updates on reload.

After each panel saves, the flash message looks like this. It names exactly which fields were written so you can confirm the change stuck:

What success looks like

• Every page picks up the new fonts, colours, button radius, layout widths.
• Switching to a different Theme swatch later preserves the other fields you did not touch — Styles & Layouts deep-merges on save.

What to do if it does not work

• I saved typography and my colours changed too. Unlikely — panels save independently. Check that the swatch you're on matches what you expect; a different swatch may have been picked accidentally.
• My accessibility focus ring is missing on one browser. Not every browser honours all focus-ring settings. Test in multiple browsers.
• My Custom Fonts are not showing in the picker. Confirm the font is listed under Custom → Fonts, and that it has a weight variant matching what you pick in Typography.

Next step