From 99404db48b4d60b6b0d45ad820eb2ab6e4f48bba Mon Sep 17 00:00:00 2001
From: Keysat <licensing@keysat.xyz>
Date: Thu, 18 Jun 2026 21:50:34 -0500
Subject: [PATCH] Add mobile-first design contract and redesign brief

Scaffold design/ for the frontend's first design contract, extracted
as-built from index.html (document-as-is):
- DESIGN.md: 9-section brand brief (dark venture-CRM look, IBM Plex,
  single #3b82c4 accent) + tokens.tokens.json (DTCG, from :root + an
  inline-style census).
- BRIEF.md: the mobile-first redesign packet. Mobile = 4 surfaces
  (Grid, Pipeline, Reminders, Contacts) in a bottom tab bar; the rest
  desktop-only. Grid view-switching first-class; narrow on-the-go edit
  set (name, contacts, notes/comms/outreach log, stage, reminders) +
  create-investor, all via the canonical grid path (Contacts stays
  read-only). Includes a backend-reality callout: no field-level write
  (whole-grid versioned PUT vs the targeted log-communication path),
  stage is a separate two-call opportunities flow, pill removal has no
  undo, dedup typeahead is client-side.
- brand/ assets, inspiration/ provenance.

Wire the AGENTS.md Design line so any agent reads the contract before
UI work.
---
 AGENTS.md                              |   9 +-
 design/BRIEF.md                        | 247 +++++++++++++++++++++++++
 design/DESIGN.md                       | 125 +++++++++++++
 design/brand/ten31-favicon.svg         |   5 +
 design/brand/ten31-inverted-square.png | Bin 0 -> 10521 bytes
 design/brand/ten31-logo-white.svg      |  43 +++++
 design/inspiration/README.md           |  17 ++
 design/tokens.tokens.json              |  96 ++++++++++
 8 files changed, 538 insertions(+), 4 deletions(-)
 create mode 100644 design/BRIEF.md
 create mode 100644 design/DESIGN.md
 create mode 100644 design/brand/ten31-favicon.svg
 create mode 100644 design/brand/ten31-inverted-square.png
 create mode 100644 design/brand/ten31-logo-white.svg
 create mode 100644 design/inspiration/README.md
 create mode 100644 design/tokens.tokens.json

diff --git a/AGENTS.md b/AGENTS.md
index 0288525..82d7190 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -75,6 +75,7 @@ Subsystem rules live in `docs/guides/` and lazy-load in Claude Code via `.claude
 - **Env:** secrets in `.env` (gitignored); names in `.env.example`. Verified names: `ANTHROPIC_API_KEY`, `SPARK_CONTROL_URL`, `SPARK_CONTROL_VERIFY_TLS`, `QDRANT_URL`, `X_API_KEY`, `CRM_DB_PATH`, `CRM_DEV_DB_PATH`. Also used: `CRM_SECRET_KEY` (beta/prod), `CRM_HOST`/`CRM_PORT`, `CRM_DATA_DIR`; digest mailer: `CRM_DIGEST_SENDER` (DWD impersonation sender) + `SMTP_HOST`/`SMTP_PORT`/`SMTP_SECURITY`/`SMTP_FROM`/`SMTP_USERNAME`/`SMTP_PASSWORD` (SMTP fallback); daily digest (Phase B): `CRM_DIGEST_ENABLED` + `CRM_DIGEST_SEND_HOUR` **only seed the first-boot default** — the live control is the DB policy (`app_settings.digest_policy`, set in Settings → Admin).
 - **Config placement:** operational/feature toggles live in the **admin panel**, DB-backed via `app_settings` (read-merge through a `load_*_policy(conn)` helper shared by the API + any scheduler; precedence DB-row → env-seed → default), so they're discoverable and take effect live. Reserve StartOS actions / env for **secrets and deploy-time config** (SMTP creds, API keys, DWD sender). Precedent: `digest_policy` (`GET/PATCH /api/admin/digest/policy`), `fundraising_backup_policy`.
 - **Agent/bot API access — three roles now (`admin`/`member`/`bot`).** `require_admin` is the only hard gate; everything else is "authenticated" (member, admin, *and* bot all pass). The **`bot` role** (added v0.1.0:89) is authenticated-but-never-admin: `require_bot_or_admin` gates agent-facing endpoints (e.g. `/api/intake/email-proposals*`) so a bot credential reaches *only* what it needs, never user-management/settings/security. Provision it via Settings → Admin edit-user dropdown (kept out of the teammate-invite form). **Two axes to keep separate as more agent capability lands:** the role controls *reach* (which endpoints); the per-feature human draft→approve gate controls *autonomy* (acting unattended). Money/merge/delete mutations stay behind the approval gate regardless of role. Don't build a finer capability/scope system until real NL-mutation endpoints exist to scope against.
+- **Design:** before building or changing any user-facing UI, read `design/DESIGN.md` and `design/tokens.tokens.json` and conform to them. A **mobile-first redesign** is in flight — read `design/BRIEF.md` before any responsive/layout work. (Note: inline `style={{}}` objects can't respond to media queries; responsive layout belongs in the CSS `<style>` block.)
 - **Commit style:** imperative subject, concise body explaining the *why*; put the package version in the subject (`… (v0.1.0:NN)`) for shippable changes. **No AI co-author / attribution trailers** — commits are authored by the user.
 
 ## Always
@@ -106,13 +107,13 @@ Subsystem rules live in `docs/guides/` and lazy-load in Claude Code via `.claude
 
 ## Current state
 
-_Phase 0 + Phase 1 built; **box live at v0.1.0:94; repo at v0.1.0:94** (reminders W1 + NL-query W2 deployed 2026-06-18; v94 = NL-query matched-only fix). **The fundraising grid + email capture is the canonical system of record.** Active thread: **W2 natural-language query** (backend + Matrix Q&A live; web "Ask" box next). Deploy/feature history: git log + `start9/0.4/startos/versions/`; longer-term backlog/debt: `ROADMAP.md` / `EVALUATION.md`._
+_Phase 0 + Phase 1 built; **box + repo live at v0.1.0:94** (reminders W1 + NL-query W2 deployed 2026-06-18; v94 = NL-query matched-only fix). **The fundraising grid + email capture is the canonical system of record.** Active thread: **W2 natural-language query** — backend + Matrix Q&A live; web "Ask" box is the last piece. Feature/deploy history: git log + `start9/0.4/startos/versions/`; longer-term backlog/debt: `ROADMAP.md` / `EVALUATION.md`._
 
