2.3Global colors & fonts (Site Settings)
The essentials in 30 seconds
- The Site Settings define global colors and fonts applied everywhere.
- Define a palette (primary, secondary, text, accent) and typical text styles (heading, body).
- Define early, apply everywhere: changing the style guide is done in a single place.
Through-line — Nadia sets the style guide
Until now Nadia set the colors case by case — and slightly different shades of pink crept in everywhere. She redoes it all via the site settings: a clean palette, two text styles. From now on, when the joiner wants to adjust "his" pink, it's a single setting, propagated across the whole site.
Continues 1.4 (a preview of global) — here, the full setup.
1. The global style guide
The Site Settings — accessible from the editor menu — centralize the global design. There you define a color palette (primary, secondary, text, accent) and global text styles (main heading, subheading, body…). These values become reusable: instead of typing a color code, you pick "Primary color".
Nadia creates her palette (brand pink, dark grey for text, an accent) and two text styles. The whole site then shares the same identity.
2. Consistency and maintenance
The benefit is twofold: consistency (the whole site harmonized) and centralized maintenance (a palette change propagates everywhere automatically). The good practice: define your style guide from the start, then apply the global colors/styles on each element — never "hard-coded" values.
So, when the client is unsure about "his" pink, Nadia changes the primary color once, and buttons, headings and links all update at once.
🔎 Concrete example — Setting and applying the style guide (Nadia's case)
Site Settings → Global colors:
Primary = #b4005a (pink) · Text = #333 · Accent = #e0218a
Site Settings → Text styles:
Heading = font A, 2.2rem · Body = font B, 1rem, line height 1.6
→ Apply "Primary color" on the buttons (not a hard-coded code).
→ Client changes their mind about the pink: 1 setting, everything updates.Result: a consistent identity, editable in one click.
Lesson: apply the global, never hard-coded values.
Section vocabulary
- Site Settings
- The global settings applied to the whole site (from the editor menu).
Simple example: Nadia defines palette and text styles there.
What it is not: setting each page separately.
Reflex: the global identity is driven here.
- Global colors
- A palette defined at the site level (primary, secondary, text, accent).
Simple example: picking "Primary color" rather than a color code.
What it is not: typing a different color code on each button.
Reflex: apply a global color, never hard-coded.
- Global text styles
- Typical typographies defined globally (heading, subheading, body).
Simple example: a "Heading" style reused everywhere.
What it is not: setting each heading's font by hand.
Reflex: one global text style per role.
- Consistency / maintenance
- The whole site shares the same style guide; a change propagates everywhere.
Simple example: changing the pink once updates the whole site.
What it is not: divergent shades for lack of a style guide.
Reflex: consistency = centralized style guide.
- Define early & apply everywhere
- Set your style guide from the start, then apply it on each element.
Simple example: style guide created before building the pages.
What it is not: inventing the colors as you go.
Reflex: style guide first, building next.
In practice — Setting up a global style guide
- Open the Site Settings.
- Define a palette: primary, secondary, text, accent.
- Define 2-3 global text styles (heading, body).
- Apply these global colors/styles on your buttons and headings (no hard-coded code).
Ready-to-say script — selling consistency to the client (20 s)
"I created a style guide for your site: your colors and fonts, defined once and for all. The result: everything is harmonized, and if you want to adjust your pink or change the font, I do it in a single setting, propagated everywhere. No page-by-page touch-ups."
The style guide = visual consistency + responsiveness to requests.
Copy-paste template — site style guide
GLOBAL COLORS:
Primary #______ Secondary #______ Text #______ Accent #______
TEXT STYLES:
Heading: font ______ size ______
Body: font ______ size ______ line height ______
APPLIED GLOBALLY (not hard-coded): yes / no
STYLE GUIDE DEFINED BEFORE BUILDING: yes / noNew site
Style guide from the start: you build directly with the global colors/styles.
Site to harmonize
Take the "hard-coded" elements and tie them to the global style guide.
Indecisive client
Global style guide = you change "their" pink in one click, as many times as they want.
Team
A shared style guide keeps everyone from inventing their own colors.
✓ Best practices
- Define the style guide before building.
- Apply global colors/styles, never hard-coded.
- Keep few colors and styles, consistent ones.
✗ Common pitfalls
- Setting colors case by case (divergent shades).
- Forgetting to apply the global (hard-coded values).
- Multiplying colors and fonts.
Key takeaways
- Site Settings = the site's global style guide.
- Palette + text styles reusable everywhere.
- Change propagated from a single place.
- Define early, apply everywhere.
48h challenge — apply tomorrow
Create a palette (4 colors) and 2 text styles in the site settings, then apply them on your buttons and headings. Change the primary color and watch the global update. 20 minutes.
- I've defined a palette and global text styles.
- I apply them everywhere (no hard-coded values).
- I can change the style guide in a single place.
Frequently asked questions
Where do I define global colors?
In the Site Settings, accessible from the editor menu. There you create a palette (primary, secondary, text, accent) reusable everywhere.
What do you gain with a global style guide?
Consistency (the whole site harmonized) and centralized maintenance: a color or font change propagates everywhere automatically, without touching each page.
Can I still hard-code a color occasionally?
It's possible but discouraged: it creates inconsistencies and complicates changes. Always prefer applying a global color.
The joiner is likely to change his mind several times about "his" pink. How does Nadia organize herself?