nested-container-clean-agency

---
name: nested-container-clean-agency
description: Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.
license: MIT
---

# Nested Container Clean Agency Skill

## Use When
- Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.

## Workflow

## Scope
- Apply this as a full design-system direction across page shell, section framing, cards, pricing blocks, call-to-action areas, and layout rhythm.
- Use it when the interface should feel clean, premium, and agency-led, with strong container hierarchy instead of flat page sections.
- This is not generic card-grid SaaS and not only a framing utility. The whole composition should be organized through nested shells and inset feature blocks.

## Visual target
- Start with a centered outer page container that defines the main boundaries of the design with visible vertical rails, corner squares, or light frame lines.
- Inside that outer shell, place one or more inset containers with contrasting surfaces, especially dark rounded feature zones nested within a light editorial page.
- Build hierarchy by stacking containers inside containers: outer shell, inner dark section, then smaller rounded cards or content panels inside that section.
- Keep typography clean, modern, and agency-like, with confident headlines, restrained body copy, and minimal UI noise.
- Use a soft accent color sparingly for pills, buttons, active dots, subtle gradients, and call-to-action emphasis rather than saturating the full layout.

## Implementation guidance
- Prefer a max-width outer wrapper with consistent side padding, vertical boundary lines, and tiny corner markers to establish the global frame.
- Use nested rounded containers to create depth: a darker major block inside the page, then lighter or darker cards inset within it depending on contrast needs.
- Maintain generous whitespace between nested layers so each shell feels intentional and breathable.
- Use border gradients, low-contrast strokes, and soft shadows to separate layers instead of heavy outlines everywhere.
- Pricing sections, service groupings, or feature comparisons should feel like modular editorial blocks housed inside a larger premium container.
- Motion should stay minimal and polished: masked text reveals, calm fade-ins, and light hover transitions are enough.

## Recommended patterns
- White or off-white outer shell with border-x rails and tiny corner squares defining the page bounds.
- Large dark rounded section acting as a featured pricing or capability block nested within the lighter page shell.
- Premium inner cards with gradient-border wrappers, soft surface contrast, and clear content grouping.
- Small uppercase labels, compact pills, and restrained accent buttons to preserve the clean agency tone.
- Editorial spacing that lets each nested container breathe, with strong alignment and uncluttered copy blocks.

## Tuning knobs
- Nesting depth: choose how many layers of shells to use before the system feels too busy.
- Contrast balance: tune the jump between the outer shell and inset containers so the hierarchy feels strong but elegant.
- Corner radius: keep rounded containers polished and premium, but avoid making them feel overly playful.
- Accent strength: use the accent color as punctuation for key controls, tags, and highlights only.
- Container density: give cards enough internal padding so the system reads premium instead of cramped.

## Avoid
- Flat sections with no clear outer-to-inner container hierarchy.
- Generic agency layouts that use one level of cards and call it structured.
- Overdecorated gradients, glows, or excessive accent color that break the clean tone.
- Equal visual weight on every nested block, which weakens hierarchy.
- Cramped containers with insufficient spacing between shell levels.