Preview image. Unlock full-res
White spec page diagramming the single-image horizontal P1 layout across desktop, app card and mobile, with column guides on black placeholder frames.
Summary
A layout-specification page showing how the single-image horizontal hero (P1) is built and how it adapts to app card and mobile, with the Play New lockup placement annotated.
Visual description
White background, all-caps utility header with a centered black Nike swoosh and "DESIGN GUIDELINES / LAYOUT EXAMPLES / 365 CREATIVE DIRECTION INTERNAL USE ONLY" labels. A bold heading "SINGLE IMAGE/ HORIZONTAL" sits upper-left over three short instruction paragraphs in black sans-serif (lockup sizing in 2-col and 1-col, app-card and mobile rules). Below sit three black placeholder mockups labeled "Desktop P1", "App Card" and "Mobile P1 / Thread"; the desktop frame shows the white italic serif "Play New" lockup with thin yellow column guides annotated "2 col" and "1 col". The mobile frame repeats the lockup smaller; the app card is empty. Faint grid lines overlay each frame.
Key takeaway
The convention of teaching a responsive layout by showing the same hero at three breakpoints in a row with live column guides. The yellow annotation lines and "2 col / 1 col" callouts communicate sizing rules without prose.
Reuse notes
A reusable template for documenting any responsive component or hero across desktop, card and mobile. The black placeholder-frame plus thin guide-line treatment keeps the focus on structure. Best for internal design-system or guideline decks rather than client-facing pages.
From this deck: Single image horizontal layout spec
View deck
