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.
This commit is contained in:
Keysat
@@ -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."
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user