Keysat
7b560c97b6
Phase C/D of the /design round-trip (Claude Design "Venture-CRM mobile redesign", 2026-06-19). Captures the cloud output and folds it into the durable design/ contract; no frontend reskin in this pass. - _imports/2026-06-19/: provenance — GridApp.dc.html (byte-exact canonical surface) + a manifest README (project URL/inventory, data model, derived- field formulas, per-surface interaction model). DesignSync can't bulk- download, so screenshots/other sources stay recoverable from the cloud URL. - DESIGN.md: §8 Responsive rewritten to the landed mobile-first system (4-tab bottom bar, card/detail, bottom sheets, swipe/snap, safe areas); §4 mobile component states; §3 15px mobile type scale; §2 stage/staleness + light-theme palette pointers. - tokens.tokens.json: new `mobile` group (type scale, radii, touch sizing, safe-area) + `motion.sheet`; `color.light` palette — light theme adopted as a planned, toggle-gated feature (dark stays default). - ROADMAP.md: mobile-first implementation backlog (contract-vs-code gap), gated on the inline-style->CSS migration and the locked pipeline spec.
110 lines
6.8 KiB
Markdown
110 lines
6.8 KiB
Markdown
# 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).
|