Nike Empower hero grid variable modifier

Summary

A page explaining the variable-modifier rule for the hero grid: when Headline Layout A runs in the hero grid, the modifier word is scaled on a 16-row grid to allow playful changes in size.

Visual description

White background, standard running header and a left-aligned "HERO GRID APPLICATION / VARIABLE MODIFIER" title with a short body paragraph noting the modifier typography is scaled to a 16-row grid for flexible, playful variation. Below sit four tall black panels in a row, all labeled "3X4", each overlaid with thin red horizontal grid lines marking the 16 rows. A white condensed "XXX." placeholder modifier sits at the base of each panel but at a different scale per panel, from small to very large, demonstrating the range of heights the modifier can occupy. Footer: "©2021 NIKE INC." left, "nike-empower-creative-2021" right.

Key takeaway

Using a visible row grid plus a repeated placeholder set at different heights to communicate a flexible-but-bounded scaling rule. It shows variation is encouraged while still pinning the modifier to a shared grid system.

Reuse notes

A clear way to document "this element can vary in size within these limits." The red row-grid overlay reads instantly as a measurement system; keep it consistent with other grid pages. Reuse for any component whose scale is meant to flex across a layout.