Distill mobile-first design round-trip into the contract
Phase C/D of the /design round-trip (Claude Design "Venture-CRM mobile redesign", 2026-06-19). Captures the cloud output and folds it into the durable design/ contract; no frontend reskin in this pass. - _imports/2026-06-19/: provenance — GridApp.dc.html (byte-exact canonical surface) + a manifest README (project URL/inventory, data model, derived- field formulas, per-surface interaction model). DesignSync can't bulk- download, so screenshots/other sources stay recoverable from the cloud URL. - DESIGN.md: §8 Responsive rewritten to the landed mobile-first system (4-tab bottom bar, card/detail, bottom sheets, swipe/snap, safe areas); §4 mobile component states; §3 15px mobile type scale; §2 stage/staleness + light-theme palette pointers. - tokens.tokens.json: new `mobile` group (type scale, radii, touch sizing, safe-area) + `motion.sheet`; `color.light` palette — light theme adopted as a planned, toggle-gated feature (dark stays default). - ROADMAP.md: mobile-first implementation backlog (contract-vs-code gap), gated on the inline-style->CSS migration and the locked pipeline spec.
This commit is contained in:
Keysat
@@ -36,6 +36,36 @@
|
||||
},
|
||||
"constant": {
|
||||
"white": { "$type": "color", "$value": "#ffffff", "$description": "Text on accent fills; brand mark." }
|
||||
},
|
||||
"light": {
|
||||
"$description": "Light-theme palette (planned; adopted 2026-06-19). The color.* values above are the DARK/default theme; these are the light-mode overrides for the same semantic slots, sourced from the comps' [data-theme=\"light\"] blocks. accent.default stays #3b82c4 in both themes. Full per-component light tints (stage/staleness/note badges) live in design/_imports/2026-06-19/GridApp.dc.html. Dark remains the default; light is a user toggle.",
|
||||
"bg": {
|
||||
"base": { "$type": "color", "$value": "#eaeef3" },
|
||||
"panel": { "$type": "color", "$value": "#ffffff" },
|
||||
"elevated": { "$type": "color", "$value": "#f4f7fb" },
|
||||
"input": { "$type": "color", "$value": "#eef2f7" },
|
||||
"hover": { "$type": "color", "$value": "#e6ecf4" }
|
||||
},
|
||||
"border": {
|
||||
"default": { "$type": "color", "$value": "#d6dde7" },
|
||||
"strong": { "$type": "color", "$value": "#b6c3d4" },
|
||||
"divider": { "$type": "color", "$value": "#e8edf3", "$description": "Dark-theme equivalent is #1c2735 (a distinct lighter-than-border divider the comps introduced)." }
|
||||
},
|
||||
"text": {
|
||||
"primary": { "$type": "color", "$value": "#16202c" },
|
||||
"secondary": { "$type": "color", "$value": "#33414f" },
|
||||
"muted": { "$type": "color", "$value": "#5a6b7d" },
|
||||
"subtle": { "$type": "color", "$value": "#84909e" }
|
||||
},
|
||||
"accent": {
|
||||
"light": { "$type": "color", "$value": "#1f6fb8", "$description": "On-light accent text (darker than the dark-theme #93c5fd)." }
|
||||
},
|
||||
"semantic": {
|
||||
"danger-soft": { "$type": "color", "$value": "#c0322f" },
|
||||
"success-text": { "$type": "color", "$value": "#057a55" }
|
||||
},
|
||||
"nav-bg": { "$type": "color", "$value": "#ffffffd9", "$description": "Translucent bottom-nav background (light)." },
|
||||
"shadow-card": { "$type": "shadow", "$value": "0 8px 20px rgba(40,70,110,0.10), inset 0 1px 0 #ffffff" }
|
||||
}
|
||||
},
|
||||
"font": {
|
||||
@@ -46,7 +76,7 @@
|
||||
"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." },
|
||||
"md": { "$type": "dimension", "$value": "13px", "$description": "Body / table cells / inputs (desktop base). Mobile body base is 15px — see the `mobile` group + DESIGN.md §3/§8." },
|
||||
"lg": { "$type": "dimension", "$value": "14px", "$description": "Nav items." },
|
||||
"xl": { "$type": "dimension", "$value": "16px", "$description": "Section titles." },
|
||||
"2xl": { "$type": "dimension", "$value": "18px", "$description": "Modal titles." },
|
||||
@@ -88,7 +118,35 @@
|
||||
"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." }
|
||||
"panel": { "$type": "duration", "$value": "300ms", "$description": "Slide-over / toast entry." },
|
||||
"sheet": { "$type": "duration", "$value": "280ms", "$description": "Mobile bottom-sheet slide-up (cubic-bezier(.2,.8,.2,1))." }
|
||||
},
|
||||
"mobile": {
|
||||
"$description": "Mobile-first redesign deltas (2026-06-19 Claude Design round-trip; provenance in design/_imports/2026-06-19/, behavior in DESIGN.md §8). The values above are the desktop base; these override/extend for the <768px surface. Colors are unchanged — stage chips and staleness reuse the semantic tokens above (engaged→accent, diligence→due-soon, commitment→success, stale→danger-soft).",
|
||||
"font-size": {
|
||||
"body": { "$type": "dimension", "$value": "15px", "$description": "Body / list rows / inputs (up from desktop md 13px)." },
|
||||
"card-title": { "$type": "dimension", "$value": "16px", "$description": "Investor/card name." },
|
||||
"amount": { "$type": "dimension", "$value": "15px", "$description": "Mono money values." },
|
||||
"screen-title": { "$type": "dimension", "$value": "21px", "$description": "Tab screen title." },
|
||||
"detail-title": { "$type": "dimension", "$value": "22px", "$description": "Full-screen detail header." },
|
||||
"sheet-title": { "$type": "dimension", "$value": "18px", "$description": "Bottom-sheet title." },
|
||||
"tab-label": { "$type": "dimension", "$value": "10px", "$description": "Mono bottom-tab label." }
|
||||
},
|
||||
"radius": {
|
||||
"card": { "$type": "dimension", "$value": "10px", "$description": "Mobile cards (vs desktop lg 8px)." },
|
||||
"control": { "$type": "dimension", "$value": "8px", "$description": "Mobile inputs/buttons (vs desktop md 6px)." },
|
||||
"sheet": { "$type": "dimension", "$value": "20px", "$description": "Bottom-sheet top corners." }
|
||||
},
|
||||
"size": {
|
||||
"touch-target": { "$type": "dimension", "$value": "44px", "$description": "Minimum primary touch target." },
|
||||
"input": { "$type": "dimension", "$value": "46px", "$description": "Form input / sheet field height." },
|
||||
"tab-bar": { "$type": "dimension", "$value": "56px", "$description": "Bottom tab-bar item height." }
|
||||
},
|
||||
"space": {
|
||||
"screen-pad-x": { "$type": "dimension", "$value": "16px", "$description": "Screen horizontal padding (vs desktop xl 20px)." },
|
||||
"card-gap": { "$type": "dimension", "$value": "10px", "$description": "Gap between cards in a list." }
|
||||
},
|
||||
"safe-area-bottom": { "$type": "dimension", "$value": "env(safe-area-inset-bottom)", "$description": "Not a static dimension — the sticky bottom nav and content bottom-padding must honor it. Kept as a CSS string." }
|
||||
},
|
||||
"_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