Preview image. Unlock full-res
Red slide diagramming margin construction across three application frames with numbered callouts and pixel measurements.
Summary
A construction diagram showing how the margin formula resolves into pixel margins across three frames, with circled numbers tying each frame to a calculation in the legend.
Visual description
Full-bleed BK red (#E5392A) with the standard utility header. A left column holds a brown "Margin Construction" heading and two paragraphs of explanation in dark type. The right area shows three cream application frames: two horizontal banners stacked at top (callouts 1 and 2) and one tall vertical frame at right (callout 3), each with thin red dimension lines and small pixel labels (674 px horizontal, 756 px vertical, with 27 and 30 px margins marked in the corners). Brown circular badges numbered 1, 2 and 3 sit on the frames and repeat down the lower-left as a legend: "674 px horizontal / 25 = 27 px Margin", and so on.
Key takeaway
The numbered-callout system that links a worked calculation in the legend to the exact frame it describes, with live dimension lines showing the result. It makes an abstract ratio concrete across formats without words.
Reuse notes
A clean template for any "how the grid is built" page: show real frames at different proportions, annotate with dimension lines, and number each so the legend can carry the math. Reuse the circled-number convention across the whole layouts chapter for consistency.
From this deck: Margin construction diagram
View deck
