Kadence Global Palette & Typography: How We Set Up Design Tokens for Every Client Build

Ever had a client say “make the whole site darker”?

Not a redesign. Just “less white, more us.”

On a page-builder site, that’s a page-by-page job. On a site set up the way this one is, it’s a handful of fields in the Customizer: a few hex values in the Kadence global palette, two font pickers, the button colors.

Every heading, every card, every section background, every button on every page follows. Because you never styled any of them on the block.

That’s the payoff of setting up tokens once. This post is the exact setup: the nine slots and what each one is for, the two fonts, the heading scale, the spacing names, and the two gotchas that make it all silently fall apart if you skip them.

The values come from onylogy.com in September 2026. The shape is the same one used on roughly 120 client builds. You can copy it this afternoon, and you don’t need to be a designer to do it.

Haven’t read why we leave Kadence Blocks’ own settings alone? Start there. This is the other half: what to set instead.

Let’s dive in.

What Is the Kadence Global Palette?

**The Kadence global palette is a set of nine numbered color slots defined in the Kadence theme Customizer (Appearance > Customize > Colors) and exposed to every Kadence block, core block, and theme element as CSS variables --global-palette1 through --global-palette9.**

Change a slot, and everything referencing it updates.

That’s the entire mechanism. It’s why it matters more than any block setting you’ll ever touch.

Kadence groups the nine into Accents (1 and 2), Contrast (3 to 6), and Base (7 to 9), plus a row of notice colors (success, info, alert, warning, rating) that you can leave alone.

The Nine Roles

Here’s the part for you to steal. The values are this site’s. The roles are every site’s, including yours.

Slot	Role	onylogy.com	Where it shows up
palette1	Brand color	#004bd1	Links, button hover, the one accent
palette2	Brand color, brighter	#146ef5	Hover states, highlights
palette3	Darkest	#131513	Headings, dark section backgrounds, primary buttons
palette4	Dark, secondary	#292929	Secondary dark surfaces
palette5	Body text	#505050	Paragraphs, navigation
palette6	Muted text	#8b8b8b	Captions, labels, metadata
palette7	Border	#e1e1e1	Card borders, tab borders, dividers
palette8	Light surface	#f3f3f3	Alternating section backgrounds, secondary buttons
palette9	White	#ffffff	Page background, text on dark

Read down the “where it shows up” column and you’re reading the homepage.

Hero on white. Logo strip on palette8. Services tabs bordered in palette7. The dark CTA card in palette3 with palette9 text.

Not one of those blocks has a hex code in it. They have slot names.

Now the restyle from the opening.

Your client’s brand blue goes in palette1 and palette2. Their near-black in palette3. Done.

Want a warm off-white instead of #f3f3f3? That’s palette8, and every alternating section changes at once.

You never open a page to restyle a site. If you find yourself doing that, something was set on a block, and that’s the real fix.

One rule to repeat until it’s boring: never name a slot after its color. Kadence’s default labels are “Palette Color 3,” and you’ll be tempted to rename them “Dark Gray.” Six months later your client wants navy, and “Dark Gray” is navy. Name it “Darkest” or “Headings,” or leave the number. The number is the role.

Typography: The Scale Is Fixed, the Fonts Swap

Kadence typography lives in Customizer > Colors & Fonts > Typography: a base font for body text, a heading font family, and per-level settings for H1 to H6 with size, line height, weight, color, and an optional clamp range.

Kadence blocks inherit all of it by heading level.

That’s why the Advanced Text block needs an HTML tag from you and nothing else.

On this site: body is Montserrat, regular, 1rem, line-height 1.5, colored palette5. Headings are Bricolage Grotesque at weight 500 on every level, colored palette3.

That pairing is this site’s. Your clients get whatever the brand calls for. The part to carry from site to site is the scale:

Level	Desktop	Clamp range	Line height
H1	32px	2.5 to 3.25rem	1
H2	28px	2 to 3rem	1.083
H3	24px	1.75 to 2.5rem	1.1
H4	22px	1.5 to 2rem	1.188
H5	20px	1.25 to 1.5rem	1.167
H6	18px	1 to 1.25rem	1.2

Clamp is the toggle next to the size field. Turn it on, give it a min and max in rem, and your heading scales between a 320px and 1200px viewport with no media queries and no tablet or mobile overrides on any block.

Without it, you’re setting three sizes per level.

With it, two numbers, and you stop thinking about it.

One weight for all headings is deliberate. Bricolage Grotesque at 500 is heavy enough to read as a heading and light enough that an H1 and an H4 look like the same family. If your client’s font needs 600 to hold up, every level moves to 600. Never mixed.

Two toggles further down are worth turning on: Font Rendering (antialiasing) and Load Google Fonts Locally, which serves the font files from your own server and keeps visitor IP addresses away from Google.

The 0.9rem Surprise

Kadence Blocks also ships six named font-size presets you can pick on any Advanced Text block: sm, md, lg, xl, xxl, 3xl.

