uhryniuk
fe8a7b6e3e
Pulled via the Stitch MCP from project 8187200995279352789: the design system spec (neon-HUD dark theme -- Sora/Inter/JetBrains Mono, electric green primary, cyan secondary) plus HTML/screenshot for Map HUD, Plan Screen, Route Planning, and Rides History (all Dark Mode), and the project's own export summary.
Raw reference material only, not yet wired into the app. Flags a real discrepancy in README.md: the export summary describes a different ('Modern Professional Dark', blue) design system than the one actually attached to the project and used by every screen fetched -- treat design-system.md as current, export-summary.md as stale.
Stitch export — Rippr Minimalist Activity Tracker
Pulled from stitch.withgoogle.com project
8187200995279352789 via the Stitch MCP server on 2026-08-23.
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. |
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
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.
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.