Banded pairs

A gallery of six photographs filed as three chapters. Three full-width horizontal bands are stacked with nothing between them: band one on a base chain, band two inverted onto a contrast chain, band three back on base. Each band carries a 13px tracked caps label, one short heading, and a pair of 3:2 frames side by side with a caption under each. The bands butt directly against one another, so every colour change is a hard edge running the full width of the viewport.

Nothing separates the three pairs but a change of ground. There is no rule, no gutter, no card and no border anywhere in the section; the only mark in the design is the line where one band's ground stops and the next one's starts. That is what makes six photographs read as three chapters rather than as a grid of six: the eye groups the pair that shares a ground, and the edge below it says the next pair is a different subject.

It survives colourlessness because it is made of the only two colours every theme has. base and contrast are the sole universal slugs in the preset contract, and alternating between them is the one colour move that always arrives: a theme cannot resolve it to nothing, and it cannot resolve it to two colours that look alike, because a theme that made its ground and its ink alike would be unreadable everywhere else too. Every other colour device in a pattern depends on a slug that may or may not exist and may land at any luminance. This one is guaranteed by construction, which is why the stripe is the structure and not the decoration on top of it.

It survives 390px because the stripe is made of ground rather than layout. Below 782px core stacks each band's core/columns, so the two frames sit one above the other, each still carrying its caption; the band simply gets taller. The band's own ground grows with it, the padding does not stack, and the two hard edges stay exactly where they were, full width. On a phone the section reads as three tall chapters instead of three wide ones, which is the same argument at a different aspect.

Inverted bands (variations/bands-inverted.html). The stripe phase flips. Bands one and three go on the contrast chain with base type, and band two onto base with contrast type, so the section reads dark, light, dark instead of light, dark, light. The composition, the six frames, the proportions and the copy are identical; the only thing that changes is the colour relationship, and that is deliberate: the base and the variation are the two answers to how the section joins whatever sits above it on the page. Where the base's first edge is soft against a light page, the variation's is the edge itself.

Inherits: the typeface and its weights, the resolved value of base and contrast, the spacing scale behind presets 20 to 70, and the stacking threshold for core/columns.

Decides: the striped structure and its phase; the 3:2 crop on all six frames with scale: cover, so whatever the buyer uploads is cropped to the proportion the pairs need; the 13px tracked caps label at 0.22em; a heading ramp of clamp(1.625rem, 3vw, 2.5rem) at -0.025em and line-height 1.08; and captions at clamp(0.9375rem, 1.05vw, 1.0625rem), whose floor is 15px so the lines stay above the responsive floor on a phone.

Contrast is claimed at 4.5:1 throughout: every string in the section is a label, a caption or a heading set on its band's own ground, which is a base chain under a contrast chain or the inverse. Nothing in the pattern sits on a photograph, and there is no accent slug anywhere in it, in any rung.

• The parent adds no gap. The outer core/group is align: full, layout default, blockGap: "0" and zero padding on all four sides, so WordPress's flow-layout gap rule between its children resolves to nothing and the bands touch. A core/separator cannot do this job at all: it is a line between two things, not the absence of a space, and Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub.
• Each band owns its own edges. Every band is its own align: full group with its own ground, its own spacing|70 top and bottom padding and its own clamp(1.25rem, 4vw, 4rem) gutters, with a nested constrained layout at 1240px. The colour therefore runs to the viewport edge while the content stays on the measure, which is the only way the hard edge reads as full width.
• The inverted band states its type on every block inside it, headings included. A theme's heading element style beats a colour inherited from a wrapping group, so a heading left to inherit lands the same colour as its own band at ratio 1.0, invisible and with nothing to flag it. So the label, the heading and both captions in band two each carry an explicit base chain, and the same is true of whichever bands are inverted in the variation.
• Vertical rhythm is inline, not inherited. The heading states margin-top: var(--wp--preset--spacing--20) and margin-bottom: 0, and the core/columns states margin-top: var(--wp--preset--spacing--50) and margin-bottom: 0, so the spacing inside a band does not depend on which layout gap a theme happens to apply.

The six photographs. Every image block includes an example photograph, with the 3:2 crop and cover setting already set. Select a frame and choose Replace to use your own file.

After that, the copy: three labels (keep them short, they are tracked caps and are meant to be glanced at rather than read), three chapter headings, six captions. The pattern will take a fourth band if the story needs one, but the phase has to keep alternating: duplicate a band, swap its ground chain and its type chain, and change the four colours in it so the stripe stays honest.

Last, the phase itself, which is the variation below.

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.