Two plans as a ledger

Two plans, one above the other, written the way a ledger is written: what you get on the left, what it costs on the right, and the saving stated on the rule that separates the two entries. It is the two-plan section for a page that is read down rather than across: pricing-duo sets the same argument side by side with a vertical channel between the plans, pricing-tiers invents a third tier for everybody, and pricing-single has nothing to compare against.

The two entries are not cards and they are not separated by space. Between them runs a band closed by a currentColor hairline above and another below, running the full 1240px measure, and the only thing inside that band is the saving in small tracked capitals. The reader's eye goes down the left-hand features, across to the figure, and then has to pass through the saving to reach the second plan. The argument for paying yearly is physically in the way.

Everything else is deliberately symmetrical. The two entries have the same 58 / 42 split, the same four-line list, the same figure ramp and the same outlined button. Neither is filled, neither is raised, neither wears a badge. Take the colour away and take the typeface away and the composition still says what it says, because what it is saying is carried by two rules and a change of scale.

The scale collision is the second half of it. The figures clamp from 44px to 64px with -0.05em of tracking, against plan names set at 13px in tracked capitals. Nothing in the section sits between those two sizes, and that gap is the whole hierarchy.

1. The two figures and the saving. They ship as £00, £000 and "Save 00%", all placeholders, and the saving is the one number here that has to be true.
2. The plan names and the button labels, and give each button a real link.
3. The two feature lists. Keep them the same length. The symmetry is what leaves the rule as the only thing arguing; the moment one entry is longer than the other, the section starts recommending a plan by accident.
4. The order. Monthly is first because the cheaper number is the one a reader is comparing against. Swap the two entries if your yearly plan is the product and the monthly one is the way in, and rewrite the saving line to read in that direction.

• Every colour. The band's ground is your base and the type your contrast, both as fallback chains ending on a colour WordPress itself guarantees. Both hairlines and the button outlines are currentColor, so they are exactly the colour of the words beside them and cannot resolve to nothing.
• The typeface, entirely. The pattern states no font family.
• Button shape, link colour and list markers, from your theme's element styles. The buttons state no typography of their own, deliberately: a core/button carrying typography is valid in WordPress 7.0 and reported as invalid content in 6.6, which is the oldest version this catalogue supports.
• The spacing scale, through core spacing presets: the air above the first entry, the space inside the saving band and the gap between the entries and the footnote all move with your theme's rhythm.

• The 58 / 42 split. The features get the wider column because they are the only multi-line thing in an entry; the figure, its unit and its button get the narrower one. The figure is set at the left edge of its own column rather than hard against the right edge of the band, so it stays beside its list at every width instead of drifting away from it as the band grows.
• The type ramp: figures at a clamp() from 44px to 64px, tracked capitals at 13px for the plan names, the units and the saving.
• The feature lists state their own size, a clamp from 15px to 16px, rather than the small preset, which is 13px in a theme with no size scale. The footnote under the pair takes the medium rung, because it is a sentence a visitor reads; small is kept only for the tracked capitals.
• The plan names are paragraphs, not headings. "Monthly" and "Yearly" are labels, and a label in the document outline puts two more entries into your page's heading structure for no benefit. The section's own h2 is the only heading in the pattern.
• The footnote is held to 26rem, in a nested constrained group rather than by a padding-right trick, so the placeholder note reads at about 70 characters instead of running the full band.

Off the theme's ladder on purpose, because the size is the composition:

• paragraph at clamp(2.75rem, 4.6vw, 4rem)

Below 782px WordPress stacks each entry's two columns, so the reading order becomes name, features, figure, action, then the saving band, then the second entry in the same order. The saving band does not move, because it was never a column: it is a group with a border top and bottom, so it is a full-width rule at 1920 and a full-width rule at 390. That is the reason this composition exists beside pricing-duo, whose vertical channel has to become a horizontal one on a phone.

• Core blocks only. No plugin, no script, no separator, no <style>. Both rules are group borders, which cannot be narrowed to a centred stub the way a plain core/separator is in Twenty Twenty-Four.
• Every figure in the markup is a placeholder, including the saving and the footnote's note about tax.