UI kit

Every token in theme.json — colour, type, spacing, radius, layout, motion — shown twice over: as live output, and as the property and value that produced it. Plus one instance of each core block the theme styles. If something looks wrong here it is wrong everywhere.

How to read this page

• Name — the design label, as written in theme.json. This is what a designer calls it.
• Slug — what you type in the editor or in block markup: fontSize: "body-lg".
• Custom property — what WordPress emits into the page, and what CSS consumes.
• Value — the resolved value. Read live from theme.json on every request, never retyped, so this page cannot drift from the theme.

SCSS does not use these properties directly: assets/scss/_variables.scss aliases each one to a short --chn-* name and component styles reference the alias. That alias layer is hand-written, so it is not listed here — read it there, in one place, rather than in two.

Colour

Swatches

Properties, values and contrast

Recap

Type

Families

display · --wp--preset--font-family--display

Handgloves — The quick brown fox jumps over the lazy dog

body · --wp--preset--font-family--body

Handgloves — The quick brown fox jumps over the lazy dog

quote · --wp--preset--font-family--quote

Handgloves — The quick brown fox jumps over the lazy dog

Headings — h1 to h6

Real heading elements, so what you see is the element style itself and not a paragraph dressed up as one. Only h1, h2 and h3 are designed. The design defines three heading styles, so theme.json styles three elements; h4–h6 below are the browser’s own scale inheriting the body face, and they are not brand output. Nothing should reach for them until the design says what they are.

The specimen below is deliberately this page’s second h1 — a heading specimen has to be a real h1 to be worth anything. That is defensible on an internal reference page and nowhere else: do not copy a second h1 into a module or a client page.

h1 — display size · Display family · uppercase · fluid

Handgloves

h2 — heading-2 size · body family · uppercase · tracked

Handgloves

h3 — heading-3 size · body family

Handgloves

h4 — ⚠ no element style · browser default

Handgloves

h5 — ⚠ no element style · browser default

Handgloves

h6 — ⚠ no element style · browser default

Handgloves

Paragraph sizes

Each named size applied to a p, labelled with its slug, its custom property and its value. Core’s own small, medium, large and x-large are not in this theme — a stray reference to one silently resolves to a core default rather than erroring, which is the more expensive kind of mistake.

display · --wp--preset--font-size--display · clamp(4rem, 2.84rem + 4.762vw, 7.125rem)

Handgloves

display-sm · --wp--preset--font-size--display-sm · 4rem

The quick brown fox jumps over the lazy dog

display-xs · --wp--preset--font-size--display-xs · 2.25rem

The quick brown fox jumps over the lazy dog

heading-2 · --wp--preset--font-size--heading-2 · 2.25rem

Handgloves

heading-3 · --wp--preset--font-size--heading-3 · 1.5rem

The quick brown fox jumps over the lazy dog

body-xl · --wp--preset--font-size--body-xl · 1.3125rem

The quick brown fox jumps over the lazy dog

body-lg · --wp--preset--font-size--body-lg · 1.25rem

The quick brown fox jumps over the lazy dog

body · --wp--preset--font-size--body · 1rem

The quick brown fox jumps over the lazy dog

body-sm · --wp--preset--font-size--body-sm · 0.875rem

The quick brown fox jumps over the lazy dog

caption · --wp--preset--font-size--caption · 0.75rem

The quick brown fox jumps over the lazy dog

meta · --wp--preset--font-size--meta · 0.6875rem

The quick brown fox jumps over the lazy dog

button · --wp--preset--font-size--button · 0.875rem

The quick brown fox jumps over the lazy dog

quote · --wp--preset--font-size--quote · 1.6875rem

Handgloves

Size properties, values and metrics

Element styles

Recap

Buttons and variants

Every CTA on this site is the native wp-block-button, so these are all the shapes one can take. Nothing here is a bespoke component, per docs/wordpress.md §4.

Default — no colour tokens defined

That grey is core’s, not the brand’s. styles.elements.button sets typography only, so an uncoloured button falls back to WordPress’s default #32373c on white — a colour in no palette on this project. The fix is a design decision about the primary CTA, not a value to invent here, so it stays visible until it is ruled.

Palette fills

Palette outlines

The outline style draws its border from the text colour

Radius variants

The three radius tokens on one button

Width variants

Core’s 25 / 50 / 75 / 100% fills, for stacked mobile CTAs

Two things these specimens cannot show. No href: every button here is deliberately link-less, because a specimen pointing at # is a dead link that a keyboard or screen-reader user still has to tab through — the real link under Links and lists is where focus behaviour is demonstrated. No states: hover, focus and disabled are not in theme.json either, and are as undefined as the fill colour.

Recap

Spacing

Design tokens

The whole of what the design defines, each bar exactly the height of its token.

sm · 0.5rem · --wp--preset--spacing--sm

md · 1rem · --wp--preset--spacing--md

xl · 2rem · --wp--preset--spacing--xl

⚠ The scale stops there, and the gap is known. There is no lg and no section-padding token at all, while the approved frames pad their sections by five values that are not in the collection. Do not invent an lg and do not hard-code a section pad around it — raise it.

The generated fallback scale

Recap

Radius

Recap

Layout widths

Recap

Motion

Recap

Core blocks

One instance of each core primitive the theme styles. Per docs/wordpress.md §4 these are what a module composes from — never a hand-rolled parallel component.

Links and lists

Body copy with an inline link back to the front page, underlined by default and losing the underline on hover. Tab to it to see the focus ring, which is never removed.

• Colour, type, spacing, radius, layout and motion come from theme.json.
• SCSS reads them through the --chn-* alias layer, never as raw values.
• Breakpoints come from mixins; a raw @media query is a defect.

1. Create a page with the slug ui-kit.
2. templates/page-ui-kit.html binds to that slug on its own — nothing to select.
3. The page’s own content still renders, below, so notes can be added without touching the theme.

Quotations

Tokens are the contract. A screenshot is only evidence of what the tokens produced.

docs/wordpress.md §4–5

Disclosure

Code

.chn-example {
	color: var(--chn-gold-primary);
	padding-block: var(--chn-space-xl);
	border-radius: var(--chn-radius-md);
}

Recap

Where the values live

The map from a token layer to the theme.json path that defines it and the property it emits. This is the one table on the page that is hand-written, because it describes shape rather than values — the shape is WordPress’s, not this project’s.

Theme blocks

The theme ships one block of its own so far, acf/placeholder-slot, and it is deliberately absent from this page. It is an ACF block, ACF Pro is not in the local plugin baseline, and every render.php here returns early without it — so an instance would render nothing and read as a broken kit rather than a missing plugin. Add it here in the same change that adds ACF Pro locally.

Recap