Keysat
99404db48b
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.
18 lines
1.1 KiB
Markdown
18 lines
1.1 KiB
Markdown
# 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`.
|