Estimate: 18m · Depends on: 1.0.5.2, 1.0.5.3
Design-first, per Principle #13: mock the three project surfaces before any production React. Compose only existing primitives (Button, Input, Card, Modal, Popover, EmptyState) — the same set Story 1.2's UI used. Save to /design/projects/*.pen + PNG exports.
Three surfaces: (1) Create-project modal — name Input + a live-derived identifier field the user can override (show the PROD → PROD-1 preview), Cancel + Create footer. (2) Empty state — "Create your first project" composing the EmptyState pattern, shown when the active workspace has zero projects. (3) Project switcher — a Popover in the top-nav sitting BESIDE the workspace switcher (document the two-switcher layout: workspace-left, project-next-to-it; this composes atop 1.2.6's TopNav, it does not replace it). Include the archive double-confirmation modal variant (reuse the delete-confirm grammar from 1.2.6 — typed identifier to confirm).
Top-nav note for 1.5: Story 1.5 (app shell) will move project nav into a sidebar. Document in the switcher mockup's notes that this top-nav placement is the minimal 1.3 form and 1.5 composes atop it — same minimal-then-expand pattern 1.2.1 recorded.
/design/projects/: create-modal.png (with the identifier-override + key preview), empty-state.png, switcher.png (closed + open), plus an archive-confirm.png variant.docs/design-system.md + components/ui/{Button,Input,Card,Modal,Popover,EmptyState}.tsx/design/workspaces/*.png from 1.2.1 — the visual grammar to match (switcher, modal, delete-confirm)app/(authed)/_components/{TopNav,WorkspaceSwitcher}.tsx from 1.2.6 — the nav this composes atop