samplez/rippr-flutter-src/docs/design/stitch-export/README.md

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.