Proof strip

A full-bleed band with almost nothing in it. Down the middle runs a ribbon 34rem wide holding four portrait frames, one under another, each ruled off from the one above by a hairline and captioned with a tracked title and a single short line. Above them sits a small label and one line of intent. Everything else is air. Every word a visitor reads sits on the band's own ground; nothing sits on a photograph.

Every other gallery in this library spends the full 1240px measure it is given. This one takes 34rem of it and leaves the rest as air on both sides, so on a wide screen the section is a narrow ribbon of pictures with a great deal of nothing around it. That restraint is the design, and it is the reason the pattern reads as a photo essay rather than a grid: a single column of portraits at a reading measure is how a magazine sets pictures that are meant to be looked at in order, and a grid is how a site sets pictures that are meant to be scanned.

It survives colourlessness because the device is measure and emptiness. There is no wash, no tint and no accent anywhere in it; the only marks are currentColor hairlines and the type itself. Take every colour away and the ribbon is still narrow and the band is still empty, which is the whole argument. Invert the band, as the variation does, and the argument is untouched.

What happens at 390px. Nothing. The 34rem measure is already wider than a phone, so the ribbon simply becomes the full width of the band and the pattern looks the way it was designed to look all along: one column of portrait frames, each ruled off and captioned, read top to bottom. This is the only gallery in the set whose composition is UNCHANGED by the stack, and it is unchanged for the same reason it is unusual on a desktop. There is no core/columns anywhere in the pattern, so there is nothing for core's 782px breakpoint to restack.

• Ink proofs: the band inverts, contrast ground and base type throughout, including every caption title. The ribbon, its 34rem measure, its four frames and its hairlines are identical to the base; only the colour relationship changes, so the strip reads as a set of prints laid on a dark table. The hairlines need no edit, because currentColor follows the type into the inversion by itself.

Inherits: every colour (the band is a base chain with contrast type; the variation is the inverse; the hairlines are currentColor), the typeface, and the spacing scale (spacing|80 above and below the band, spacing|50 between the intro and the first entry and between entries, spacing|40 between a hairline and the frame under it, spacing|30 between a frame and its caption, spacing|20 inside the intro).

Decides: the 34rem measure, which is the pattern; the 1240px band the ribbon sits inside and the clamp(1.25rem, 4vw, 4rem) gutters that keep it off the viewport edge on a phone; the 4:5 portrait crop on all four frames, set with aspectRatio and "scale":"cover" so the buyer's uploads are cropped to the proportion rather than setting it; the proportion of the type, a 13px tracked caps title against a 15px to 17px line at 1.55; and the hairline above every entry including the first, so the ribbon opens with a rule under the intro rather than drifting into the pictures.

The narrow measure is held by a nested constrained group: the outer align: full band is {"layout":{"type":"constrained","contentSize":"1240px"}}, and its single child is a core/group with {"layout":{"type":"constrained","contentSize":"34rem"}}. No justifyContent, so the layout's own margin-inline: auto centres it in the band.

It is NOT held with padding-right: max(0rem, 100% - 34rem). That was measured: content-columns shipped it on a direct child of a constrained band, and nothing caught it while the block sat 144px out of line at 1400px, because the block is content-box and the padding therefore sits outside the layout's max-width. The block grows to the band's full width and centring puts its left edge at the band's padding edge. What gets measured is a width, and the width was right; the position was not.

The hairlines are per-side top borders on each entry group (border.top, currentColor, solid, 1px), never core/separator, which Twenty Twenty-Four narrows to a centred stub unless it carries is-style-wide. currentColor cannot blank, needs no chain, and follows whatever text colour the band carries, so the rule is exactly as dark as the caption beside it in both the base and the inverted variation.

The photographs. All four image blocks include example photographs; choose Replace to select an image from your media library, and the 4:5 crop is already set. Portraits suit it; a landscape upload will be cropped hard to the ribbon's proportion, which is the point of scale: cover.

The captions are the second thing. Each title is caps with 0.2em tracking and reads best under about 30 characters, and each line should be long enough to wrap once at 34rem so the entry has two lines of caption under its frame.

The measure is the third thing, and it is one number: the inner group's contentSize. Widening it past about 40rem loses the signature, because the air on either side is the design; narrowing it below about 28rem starts to crop the captions into columns of three or four words.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.