uhryniuk
95a88fa383
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.
4.1 KiB
Stitch export — Rippr Minimalist Activity Tracker
Pulled from 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 | 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.
Not pulled as a screen/image
"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 either of these Stitch design systems. Reconciling or replacing is a
decision for whoever picks up the actual UI work on this branch.