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.
1.1 KiB
1.1 KiB
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 (:rootvars + component CSS) and ~1300 inlinestyle={{}}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#0b1118encodes the intended palette: white/light text on a dark cool ground, with the single#3b82c4blue 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.