1.2.1 Mockups: workspace switcher, settings page, invite-acceptance screen, invite email

Estimate: 25m · Depends on: 1.0.5.2

Produce viewable mockups of the four user-facing surfaces this Story adds — workspace switcher (top-nav widget), workspace settings page, invite-acceptance landing screen, and the invite email body — before any production React or email copy is written. Subsequent Subtasks (1.2.5, 1.2.6) read these mockups as their source of truth.

Why this exists: Design-first ordering is a load-bearing product principle (vision.html §13 + notes.html mistake #4). The invite flow especially benefits from designing the email body up-front — invites are user-to-user communication (higher visibility than password reset's machine-to-user) and the copy carries the workspace's tone. Designing it later, inline with the endpoint implementation, produces forgettable boilerplate.

What you'll do: Open Pencil (or another visual prototyping tool the coding agent can drive) and lay out the four surfaces using only the primitive components produced in 1.0.5.2 (Button, Input, Card, Dialog). The switcher composes as a dropdown (Button variant="ghost" + current workspace name + chevron, opening a menu of memberships with an "Invite teammates" entry pinned at the bottom). The settings page composes as a vertical stack of cards (Name, Members, Danger zone). The invite-acceptance screen composes the auth-card frame from 1.1.10 with a single-button "Accept invite to {Workspace}" CTA. The invite email body composes as a plain-text + HTML pair using the same dev-console-readable shape Story 1.1.6 established for password-reset emails. Save outputs to /design/workspaces/{switcher,settings,invite-accept,invite-email}.pen and PNG exports under the same path.

Top-nav decision recorded here: the top-nav frame doesn't exist yet (Story 1.5 ships it). 1.2 ships a minimal top-nav containing only the workspace switcher and the user menu — the dashboard smoke route from Story 1.1.2 already needs the user menu, so this is incremental. Story 1.5 later expands the top-nav with project nav, search, etc. Document this minimal-then-expand pattern in the switcher mockup's prompt-hint notes so 1.5's design Subtask knows to compose atop, not replace.

Acceptance criteria

• Four mockups exist: switcher.png (top-nav widget, closed + open states), settings.png (settings page with the three cards: Name / Members / Danger zone), invite-accept.png (the post-auth landing screen), invite-email.png (email body rendering — both HTML and a plain-text fallback variant).
• Each surface uses primitives from /docs/design-system.md exclusively — does NOT introduce new component patterns. The switcher composes Button variant="ghost" + a menu structure from the existing Dialog/Popover primitives.
• Switcher mockup shows: closed state (current workspace name + chevron), open state (list of memberships with check-mark on active + "Invite teammates" pinned at the bottom).
• Settings mockup shows: Name card (text input + Save), Members card (list of current members + their roles + an "Invite" button + per-row "Remove" actions), Danger zone card (Leave workspace + Delete workspace — with the latter requiring double-confirmation via Dialog).
• Delete-workspace double-confirmation modal designed: shows the workspace name, a text input asking the user to retype it to confirm, and a destructive-variant Button that's disabled until the input matches exactly.
• Invite-accept mockup shows: workspace name in the headline, "{inviter.name} invited you to join {workspace.name}" subhead, single Accept Button. Includes an error variant for "This invite has expired" matching the structure of 1.1.6's reset-link-expired screen.
• Invite email mockup shows: subject line, greeting, "{inviter.name} invited you to join {workspace.name} on Motir", accept link, expiry note ("This link expires in 7 days"). HTML and plain-text bodies both designed; the link MUST be visible unredacted in the plain-text body so dev/test flows can grep it (mirroring the password-reset email's dev-console contract from 1.1.6).
• Error states drawn: invite expired, invite already used, invite for wrong email (logged-in user's email doesn't match the invite's email address).
• Output saved to /design/workspaces/*.pen + PNG exports.
• Reviewer can view the mockups and react before any React or email-body string is written.

Context refs

• /docs/design-system.md — canonical visual reference
• components/ui/Button.tsx, Input.tsx, Card.tsx, Dialog.tsx — the primitives to compose from
• /design/auth/auth-screens.pen from Subtask 1.1.1 — the visual grammar for auth-adjacent surfaces (invite-acceptance reuses this card frame)
• /design/auth/email-templates.png from Subtask 1.1.6 — password-reset email shape (the invite email follows the same dev-console-readable contract)
• MOTIR.md — brand-mark deferral principle (no placeholder wordmark; the minimal top-nav this Subtask designs reflects that)