# Import bundle — mobile-first redesign round-trip (2026-06-19)

Provenance for the `/design` round-trip that produced the mobile-first design. This folder is
**raw input / provenance** (per `~/Projects/standards/guides/design.md`); the durable contract
is `design/DESIGN.md` + `design/tokens.tokens.json`, which were distilled **from** this bundle.

## Source

- **Tool:** Claude Design (cloud, `claude.ai/design`), driven by Grant.
- **Project:** "Venture-CRM mobile redesign" — `91e62d47-4c4d-43fb-9135-edb05bc59970`
- **URL:** https://claude.ai/design/p/91e62d47-4c4d-43fb-9135-edb05bc59970
- **Input packet:** `design/BRIEF.md` (the mobile-first brief) + uploaded `DESIGN.md`,
  `tokens.tokens.json`, brand SVGs, and desktop screenshots.

## What's in this folder vs. still in the cloud project

The Claude Design MCP (`DesignSync`) streams file **content into context**; it has no
bulk-download / binary-export path. So:

- **Byte-captured here:** `GridApp.dc.html` — the canonical surface, and the richest single
  artifact: it embodies the shared **data model**, the **derived-field formulas**, the stage/
  staleness/note **color logic**, and the locked **card model**. The other surfaces reuse the
  same patterns (verified by reading them).
- **Recoverable from the cloud project (not byte-copied):** the shell + the three other app
  files, `store.js`, `support.js` (the DC runtime), the option-exploration files, and **all
  screenshots**. The full inventory + the distilled logic below preserve the design intent in
  text; re-pull any specific file from the project URL on request.

> These are **Claude Design runtime prototypes** (`<x-dc>` / `<sc-if>` / `<sc-for>` + a
> `DCLogic` class + `support.js`, fed by a client-only seed `store.js`). They are **not
> drop-in** code for `frontend/index.html` (inline-Babel React, real API). They are the
> visual + interaction spec; implementation is a separate scoped build (see `ROADMAP.md`).

## File inventory (cloud project)

**The signed-off mobile set (what "Implement" refers to):**
- `Ten31 Mobile.dc.html` — shell: phone frame + 4-tab bottom bar over a shared
  `window.T31Store` singleton, switching between the four surfaces (dark + light theme).
- `GridApp.dc.html` — Fundraising Grid (canonical). *[captured here]*
- `PipelineApp.dc.html` — Pipeline (swipe-between-stages + accordion variant).
- `RemindersApp.dc.html` — Reminders (urgency groups + swipe complete/snooze).
- `ContactsApp.dc.html` — Contacts (read-only A–Z directory + detail).
- `store.js` — shared client store (data model + derived helpers + mutations).
- `support.js` — the Claude Design runtime (generic; not design content).

**Earlier explorations / option sheets (superseded by the App set):**
- `Fundraising Grid Mobile.dc.html`, `Contacts Mobile.dc.html`, `Pipeline Mobile.dc.html`,
  `Reminders Mobile.dc.html` — static single-screen studies.
- `Existing-LP Flag Options.dc.html` — star vs. corner-earmark vs. top-banner trial (the App
  set defaults to **earmark**; star is the lighter alternative).
- `Font Options.dc.html` — IBM Plex vs. Manrope vs. Hanken Grotesk trial (kept **Plex**).

**`screenshots/`** (~25 PNGs, in-cloud) — per-state renders: grid cards/detail, sort, contact
detail, pipeline dots/log, swipe-reveal, sheets (name/note/view), reminders, LP-flag, fonts.

**`uploads/`** (in-cloud) — the inputs we fed in (`BRIEF.md`, `DESIGN.md`, `tokens`, desktop
screenshots); originals already live in `design/`.

## Data model (from `store.js`)

Investor = `{ id, name, priority:bool, stage:'lead'|'engaged'|'diligence'|'commitment'|null,
daysAgo, contacts:[{name,email}], funds:[[fundName, amount], …], views:[…], notes:[[type,
summary, isoDate], …] }`. Reminder = `{ id, note, orgId, due:iso, done:bool }`. One canonical
copy in a `window` singleton so a stage move / logged comm / reminder edit on any tab reflects
on the others. Mirrors the server model (grid is system of record; `daysAgo` ← server
`last_activity_at`; commitments read-only on mobile).

## Derived-field formulas (sourced — reuse verbatim in implementation)

- **Committed $:** `sum(funds[].amount)`. **Existing-Investor** flag = `committed > 0`
  (auto-derived; not a stored field).
- **Money format:** `≥1e6 → $N[.N]M` (drop `.0`); `≥1e3 → $NK`; `0 → $0`.
- **Staleness** (last-contact overlay, one global threshold — values **TBD with team**):
  `AMBER=10`, `STALE=30` days. `<10` grey → `≥10` amber (`#e0b341` dark / `#a76a07` light) →
  `≥30` red + "`Nd stale`" (`#f87171` / `#c0322f`).
- **Stage order:** `lead → engaged → diligence → commitment`. Stage chip shows **only when in
  pipeline** (`stage != null`).
- **Reminder urgency buckets:** overdue (`<0d`) → today (`0`) → this-week (`1–7`) → later
  (`>7`), colors red / due-soon / accent / subtle.

## Color logic introduced by the comps (reconcile in the contract)

- **Stage chips** use semantic tints (within the existing tinted-badge idiom, not new hues):
  lead = subtle grey, engaged = accent blue, diligence = due-soon `#e0b341`, commitment =
  success `#10b981`/`#6ee7b7`.
- **Light theme** — the comps add a full light palette + a theme toggle. **Adopted as a planned
  feature** (owner decision 2026-06-19): dark stays the default, light ships behind a toggle. Core
  palette is in `tokens.tokens.json` `color.light`; full per-component light tints live in
  `GridApp.dc.html` here. See `DESIGN.md` §8 + the mobile backlog in `ROADMAP.md`.

## Per-surface interaction model

- **Grid:** card list (name · committed · stage chip · staleness last-contact) + Existing-LP
  earmark + Priority corner badge; tappable view-name → bottom-sheet **view picker**; search +
  `+` create (name typeahead → existing-match guard). Tap card → **full-screen detail** with
  per-field **bottom-sheet** edits (name, contact pills, stage, reminder, log note); commitments
  read-only. Graveyard view renders muted (opacity 0.55).
- **Pipeline:** segmented stage control + **snap-scroll** between full-width stage columns
  (page dots), per-card `‹ back / fwd ›` stage move, tap → detail/log sheet. Accordion variant
  included as the alternative.
- **Reminders:** urgency-grouped list; **pointer-drag** card to reveal complete (swipe-left,
  threshold 70px) / snooze (swipe-right); `+` add; tap → edit sheet (note, investor, due chips).
- **Contacts:** read-only A–Z grouped directory (sticky letter headers) + search; tap →
  full-screen read-only detail (email copy, linked investor, last note); pencil = quick-log.

**Shared chrome:** 46px status bar (cosmetic), top bar (·Ten31· + theme toggle + account
avatar), 4-tab bottom bar (Grid·Pipeline·Reminders·Contacts; 56px tall; translucent +
backdrop-blur; `padding-bottom:18px` for safe-area), bottom sheets (radius-20 top, 38×4 drag
handle, `sheetUp` 280ms), toasts (above nav), account popover (profile + logout).