atelier-layoutlisted

# Atelier — Layout & Composition Layout is where "premium" is won quietly. **Generous active whitespace and clear hierarchy are the #1 signal that a design is bespoke**, not templated. The slop tells here: everything centered, three equal cards, uniform bento boxes, cramped spacing, no focal point. This skill structures pages so the eye is led and the page breathes. > **Inputs:** layout archetype + world + **density** from the Direction Doc; spacing/radii tokens from > `atelier-foundations`. Deep reference: `references/fundamentals-deepdive.md` (§8 layout). --- ## The flow 1. **Pick the archetype** → 2. **Choose the engine** (Grid/Flex/Subgrid/container) → 3. **Composition model** → 4. **Gestalt + hierarchy** → 5. **Whitespace rhythm** → 6. **Responsive**. ## 1. Pick the layout archetype Match structure to page kind (per the Direction Doc's world): - **Marketing/landing** — hero (asymmetric or giant-type, not always center) → bento feature grid → alternating editorial rows → social proof → CTA. Z-pattern scanning. - **Web app/dashboard** — app shell (`grid-template-areas`: header/sidebar/main), data-dense modular grid, subgrid for aligned cards, container queries for portable panels. (Build the shell, tables, and forms with `atelier-components`; this skill sets their *structure*.) - **Portfolio/creative** — broken grid, overlap, large media, asymmetry, generous negative space. - **Editorial/content** — single strong column at 60–75ch, side-column captions/pull-qu