Anatomy of the Page, desktop callouts

Summary

An "Anatomy of the Page" spec: a full desktop article unrolled in the center with yellow leader-line callouts pointing to each part to explain the editorial layout rules.

Visual description

Black background, yellow utility header, and a yellow "ANATOMY OF THE PAGE" title upper-left. A full desktop article (the "Skating Saved My Life" feature) is unrolled as two tall stacked sections down the middle of the slide, with the red Play New opener, framed photos and body copy. Thin yellow leader lines run from the page out to short yellow all-caps annotations on both margins: on the left, "LEAD WITH A P1 THAT COMPLIMENTS THE TYPE OF ARTICLE", "UTILIZE UNCROPPED PHOTOGRAPHY", "BALANCE PHOTOGRAPHY WITH HINTS OF COLOR BEHIND THE IMAGE"; on the right, "USE WHITE SPACE TO ADD BREATH BETWEEN TOUTS USING COLOR", "FILM STRIP DETAILS SHOULD SIT ON TOP OF BLACK BACKGROUND. FONT COLOR SHOULD BE THE SAME AS THE PLAY NEW LOCKUP IN THE P1", and "END WITH A FULL WIDTH PHOTO AND THE PLAY NEW LOCKUP IN THE SAME COLOR USED IN THE P1".

Key takeaway

The annotated-anatomy device: take the finished article from earlier in the deck and label its every decision with leader-line callouts, turning a mockup into a teachable spec. Rules like matching the closing lockup color to the opening one are made explicit rather than left to taste.

Reuse notes

A reusable documentation pattern for any guideline: show a real layout, then annotate it with margin callouts. Best placed right after the clean version of the page it dissects. The leader-line treatment keeps the page readable while the rules sit out of the way.