WordPress Block Theme Tool

Pattern Paste

measuring

Start your theme

Pick a starting point and try as many as you like. Nothing is saved until you continue or change something.

Start from

Your brand colour, one of ours, a random draw or a blank sheet. Nothing is saved until you change something or move on.

Brand colourA whole theme from one colour, with accent-1 as close to it as the contrast audit allows.

One of oursFinished themes that pass every contrast pair. Try as many as you like.

Something elseA random draw that already passes, or a plain sheet to build up yourself.

Your themes

Kept in this browser. Pressing one opens it here and every preview on this site wears it at the same time.

Every change saves in this browser as you make it. A theme's chip says where it lives; press it to save it to your account, or to take it back out.

Import theme.jsonUpload a file or paste its contents

Use an existing design system as the starting point. Nothing is uploaded: the file is read in this browser.

Upload Or paste it

Anything this narrower tool cannot carry is reported, including palette slugs that had to be renamed.

Colours

8 named colours. These are the only colour values the system states.

Each result is that colour's verdict across every place it is used. Open one for the measured pairs and fixes.

base The page. Every section sits on this unless it states otherwise.

contrast Body text, and the ink every hairline and rule inherits.

accent-1 The primary action: buttons, links, the one thing to click.

accent-2 A second band colour, for a section that has to change key.

accent-3 A third band colour. Quiet enough to sit under text.

accent-4 A mid neutral: borders, muted labels, disabled states.

accent-5 A tinted paper: cards and panels lifted off the base.

accent-6 An ink surface: the dark band, with base as its text.

Type

Choose the faces first, then tune the scale and style.

FamiliesSystem SansHeadings, body and pairings

Headings

Body

Pairings

One click sets a pairing chosen for a purpose.

Scale16px, custom stepsBase, ratio and five named sizes

Set the base to preserve the current proportions, use a ratio to regenerate them, or tune one step. Body copy, buttons and hierarchy headings in every pattern sit on these rungs; a stat or a display headline keeps its own size on purpose.

Base size

rem

Ratio

small

rem

medium

rem

large

rem

x-large

rem

xx-large

rem

Style1.1 leadingWeight, leading, tracking and case

Applies to Heading weight

Heading line height

Heading tracking

Heading case

Body line height

Body tracking

An empty field states nothing, so the face or WordPress default remains in charge.

Spacing

Adjust the overall spacing across your patterns. Smaller values make layouts tighter; larger values give them more room.

Gaps and padding move together

This scales every spacing preset together. It affects gaps and padding that use those presets, including space inside sections and cards. Fixed spacing and custom pattern controls keep their own values.

To change one section or gap independently, use that block’s spacing controls in WordPress.

Overall spacing

rem

Resizes your current proportions. The value is preset 40, the scale’s reference point.

Individual spacing8 presetsPreset values

Each value changes every gap and padding that uses that preset. Values are in rem; 1rem follows your site’s root font size.

Layout widths650 / 1200pxContent and wide widths

Defaults are 650px for content and 1200px for wide blocks. Existing themes keep their own widths. These affect blocks using the theme’s layout widths; full-width sections keep filling the page.

Content width

Wide width

FinishButtons 4px, images as shippedCorners and borders

Corners on buttons and on images, and a hairline round either. A radius is a fixed step; a border colour is one of your roles, so it is measured on every band like any other role.

Button corners

Image corners

Button border

Image border

Sections

The palette derives these reusable bands. Each ships as a section style and appears as a knob on every pattern.

Open one to rename it, change its band, ink or button, check its contrast, or restore the version built from the palette. A section you removed, or one the palette rejected, can be added back below: a reject is re-pointed at a role that passes, never given a colour of its own.

Not in this theme (0)

Review and download

measuring

Download block theme

The share link opens this theme on the live pattern for sign-off. The theme travels inside it; nothing is uploaded.

How to installBlock theme

Where is this design system going?

The whole theme

Starting a new site

You get a complete block theme: templates, header and footer, the palette and every section.

How to install it
Good to know
- Upload it under Appearance, activate it, and the site is this design system from the first page load.
- It replaces the active theme, so any templates that theme gave you are no longer in use.
A child theme

Keeping your theme, switchable in Styles

You get a child of the theme you name: the design system, and no templates, so your parent theme goes on supplying every layout.

How to install it
Good to know
- It is the only download that also appears by name in Appearance → Editor → Styles, so you can switch the look on and off there.
- It is a child of ONE theme. Change parent theme and you need a new child built from this page.
- The parent must be installed, or WordPress refuses the upload with "The parent theme is missing".
theme.json and the section partials

Editing the theme files yourself

You get theme.json and one styles/section-*.json per section, to copy into your active theme's folder over FTP or your host's file manager.

How to install it
Good to know
- Replace that theme's own theme.json with this one; the sections then appear in every Group block's Styles panel.
- It overwrites your theme's own theme.json, which is where that theme states its palette, its widths and its type. Keep a copy first.
- Your theme's next update removes it, silently: updating replaces the whole folder. The child theme is the answer to that.

The theme, the child theme and the files carry their font files in assets/fonts/, declared in theme.json. A site built from them makes no request to Google Fonts or to us, so no visitor data reaches a font service: nothing to add to a privacy notice.

What each one does and does not do
Fact	The whole theme	A child theme	theme.json and the section partials
Keeps your theme's templates and menus	No	Yes	Yes
Survives your theme's next update	Yes	Yes	No
Appears in Appearance → Editor → Styles as a look you can switch	No	Yes	No
Ships the templates, header and footer too	Yes	No	No
To take it off again	Activate another theme	Switch it off in Styles, or activate the parent	Put the original theme.json back

The patterns are rendered and measured in 2 stock themes on WordPress 7.0 to 7.1 before they ship. This is the theme they land in.

The preset fragment

The three preset families a pattern addresses: the palette, the spacing steps and the font sizes. Paste this into a theme that does not honour the contract and every chain in every pattern finds its first rung.

theme.json (roles only, no sections)

The presets on their own, as a file, for a theme you are editing yourself. It carries the palette, the spacing steps and the font sizes; the sections are in the packages above, because a section is a /styles partial or a registered block style and neither one fits in this file.

Where to look at it

The theme you are editing is the one this site is wearing, so walk into the catalogue and read it. Every preview there is WordPress's own render with one stylesheet swapped, so what you see is what a pattern does in your design system rather than a mock-up of it. Each step shows its part of the system; the library shows the patterns in it.

Browse the library

Every control back to the shipped default. Your other saved themes are untouched.

Your theme on a real pattern

Contrast

measuring

Every colour pair this design system produces, measured against the value that actually resolves. Unknown never renders as a pass.

Pair	Colours	Ratio	Result

Your theme·Hero ledger·1280px

Starting a new site

Keeping your theme, switchable in Styles

Editing the theme files yourself