You’d expect sm to be 0.875rem, the usual “small.” It isn’t. In the plugin’s CSS class (3.7.10) the presets resolve to 0.9rem, 1.25rem, 2rem, 3rem, 4rem, 5rem.

So use the preset, not a typed number.

If you type 0.875 on one site to “match” the sm labels on another, they won’t match, by a hair nobody would notice and you’d never find.

Spacing: Names, Not Pixels

Every Row Layout and Section on this site uses Kadence’s named spacing scale for padding and margins. It’s the third token set. The values, from the same CSS class:

Name	Value	What to use it for
xxs	0.5rem	Tight gaps inside a card
xs	1rem	Space under a heading
sm	1.5rem	Card padding
md	2rem	Card padding on feature cards, space under section intros
lg	3rem	Hero top padding, space under a section heading
xl	4rem	Hero bottom padding, section padding on tablet
xxl	5rem	Standard section padding, top and bottom
3xl	6.5rem	The big section, usually the second one on a homepage

Column gutters have their own presets you can pick from: skinny is 1rem, default is 2rem, wider is 4rem, and custom lets you type a number. The hero on this site uses the wider gutter; the feature grids use custom at 24px.

Card and image corners are 8px everywhere, and 365px when you want a pill or a circle. You’ll use those two numbers on every card you ever build. That’s the whole spacing vocabulary, and it lines up with the 8-point grid the whole design system sits on.

Why use names rather than typing 80? Same reason as the palette.

Change the definition of xxl in one place, and every section on your site breathes at once.

Buttons

Set once in the Customizer: background palette3, text palette9, both flipping to palette1 on hover. Radius 8px. Weight 600, capitalized, padding 20px by 40px on desktop and 16 by 24 on mobile.

The secondary style is palette9 on palette3.

Every Advanced Button block you insert inherits one or the other.

That’s it for buttons. You’ll never style one by hand again.

The Gotcha That Silently Eats Your Colors

Here’s the part that only bites you if you write block markup by hand: from a pattern, a migration, or an AI tool building pages. Inside the editor, the UI does this for you and you’ll never see it.

A Kadence block stores a palette color twice: color: "palette3" and colorClass: "theme-palette3". The class is what actually applies the CSS variable.

Set color alone, and the block saves fine. The editor looks fine.

The front end renders your text in the default color with no warning anywhere.

Same pair for backgrounds: if you write bgColor: "palette8", you also need bgColorClass: "theme-palette8".

It happened on an About page rebuild on this site. The text rendered in the default color and nothing said why, until a diff of the markup showed the missing class. Now it’s a checklist line: every color has a colorClass, every bgColor has a bgColorClass. The Row Layout post has the rest of that checklist.

Which of This Should You Copy?

• New Kadence site? Set the nine roles first, before any page exists. Then the two fonts, then the clamp ranges, then the button. An hour, once.
• Existing site with colors set on blocks? Pick the page with the most overrides, replace each hex with the matching slot, and watch how much of the page you can delete.
• Restyling for a client? Change hex values only. If you find yourself opening a page, something was set on a block, and that’s the real fix.
• Writing block markup by hand or with a tool? Pair every color with colorClass, use the spacing names, and set an HTML tag on every Advanced Text block (details here).

Not sure where to start? The nine roles.

Everything else follows from them, and you’ll have it done in an hour.

Final Thoughts

Nine roles, two fonts, six clamp ranges, eight spacing names, one button.

Set them once, and the “make it darker” request from the top becomes a ten-minute Customizer session for you.

No page gets opened. No block gets touched.

That’s what a design system is for. Plain and simple.

Over to you: what’s the last thing you changed on a single block that should have been a token? Let me know in the comments.

Frequently Asked Questions

Where is the Kadence global palette?

In the WordPress Customizer under Appearance > Customize > Colors. The nine slots there feed every Kadence block, core block, and theme element through CSS variables named --global-palette1 to --global-palette9.

How many colors does the Kadence palette have?

Nine main slots (two accents, four contrast shades, three base shades) plus five notice colors for success, info, alert, warning, and rating.

Does the Kadence Blocks palette use the theme palette?

Yes, by default. Kadence Blocks reads the theme’s global palette, so the colors you pick inside any block are the same nine slots you set in the Customizer.

What fonts does Kadence use by default?

The theme defaults to system fonts. Any Google font can be set as the base or heading font in Customizer > Typography, and Kadence can host the files locally.

What is clamp in Kadence typography?

A toggle on each heading level that sets a minimum and maximum size in rem. The heading scales smoothly between 320px and 1200px viewports without separate tablet and mobile sizes.

What do Kadence’s spacing sizes like xs, md, and xxl mean?

They’re presets: xxs 0.5rem, xs 1rem, sm 1.5rem, md 2rem, lg 3rem, xl 4rem, xxl 5rem, 3xl 6.5rem. Using the names instead of pixel values keeps every section consistent and lets you change the scale in one place.

Can I change the whole site’s colors at once in Kadence?

Yes, if the colors were set through the palette rather than on individual blocks. Change a slot’s hex value in the Customizer and everything referencing that slot updates immediately.