-- **W2 — natural-language query (read-only): BACKEND + MATRIX Q&A LIVE (deployed v0.1.0:93, 2026-06-18); web "Ask" box next.** `backend/nl_query/` — 12 curated parameterized queries + a slot validator (the trust boundary; no generic SQL) + a **local-Qwen** translator (question→{intent,slots} via Spark Control; nothing leaves the box, **no Claude, no redaction** — the simplification Grant chose). `POST /api/query/nl` (also accepts direct `{intent,slots}`) + `GET /api/query/catalog`, `require_bot_or_admin`, audited (`entity_type='nl_query'`) — **live on the box** (verified 400/200 post-install). Soft-delete-correct per table (gotcha: `fundraising_*` has **no `deleted_at`** — `graveyard` is the axis; emails via a live `eam` sighting). Guide: `docs/guides/nl-query.md`. **Step 5 (Matrix Q&A) DONE + DEPLOYED** — thin client in `backend/matrix_intake/query.py` (trigger grammar + answer rendering) + `crm_client.nl_query` + `bot.py` wiring, read-only (no approval gate), tested in `test_query.py`. **Two entry points (room-per-purpose model):** a **dedicated Q&A room** (`MATRIX_QUERY_ROOM=!RGlJEObVaIUtUVcHtx:matrix.gilliam.ai`) where every message is a question, **and** the `?`/`@bot` trigger in the intake room as a cross-room convenience. Bot rebuilt + running on the Spark (logs: `answering questions in room …`). **End-to-end verified from inside the bot container** (3 questions → correct intents, live box, no errors; `investors_cold` hits the 500-row cap so Matrix shows 30 + a refine note). **Remaining: the actual in-room Matrix smoke (a human typing a question) — not yet done.** **Matched-only fix (v0.1.0:94, LIVE 2026-06-18):** `comms_by_user` + `email_counts_by_user` were counting/listing the user's *entire* captured sent corpus, not just investor-linked email (missing the `EXISTS email_investor_links` gate that `recent_emails`/`query_email_activity` use) — fixed + regression-tested, deployed to the box in v94. **Next: step 4 web "Ask" box (Communications tab)** — the last thin client.
+- **W2 — NL query (read-only): LIVE on the box** (backend + Matrix Q&A shipped v93; matched-only fix v94). Curated parameterized catalog + slot validator (trust boundary; no generic SQL) + **local-Qwen** translator (`backend/nl_query/`; nothing leaves the box, no Claude/redaction). `POST /api/query/nl` + `GET /api/query/catalog` (`require_bot_or_admin`, audited). **Matrix Q&A client deployed** (`backend/matrix_intake/query.py` + `crm_client.nl_query`, read-only, no approval gate): **dedicated Q&A room** `!RGlJEObVaIUtUVcHtx:matrix.gilliam.ai` (every message is a question) **+** the `?`/`@bot` trigger in the intake room (cross-room convenience). Email/comms intents are **matched-only** (investor-linked email only — v94 fixed `comms_by_user`/`email_counts_by_user` which had counted the whole sent corpus). Guides: `docs/guides/nl-query.md` + matrix-intake. **Remaining: (a) the actual in-room Matrix smoke — a human typing a question (not yet done); (b) step 4 web "Ask" box (Communications tab), the last thin client.**
 
-- **W1 — reminders & follow-ups: LIVE (deployed v0.1.0:93, 2026-06-18).** First-class tickler tied to the grid (migration `0006` — applied cleanly on the box per logs; CRUD `GET/POST/PATCH/DELETE /api/reminders`; derived `reminder_status` grid column; Reminders page + dashboard card + digest section; the `last_activity_at` recency rollup that W2 reuses). `0006` was verified up/down against a copy of `crm.db` before install. Deferred **W1b** = nurture-gap auto-suggested reminders.
+- **W1 — reminders & follow-ups: LIVE (shipped v93).** First-class tickler tied to the grid (migration `0006`; CRUD `/api/reminders`; derived `reminder_status` grid column; Reminders page + dashboard card + digest section; the `last_activity_at` recency rollup W2 reuses). Deferred **W1b** = nurture-gap auto-suggested reminders.
 
 - **Done & live (detail in git log / ROADMAP):** email-proposal Matrix review + `bot` role (box v91); grid-driven Pipeline (v88); Matrix intake bot (Spark `matrix-intake` container); Gmail capture (DWD) + propose→approve + daily digest; Thesis Workshop + Architect (Claude, dual-approval); outreach drafts + radar. All draft-only.
-- **Tests:** **35/35 backend green** (`python3 backend/run_tests.py`; +`nl_query/` + matrix `test_query.py` suites), `py_compile` clean; render-smoke gates `make`.
+- **Tests:** **35/35 backend green** (`python3 backend/run_tests.py`), `py_compile` clean; render-smoke gates `make`.
 - **Next (priority order):** 1) **in-room Matrix smoke** of the Q&A room (type a real question; confirm the answer renders well on mobile — broad questions like "cold investors" hit the 500-row cap → 30 shown + refine note) + the intake `?`/`@bot` trigger; 2) **W2 step 4** web Ask box (last NL-query client); 3) **W3** bot grid-mutations behind the Matrix approval gate (local-Qwen parse); 4) **W1b** nurture-gap reminders; 5) Grant + Jonathan freeze v2.0 canonical; 6) in-room smoke of the intake disambiguation numbered-pick grammar; then P2 debt (reports comms-aggregate soft-delete sweep, `?limit=abc` crash, auth regression test, oversized StartOS icon).
 - **Open / risks:** W2 translation only **happy-path-validated** (typos/ambiguous/no-match phrasings shake out in live use); **Claude/Architect path still unverified live on the box**; v2.0 reserve-asset spine is the *working approved* spine but **not canonical** (needs dual sign-off); doc drift — `crm-overview.md` + `EVALUATION.md` still call `lp_profiles` live.
