rippr/docs/ui-redesign

UI redesign tickets

Same shape as docs/v3/: one file per feature, Goal · Context · Design · Implementation · Acceptance criteria · Tests · Risks · Out of scope. Written before implementing.

Source material: docs/design/stitch-export/ — four Stitch-generated screens (Map HUD, Plan, Route Planning, Rides History) plus the "Modern Professional Dark" design system actually used by all four. See that directory's README.md for how they were fetched and a correction of an earlier mislabeling.

This is a navigation-model change, not a reskin: today's app is a stack rooted at Record, with Trips/Settings/Routes as pushed children. The new design is a persistent 4-tab shell (Map / Rides / Plan / Settings) with the map visible, at some opacity, behind every tab — not just the Map tab. Sequenced so the riskiest, highest-blast-radius piece (the shell) lands first and flutter test stays green throughout, the same discipline v3 held to.

The tickets

#	Ticket	Size	Depends on	Status
UI-01	Persistent tab shell with an always-visible background map	L	—	Done
UI-02	Offline / no-connection skeleton map	S	UI-01	Not started
UI-03	Shared floating-glass component kit	M	UI-08	Not started
UI-04	Customizable HUD telemetry widgets (drag, resize, visibility toggle)	L	UI-03	Not started
UI-05	Map HUD: Record screen redesign	M	UI-01, UI-03, UI-04	Not started
UI-06	Plan & Route Planning redesign	M	UI-01, UI-03	Not started
UI-07	Rides History redesign	M	UI-01, UI-03	Not started
UI-08	Theme migration to Modern Professional Dark	S	—	Not started
UI-09	Monochrome dark map tiles	S	—	Not started

Dependencies

UI-01 ──┬──► UI-02
        ├──► UI-05
        ├──► UI-06
        └──► UI-07
UI-08 ──► UI-03 ──┬──► UI-04 ──► UI-05
                  ├──► UI-06
                  └──► UI-07
UI-09 ──┬──► UI-05
        ├──► UI-06
        └──► UI-07

no dependencies: UI-01 · UI-08 · UI-09

Suggested order

1. UI-01 — the shell. Highest blast radius (touches every screen's entry point), so get it merged and green before any visual work starts.
2. UI-08 — theme. Every screen ticket after this needs the palette settled once, not patched per-screen. Supersedes V3-16's safety-orange direction — see that ticket's note.
3. UI-09 — dark map tiles. Small, no dependencies, and every screen with a map looks wrong without it regardless of how correct the HUD chrome on top is.
4. UI-02 — skeleton map. Small, and exercises the background-map plumbing UI-01 just built while it's fresh.
5. UI-03 — the component kit (GlassPanel, FloatingPill, PulsingLocationMarker). Build once, consumed by every screen ticket.
6. UI-04 — the customizable HUD widget system (drag/resize/persist layout, a visibility toggle in Settings). This is its own ticket, not folded into UI-05, because drag-and-resize-with-persisted-layout is a genuinely separate piece of engineering from "redesign the record screen" — a small widget-layout editor in miniature.
7. UI-05 / UI-06 / UI-07 — the three screen redesigns, in any order once everything above is done. Each is independently shippable.

Things named explicitly by the person who commissioned this, not inferred from the mockups

• The map is active on every tab, including Rides History — blurred/dimmed behind the content cards so it doesn't compete for attention, not hidden. This wasn't visible in the Stitch export (Rides History's HTML uses a static blurred background image, not a live map) — it's a deliberate product decision layered on top of the mockups.
• No header, anywhere, ever — the stated reason is screen real estate: the point of the redesign is to show as much map as possible, and a persistent bottom nav plus zero header chrome is what buys that space back.
• A no-connection skeleton map (UI-02), rather than a blank or broken map, since the map is now a permanent background presence on every tab rather than something opened deliberately.
• The telemetry HUD widgets are user-customizable (UI-04): draggable and resizable by the rider, and which metrics show up live at all is a Settings toggle. The Stitch mockup's tap-to-expand interaction is a fixed layout with one temporary focus state; this goes further — the rider chooses the layout and which stats exist on screen at all, and it persists.
• The map itself is monochrome dark (UI-09) — today's default OSM tan/cream tiles are nothing like the mockups regardless of how correct the HUD chrome on top is. A real tile-provider decision, not a color filter thrown on as an afterthought — see that ticket for the trade-off against just filtering OSM's existing tiles.

The Map screen is the design north star

The four Stitch exports don't agree with each other on styling — expected, since each was a separate prompt and the AI generation drifted between them. Map HUD is the canonical reference for color usage, icon choice/fill-state, spacing, and component pattern across the whole redesign. Where another screen's mockup disagrees with Map HUD on any of those, Map HUD wins.

Plan and Route Planning are correct in principle — fullscreen map, floating pill summaries, pin-drop interaction, no header — but their specific styling (icon fill states, exact nav bar treatment, some color choices) drifted from Map HUD across prompts and should be restyled to match it, not copied as-is. UI-06 says this again at the point where it matters.

What the mockups got generated inconsistently — don't copy as intentional

• Bottom nav shows 4 icons on Map HUD and Rides History, only 3 (no Settings) on the Plan screen. Build one nav bar with 4 destinations, always.
• Rides History's summary row is 4 copies of the same "Total Dist" card. Real, distinct summary stats are UI-06's job to define.
• Route Planning's bottom nav highlights "Rides" as active while the screen shown is Plan — a generation slip, not a deliberate cross-tab indicator.