Lead and rail

The three squares and their two gaps are tuned to finish flush with the bottom of the lead, so the pair reads as one rectangle divided rather than a big image with thumbnails parked next to it.

Three numbers make that true, and the arithmetic is worth stating because it is the whole design:

• the columns gap is 1.5rem (24px), so at the 1240px measure the two columns share 1216px;
• the rail column is 15% and the lead 85%, which is 182.4px and 1033.6px after core's flex shrink redistributes the gap (a column with a width becomes flex-basis with flex-grow: 0, and shrink is weighted by basis, so the 85/15 ratio survives the gap exactly);
• the lead at 16:9 is therefore 581.4px tall; three squares are 547.2px, which leaves 34.2px for the two gaps, so the rail's blockGap is clamp(0.5rem, 1.2vw, 1.0625rem) and lands on 16.8px at the 1400px viewport this is authored for.

That is 580.8px of rail against 581.4px of lead: half a pixel out at the authored width. The 1.2vw middle rung is not decoration; the ideal gap is 1.4% of the row's width, so a gap in vw tracks the shrinking row instead of drifting away from it. The clamp's 1.0625rem cap is exactly the ideal figure once the 1240px contentSize stops the row growing.

The rail is narrow because the arithmetic demands it and not because a thin column looked nice. At 1:1, three stacked squares are three times the rail's width tall, and a 16:9 lead is only nine sixteenths of its own; so a rail wider than about 16% of the row cannot finish level with the lead however small the gap between the squares is made. A 28% rail would overhang it by more than the lead is tall.

Be clear about what is exact and what is close. The flush finish is exact at the authored proportions, and stays inside a couple of pixels from the stacking point up to the measure's cap because both sides of the equation are proportions of the same row. It is approximate rather than exact once a theme's own scale moves the numbers: the outer padding, the 1240px measure and the gutters are all the theme's or ours to change, and any of them shifts the row's width slightly out of step with a vw gap. The gap between the three squares is stated as a length here rather than as var:preset|spacing|NN for exactly that reason: a spacing preset is a different size in Twenty Twenty-Four than in Twenty Twenty-Five, and a rail built on one would overhang the lead in the other and nothing would warn you. One case is worth naming: a theme that never opts into spacing.blockGap gets no generated gap rule at all, so the three squares meet edge to edge and the rail finishes about 34px short of the lead. The composition still reads; the lock does not, and it is the absent gap that took it away rather than the markup.

It survives colourlessness because it is entirely proportion. Nothing in the signature is a colour, a weight or a face: it is 85/15, 16:9, 1:1 and a gap. In a theme with no presets at all it is the same composition, which is the opposite of a device that needs a tint to be visible.

At 390 the composition survives as its own hierarchy. Core stacks core/columns below 782px and gives every column flex-basis: 100% !important, so the lead becomes a full-width 16:9 frame and the rail becomes three full-width squares under it, still in the reading order lead-then-rail. The flush finish is gone, because there is nothing left to be flush with, but the idea it exists to state, one frame that carries the room and three that answer it, is if anything louder: one wide frame, then three tall ones. The caption row's two halves wrap onto two lines and stay in order.