diff --git a/design/BRIEF.md b/design/BRIEF.md
new file mode 100644
index 0000000..19da1ee
--- /dev/null
+++ b/design/BRIEF.md
@@ -0,0 +1,247 @@
+# Design brief — Ten31 CRM mobile-first redesign
+
+*The input packet for a Claude Design (or equivalent) round-trip. Goal: make the phone a
+first-class, **preferred** surface for the Ten31 CRM without losing the existing look. This
+is a **layout / information-architecture / interaction** redesign — the visual language is
+captured in `design/DESIGN.md` + `design/tokens.tokens.json` and is **preserved**. Posture:
+**preserve-but-refine** — keep the brand DNA; small mobile-warranted tweaks (type scale,
+density, touch sizing) are welcome, a visual reskin is not.*
+
+---
+
+## 0. The one instruction that matters most
+
+**Preserve the visual language; redesign only layout, navigation, and touch interaction.**
+The current app is already a coherent, deliberate dark venture-CRM look (see `DESIGN.md`).
+Do **not** reinvent the palette, typography, or component styling. Where mobile genuinely
+warrants it, you may refine — bump body type from 13px toward 15–16px, loosen touch density,
+add bottom-sheet patterns — but the colors, the IBM Plex faces, the bordered-panel +
+tinted-badge idiom, and the single `#3b82c4` accent stay.
+
+## 1. Goal
+
+The Ten31 CRM is the fund's system of record (~150 LPs, 250+ prospects, the capital-raise
+pipeline), used by a ~5-person team. Today it's desktop-first; the team increasingly works
+from phones — before/after investor meetings, on the move. Make **mobile the primary,
+preferred surface**: every common on-the-go task is thumb-reachable and fast, and desktop
+becomes the wide-screen enhancement rather than the baseline.
+
+**Mobile is a focused subset, not the whole app** (decided 2026-06-18). Mobile carries only
+the on-the-go core; everything else stays desktop-only.
+
+- **Mobile surfaces — the only four:** **Fundraising Grid** (with fast switching between its
+  saved *views*), **Pipeline**, **Reminders**, **Contacts**. Every other screen — Dashboard,
+  Thesis, Thesis Workshop, Outreach, Communications, Email Capture, System Status, Feedback,
+  Instructions, Settings — is **desktop-only and simply absent** from the mobile UI (keep only
+  a minimal account/logout control).
+- **Mobile editing — core records + quick capture (expanded 2026-06-18):** read everything;
+  editable on mobile is **investor name**, **contacts (name + email)**, **notes / communication
+  / outreach log** (logging activity, not composing/sending — see §3a Backend reality),
+  **pipeline stage**, and **reminders** — *and* **creating a new investor**
+  (name + one or more contacts + type/stage). Still **desktop-only**: commitments/amounts, the
+  full 20+ column set, column structure, bulk ops, and CSV. So mobile is "create and manage the
+  core investor record + log activity," not the full spreadsheet.
+- **Create/edit investors go through the Grid — the canonical write path — never Contacts.**
+  Per the app's model, the `fundraising_*` grid is the system of record (investor row → contact
+  "pills" → commitments) and the **Contacts tab is a read-only directory auto-populated from
+  it**. So the **"+ add investor"** entry point and all name/contact/email edits live on the
+  **Grid** (its card list and detail); **Contacts stays read-only** on mobile — do not put an
+  add/edit affordance there.
+- **Guard against duplicate investors on create.** Adding an investor from a phone is a
+  dupe-generation risk; the app already has entity resolution/merge. The mobile "+ add
+  investor" flow should **check for an existing match first** (search-as-you-type on name)
+  before creating a new row.
+- **The Grid is card/detail on a phone, never a spreadsheet.** A row is one investor; mobile
+  shows an investor card list → full-screen detail with the editable set above, plus a create flow.
+
+## 2. Layout (global, mobile-first)
+
+- **Base = mobile; enhance up.** Author layout for a 375px column first, then add `min-width`
+  breakpoints for tablet/desktop. (Implementation note for later: the app's ~1300 inline
+  `style={{}}` objects can't respond to media queries — responsive layout must live in the
+  CSS `<style>` block / utility classes. The design tool doesn't need to solve this, but the
+  brief should assume layout, not inline style, carries responsiveness.)
+- **Navigation → a 4-tab bottom bar; everything else is desktop-only.** Replace the 250px
+  sidebar with a **bottom tab bar of exactly four**: **Grid · Pipeline · Reminders ·
+  Contacts**. The other ten destinations are **not** present on mobile — there is no "More"
+  feature menu. Keep only a minimal **account control** (e.g. a top-bar avatar/menu) for
+  profile + logout. The bar respects `env(safe-area-inset-bottom)`.
+- **Grid views are a first-class mobile control (high priority — second only to the tabs).**
+  The Grid's saved *views* (Main, Follow-up, All Investors, … and a growing set of
+  filter-based cuts) are how the team reads the investor list different ways. Surface a **view
+  picker at the top of the Grid screen** — a tappable current-view header that opens a
+  **bottom-sheet list of views**. Use a sheet/dropdown, not a fixed segmented control, because
+  the set of views grows over time. Switching a view re-filters the card list in place.
+- **Overlays → bottom sheets.** Today's centered modal (500px) and right slide-over (400px,
+  which overflows a phone) become **drag-to-dismiss bottom sheets** or full-screen detail
+  views on mobile.
+- **Touch + safe areas.** 44px minimum touch targets; sticky bottom nav respects
+  `env(safe-area-inset-bottom)`; content gets bottom padding so the nav never overlaps it.
+
+## 3. Per-screen briefs
+
+Take the design tool through these **one screen at a time** (mobile re-layout is screen-by-
+screen, not a global token swap). Ordered by value and difficulty.
+
+### 3a. Fundraising Grid — the crux (do first)
+The core feature and system of record: a 20+ column, ~3,000px-wide editable table. A row =
+**one investor** (contact "pills" + per-fund commitments). On a phone it is a **card list**,
+never a wide table.
+- **View switching, up top (high priority):** a tappable current-view name → **bottom-sheet
+  view picker** (Main / Follow-up / All Investors / … a growing set), plus search. Switching
+  re-filters the card list in place.
+- **Card:** ~5 at-a-glance fields — **name · type badge · committed amount · pipeline stage ·
+  last contact**. Tap → **full-screen investor detail** (today's slide-over, promoted).
+- **Detail + edit:** the full field set is grouped into sections and **read-only**, *except*
+  the editable set: **investor name**, **contacts (name + email — the contact "pills")**,
+  **notes / communication / outreach** (a text area or "log a note" entry), **pipeline stage**
+  (a picker / segmented control), and **set/update a reminder** (date + note). Each edit happens
+  in a **bottom sheet**, one field at a time — no spreadsheet grid. Commitments/amounts and the
+  rest of the columns stay read-only on mobile.
+- **Add investor (`+` on the Grid):** a create flow capturing **investor name + one or more
+  contacts (name, email) + type + stage** — the minimum to start a record; the rest is filled
+  later on desktop. **Search-as-you-type on name first** and offer existing matches before
+  creating, so a phone-added investor doesn't duplicate one already in the grid.
+- The full multi-column spreadsheet (commitments/amounts, column reorder, bulk/CSV) stays
+  **desktop-only**.
+
+> **Backend reality (read before designing the edit interactions — the write layer is not
+> what "edit a field in a sheet" implies):**
+> - **There is no field-level write. The grid is one JSON blob saved wholesale.**
+>   `PUT /api/fundraising/state` takes the *entire* grid and rejects with **409** if the global
+>   `version` moved under you (5 people edit live). So a naive "edit one field" = load the whole
+>   grid → mutate one row → PUT it all back → race everyone else. **Mobile single-investor edits
+>   (name, pills, add-investor, log-note) should instead go through the targeted, server-side,
+>   one-row path** `POST /api/fundraising/log-communication` (it finds/creates a single row,
+>   appends a note, and can create a new investor + first contact in one call via
+>   `create_investor_if_missing`, with no whole-grid version race) — or a new narrow per-row
+>   PATCH. Do **not** model these as whole-grid saves. The Matrix bot already uses this path.
+> - **"Pipeline stage" is not a grid field** — it lives on the separate `opportunities` table and
+>   editing it is a **two-call flow with a precondition**: the row must first be *linked* to a
+>   pipeline opp (`POST /api/fundraising/pipeline/link`, which **requires ≥1 contact on the row**),
+>   *then* `PATCH /api/opportunities/{id}/stage`. The grid only *displays* stage read-only. So the
+>   detail-sheet "change stage" control needs a "not in pipeline yet → add to pipeline" state, and
+>   it shares the *same* opportunities endpoint as the Pipeline tab (3c) — consistent with that, not
+>   with the grid blob.
+> - **Removing a contact pill has no tombstone/undo** — the `fundraising_*` tables are rebuilt on
+>   every save; the JSON blob is canonical. Don't promise soft-delete/undo semantics for pill
+>   removal (unlike comms/reminders, which *are* soft-deleted).
+> - **Dedup typeahead is client-side** — filter the already-loaded rows; there is no investor-search
+>   endpoint, and the app's `entity_merge` is an admin-only *after-the-fact* reconciliation, not a
+>   create-time guard.
+> - **"Notes / communication" = the `log-communication` path above (immediate write).** **Outreach
+>   *composition*** is a different, **gated** feature (agent drafts → human edits → human sends; the
+>   Outreach screen is desktop-only) — only the investor's outreach *log/notes* belong on mobile.
+> - All of these are **plain-authenticated immediate writes** — a human **member** can do them on a
+>   phone; there is no draft→approve gate on a *human's own* edit (that gate is for *agent*-originated
+>   actions). "Agents draft, humans send" constrains the bot, not this UI.
+
+### 3b. Contacts — lowest-risk transform (good pattern validator)
+A **read-only** per-person directory (auto-populated from the Grid — no create/edit here),
+today a table + tabs (All / Investors / Prospects) + a detail slide-over.
+- **Mobile pattern:** a **list of contact rows** (initial/avatar · name · organization · type
+  badge · last contact) with the tabs as a top segmented control and search pinned → tap →
+  **full-screen read-only detail** (contact info, linked investor, communication history).
+- Pure browse→detail, no edit — validate the list+detail+sheet pattern here before the Grid.
+
+### 3c. Pipeline (Kanban) — re-think the horizontal board
+Today: horizontal kanban columns, one per stage (count + total per column), tap card → edit.
+Horizontal columns don't work on a phone.
+- **Mobile pattern (lead option):** **swipe between stage columns** — one full-width stage at
+  a time, snap-scrolling, a stage indicator/segmented control at top, vertical list of
+  investor cards within each stage. (Alternative to weigh: a vertical accordion of collapsible
+  stages.) Tap a card → the same investor detail sheet as the Grid. **Editing pipeline stage**
+  is one of the mobile-editable fields, so make stage changeable here too (a stage picker on the
+  card, or drag/swipe a card to the next stage).
+
+### 3d. Reminders — a primary tab + an edit surface
+A follow-up/tickler list tied to investors (one of the mobile-editable areas).
+- **Mobile pattern:** a **list grouped by urgency** (overdue → due-soon → later), each row
+  showing title, investor, due date (urgency-colored: overdue `#e06c6c`, due-soon `#e0b341`),
+  and assignee. **Quick actions** (done / snooze / edit) via swipe or a row menu; a **`+`**
+  creates one. Tap → a **bottom-sheet edit** (title, investor, due date, note, assignee). This
+  is also the editor reached from an investor detail's "set a reminder" action.
+
+## 4. Brand description (~120 words)
+
+Ten31's CRM is a *trustworthy instrument* — a dense, dark, data-forward venture-fund
+workspace for a small team handling sensitive LP relationships. The voice is serious,
+discreet, and precise: cool blue-greys, a single confident blue accent, IBM Plex's
+engineered-but-humane type, monospace for every number and date. It feels like a well-made
+financial terminal, not a consumer app — restraint and legibility over decoration. The
+mobile version should feel like the *same instrument in your pocket*: calmer and roomier for
+touch, but unmistakably the same tool. It is **not** playful, colorful, skeuomorphic, or
+trend-chasing; **not** a second bright color or a borderless/flat reskin. Quiet confidence,
+information density made thumb-friendly.
+
+## 5. Inputs to bring to the cloud tool
+
+- **Point at:** `frontend/` (the single `index.html` holds the whole UI — point at the
+  directory, not the repo root).
+- **Upload:** `design/DESIGN.md`, `design/tokens.tokens.json`, `design/brand/ten31-logo-white.svg`,
+  `design/brand/ten31-favicon.svg`, and **screenshots of each screen** below at desktop width
+  (Fundraising Grid, Contacts, Pipeline, Dashboard, a modal, the slide-over) so the tool sees
+  the as-built look it must preserve.
+- **Web-capture:** the running app URL if convenient (it's behind auth on the Start9 box; a
+  set of screenshots is the reliable path).
+
+## 6. Prompt blocks (paste into the design tool, one per screen)
+
+**Global frame (paste first):**
+> Redesign this dark venture-CRM web app to be mobile-first and mobile-preferred. **Preserve
+> the existing visual language exactly** (see the uploaded DESIGN.md + tokens: dark blue-grey
+> palette, single `#3b82c4` accent, IBM Plex Sans/Mono, bordered panels, tinted badges) —
+> change only **layout, navigation, and touch interaction**. Small mobile-warranted refinements
+> (body type 13→15–16px, looser touch density, bottom sheets) are welcome; no visual reskin.
+> Mobile carries only **four surfaces in a bottom tab bar — Grid, Pipeline, Reminders,
+> Contacts**; every other screen is desktop-only and absent here (keep just a minimal top-bar
+> account/logout menu). Convert centered modals and the right slide-over into **drag-to-dismiss
+> bottom sheets / full-screen detail views**. 44px touch targets, safe-area-aware sticky bottom
+> nav. Design for a 375px phone first.
+
+**Fundraising Grid:**
+> This is a 20+ column editable data table; each row is one investor (contact pills + per-fund
+> commitments) — unusable as a wide table on a phone. Design a mobile **investor card list**:
+> card shows name, type badge, committed amount, pipeline stage, last contact. At the top, a
+> **tappable current-view name that opens a bottom-sheet list of saved views** (Main, Follow-up,
+> All Investors, and a growing set of filtered cuts) plus search; switching a view re-filters
+> the list. Tapping a card opens a **full-screen detail**: most fields read-only **except** the
+> editable set — **investor name**, **contacts (name + email)**, **notes/communication/outreach**,
+> **pipeline stage**, and **set a reminder** — each edited in a bottom sheet. Add a **`+` to
+> create a new investor** (name + one or more contacts with name/email + type + stage), with
+> search-as-you-type on name to surface existing matches before creating (avoid duplicates).
+> Commitments/amounts and the full column set stay read-only / desktop-only.
+
+**Contacts:**
+> A read-only people directory (no create/edit here). Today it's a table with All/Investors/
+> Prospects tabs and a detail panel. Design a mobile **contact list** (initial, name,
+> organization, type badge, last contact), tabs as a top segmented control, search pinned;
+> tapping a row opens a **full-screen read-only detail** with contact info, linked investor,
+> and communication history.
+
+**Pipeline (Kanban):**
+> A kanban board of pipeline stages (one column per stage, each showing count + total),
+> cards are investors. Horizontal columns don't fit a phone. Design a **swipe-between-stages**
+> mobile view: one full-width stage at a time with snap-scrolling and a stage segmented
+> control at top, a vertical list of investor cards within each stage; tapping a card opens
+> the investor detail sheet. Stage is editable here (a stage picker on the card, or drag a card
+> to the next stage). Also sketch a vertical-accordion alternative for comparison.
+
+**Reminders:**
+> A follow-up/tickler list tied to investors. Design a mobile **reminders list grouped by
+> urgency** (overdue, due-soon, later); each row shows title, investor, due date (urgency-
+> colored), assignee, with quick actions (done / snooze / edit) via swipe or a row menu and a
+> `+` to create. Tapping a row opens a **bottom-sheet edit** (title, investor, due date, note,
+> assignee).
+
+---
+
+## 7. After the round-trip (Phase C reminder)
+
+Export the **"Handoff to Claude Code" bundle** + screenshots, drop them in
+`design/_imports/<date>/`, then distill back into the contract: update `DESIGN.md` §8
+(Responsive behavior) with the real mobile-first system, add mobile component states (bottom
+nav, sheets, card list) to §4, and bump the mobile type scale in `tokens.tokens.json` if it
+changed. The gap between the new contract and the current `index.html` is the implementation
+backlog → capture it to `ROADMAP.md` (incl. the inline-style→CSS migration that makes
+responsive layout possible at all). Do not silently reskin existing code in the same pass.
diff --git a/design/DESIGN.md b/design/DESIGN.md
new file mode 100644
index 0000000..bc3f5be
--- /dev/null
+++ b/design/DESIGN.md
@@ -0,0 +1,125 @@
+# Ten31 CRM — Design contract (DESIGN.md)
+
+*The durable brand brief. Any agent (or person) building or changing user-facing UI reads
+this file and `design/tokens.tokens.json` first and conforms to them. Extracted **as-built**
+from `frontend/index.html` on 2026-06-18 (document-as-is); this is a faithful record of the
+look that grew in the code, not an aspirational redesign. The mobile-first redesign in
+`design/BRIEF.md` builds **on top of** this contract — it changes layout/navigation/touch,
+not the visual language below.*
+
+## 1. Visual theme
+
+A dense, professional, **dark** venture-CRM workspace — calm, data-forward, slightly
+"terminal/financial." Cool blue-greys throughout, a single saturated blue as the only vivid
+accent, and IBM Plex's engineered-but-humane character. Monospace (IBM Plex Mono) carries
+all numbers, dates, and codes, reinforcing the data-tool feel. The mood is *trustworthy
+instrument*, not consumer-app playful: restraint, legibility, and information density over
+decoration. It is used by a ~5-person fund team handling sensitive LP data, so it should
+read as serious and discreet.
+
+## 2. Color palette
+
+Canonical values live in `design/tokens.tokens.json`. Summary:
+
+- **Backgrounds (darkest → lightest):** base `#0b1118` → panel `#111a27` → elevated
+  `#152233` → hover `#1b2a3a`. Recessed input/table-header surface: `#0d1622`.
+- **Borders:** default `#263548` (the workhorse — borders, dividers, every table grid line),
+  strong `#35506a` (hover/emphasis).
+- **Text:** primary `#e5edf5`, secondary `#c7d3e0`, muted `#8ea2b7` (most common),
+  subtle `#70859b`.
+- **Accent (the one brand color):** `#3b82c4`. Hover/gradient-end `#2f6ea9`, tint
+  `#3b82c422`, on-tint text `#93c5fd`. Used for primary actions, active nav, links, focus.
+- **Semantic:** success `#10b981`, warning `#f59e0b`/`#fcd34d`, due-soon `#e0b341`,
+  danger `#dc2626`/`#e06c6c`, error-text `#fca5a5`. Badges render semantic color at low
+  alpha for the fill with a lighter tint for the text.
+
+White (`#ffffff`) appears only as text on accent fills and in the brand mark.
+
+## 3. Typography
+
+- **Families:** `IBM Plex Sans` (UI/body), `IBM Plex Mono` (numbers, dates, badges, logs,
+  nav icons). Loaded from Google Fonts; weights 400/500/600/700 sans, 500/600 mono.
+- **Scale (as-built):** 11px micro/table-header/badge · 12px help/meta · **13px body / table
+  / inputs (desktop base)** · 14px nav · 16px section title · 18px modal title · 20px page
+  title · 24px login title & KPI value.
+- **Treatments:** global letter-spacing `0.01em`; table headers uppercase with `0.08em`
+  tracking; badges uppercase `0.5px`; numbers use `font-variant-numeric: tabular-nums`.
+- **Mobile note:** 13px body is comfortable for desktop and tight on a phone — the redesign
+  bumps the mobile base toward 15–16px. See `BRIEF.md`.
+
+## 4. Component styling
+
+- **Buttons:** primary = top-to-bottom gradient `#3b82c4 → #2f6ea9`, white text, radius 6px,
+  padding 10×16, lift on hover (`translateY(-1px)` + soft blue shadow). Secondary = flat
+  `#1b2837`. Danger = `#dc2626`.
+- **Cards / sections:** panel `#111a27`, 1px `#263548` border, radius 8px, padding 16–20px,
+  composite drop shadow + inset top highlight. Hover lifts 1px and strengthens the border.
+- **Tables:** recessed header `#0d1622`, uppercase muted 11px headers, sticky header +
+  sticky first column, 1px grid lines, row hover `#172435`, sticky aggregate footer.
+- **Forms:** inputs on `#0d1622`, 1px border, radius 6px, accent focus ring; label 13/500,
+  help 12px muted, error 12px `#fca5a5`.
+- **Badges:** radius 4px, 11px/600 uppercase, low-alpha semantic fill + tinted text.
+- **Overlays:** modal (centered, radius 12, max-width 500, blurred backdrop) and slide-over
+  (right drawer, 400px) for detail/edit.
+- **Other:** kanban cards (radius 6), toasts (bottom-right), accent spinner, shimmer
+  skeletons, left-marker timeline for activity feeds.
+
+## 5. Layout
+
+Desktop shell = **fixed 250px left sidebar + flexible main content** with a top header bar
+(page title + user). Content max-width 1400px, padding 20px. Primary content patterns:
+wide data table (Fundraising Grid), KPI grid + timelines (Dashboard), kanban columns
+(Pipeline), list + detail drawer (Contacts/Reminders), two-column (Thesis). Auto-fit grids
+are used for KPI cards (`minmax(180px,1fr)`) and kanban columns (`minmax(300px,1fr)`).
+
+## 6. Depth / elevation
+
+Elevation is built from three stacked cues, not just one shadow: (a) a **layered radial-
+gradient page background** (two soft blue glows top-left and top-right over `#0b1118`),
+(b) panel-color steps (base → panel → elevated), and (c) composite drop shadows with a
+1px inset white top-highlight (`inset 0 1px 0 #ffffff07-08`) that gives panels a faint lit
+edge. Hover states lift elements 1px and deepen the shadow. Keep this restrained, cool, and
+low-contrast — depth should be felt, not seen.
+
+## 7. Do's and don'ts
+
+- **Do** keep `#3b82c4` as the only vivid accent; everything else stays in the blue-grey
+  range. **Don't** introduce a second bright hue for emphasis — use weight, tint, or the
+  semantic colors.
+- **Do** use IBM Plex Mono for every number/date/code. **Don't** set tabular data in the
+  sans face.
+- **Do** reach for tinted-fill + tinted-text badges for status. **Don't** use solid
+  saturated fills for status chips.
+- **Do** keep borders at `#263548` and lean on them for structure (this is a grid-lined,
+  bordered aesthetic). **Don't** switch to borderless/shadow-only cards.
+- **Do** preserve the restrained 1px hover-lift motion. **Don't** add bouncy or long
+  animations (and honor `prefers-reduced-motion`, already wired).
+
+## 8. Responsive behavior
+
+**Current (as-built): desktop-first.** Breakpoints are `max-width` (900px, 768px); the
+sidebar simply `display:none`s below 768px with no real mobile navigation; wide tables
+overflow horizontally; the 400px slide-over overflows a 375px screen. A correct viewport
+meta tag is present.
+
+**Target: mobile-first, mobile-preferred — active redesign.** The team increasingly works
+from phones, so mobile is becoming the primary surface. The full plan (navigation
+re-architecture to a bottom tab bar, table→card transforms, bottom sheets, touch sizing,
+type bump) lives in **`design/BRIEF.md`**. Update this section to describe the new
+mobile-first system once that redesign lands.
+
+## 9. Agent prompt guide
+
+When building or changing UI here:
+- Pull every color, size, radius, and space value from `design/tokens.tokens.json` — do not
+  hand-pick new hexes. The app still inlines many values; prefer the `:root` CSS variables
+  (and grow that set) over fresh literals.
+- Match the established components above; if you need a new one, compose it from existing
+  tokens and the bordered-panel + tinted-badge idiom rather than inventing a new visual style.
+- Numbers/dates/codes → IBM Plex Mono + tabular-nums. Status → tinted badge. Primary action →
+  the blue gradient button. Destructive → `#dc2626` and a confirm step.
+- **Building anything mobile/responsive?** Read `design/BRIEF.md` first — it holds the
+  mobile-first layout, navigation, and interaction decisions this section will eventually
+  absorb.
+- Reminder: inline `style={{}}` objects cannot respond to media queries — put any
+  responsive layout in the CSS `<style>` block (or a utility class), not inline.
diff --git a/design/brand/ten31-favicon.svg b/design/brand/ten31-favicon.svg
new file mode 100644
index 0000000..8e1fb1d
--- /dev/null
+++ b/design/brand/ten31-favicon.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Ten31">
+  <rect x="2" y="2" width="60" height="60" rx="8" fill="#0b1118" stroke="#ffffff" stroke-width="2"/>
+  <text x="32" y="41" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="700" font-family="Georgia, 'Times New Roman', serif">T31</text>
+</svg>
diff --git a/design/brand/ten31-inverted-square.png b/design/brand/ten31-inverted-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c491d08605b661574b48bf1badb49310e9fb40c
GIT binary patch
literal 10521
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

