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

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