dilly/rippr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mislabeled design system: the 4 screens use Modern Professional Dark, not the neon HUD one

Browse Source 
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:
uhryniuk
2026-08-23 18:11:43 -05:00
parent fe8a7b6e3e
commit 95a88fa383
3 changed files with 215 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/design/stitch-export/README.md
View File

@@ -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.