literal 0
HcmV?d00001

diff --git a/design/brand/ten31-logo-white.svg b/design/brand/ten31-logo-white.svg
new file mode 100644
index 0000000..4cb3560
--- /dev/null
+++ b/design/brand/ten31-logo-white.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 722.69 280.85">
+  <defs>
+    <style>
+      .cls-1 {
+        font-family: LTCGoudyOldstylePro-Bold, 'LTC Goudy Oldstyle Pro';
+        font-size: 192px;
+        font-weight: 700;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        fill: #fff;
+      }
+
+      .cls-2, .cls-4 {
+        stroke-width: 3px;
+      }
+
+      .cls-2, .cls-4, .cls-3 {
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        fill: none;
+      }
+
+      .cls-5 {
+        letter-spacing: -.06em;
+      }
+    </style>
+  </defs>
+  <text class="cls-1" transform="translate(120.54 208.45)"><tspan class="cls-5" x="0" y="0">T</tspan><tspan x="120.96" y="0">en31</tspan></text>
+  <g>
+    <polygon class="cls-3" points="95.52 140.42 54.54 154.4 54.54 126.45 95.52 140.42"/>
+    <line class="cls-2" x1="0" y1="140.42" x2="60.54" y2="140.42"/>
+  </g>
+  <rect class="cls-4" x="97.1" y="1.5" width="527.95" height="277.85"/>
+  <g>
+    <polygon class="cls-3" points="721.15 140.42 680.16 154.4 680.16 126.45 721.15 140.42"/>
+    <line class="cls-2" x1="625.62" y1="140.42" x2="686.16" y2="140.42"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/design/inspiration/README.md b/design/inspiration/README.md
new file mode 100644
index 0000000..1f79202
--- /dev/null
+++ b/design/inspiration/README.md
@@ -0,0 +1,17 @@
+# Inspiration / reference — Ten31 CRM design
+
+This contract was **extracted as-built** (document-as-is), so the de-facto reference is the
+product's own code and brand mark, not an external inspiration set.
+
+- **De-facto design reference:** `frontend/index.html` — the single-file React UI. The
+  embedded `<style>` block (`:root` vars + component CSS) and ~1300 inline `style={{}}`
+  objects are the source the contract was harvested from on 2026-06-18.
+- **Brand mark / intended palette:** `../brand/ten31-logo-white.svg` (white wordmark),
+  `../brand/ten31-favicon.svg` (T31 mark), `../brand/ten31-inverted-square.png` (app icon).
+  White mark on dark `#0b1118` encodes the intended palette: white/light text on a dark cool
+  ground, with the single `#3b82c4` blue accent.
+
+For the **mobile-first redesign** (`../BRIEF.md`), drop any phone-app screenshots whose
+layout/navigation/touch ergonomics you like into this folder (e.g. mobile CRMs, finance apps
+with good card/list + bottom-sheet patterns) — they inform layout only; the visual language
+stays as captured in `../DESIGN.md`.
diff --git a/design/tokens.tokens.json b/design/tokens.tokens.json
new file mode 100644
index 0000000..9f0ba3a
--- /dev/null
+++ b/design/tokens.tokens.json
@@ -0,0 +1,96 @@
+{
+  "$description": "Ten31 CRM design tokens (W3C DTCG). Extracted as-built from frontend/index.html :root + an inline-style census, 2026-06-18. The app currently inlines these values (CSS :root vars + ~1300 inline style objects); this file is the canonical source going forward. Some real values (composite shadows, the radial-gradient page background) do not map to DTCG primitives and are documented as strings.",
+  "color": {
+    "bg": {
+      "base":     { "$type": "color", "$value": "#0b1118", "$description": "Page background (darkest layer). Also the de-facto theme color; use for a future PWA manifest theme_color." },
+      "panel":    { "$type": "color", "$value": "#111a27", "$description": "Cards, sections, modals, sidebar, slide-over." },
+      "elevated": { "$type": "color", "$value": "#152233", "$description": "Elevated/hover panel state." },
+      "hover":    { "$type": "color", "$value": "#1b2a3a", "$description": "Generic hover background." },
+      "input":    { "$type": "color", "$value": "#0d1622", "$description": "Form input + table-header background (recessed)." }
+    },
+    "border": {
+      "default": { "$type": "color", "$value": "#263548", "$description": "All borders, dividers, table grid lines. The most-used non-text color." },
+      "strong":  { "$type": "color", "$value": "#35506a", "$description": "Emphasized border / card hover border." }
+    },
+    "text": {
+      "primary":   { "$type": "color", "$value": "#e5edf5", "$description": "Headings, primary content." },
+      "secondary": { "$type": "color", "$value": "#c7d3e0", "$description": "Body text, labels." },
+      "muted":     { "$type": "color", "$value": "#8ea2b7", "$description": "Hints, metadata, table headers. Highest-frequency text color." },
+      "subtle":    { "$type": "color", "$value": "#70859b", "$description": "Very secondary labels / inactive tabs." }
+    },
+    "accent": {
+      "default": { "$type": "color", "$value": "#3b82c4", "$description": "Primary action, active nav, links, focus ring. The one vibrant brand color." },
+      "strong":  { "$type": "color", "$value": "#2f6ea9", "$description": "Accent hover / gradient endpoint." },
+      "soft":    { "$type": "color", "$value": "#3b82c422", "$description": "Accent at ~13% alpha — tinted badge/active backgrounds." },
+      "light":   { "$type": "color", "$value": "#93c5fd", "$description": "Accent text on dark tinted backgrounds (badges, pills)." }
+    },
+    "semantic": {
+      "success":      { "$type": "color", "$value": "#10b981", "$description": "Money / positive values." },
+      "success-text": { "$type": "color", "$value": "#6ee7b7" },
+      "warning":      { "$type": "color", "$value": "#f59e0b", "$description": "Advisor / warning." },
+      "warning-text": { "$type": "color", "$value": "#fcd34d" },
+      "due-soon":     { "$type": "color", "$value": "#e0b341", "$description": "Reminder due-soon urgency." },
+      "danger":       { "$type": "color", "$value": "#dc2626", "$description": "Destructive action button." },
+      "danger-soft":  { "$type": "color", "$value": "#e06c6c", "$description": "Overdue / error emphasis." },
+      "danger-text":  { "$type": "color", "$value": "#fca5a5", "$description": "Inline error text." }
+    },
+    "constant": {
+      "white": { "$type": "color", "$value": "#ffffff", "$description": "Text on accent fills; brand mark." }
+    }
+  },
+  "font": {
+    "family": {
+      "sans": { "$type": "fontFamily", "$value": ["IBM Plex Sans", "Avenir Next", "Segoe UI", "sans-serif"] },
+      "mono": { "$type": "fontFamily", "$value": ["IBM Plex Mono", "monospace"], "$description": "Numbers, dates, badges, logs, nav icons." }
+    },
+    "size": {
+      "xs":  { "$type": "dimension", "$value": "11px", "$description": "Table headers, badges, micro-labels." },
+      "sm":  { "$type": "dimension", "$value": "12px", "$description": "Help text, metadata." },
+      "md":  { "$type": "dimension", "$value": "13px", "$description": "Body / table cells / inputs (current desktop base). NOTE: bump toward 15–16px for mobile body — see BRIEF.md." },
+      "lg":  { "$type": "dimension", "$value": "14px", "$description": "Nav items." },
+      "xl":  { "$type": "dimension", "$value": "16px", "$description": "Section titles." },
+      "2xl": { "$type": "dimension", "$value": "18px", "$description": "Modal titles." },
+      "3xl": { "$type": "dimension", "$value": "20px", "$description": "Page/header title." },
+      "4xl": { "$type": "dimension", "$value": "24px", "$description": "Login title, KPI values." }
+    },
+    "weight": {
+      "regular":  { "$type": "fontWeight", "$value": 400 },
+      "medium":   { "$type": "fontWeight", "$value": 500 },
+      "semibold": { "$type": "fontWeight", "$value": 600 },
+      "bold":     { "$type": "fontWeight", "$value": 700 }
+    }
+  },
+  "space": {
+    "2xs": { "$type": "dimension", "$value": "4px" },
+    "xs":  { "$type": "dimension", "$value": "6px" },
+    "sm":  { "$type": "dimension", "$value": "8px" },
+    "md":  { "$type": "dimension", "$value": "12px", "$description": "Most common padding/gap unit." },
+    "lg":  { "$type": "dimension", "$value": "16px" },
+    "xl":  { "$type": "dimension", "$value": "20px", "$description": "Sidebar/header/content padding." },
+    "2xl": { "$type": "dimension", "$value": "24px", "$description": "Modal padding." }
+  },
+  "radius": {
+    "sm":   { "$type": "dimension", "$value": "4px", "$description": "Badges." },
+    "md":   { "$type": "dimension", "$value": "6px", "$description": "Buttons, inputs, kanban cards." },
+    "lg":   { "$type": "dimension", "$value": "8px", "$description": "Cards, nav items, sections." },
+    "xl":   { "$type": "dimension", "$value": "12px", "$description": "Modals." },
+    "pill": { "$type": "dimension", "$value": "999px", "$description": "Pills, skeleton lines." }
+  },
+  "shadow": {
+    "$description": "Real composite shadows from the as-built CSS; kept as raw strings (multi-layer + inset highlight don't map to a single DTCG shadow token).",
+    "card":      { "$type": "shadow", "$value": "0 14px 26px rgba(2,12,24,0.28), inset 0 1px 0 #ffffff07" },
+    "card-hover":{ "$type": "shadow", "$value": "0 10px 20px rgba(7,17,30,0.35)" },
+    "button-hover": { "$type": "shadow", "$value": "0 6px 14px rgba(12,40,68,0.35)" },
+    "modal":     { "$type": "shadow", "$value": "0 24px 56px rgba(1,8,17,0.5), inset 0 1px 0 #ffffff08" },
+    "slide-over":{ "$type": "shadow", "$value": "-12px 0 32px rgba(4,10,18,0.45), inset 1px 0 0 #ffffff07" },
+    "toast":     { "$type": "shadow", "$value": "0 10px 24px rgba(4,12,22,0.45)" }
+  },
+  "motion": {
+    "fast":   { "$type": "duration", "$value": "120ms", "$description": "Press/transform feedback." },
+    "base":   { "$type": "duration", "$value": "150ms", "$description": "Hover color/shadow." },
+    "panel":  { "$type": "duration", "$value": "300ms", "$description": "Slide-over / toast entry." }
+  },
+  "_unmappable": {
+    "$description": "Documented-but-not-tokenized: the page background is a layered radial-gradient ('radial-gradient(1200px 600px at 15% -10%, #1a3c5e44, transparent 60%), radial-gradient(1000px 500px at 90% 0%, #27496b33, transparent 58%), #0b1118') — see DESIGN.md §Depth/elevation."
+  }
+}