Image First Grid Layout Skill

Use When

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.

Apply this as a full design-system direction across hero image treatment, layout grid, overlay framing, typography, supporting cards, and motion.
Use it when the experience should feel led by a dominant photographic or cinematic visual field, with content arranged as precise overlay blocks rather than stacked marketing sections.
This is not a gallery layout and not plain editorial minimalism. The image should act as the stage, while the grid and content overlays give it product-grade structure.

Build the page around a large immersive background image or media surface that fills most or all of the viewport.
Add dark gradient washes, directional overlays, or tonal vignettes so text remains readable while the image still feels present and expansive.
Use visible structural lines such as outer rails, center guides, and small corner markers to impose order on top of the image field.
Anchor the main content low in the viewport or along a deliberate edge so the image retains dominance instead of being crowded by centered UI.
Keep the palette restrained and image-responsive: use neutrals, whites, smoke grays, and one subtle accent derived from the image or brand when needed.