greyboxinglisted

# Greyboxing Build every page's structure, style, and motion on placeholder content — real content lands later, into a frame that already works. Inputs, read at the start of every session: `DESIGN.md` (identity — never edited here) and `PAGES.md` (pipeline state — owned and updated here). The surface's dials (`DESIGN_VARIANCE`, `MOTION_INTENSITY`, `VISUAL_DENSITY`) gate every layout and motion decision. Everything is **responsive, designed mobile-first**: build the narrow layout first, then widen through the breakpoints. Sole exception: features inherently bound to one platform. Shared chrome (header, footer, nav) has a **single source** — a component, custom element, or include consumed by every page, never duplicated per page. ## Prerequisites | Tool / skill | For | | ---------------- | ---------------------------------------------------------------------- | | `prototype` | switchable UI variants of signature-tier pages | | `agent-browser` (or `playwright-cli`) | the visual protocol in [review.md](./review.md); when neither is available, the review degrades to code-level checks and the review report must say so | | `grilling` | the site-pass grill | ## Per-page loop One page per fresh session, in `PAGES.md` order: 1. **Plan** — pull the page's key sections and tier from `PAGES.md`. Name the page's **signature el