ten31-database/design/_imports/2026-06-19/README.md

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).