[Templates] 10 sections · Header, Hero, Logos, Features, How it works, Stats, Pricing, FAQ, Call to action, Footer

Catalogue accessStandard

SaaS landing page

The full landing page a software product needs: a header, an asymmetric hero, a row of customer wordmarks, three features, the four steps of getting started, the numbers, three pricing tiers, the questions, one closing ask and a full site footer. Ten sections, every one of them a pattern you can also take on its own.

View Open in a new window

Sections 10 in order

Every section inherits the theme you paste it into. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A software product

The page is 10 sections of core block markup, 10 top-level blocks in all, drawn from 10 patterns in the library. Nothing here is authored twice: every section is the pattern exactly as it ships, so the section you lift out of this page is the same markup the pattern's own page would hand you. No plugin, no stylesheet, no script.

Back to the templates

[Included with the subscription]

£50 a year (save £94)

Or £12 a month. Launch pricing.

Every pattern and variation, every page template, every theme download. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Anything you already pasted keeps working, subscribed or not.

The whole page, or any one of its 10 sections, from the rail beside the preview.

Before you paste

Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are not supported: a pattern takes its colours, spacing and type from the theme's theme.json, which is the file a classic theme does not have.

Derived from the files

Sections: 10
Blocks: 10 top level
Bytes: 101,030
Draws on: Header, Hero, Logos, Features, How it works, Stats, Pricing, FAQ, Call to action, Footer
Patterns: nav-bar, split-hero, logo-bar, feature-grid, steps-run, stat-row, pricing-tiers, faq-list, cta-band, site-footer
Colour: inherited
Type: inherited
Motion: none
Empty images: 0

Parsed out of the template's references and the patterns they name when the catalogue builds. Change a pattern and this changes with it.

Editing Open the theme tool

measuring

Name your theme

The name WordPress shows; the zip and its folder take it.

Theme name

Import theme.jsonUpload a file or paste its contents

Reading a file is the theme tool's job, and the theme you make there is the one this site wears.

Import in the theme tool

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

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

Download

The zip WordPress installs, the theme.json on its own and a child of the theme you run are built in the theme tool. It opens on this same theme.

Download in the theme tool

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.