Theme tool

Download theme

measuring

Name your theme

This is the name in WordPress, and the zip and folder derive from it.

Theme name

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.

Choose a starting point

Try one of our audited systems, start blank, or generate one. Your theme keeps the name above; choosing a look does not add it to your saved collection until you change something.

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. Each part opens on its own so the control you need stays beside the type specimen rather than inside one long form.

FamiliesHeadings, body and pairings

Headings

Body

Pairings

One click sets a pairing chosen for a purpose.

ScaleBase, 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

StyleWeight, 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

One base step. The rest of the scale derives from it at the ratios the presets ship with, so a pattern's --wp--preset--spacing--60 stays a large gap whatever you set here.

Base step

rem

FinishCorners 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, inspect its own audit, or restore the derived version. 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)

Puts every control in the theme you are editing back to the shipped default. Your other saved themes are not touched; forget one from the theme-name menu above.

Pattern Paste Theme builder

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

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.

Download theme (.zip) 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 plugin, one file

Adding it to the site you have

You get a plugin: upload it under Plugins, activate it, and it lays this design system over whatever theme is already active.

This applies the design system over your whole site: every colour and every font your theme sets, on every page, not only the patterns you paste.

Download plugin (.zip) How to install it
Good to know
- Your theme, your templates and your menus are untouched, and it follows you if you change theme later.
- WordPress 6.7 or newer, which is where the mechanism the sections arrive through exists.
- To remove it, deactivate the plugin. It is not a look you switch off in the Styles panel.
- Anything you set in Appearance → Editor → Styles still wins over it.
- It cannot offer itself as a switchable look in Browse styles. WordPress has no route for that from a plugin; the child theme below does have one.
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.
Your theme's folder name
Download child theme (.zip) 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.

Download files (.zip) 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.

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

theme.json (roles only, no sections)

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

The patterns are rendered and measured in 2 stock themes on WordPress 6.7 to 7.0 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.

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. The specimen on this canvas shows the system; the library shows the patterns in it.

Browse the library Whole pages

Contrast

Where is this design system going?

Starting a new site

Adding it to the site you have

Keeping your theme, switchable in Styles

Editing the theme files yourself

The preset fragment

Where to look at it