Global Design Variables

warning

Webfonts and aggressive typography changes can hurt performance. Limit font families/weights and re-test CWV after major changes.

Global Design Variables Explained

Variable type	Examples	Where defined	How stored
Typography	body font, heading sizes, line height	`inc/customizer/configs/typography.php`	`theme_mods_generatepress`
Colors	links, background, accents	`inc/customizer/configs/colors.php`	`theme_mods_generatepress`
Layout/spacing	container width, padding, margins	`inc/customizer/configs/layout.php`	`theme_mods_generatepress`

Why It Matters

Consistency: every page inherits the same baseline rules.
Speed: fewer ad-hoc CSS overrides means fewer regressions.
Portability: design variables can be exported/imported and reviewed like code.

How It Works

GeneratePress reads Customizer values and outputs CSS/markup based on those values. Think of theme mods as your "design tokens" in JSON.

In practice, the final output is a merge of:

Theme defaults
Saved theme mods
Any filters/hooks you apply in a child theme

flowchart LR
  DEF[Defaults] --> MERGE[Resolve values]
  MODS[(Theme mods)] --> MERGE
  FIL[Filters] --> MERGE
  MERGE --> CSS[CSS + markup output]

Practical Walkthrough

Step 1: Locate the Config Files

locate-design-configs.sh
cd /var/www/html/wp-content/themes/generatepress
ls inc/customizer/configs | grep -E "typography|colors|layout" || true

Step 2: Inspect Theme Mods for Font/Color Keys

search-theme-mods-for-design-keys.sh
cd /var/www/html
wp option get theme_mods_generatepress --format=json > /tmp/theme_mods_generatepress.json
grep -n "font\|typography\|color\|background\|spacing" /tmp/theme_mods_generatepress.json | head -n 40

Step 3: Trace a Setting Back to Its Config

trace-setting-to-config.sh
cd /var/www/html/wp-content/themes/generatepress
grep -R "body" -n inc/customizer/configs/typography.php 2>/dev/null | head -n 40
grep -R "link" -n inc/customizer/configs/colors.php 2>/dev/null | head -n 40

Step 4: Find Where Values Become CSS

search-css-output-pipeline.sh
cd /var/www/html/wp-content/themes/generatepress
grep -R "wp_add_inline_style\|add_inline_style\|dynamic" -n inc | head -n 60

Practical Examples

Example 1: Create a Simple Token Document for Your Project

Token	Example value	Used for
Primary color	`#1e3a8a`	Links, buttons, accents
Neutral background	`#f8fafc`	Page background
Body font size	`16px`	Base text readability
Content width	`1100px`	Layout baseline

Store this as part of your site runbook so designers and developers make the same decisions.

Example 2: Add Your Own CSS Variables in the Child Theme

Even if GeneratePress does not expose a specific token, you can define your own.

wp-content/themes/generatepress-child/style.css
:root {
  --brand-primary: #1e3a8a;
  --brand-surface: #f8fafc;
  --space-3: 12px;
  --space-6: 24px;
}

Use them in custom CSS to avoid hard-coded values scattered across files.

Example 3: Define a Typography Scale (Write It Down)

Role	Size	Line height	Notes
Body	16px	1.6	Default reading baseline
H1	40px	1.1	Used for hero titles
H2	32px	1.15	Section headers
H3	24px	1.2	Subsections

Treat this as part of your system. If the Customizer supports it, align your settings to this table.

Example 4: Add a Color Naming Convention

Name	Meaning	Example
Primary	Brand actions/links	`#1e3a8a`
Surface	Background panels	`#f8fafc`
Text	Default body copy	`#0f172a`
Muted	Secondary text	`#475569`

Best Practices

Practice	Why
Keep a small font palette	Fewer requests and faster rendering
Use system fonts if possible	Removes font requests and FOIT/FOUT risk
Use a spacing scale	Prevents uneven layouts
Prefer token changes over page-level overrides	Easier to maintain
Export and diff design changes	Makes reviews and rollbacks easy

Troubleshooting

Symptom	Cause	Fix
Fonts look different on some pages	Extra CSS overrides	Search child CSS and plugins for conflicting selectors
Colors not applying	Specificity or inline styles	Inspect output and reduce override conflicts
Changes not visible	Cache	Purge LSCache and any CSS cache/minify plugin
Fonts flash or jump	Webfont load behavior	Use fewer weights, preload critical fonts, and re-test CLS

Hands-On

Export theme mods to /tmp/theme_mods_generatepress.json.
Identify 5 design-related keys (fonts/colors/layout).
Create a short token table for your project and store it in your runbook.
Make one design change on staging, then diff the theme mods before/after.

Quick Reference

design-variables-cheatsheet.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

What's Next

Next: Element Spacing & Alignment
Related: Customizer Essentials