From 95a88fa383b232899f23431acc7ae0cdd4e402c3 Mon Sep 17 00:00:00 2001 From: uhryniuk Date: Sun, 23 Aug 2026 18:11:43 -0500 Subject: [PATCH] Fix mislabeled design system: the 4 screens use Modern Professional Dark, not the neon HUD one list_design_systems reveals 3 distinct design systems in this Stitch project. The one requested (asset e73325c5365a4a56b93823236777e95a, screen ID asset-stub-assets_e73325c5365a4a56b93823236777e95a) is 'Modern Professional Dark' -- charcoal/navy, Professional Blue primary, Inter throughout, 8px rounding, tonal-layer depth with glow accents. The earlier commit incorrectly saved get_project's top-level designTheme (the neon-green 'Rippr' HUD system) as design-system.md and called the export summary's description of a blue theme 'stale.' It wasn't -- confirmed by hex-matching every color in the downloaded screen HTML against the two candidate systems: all match Modern Professional Dark (#0a0a0c, #131313, #16161a, #4090fe...) exactly, none match the neon system. Renamed the neon file to design-system-rippr-neon.md (kept for reference, flagged as unused by these screens) and added the correct file. --- docs/design/stitch-export/README.md | 74 +++++--- .../design-system-modern-professional-dark.md | 171 ++++++++++++++++++ ...-system.md => design-system-rippr-neon.md} | 0 3 files changed, 215 insertions(+), 30 deletions(-) create mode 100644 docs/design/stitch-export/design-system-modern-professional-dark.md rename docs/design/stitch-export/{design-system.md => design-system-rippr-neon.md} (100%) diff --git a/docs/design/stitch-export/README.md b/docs/design/stitch-export/README.md index 8b20dcd..0e3820d 100644 --- a/docs/design/stitch-export/README.md +++ b/docs/design/stitch-export/README.md @@ -3,46 +3,60 @@ Pulled from [stitch.withgoogle.com](https://stitch.withgoogle.com) project `8187200995279352789` via the Stitch MCP server on 2026-08-23. +## Correction + +An earlier version of this README got the design systems backwards. There are **three** +distinct design systems in this project (`list_design_systems`), and the four screens +below actually render with the one this doc originally called "stale." That's now fixed. + +| Asset | Display name | Mode | Primary | Fonts | Used by the 4 screens below? | +|---|---|---|---|---|---| +| `assets/e73325c5365a4a56b93823236777e95a` | **Modern Professional Dark** | Dark | Blue `#1978e5` (rendered `#4090fe`/`#aac7ff`) | Inter (everywhere) | **Yes — confirmed by hex-matching the downloaded HTML** | +| `assets/41670631a4b64b118fb9ea1b54f1bd60` | Rippr (neon HUD) | Dark | Electric green `#00FF41` | Sora / Inter / JetBrains Mono | No | +| `assets/3938003907261369831` | Modern Professional | Light | Blue `#1275e2` | Inter | No | + +**The one you specifically asked for** (screen ID +`asset-stub-assets_e73325c5365a4a56b93823236777e95a`, i.e. +`assets/e73325c5365a4a56b93823236777e95a`) is **Modern Professional Dark** — deep +charcoal/navy (`#0a0a0c` base, `#131313` surface, `#16161a` cards), Professional Blue +primary, Inter throughout, 8px rounding, tonal-layer depth (no shadows, lighter surface += more elevated), and a soft blue glow on elevated/active elements instead of a shadow. +This is `design-system-modern-professional-dark.md` below, and it's the design system +actually used by all four screens already pulled. + +`design-system-rippr-neon.md` is kept for reference — it's a real design system in the +project (`get_project`'s top-level `designTheme`, i.e. whatever a brand-new screen would +default to), but it is **not** what any of the four fetched screens render with. + ## Contents -| File | Stitch screen | What it is | -|---|---|---| -| `design-system.md` | Design System | Full design-system spec: color tokens, typography, spacing, elevation, shape, and component rules. This is the current, authoritative design system for the project (see note below). | -| `screens/export-summary.md` | Rippr Project Export Summary | Stitch's own generated overview of the project and screen inventory. | -| `screens/map-hud-dark.html` + `.png` | Map HUD - Dark Mode | Active-recording map screen: floating telemetry cards (speed, avg speed, distance, time), Pause/Stop controls. | -| `screens/plan-screen-dark.html` + `.png` | Plan Screen - Dark Mode | Empty-state route planner: map with a "Tap to drop a pin" prompt. | -| `screens/route-planning-dark.html` + `.png` | Route Planning - Dark Mode | Route planner with pins dropped: distance/time/pin-count header, dotted route line, Start Route button. | -| `screens/rides-history-dark.html` + `.png` | Rides History - Dark Mode | Ride list: search bar, distance-unit toggle, cards with a mini-map thumbnail, date, distance, time, avg speed. | +| File | What it is | +|---|---| +| `design-system-modern-professional-dark.md` | **The design system actually applied to the four screens below.** Full spec: color tokens, typography, spacing, elevation, shape, components. | +| `design-system-rippr-neon.md` | A second, unused-by-these-screens design system also present in the project (green/cyan HUD aesthetic). Reference only. | +| `screens/export-summary.md` | Stitch's own generated project overview. Its "Design System: Modern Professional Dark" section was correct all along. | +| `screens/map-hud-dark.html` + `.png` | Map HUD - Dark Mode: active-recording map screen, floating telemetry cards (speed, avg speed, distance, time), Pause/Stop controls. | +| `screens/plan-screen-dark.html` + `.png` | Plan Screen - Dark Mode: empty-state route planner, "Tap to drop a pin" prompt. | +| `screens/route-planning-dark.html` + `.png` | Route Planning - Dark Mode: pins dropped, distance/time/pin-count header, dotted route line, Start Route button. | +| `screens/rides-history-dark.html` + `.png` | Rides History - Dark Mode: search bar, unit toggle, ride cards with a mini-map thumbnail, date, distance, time, avg speed. | Each `.html` is Stitch's generated markup (Tailwind CSS, vanilla JS) for that screen — a reference for structure and interaction, not something to drop into the Flutter app as-is. -## A discrepancy worth flagging +## Not pulled as a screen/image -`screens/export-summary.md` describes a **different** design system than -`design-system.md` — it names "Modern Professional Dark" (#1978e5 blue, Inter, -8px roundness), while the design system actually attached to the project (and to every -screen fetched above) is the **HUD / Minimalist-Technical** one: near-black -(`#0A0A0B`-ish surfaces), electric-neon-green primary (`#00FF41`/`#00E639`), cyan -secondary telemetry accent (`#00E0FF`), Sora/Inter/JetBrains Mono typography, and 4px -roundness. The screenshots above all use the neon/HUD system, not the blue one the -summary describes — the export summary looks like it's describing an earlier or -different iteration of the project. Treat `design-system.md` as the current source of -truth; `export-summary.md` is kept here for reference but its "Design System" section is -stale. - -## Not pulled - -The "Design System" screen instance in the project -(`assets_e73325c5365a4a56b93823236777e95a`) is a design-system asset, not a regular -screen — Stitch's `get_screen` call is for screens, not asset instances. Its content is -what's captured in `design-system.md` (fetched via `get_project`'s `designTheme`), so -nothing is missing, just fetched through a different call. +"Design System" (`assets_e73325c5365a4a56b93823236777e95a`) is a **design-system asset +instance**, not a regular screen — Stitch's `get_screen` call only works on +`projects/{project}/screens/{screen}` resources and returns `invalid argument` for an +`assets/{id}` resource. There is no separate HTML/screenshot file for it the way there is +for a screen; its full content (structured theme tokens + style-guideline prose) is +fetched via `list_design_systems` instead, and that's what +`design-system-modern-professional-dark.md` is built from. ## Next step This is raw material, not yet applied to the app. `lib/src/ui/theme.dart`'s current palette (safety-orange accent, warm near-black ground — see V3-16) is a different -direction from this neon-HUD system. Reconciling the two, or replacing one with the -other, is a decision for whoever picks up the actual UI work on this branch. +direction from **either** of these Stitch design systems. Reconciling or replacing is a +decision for whoever picks up the actual UI work on this branch. diff --git a/docs/design/stitch-export/design-system-modern-professional-dark.md b/docs/design/stitch-export/design-system-modern-professional-dark.md new file mode 100644 index 0000000..4b722fb --- /dev/null +++ b/docs/design/stitch-export/design-system-modern-professional-dark.md @@ -0,0 +1,171 @@ +--- +name: Modern Professional Dark +colors: + surface: '#131313' + surface-dim: '#131313' + surface-bright: '#393939' + surface-container-lowest: '#0e0e0e' + surface-container-low: '#1c1b1b' + surface-container: '#201f1f' + surface-container-high: '#2a2a2a' + surface-container-highest: '#353534' + on-surface: '#e5e2e1' + on-surface-variant: '#c1c6d5' + inverse-surface: '#e5e2e1' + inverse-on-surface: '#313030' + outline: '#8b919f' + outline-variant: '#414753' + surface-tint: '#aac7ff' + primary: '#aac7ff' + on-primary: '#002f64' + primary-container: '#4090fe' + on-primary-container: '#002958' + inverse-primary: '#005db8' + secondary: '#aec7f6' + on-secondary: '#143057' + secondary-container: '#2e476f' + on-secondary-container: '#9db6e4' + tertiary: '#ffb68c' + on-tertiary: '#532200' + tertiary-container: '#e3711f' + on-tertiary-container: '#481d00' + error: '#ffb4ab' + on-error: '#690005' + error-container: '#93000a' + on-error-container: '#ffdad6' + primary-fixed: '#d6e3ff' + primary-fixed-dim: '#aac7ff' + on-primary-fixed: '#001b3e' + on-primary-fixed-variant: '#00458d' + secondary-fixed: '#d6e3ff' + secondary-fixed-dim: '#aec7f6' + on-secondary-fixed: '#001b3d' + on-secondary-fixed-variant: '#2e476f' + tertiary-fixed: '#ffdbc9' + tertiary-fixed-dim: '#ffb68c' + on-tertiary-fixed: '#321200' + on-tertiary-fixed-variant: '#763400' + background: '#131313' + on-background: '#e5e2e1' + surface-variant: '#353534' + surface-main: '#0a0a0c' + surface-card: '#16161a' + accent-error: '#ffb4ab' + on-surface-bright: '#ffffff' + on-surface-muted: '#9ca3af' +typography: + headline-lg: + fontFamily: Inter + fontSize: 32px + fontWeight: '700' + lineHeight: 40px + letterSpacing: -0.02em + headline-lg-mobile: + fontFamily: Inter + fontSize: 28px + fontWeight: '700' + lineHeight: 36px + letterSpacing: -0.01em + headline-md: + fontFamily: Inter + fontSize: 24px + fontWeight: '600' + lineHeight: 32px + headline-sm: + fontFamily: Inter + fontSize: 20px + fontWeight: '600' + lineHeight: 28px + body-lg: + fontFamily: Inter + fontSize: 16px + fontWeight: '400' + lineHeight: 24px + body-md: + fontFamily: Inter + fontSize: 14px + fontWeight: '400' + lineHeight: 20px + label-md: + fontFamily: Inter + fontSize: 12px + fontWeight: '500' + lineHeight: 16px + letterSpacing: 0.5px + label-sm: + fontFamily: Inter + fontSize: 11px + fontWeight: '500' + lineHeight: 16px + letterSpacing: 0.5px +rounded: + sm: 0.25rem + DEFAULT: 0.5rem + md: 0.75rem + lg: 1rem + xl: 1.5rem + full: 9999px +spacing: + base: 4px + gutter: 24px + margin-mobile: 16px + margin-desktop: 32px + max-width: 1280px +--- + +## Brand & Style + +This design system embodies a **Corporate / Modern** aesthetic reimagined for a premium dark-mode experience. The brand personality is authoritative, precise, and sophisticated. By shifting to a deep charcoal and navy foundation, the UI evokes a sense of focused calm and high-end engineering. + +The visual style leverages subtle luminescence and high-contrast accents to guide the user's eye, moving away from traditional light surfaces to a more immersive, "command-center" feel. It is tailored for professional environments where clarity and reduced eye strain are paramount. + +## Colors + +The palette is anchored by a **Deep Dark Gray (#0a0a0c)** background to provide a true premium feel without the harshness of pure black. + +- **Primary:** The Professional Blue (#1978e5) is the soul of the interface, used for key actions and brand presence. +- **Secondary:** A muted Slate Blue (#465f88) handles auxiliary UI elements and decorative accents. +- **Surface Strategy:** We use a "stepped" dark palette. The base is the darkest, while interactive containers or cards use a slightly lighter gray (#16161a) to create perceived depth. +- **Contrast:** All functional text is kept at a high luminance (Off-white to Pure White) to ensure AAA accessibility standards against the dark backdrop. + +## Typography + +This design system relies exclusively on **Inter** to maintain a systematic, utilitarian, and clean appearance. + +- **Weight & Scale:** Headlines utilize tighter letter spacing and heavier weights to command attention against the dark background. +- **Readability:** Body text uses a generous line-height to prevent "halation"—where light text on dark backgrounds appears to bleed or blur. +- **Labels:** Small labels use all-caps or increased letter-spacing to maintain legibility at micro-scales. + +## Layout & Spacing + +The design system employs a **Fixed Grid** philosophy for desktop to maintain structural integrity, transitioning to a fluid model for smaller screens. + +- **Grid:** A 12-column grid is used for desktop (1280px max-width) with 24px gutters. +- **Rhythm:** An 8px spatial system governs all padding and margins, ensuring a predictable and professional vertical rhythm. +- **Breakpoints:** + - **Mobile:** < 600px (4 columns, 16px margins) + - **Tablet:** 600px - 1024px (8 columns, 24px margins) + - **Desktop:** > 1024px (12 columns, 32px margins) + +## Elevation & Depth + +In dark mode, shadows are less effective. Instead, this design system uses **Tonal Layers** and **Low-Contrast Outlines**. + +- **Elevation Levels:** Higher elevation is communicated by lighter surface colors. A "floating" modal will have a lighter hex than the background. +- **Borders:** Subtle 1px borders (#2d3037) are used to define boundaries where tonal shifts are too subtle. +- **Glow:** Highly elevated elements (like active primary buttons) may use a soft blue outer glow rather than a black shadow to emphasize their importance. + +## Shapes + +The shape language is defined as **Rounded (Level 2)**, striking a balance between the rigidity of corporate software and the approachability of modern SaaS. + +- **Small Components:** Buttons and inputs use a 0.5rem (8px) radius. +- **Large Containers:** Cards and modals use a 1rem (16px) radius to soften the layout and create clear content groupings. + +## Components + +- **Buttons:** Primary buttons are solid Professional Blue with white text. Secondary buttons use a ghost style with a subtle white border and no fill. +- **Input Fields:** Backgrounds should be slightly darker or lighter than the container surface, with a 1px border that glows Professional Blue on focus. +- **Cards:** Cards use a #16161a background with a very subtle 1px border (#ffffff10) to separate them from the main background. +- **Chips:** Used for metadata, chips feature a desaturated secondary blue-grey background with high-contrast labels. +- **Lists:** Items are separated by hair-line dividers (#ffffff08) to maintain a clean vertical scan-path. diff --git a/docs/design/stitch-export/design-system.md b/docs/design/stitch-export/design-system-rippr-neon.md similarity index 100% rename from docs/design/stitch-export/design-system.md rename to docs/design/stitch-export/design-system-rippr-neon.md