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.
49 lines
3.0 KiB
Markdown
49 lines
3.0 KiB
Markdown
# Stitch export — Rippr Minimalist Activity Tracker
|
|
|
|
Pulled from [stitch.withgoogle.com](https://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.
|