Keysat
7b560c97b6
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.
155 lines
12 KiB
JSON
155 lines
12 KiB
JSON
{
|
|
"$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." }
|
|
},
|
|
"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": {
|
|
"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 (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." },
|
|
"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." },
|
|
"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."
|
|
}
|
|
}
|