# Pricing duo

> Two ways to pay for the same thing, head to head and equal, with the saving set in the ruled channel that runs between them. Neither side is taller, tinted or badged: the seam does the arguing. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/pricing-duo.html
Section: Pricing
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, list, list-item, paragraph, separator
Keywords: pricing, plans, monthly, yearly, two, duo

Promise: Identical markup in every theme.

---

## The signature moment: the seam carries the type

The two plans are separated by a narrow column closed with a hairline down each
side, and that channel is where the saving is set, in small tracked capitals.
No other pricing pattern in the catalogue puts type in the gutter.

Everything else is symmetrical on purpose. The two plans have the same padding,
the same type ramp, the same number of lines in their lists and the same
outlined button. Neither is taller, neither is filled, neither wears a badge.
The whole argument for paying yearly is the eight percent of the width between
them, and a reader who looks at the two figures has to cross it to compare them.

The channel's hairlines are `currentColor`, so they are always exactly the
colour of the words either side, in any theme, and the type in the channel is
aligned with the plan names across it.

## What happens on a phone

Below 782px WordPress stacks the columns, so the order becomes plan, saving,
plan. The channel stops being vertical: it lands as a full-width row between
the two plans with a short hairline at each end, holding the saving line, which
is the same reading order and the same argument in the shape a phone can carry.

If you would rather the seam were horizontal at every width, take
`pricing-ledger`, which is built that way: the plans become two ruled entries
stacked down the page with the figure and the action in the right-hand column,
and the saving sits between the hairlines that separate them.

## What it inherits from your theme

- **Every colour.** The band's ground and text are preset chains ending on a
  WordPress core default; every rule, the channel's hairlines and the button
  outlines included, is `currentColor`.
- **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 does not stay valid across editor
  versions.
- **The spacing scale**, through core spacing presets.

## What it decides for itself

- **The proportions**: 46 / 8 / 46, with the middle eight per cent given to
  nothing but a line of type and two hairlines.
- **The symmetry.** Equal lists, equal buttons, equal weight. It is a real
  design decision and the one thing not to undo casually: the moment one side
  is louder, the section becomes `pricing-tiers` with a tier missing.
- **The type ramp**: figures at a `clamp()` from 44px to 64px with tight
  negative tracking, against tracked capitals at 13px for the plan names and the
  saving. The gap between those two sizes is the whole hierarchy.
- **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 states the same clamp, because it is a sentence a
  visitor reads; `small` is kept only for the tracked capitals.
- **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 1240px band.

## What you change first

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
   makes the seam the only thing arguing.
4. **The channel's width**, if your saving line is long. It is a column width
   like any other; widen it to ten or twelve per cent and take the difference
   off the two plans equally. The line wraps rather than overflowing, so a long
   saving in a narrow channel costs you height, not layout.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(2.75rem, 4.6vw, 4rem)