A claim in one breath, set large
The lead sets the register for everything beneath it: one or two sentences, never a wall, always in running text.
Itinerary
Three steps on one spine
Write the score
Name the movements before any markup exists.
Realise each movement
Pick the voice, pick the block, check the seam.
Scroll and verify
Density breathes, one h1, one espresso band.
Designed for three.
Specimen
Format sheet
Workshop
Half a day on site.
Duration4 hPricegapSeats12Audit
Two weeks of reading.
Duration2 wPrice—Seatsgap
- Movements
- 10
- Voices
- 03
01running total 13
Placeholder proof — replace with real customer marks
Specimen document
DOC/2026/00001
| Line | Qty | Unit | Amount |
|---|---|---|---|
| First line item — SKU-001 | 25 | 100.00 | 2,500.00 |
| ↳rule · kind — applied at 15%accrues → account | 375.00 | ||
| ↳rule · second kind — applied at 10%accrues → account | 250.00 | ||
| two rules compose; neither displaces the other | |||
| Second line item — SKU-002 | 8 | 1,824.00 | |
| ↳discount · inline — 5%reduces the price | −96.00 | ||
Rate card
Token geometry
| Token | Value | Source |
|---|---|---|
| Hairline | 1px | ink 13% |
| ↳ derived from ink by color-mix | ||
| Rule | 1px | ink 26% |
| Radius | 0 / 6 / 12 px | per voice |
| Total | 3 rules | |
Ledger
- Blocks
- 54
- across three donors
- Movements
- 10
- Voices
- 03
- Modes
- 2
Stat rail
The claim, carried by one photograph
Two sentences at most. At this size the figure is doing the arguing, and the lead only has to say what it is you are looking at.
The claim, set where the picture is quiet
Two states of the same thing
The lead names what changed between the two frames, so the reader knows what to compare before they start comparing.
One claim, set at the size it deserves
A lead is optional here.
No. 01 — Statementno figure
The shape of the argument, before the argument
The claim, with its evidence already on the page
One or two sentences. The numbers to the right do the arguing; this only has to say what they are about.
- Measure
- 00
- What this number counts, and over what period.
- Measure
- 0.0×
- Against what baseline, measured how.
- Measure
- 00%
- Of what whole — a share needs its denominator.
- Measure
- 00
- Confirmed by the client; unconfirmed slots use a Probel.
Release00.00.0000
What is new, said plainly
One sentence on what changed and one on who it is for. An announcement that needs a paragraph is a feature page.
The caveat every announcement has: availability, region, or what this replaces.
Ready to describe the problem?
One or two sentences on what happens after they send it — who reads it and what comes back.
One contractor · from survey to signed handover
The close, in the numbers already proved
- 00
- Measure
- Restated from the ledger above.
- 0.0×
- Measure
- Against the same baseline.
- 00%
- Measure
- Of the same whole.
The position the page has been making, stated once more and left there.
No. 00 — Colophonset in the house faces
Page header, utility overture
Title and lead on a band.
30K+ proof lineThe claim, set large, then the product
One line of lead. The figure below is the evidence.
Primary action
Contact overture
Headline beside an inline form.
Canon
Capabilities, enumerated in rhythm
A bento of five: the first card takes a full column, the other four stack in pairs. Titles are short, subtitles one sentence, art at the foot.
Included on every plan
Icon, short title, one sentence. Up to eight in two rows of four.
Feature title
One-sentence benefit, written from the positioning doc — never invented here.
Second feature title
Icons are slugs of files in src/icons/. Categories drive the FeatureList filter.
Feature title
One-sentence benefit, written from the positioning doc — never invented here.
Second feature title
Icons are slugs of files in src/icons/. Categories drive the FeatureList filter.
01
First highlight, figure right
Two or three sentences at most. The figure carries the evidence; the copy names the benefit.
02
Second highlight, figure left
Rows alternate so the eye zigzags down the page instead of dropping in a column.
03
Third highlight
Keep the count even, four is the sweet spot.
04
Fourth highlight
The last row closes the movement; whatever follows should change plane.
Trusted by a number of names
One human speaks. The quote is set large enough to be the only thing on the plane, and short enough to be read in a breath.
Plan name
Who this plan is for.
- What the plan includes
Featured plan
type: featured renders the emphasised column.
- What the plan includes
Questions a buyer actually asks
One question per row, answered in the page's voice. The first may start open.
A question a buyer actually asks.
The answer, in the page's voice. Categories drive the FAQ filter; one item may start open.
A question a buyer actually asks.
The answer, in the page's voice. Categories drive the FAQ filter; one item may start open.
The close, on the light plane
A quieter coda for pages that already had their climax. Same geometry as the dark one, one step less pressure.
The close, on the dark plane
The gate is the climax — one per page, about two-thirds through. Restate the offer in one line and give one control.
Proof chip · one line
Four ways in, one register
Each card is a route to a human: an icon in an accent wash tile, a short title, one sentence of what happens next.
- 2026-01-01
v0.0.0: Entry title2026-01-01
HTML body — paragraphs and lists allowed.
- Change
The product claim, beside the product
A mechanism-first overture: the frame on the right is not decoration, it is the first piece of evidence.
Specimen
A full layout, not just sections
Sidebar, stat row and table share the same tokens as the marketing page around them, so product and pitch feel like one object.
Overview
Last 30 days
Pricing
Simple, transparent pricing
Annual billing shown — save 20% compared to monthly
Tier one
Who this tier is for, in one line.
- First entitlement
- Second entitlement
- Third entitlement
- Not included here
Tier two
The featured tier — accent ring, primary control.
- Everything in tier one
- Fourth entitlement
- Fifth entitlement
- Sixth entitlement
Tier three
For the largest buyer; sales-led.
- Everything in tier two
- Seventh entitlement
- Eighth entitlement
- Ninth entitlement
Baseline
Tier one
Who this tier is for, billed yearly.
- First entitlement
- Second entitlement
- Third entitlement
- Fourth entitlement
Tier two
Who this tier is for, billed yearly.
- First entitlement
- Second entitlement
- Third entitlement
- Fourth entitlement
Tier three
Who this tier is for, billed yearly.
- First entitlement
- Second entitlement
- Third entitlement
- Fourth entitlement
Built with
