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.
This commit is contained in:
@@ -3,46 +3,60 @@
|
|||||||
Pulled from [stitch.withgoogle.com](https://stitch.withgoogle.com) project
|
Pulled from [stitch.withgoogle.com](https://stitch.withgoogle.com) project
|
||||||
`8187200995279352789` via the Stitch MCP server on 2026-08-23.
|
`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
|
## Contents
|
||||||
|
|
||||||
| File | Stitch screen | What it is |
|
| File | 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). |
|
| `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. |
|
||||||
| `screens/export-summary.md` | Rippr Project Export Summary | Stitch's own generated overview of the project and screen inventory. |
|
| `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/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/export-summary.md` | Stitch's own generated project overview. Its "Design System: Modern Professional Dark" section was correct all along. |
|
||||||
| `screens/plan-screen-dark.html` + `.png` | Plan Screen - Dark Mode | Empty-state route planner: map with a "Tap to drop a pin" prompt. |
|
| `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/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/plan-screen-dark.html` + `.png` | Plan Screen - Dark Mode: empty-state route planner, "Tap to drop a pin" prompt. |
|
||||||
| `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. |
|
| `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
|
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
|
reference for structure and interaction, not something to drop into the Flutter app
|
||||||
as-is.
|
as-is.
|
||||||
|
|
||||||
## A discrepancy worth flagging
|
## Not pulled as a screen/image
|
||||||
|
|
||||||
`screens/export-summary.md` describes a **different** design system than
|
"Design System" (`assets_e73325c5365a4a56b93823236777e95a`) is a **design-system asset
|
||||||
`design-system.md` — it names "Modern Professional Dark" (#1978e5 blue, Inter,
|
instance**, not a regular screen — Stitch's `get_screen` call only works on
|
||||||
8px roundness), while the design system actually attached to the project (and to every
|
`projects/{project}/screens/{screen}` resources and returns `invalid argument` for an
|
||||||
screen fetched above) is the **HUD / Minimalist-Technical** one: near-black
|
`assets/{id}` resource. There is no separate HTML/screenshot file for it the way there is
|
||||||
(`#0A0A0B`-ish surfaces), electric-neon-green primary (`#00FF41`/`#00E639`), cyan
|
for a screen; its full content (structured theme tokens + style-guideline prose) is
|
||||||
secondary telemetry accent (`#00E0FF`), Sora/Inter/JetBrains Mono typography, and 4px
|
fetched via `list_design_systems` instead, and that's what
|
||||||
roundness. The screenshots above all use the neon/HUD system, not the blue one the
|
`design-system-modern-professional-dark.md` is built from.
|
||||||
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.
|
|
||||||
|
|
||||||
## Next step
|
## Next step
|
||||||
|
|
||||||
This is raw material, not yet applied to the app. `lib/src/ui/theme.dart`'s current
|
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
|
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
|
direction from **either** of these Stitch design systems. Reconciling or replacing is a
|
||||||
other, is a decision for whoever picks up the actual UI work on this branch.
|
decision for whoever picks up the actual UI work on this branch.
|
||||||
|
|||||||
@@ -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.
|
||||||
Reference in New Issue
Block a user