Lead over three

One feature carried across the top of the band at the section's largest size, with three compact ruled entries in a row beneath it. Every other feature pattern in the catalogue weights its points equally: three even columns, four equal rows, four points hung off a spine. This one does not, and that is the whole design.

One point is the argument and the other three are the answer, and the page tells you which is which before you have read a word. The lead is set at display size with a standfirst beneath it and no rule anywhere near it; the three entries under it are set at around 1.25rem, each opened by a hairline across the top of its third, in a row that reads as a ledger.

Turning the asymmetry through ninety degrees changes what it costs a reader. Across a seam, the lead and the list are alternatives and the eye picks one. Stacked, the lead is simply first: it is the whole width of the band's measure and the only thing on its line, so it is read, and the three thirds under it are read afterwards as its terms. That is the shape to take when the lead has to be the first thing on the page rather than the left thing, and when the three points are closer to equals than the split version lets them be.

The rules do the second half of the work. The row is entirely ruled and the lead is not, so the seam between them is a change of density rather than a divider, and the three hairlines starting on the same line turn three separate points into one object.

feature-lead-list is the same asymmetry across a seam: the lead holds a 54% column at display size and the three entries run down a 46% ledger opposite it. It is the denser of the two and it is the one to take when the section has to sit shorter on the page. This one is taller and flatter, and it wins where the lead is the sentence the whole page is built on, because nothing sits beside it to be read instead.

1. The lead heading. It is the sentence the section exists to say. Ten to fourteen words is the shape it is tuned for; past about eighteen it takes a third line and the entries drop below the fold on a laptop.
2. The standfirst. Two lines. Three still reads. One leaves the lead block short against the width it has taken.
3. The three entries. Four to six words in the heading, one sentence under it. They are deliberately too small to argue, so do not try to make them.
4. The closing line under the lead. A tracked uppercase note, and the only place in the section where the same thing is said twice. Delete the paragraph if it is not true of your plans.
5. The number of entries. Duplicate a column and reset the three widths. Four thirds become four quarters at roughly 260px each at 1240, which is still two or three words a line in the heading; five is too many.

• The typeface. No font family is stated anywhere. The display lead and the compact entries are both set in your face, and the size gap between them is what carries the design in a serif theme and in a sans one.
• Your colours. The ground asks for base and everything on it asks for contrast, each written as a fallback chain ending on a colour WordPress itself guarantees. Nothing here can resolve to nothing. The label and the closing line ask for the label role first and fall through to the same contrast everywhere else.
• Your spacing scale. The band's padding, the gap under the lead block, the gutter between the thirds and the air under each hairline are spacing presets.
• The rules. Every hairline is currentColor, so it is exactly the colour of the text beneath it, on either ground.

• Full bleed with its own measure. The section spans the viewport and holds its content to 1240px.
• The lead block is held to 52rem at the left, not to the band. A sentence at the xx-large rung across the full 1240 runs to a line length no display type survives. 52rem is about eight or nine words a line at the top of the ramp, and left justification keeps the block's edge on the same line as the first third below it.
• The standfirst is held to 34rem inside that 52rem block, in a nested constrained group, so it reads at about 70 characters rather than at the lead's own measure. Two measures in one column is the reason the lead reads as a headline with a note rather than as two paragraphs.
• The ramp. A 14px tracked label, the lead on the xx-large rung with clamp(2.5rem, 5vw, 4rem) behind it, the standfirst on large, entry headings on large at a lower clamp and entry copy on medium with a 15px floor. Nothing in the section uses a bare font-size preset, because core's small is 13px.
• The hairline is a border on the entry group, not a separator block. Each third carries its own border-top, so the three rules are exactly the width of their columns and the gutter between them stays open. A separator would have run the band and made the row a table.
• Where it stacks. Below 782px WordPress stacks the three thirds, so the lead comes first and the entries follow it one under another, each still opening on its own rule. The asymmetry survives as sequence: the loud thing, then the ledger.

• Core blocks only: group, columns, column, heading, paragraph. No plugin, nothing to keep updated.
• The lead block carries a zero block gap and states every margin itself, so the air between the label, the heading, the standfirst and the closing line is four decisions rather than one theme default.
• Text is measured at 4.5:1 against the ground it actually sits on; the lead heading qualifies as large text at 3:1 but is held to the same pair as the copy, because it uses the same chain.