image-first-grid-layout

---
name: image-first-grid-layout
description: Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.
license: MIT
---

# 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.

## Workflow

## Scope
- 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.

## Visual target
- 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.

## Implementation guidance
- Prefer a full-screen or large-stage hero with the background image treated as a foundational layer, not a small card or thumbnail.
- Overlay the image with a measured grid system using vertical container lines, subtle framing guides, or a split-column scaffold that remains visible but quiet.
- Place the primary headline and CTA group in one anchored grid column, then use a secondary box for quote, proof, metric, or supporting narrative in another.
- Supporting cards should feel lightly framed and transparent or low-fill, so they sit on top of the image instead of fighting it with heavy container chrome.
- Introduce subtle technical atmosphere when useful, such as faint WebGL lines, additive streaks, slow background motion, or minimal parallax over the image plane.
- Typography should stay clean and premium: confident sans-serif headlines, soft low-contrast body copy, and restrained micro-labels or nav text.
- Motion should emphasize reveal and drift rather than busy interaction, using masked text entrances, slow line movement, and gentle hover sweeps.

## Recommended patterns
- Full-bleed landscape or architectural image with layered left-to-right and bottom-up dark gradients for readability.
- Vertical guide rails with tiny square markers or subtle boundary points running through the stage.
- Bottom-anchored hero copy paired with a secondary quote, testimonial, or metric box floating in an adjacent grid lane.
- Sparse top navigation with a light transparent shell so the image remains the main event.
- Faint WebGL or canvas line field drifting over the image in screen or additive blend mode.
- Buttons that use translucent dark fills, thin borders, and small moving highlight sweeps instead of loud color blocks.

## Tuning knobs
- Image dominance: let the media occupy nearly the whole experience, then scale content density around it rather than the other way around.
- Overlay darkness: adjust gradient strength until readability is strong without flattening the image.
- Grid visibility: make the rails and markers just visible enough to feel intentional, not heavy enough to distract from the photography.
- Technical atmosphere: add or remove subtle animated lines or glow depending on how product-like versus purely cinematic the page should feel.
- Content anchoring: shift copy and secondary boxes left, right, or lower in the viewport to preserve strong negative space.

## Avoid
- Turning the image into a decorative background behind a conventional centered SaaS layout.
- Overfilling the viewport with cards, widgets, or text that erase the image-first composition.
- Bright multi-color accents that break the calm, cinematic tone of the stage.
- Heavy solid containers that sever the relationship between the overlays and the underlying image.
- Treating the grid as invisible; the structure should quietly organize the composition.