Brand Consistency
warning
Brand changes can have wide impact. Make changes in controlled increments, snapshot before/after, and re-test key pages.
Brand Consistency Explained
| Brand surface | What it includes | Where it is controlled |
|---|---|---|
| Typography | fonts, sizes, line heights | GeneratePress typography settings |
| Colors | links, accents, surfaces | GeneratePress colors + custom CSS vars |
| Spacing | vertical rhythm, section padding | GeneratePress layout + CSS utilities |
| Components | buttons, cards, heroes | GenerateBlocks presets/patterns |
Why It Matters
- Imports often look "demo-ish" until you align them to brand tokens.
- Consistency reduces QA time and prevents random styling.
- Token-based design is easier to maintain and redesign.
How It Works
You take a demo template, identify the design decisions (fonts/colors/spacing), map them to tokens, then update presets and sections to use those tokens.
flowchart LR
DEMO[Demo styles] --> TOK[Token map]
TOK --> PRE[Presets]
PRE --> PAGES[Pages]
Practical Walkthrough
Step 1: Capture Current Theme Mods
capture-theme-mods.sh
cd /var/www/html
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.json
grep -n "font\|color\|spacing\|width" /tmp/theme_mods_generatepress.json | head -n 80
Step 2: Locate the Theme Config Files (Reference)
locate-theme-config-files.sh
cd /var/www/html/wp-content/themes/generatepress
ls inc/customizer/configs | grep -E "colors|typography|layout" || true
Step 3: Add a Token File in the Child Theme
create-token-css-file.sh
cd /var/www/html
mkdir -p wp-content/themes/generatepress-child/assets/css
test -f wp-content/themes/generatepress-child/assets/css/tokens.css || echo "Create tokens.css in your child theme"
Practical Examples
Example 1: Create a Brand Token Table
| Token | Example | Used for |
|---|---|---|
--brand-primary | #1e3a8a | Links, CTAs |
--brand-surface | #f8fafc | Section backgrounds |
--text-default | #0f172a | Body copy |
Example 2: Align Buttons to One Preset
Goal: one consistent button style across:
- hero sections
- pricing cards
- footer CTA
Example 3: Remove Off-Brand One-Off Overrides
Audit for:
- inline styles
- random hex colors
- inconsistent font sizes
Converge them back to tokens.
Example 4: Diff Theme Mods Before/After a Brand Update
diff-theme-mods-brand-change.sh
cd /var/www/html
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.before.json
# Make one brand change (e.g., primary color) and save.
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.after.json
diff -u /tmp/theme_mods_generatepress.before.json /tmp/theme_mods_generatepress.after.json | head -n 120
Best Practices
| Practice | Why |
|---|---|
| Keep token count small | Easier to govern |
| Name tokens by intent | Prevents misuse |
| Update presets before editing pages | Faster convergence |
| Re-test key templates | Avoid regressions |
| Keep a brand checklist | Prevents "almost the same" pages |
| Prefer global typography over per-page tweaks | Prevents drift |
| Keep contrast checks in QA | Accessibility and readability |
| Treat brand tokens like an API | Changes should be reviewed |
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Buttons inconsistent | Multiple local styles | Reset overrides and apply one preset |
| Typography differs per page | Per-page overrides | Remove overrides and set global typography |
| Colors change but not visible | Cache | Purge LSCache and CSS caches |
| Some pages still off-brand | Local overrides | Audit for inline styles and remove them |
| Contrast fails after color change | Token mismatch | Re-check primary/muted colors and test WCAG contrast |
Hands-On
- Pick one imported template and list its visible font and color decisions.
- Create a token table and apply it.
- Update one component preset and verify the change applies across pages.
- Document the brand token table in your project runbook.
- Remove one inline style override and confirm the preset/token still works.
Quick Reference
brand-consistency-cheatsheet.sh
cd /var/www/html
grep -n "font\|color" /tmp/theme_mods_generatepress.json | head
What's Next
- Next: Export & Backup
- Related: Global Design Variables