designing-systemslisted

## Phase 1: RESEARCH — Browse, observe, extract CSS specs ### When After Phase 0 identity templates are read. Before writing design-system.md. ### Input (from Phase 0) - Sector identified (creative/fintech/ecommerce/devtool/health) - Typography pair chosen, OKLCH palette direction known ### Steps 1. **Read inspiration catalog** — `references/design-inspiration.md` + `references/design-inspiration-urls.md` 2. **Pick 4 URLs** from catalog matching the project sector (MUST be from KNOWN_DOMAINS) 3. **Browse each site** via fuse-browser (open one session, reuse for all 4): - `browser_open` → sessionId (once) - `browser_navigate` → URL - `browser_scroll` → `to: "end"` (loads lazy content) - Wait 5s → `browser_scroll` `deltaY: -100000` (back to top) → wait 2s - `browser_screenshot` fullPage: true 4. **Write 5 CSS-precise observations** per screenshot (NOT vague descriptions): - (1) Colors: exact oklch() values for primary, accent, background, text - (2) Typography: font-family name, font-size as clamp(min, preferred, max), font-weight - (3) Layout: grid/flex structure with column ratios (60/40, 1fr/1fr), gap in px - (4) Effects: border-radius in px, box-shadow values, backdrop-blur, opacity - (5) Spacing: section padding in px, margin between elements, max-width 5. **Declare reference** — "Site choisi: {URL}. Je reproduis: {el1}, {el2}, {el3}" Pick 3 visually distinctive elements with their CSS specs. ### Output - 4 fullPage screenshots taken (s