Stitch Design Brief — Hook Street portals

For: stitch.withgoogle.com (Google's UI/UX generator). Paste the relevant section as the prompt.
Source of truth: docs/DESIGN_SYSTEM.md (this is a condensed, paste-ready extract — if the two ever disagree, DESIGN_SYSTEM.md wins).
Created: 2026-05-31. Why it exists: so a Stitch round generates ON-BRAND, not generic — and so we run ONE focused round, pick, and ship (we already have 17 unpicked mockups; the bottleneck is deciding, not generating).

0. How to connect Stitch (Sam-side, ~2 min — I can't do this part)

1. Go to stitch.withgoogle.com → sign in with your Google account.
2. Generate an API key (and copy the MCP config it shows for "use with an agent / dev").
3. Paste the MCP config here in chat → I'll add it to the session and confirm it connects (same as the Cloudflare MCPs).
4. Then I paste the prompt below and we generate.

1. House look (give Stitch this every time)

Premium, calm, forced light (never dark-mode invert — only the header band is dark). Mobile-first, iPhone portrait.
- Header band: navy gradient #0f2440 → #1c3a5e, gold accent #b07d18/#d4af37. Hero ≤ ~100px tall, h1 19–22px one line.
- Cards: white/very-light fill, 1px border #e2e8f0, radius 9–11px, soft shadow, padding 12px, card gap 8px. "Bubbly," not boxy.
- Color: blue #1e40af for actions/links. Status as an 8px colored dot + plain text, NOT sentence-pills. Dots: ok #10b981 · warn #f59e0b · bad #ef4444 · info #3b82f6.
- Type: system font stack; body 15px/1.4; meta 13px; numbers/dates/money use tabular numerals. Never below 11px. Inputs ≥16px.
- Grid: 4px base (4/8/12/16/20/24). No 20/32 inside cards.
- Quality bar: Linear (dense but breathes) · Stripe Dashboard (financial density) · Apple Health (forced-light HIG) · Things 3 (white-space discipline).
- Tables → cards below 640px; container query back to columns ≥640px.

2. Surface A — Sam's home base (home.html)

Intent (per feedback_one_place_one_app): ONE place that pulls data IN, not a launcher that punts OUT. Everything shares this language; every sub-page has back-to-home.
Must show, live: today's top open loops (priority-ranked, tap to act: Done/Proof/Defer), a "Today" glance, grocery list (tap to mark bought + add), cash/balances tile, quick links to the sub-surfaces (Briefings, Obligations, Take-a-trade, LevSMS, Coding).
Generate: 2–3 layouts for a dense, tappable single-screen operator home — bento vs. vertical-feed vs. hybrid. Reachable actions, no dead text.

3. Surface B — Chanie's obligations portal (pwa-deploy/index.html)

Audience-scoped: household/personal ONLY (no Hook Street / Florida / business; no full debt balances). Personal is the default view.
Warmth: time-of-day greeting by name, one warm line, date + Hebrew date + weather + a small delight (birthstone), Friday candle-lighting.
Must do: this-week bills as cards she can check off / mark "taken care of"; a one-tap "Ping Zee" that messages Sam (with an editable note before it sends); clean mobile scrolling (no clipping/overlap).
Generate: 2–3 mobile layouts for a calm, warm, check-it-off household money view. Bento vs. timeline vs. simple list.

4. Paste-ready prompt (template)

Design a mobile-first [home operator dashboard / warm household bills view] following this system: forced light; dark navy (#0f2440→#1c3a5e) header with gold (#d4af37) accent; white bubbly cards (radius 10px, 1px #e2e8f0 border, 12px padding, 8px gaps); blue (#1e40af) actions; status as 8px colored dots + plain text, never sentence pills; system font, 15px/1.4 body, tabular numerals for money/dates; 4px spacing grid; Linear/Stripe/Apple-Health quality. [Then paste Surface A or B "Must show/do".] Output 3 distinct layout directions.

After Stitch: pick ONE per surface, I port it to the live portal (keeping the real data feeds), we ship and iterate on-device. Don't let a new round reset the decision.