agency-grid-layout-minimal — Claude Code skill

---
name: agency-grid-layout-minimal
description: "Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail."
---

# Agency Grid Layout Minimal Skill

## Use When
- Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.

## Workflow

## Scope
- Apply this as a full design-system direction across page layout, typography, image framing, service rows, labels, CTAs, and supporting motion.
- Use it when the design should feel like a refined architecture, design, or strategy agency site built on a strict grid and minimal visual language.
- This is not a generic startup landing page and not a heavily containerized dashboard. The layout should feel editorial, spacious, and precisely structured.

## Visual target
- Build the page on a disciplined multi-column grid with large open spans, careful alignment, and generous negative space.
- Use oversized headlines with tight tracking and strong line breaks as the primary visual anchor.
- Pair the hero typography with very small uppercase utility labels, timestamps, section markers, or descriptive copy blocks placed in adjacent grid columns.
- Keep surfaces minimal: light neutral backgrounds, subtle tonal shifts, thin separators, quiet image frames, and very restrained accent use.
- Let imagery feel architectural and premium, usually as large panoramic or facade-like blocks rather than card-heavy galleries.

## Implementation guidance
- Prefer wide max-width page shells with clear column divisions so content placements feel intentional and spatially engineered.
- Use a clean sans-serif type system with confident scale contrast: very large display sizes for hero and section titles, then tiny uppercase metadata and calm paragraph copy.
- Buttons should be refined and understated, using thin gradient-border wrappers, neutral fills, and small uppercase labels rather than loud pills.
- Section transitions can use subtle overlays, tonal blocks, or elevated white surfaces, but keep the overall system sparse and elegant.
- Add only a light amount of structural motion: masked text reveals, slow image settle, and restrained hover shifts are appropriate.
- Background effects, if present, should stay extremely quiet, such as a faint wireframe object, subtle texture, or low-opacity abstract geometry.

## Recommended patterns
- Large hero headline spanning most of the grid with supporting copy anchored in a narrow side column.
- Architectural image block framed by simple spacing and a quiet neutral background rather than decorative chrome.
- Service or capability rows laid out as clean multi-column listings with tiny metadata, strong headlines, and subtle hover state movement.
- White or off-white lower content block that overlays the preceding section with a soft radius or gentle elevation shift.
- Minimal CTA wrappers using 1px gradient shells and low-drama interaction feedback.

## Tuning knobs
- Grid rigidity: increase or reduce the strictness of column-based placements depending on how editorial the layout should feel.
- Typography dominance: let the headlines take over visually, but keep body copy small, sparse, and well-placed.
- Image scale: use large cinematic imagery sparingly so it strengthens the composition without crowding it.
- Structural detail: add only enough labels, separators, and markers to clarify hierarchy without breaking the minimal tone.
- Contrast: keep the palette neutral and airy, with only small departures for emphasis.

## Avoid
- Generic agency pages that rely on repeated cards and interchangeable sections.
- Heavy borders, big shadows, or dense component nesting that fight the minimal grid approach.
- Overusing accent color or decoration that distracts from spacing and typography.
- Treating the page like a dashboard instead of an editorial agency presentation.
- Filling every gap with content instead of preserving intentional open space.