WordPress Block Theme Tool, Pattern Paste

Canonical: https://patternpaste.com/theme/

# WordPress Block Theme Tool

Pattern Paste (https://patternpaste.com/)

## 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 colour A whole theme from one colour, with accent-1 as close to it as the contrast audit allows.

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

Something else A 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.

Families System Sans Headings, body and pairings

Headings

Body

Choose a family

### Pairings

One click sets a pairing chosen for a purpose.

Scale 16px, custom steps Base, 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

Style 1.1 leading Weight, leading, tracking and case

Applies to Heading weight

Heading line height

Heading tracking

em

Heading case

Body line height

Body tracking

em

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 spacing 8 presets Preset 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 widths 650 / 1200px Content 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

px

Wide width

px

Finish Buttons 4px, images as shipped Corners 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)

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

Your theme on a real pattern

Contrast

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

Pair | Colours | Ratio | Result |

Pattern: Hero ledger

Your theme · Hero ledger · 1280 px