devlynpencil-pushlisted

# Push Codebase Design to Pencil Read the current UI implementation and recreate it as a matching design in Pencil, so the .pen canvas accurately reflects what's live in code. <project_context> - Next.js 16 + React 19, Server Components by default - Custom CSS with CSS variables (no Tailwind) — tokens live in `src/app/globals.css` - Three visual zones, each with its own CSS file and class prefix: - Marketing (`marketing.css`) — cinematic, descriptive class names - Auth (`auth.css`) — minimal, `auth-` prefix - Dashboard (`dashboard.css`) — functional, `dash-` prefix - Design system reference: `docs/design-system.md` </project_context> <goal> The Pencil file should be a faithful mirror of the coded UI. When someone opens the .pen file, they should see exactly what the live site looks like — same colors, spacing, typography, radii, and component structure. This matters because the .pen file becomes the source of truth for future design iterations: if it drifts from code, every subsequent design change will introduce unintended differences. </goal> ## How to approach this <setup> Start by understanding the current state: 1. Call `get_editor_state(include_schema: true)` to see if a .pen file is already open. If not, either create one with `open_document("new")` or ask which .pen file to target. 2. Read the codebase's design tokens from `src/app/globals.css` and `docs/design-system.md`. Also read the zone-specific CSS file for whichever zone the user wants to push. 3. Sy