Before and after pairs

Recent work for a builder, a landscaper or a decorator. A label, a display heading and a short paragraph open the section; under them three before and after pairs run down the page, each with one ruled caption row naming the job, the place and what was done. Static images only: the dragging slider is a Designed Pattern.

In every pair the before is a narrower square and the after a wider 3:2 frame, cut to the same height so their feet line up. The columns are 40 and 60 per cent, and a square at two fifths of the width is exactly as tall as a 3:2 frame at three fifths, so the pair reads as one level strip in which the result simply takes more room. The scale difference is the argument, and it survives colourlessness because it is proportion, not paint. The After tag is the one solid plate on the section; Before is a bare label.

The six photographs (a before and an after of the same job, taken from the same spot), the three caption rows and the paragraph under the heading.

• The ground is base and all type is contrast, each a two-rung chain, at 4.5:1 or better in the stock themes.
• The After tag inverts: contrast ground, base text.
• The label starts on role-label and falls through to contrast; the caption rules are currentColor.
• The heading is off the type ladder on purpose, a bare clamp(2.75rem, 6vw, 6rem). Caption titles are the second mass at clamp(1.25rem, 1.8vw, 1.75rem); body copy takes medium. The typeface is your theme's.

• Each pair is a core/columns block that does not stack on a phone, so Before and After stay side by side at 390px; the heading row above it does stack below 782px.
• Type never sits on a photograph: both tags sit above their frames.

limestone-and-fern states pale limestone #efeadf, dark green-black #1d2a1f type and rules, and the After tag on a fern green #3f6b35 plate with limestone text (5.2:1), set throughout in Avenir Next. It is for a landscaper or a builder whose work is mostly outdoors.