Colors, fonts and the type scale

The palette#

Colors are named by what they’re for, so a new color scheme is a handful of edits instead of a hunt through pages. A new site starts with:

Add, rename, reorder or delete colors in Theme Styles → Colors. An element that uses a palette color stores a reference to it, not a copy, so editing the color updates every element. In any color control, New global color adds a color to the palette, and Edit global color jumps to it in Theme Styles.

Fonts#

The site has font roles — Display for headings and Body for text — and any others you add. For each, choose from:

• Google Fonts — the full catalog, with live previews.
• System fonts — the fonts already on visitors’ devices.
• Fonts in the WordPress Font Library.
• Your own font files — upload .woff2, .woff, .ttf or .otf files in Theme Styles → Typography. They’re stored in your uploads folder and served from your site.

The site loads only the fonts and weights you choose. For a variable Google font, the whole weight range loads as one file; italics load only when you turn them on. The weight picker shows the weights a font really has, and picking one the site doesn’t load yet adds it.

The type scale#

Theme Styles → Type scale sets font sizes from XS to 6XL, plus line heights (Tight, Snug, Normal) and letter spacing (Tight, Wide). Values can differ per breakpoint, and can be fluid: a size like clamp(2.4rem, 5vw, 4.4rem) grows smoothly with the screen.

Headings and text use the scale by default (Theme Styles → Headings), so changing 4XL changes every heading that uses it.

Spacing, radius, shadows and containers#

• Spacing — a scale of steps (1 to 24), plus Section padding and the page Gutter.
• Radius — S to XL, a Button radius and Full for pills and circles.
• Shadows — S, M and L.
• Containers — the widths content sits in (S to XL).