diff --git a/docs/design/stitch-export/README.md b/docs/design/stitch-export/README.md
new file mode 100644
index 0000000..8b20dcd
--- /dev/null
+++ b/docs/design/stitch-export/README.md
@@ -0,0 +1,48 @@
+# 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.
diff --git a/docs/design/stitch-export/design-system.md b/docs/design/stitch-export/design-system.md
new file mode 100644
index 0000000..c85a417
--- /dev/null
+++ b/docs/design/stitch-export/design-system.md
@@ -0,0 +1,171 @@
+---
+name: Rippr
+colors:
+  surface: '#131314'
+  surface-dim: '#131314'
+  surface-bright: '#3a393a'
+  surface-container-lowest: '#0e0e0f'
+  surface-container-low: '#1c1b1c'
+  surface-container: '#201f20'
+  surface-container-high: '#2a2a2b'
+  surface-container-highest: '#353436'
+  on-surface: '#e5e2e3'
+  on-surface-variant: '#b9ccb2'
+  inverse-surface: '#e5e2e3'
+  inverse-on-surface: '#313031'
+  outline: '#84967e'
+  outline-variant: '#3b4b37'
+  surface-tint: '#00e639'
+  primary: '#ebffe2'
+  on-primary: '#003907'
+  primary-container: '#00ff41'
+  on-primary-container: '#007117'
+  inverse-primary: '#006e16'
+  secondary: '#b9f1ff'
+  on-secondary: '#00363f'
+  secondary-container: '#00e0ff'
+  on-secondary-container: '#005f6d'
+  tertiary: '#fff8f4'
+  on-tertiary: '#442b10'
+  tertiary-container: '#ffd5ae'
+  on-tertiary-container: '#7a5b3c'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#72ff70'
+  primary-fixed-dim: '#00e639'
+  on-primary-fixed: '#002203'
+  on-primary-fixed-variant: '#00530e'
+  secondary-fixed: '#a5eeff'
+  secondary-fixed-dim: '#00daf8'
+  on-secondary-fixed: '#001f25'
+  on-secondary-fixed-variant: '#004e5a'
+  tertiary-fixed: '#ffdcbd'
+  tertiary-fixed-dim: '#e7bf99'
+  on-tertiary-fixed: '#2c1701'
+  on-tertiary-fixed-variant: '#5d4124'
+  background: '#131314'
+  on-background: '#e5e2e3'
+  surface-variant: '#353436'
+typography:
+  display-telemetry:
+    fontFamily: JetBrains Mono
+    fontSize: 64px
+    fontWeight: '700'
+    lineHeight: 64px
+    letterSpacing: -0.04em
+  headline-lg:
+    fontFamily: Sora
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: 40px
+  headline-md:
+    fontFamily: Sora
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+  body-lg:
+    fontFamily: Inter
+    fontSize: 18px
+    fontWeight: '400'
+    lineHeight: 28px
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-caps:
+    fontFamily: JetBrains Mono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+    letterSpacing: 0.1em
+  display-telemetry-mobile:
+    fontFamily: JetBrains Mono
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: 48px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  container-margin: 20px
+  gutter: 12px
+  stack-sm: 8px
+  stack-md: 24px
+  stack-lg: 48px
+---
+
+## Brand & Style
+The design system centers on a high-performance, dark-mode aesthetic tailored for real-time activity tracking. The brand personality is kinetic, precise, and undistracted. It utilizes a **Minimalist-Technical** style, stripping away non-essential chrome to focus entirely on telemetry and movement.
+
+The visual narrative is driven by a "HUD" (Heads-Up Display) concept: information is layered over the user's environment or activity maps using subtle glassmorphism and high-contrast data points. The emotional response should be one of focus and momentum, making the user feel like a precision instrument.
+
+## Colors
+The palette is dominated by **Pitch Black (#0A0A0B)** to preserve OLED battery life and minimize ocular strain during night activities.
+
+- **Primary (Electric Neon):** Used exclusively for active states, completion goals, and primary "Go" actions.
+- **Secondary (Cyan Telemetry):** Reserved for secondary data streams, such as cadence or heart rate, to provide visual separation from primary distance/time metrics.
+- **Surface Strategy:** Backgrounds use deep charcoal. Overlays use a semi-transparent version of the surface color with a 20px background blur to create the HUD effect.
+
+## Typography
+The typography system uses a functional split: **Sora** for UI headers and brand moments, **Inter** for standard interface text, and **JetBrains Mono** for all numerical data and telemetry.
+
+- **Data Legibility:** All numeric values must use the monospaced font to prevent "jumping" layouts during real-time updates.
+- **Visual Hierarchy:** Use `label-caps` for units (e.g., KM/H, BPM) placed immediately adjacent to large telemetry displays.
+- **Scale:** On mobile devices, telemetry data should prioritize width; if values exceed 5 digits, scale the font size down dynamically to fit the viewport width minus margins.
+
+## Layout & Spacing
+This design system employs a **Fluid HUD Grid**. Elements are anchored to the corners of the screen to keep the center clear for maps or camera feeds.
+
+- **Grid Model:** A 6-column grid for mobile, 12-column for desktop.
+- **Padding:** Use a generous 20px "Safe Zone" margin on all edges of the screen to ensure interactive elements are reachable and not clipped by hardware notches or rounded device corners.
+- **Density:** High density for data readouts (8px spacing between related metrics) and low density for navigation/settings (24px+ spacing) to prevent accidental taps during motion.
+
+## Elevation & Depth
+Depth is expressed through **translucency** rather than shadows.
+
+1. **Level 0 (Base):** Pure black (#0A0A0B).
+2. **Level 1 (Substrate):** Dark charcoal (#161618) with 0% transparency.
+3. **Level 2 (HUD Panels):** Surface color at 60% opacity with a `backdrop-filter: blur(20px)`.
+4. **Level 3 (Modals):** Surface color at 80% opacity with a subtle 1px inner border in a low-opacity white (10%) to define the edge against dark backgrounds.
+
+Shadows should be avoided entirely to maintain the "lightweight" digital feel.
+
+## Shapes
+The shape language is **Technical-Precision**.
+
+- **Corners:** Use 0.25rem (4px) as the base radius for all containers to maintain a sharp, engineered appearance.
+- **Interactive Elements:** Buttons and inputs follow the same 4px rule.
+- **Progress Indicators:** Use sharp, non-rounded ends for progress bars to emphasize a "segmental" or "digital" look.
+- **Iconography:** Use 2px stroke weights with squared-off ends to match the monospaced typographic theme.
+
+## Components
+
+### Buttons
+- **Primary:** Solid Electric Neon background with Black text. No rounding beyond the base 4px.
+- **Ghost:** 1px Neon border with transparent background. Text matches border color.
+- **Telemetry Toggle:** Small, square buttons using monospaced labels.
+
+### Cards & HUD Panels
+- All cards use the Level 2 Elevation (Glassmorphism).
+- Remove all drop shadows. Use a 1px stroke of #FFFFFF at 10% opacity for definition.
+
+### Data Inputs
+- Underlined style only (no bounding box) for a lighter footprint.
+- Active state changes the underline to the Primary Neon color.
+- Use JetBrains Mono for all numeric input fields.
+
+### Progress & Gauges
+- **Circular Gauges:** Use thin 4px strokes. The "track" should be 5% opacity white; the "fill" should be the Primary Neon.
+- **Pulse:** Active heart rate or GPS signals should use a "scanning" animation—a vertical line moving across the element—rather than a standard fade.
+
+### Navigation
+- A bottom-anchored, floating "Dock" with a glassmorphic background.
+- Active icons are highlighted with a single Neon pixel-dot underneath.
diff --git a/docs/design/stitch-export/screens/export-summary.md b/docs/design/stitch-export/screens/export-summary.md
new file mode 100644
index 0000000..37c0096
--- /dev/null
+++ b/docs/design/stitch-export/screens/export-summary.md
@@ -0,0 +1,50 @@
+# Rippr Project Export
+
+## Project Overview
+Rippr is a minimalist activity tracker designed for cyclists and runners, featuring an immersive map-centric interface, real-time telemetry, and streamlined route planning.
+
+## Design System: Modern Professional Dark
+**ID:** {{DATA:DESIGN_SYSTEM:DESIGN_SYSTEM_3}}
+
+### Theme Tokens
+- **Color Mode:** Dark
+- **Primary Color:** #1978e5 (Professional Blue)
+- **Typography:** Inter
+- **Roundness:** 8px (Round Eight)
+
+### Core Components
+- **TopAppBar:** Minimalist, often hidden for immersive map views.
+- **BottomNavBar:** 4-icon layout (Map, History, Plan, Settings) with a signature active indicator dot.
+- **Telemetry Cards:** Floating, semi-transparent modules (`bg-surface/60`) with `backdrop-blur-xl` and `white/10` borders.
+
+---
+
+## Screen Inventory
+
+### 1. Map HUD (Active Navigation)
+- **ID:** {{DATA:SCREEN:SCREEN_8}}
+- **Description:** Fullscreen map interface with floating telemetry cards at the top showing Speed, Avg Speed, Distance, and Time. Units are integrated inline (e.g., "24.5 km/h").
+- **Controls:** Detached Pause (Yellow) and Stop (Red) buttons positioned above the bottom navigation.
+
+### 2. Plan Screen (Ready state)
+- **ID:** {{DATA:SCREEN:SCREEN_7}}
+- **Description:** Clean map interface identical to the HUD but without telemetry or ride controls. Features a subtle floating tooltip: "Tap to drop a pin".
+
+### 3. Route Planning (Active Pins)
+- **ID:** {{DATA:SCREEN:SCREEN_5}}
+- **Description:** Secondary state of the Plan screen showing 5 dropped pins connected by a blue dotted line. A floating header displays total distance, estimated time, and pin count.
+
+### 4. Rides History
+- **ID:** {{DATA:SCREEN:SCREEN_6}}
+- **Description:** List of previous routes displayed as cards over a blurred live map background. Each card shows a mini-map preview, date, distance, time, and average speed.
+
+### 5. Settings / Profile
+- **ID:** {{DATA:SCREEN:SCREEN_4}}
+- **Description:** Structured list of user preferences, account details, and cloud sync options. Designed with clean hierarchy and professional dark mode styling.
+
+---
+
+## Technical Specifications
+- **Framework:** HTML5 / CSS3 (Tailwind CSS)
+- **Interactivity:** Vanilla JavaScript for map state and telemetry updates.
+- **Visual Effects:** Backdrop filters for UI depth and high-contrast vector paths for route visualization.
diff --git a/docs/design/stitch-export/screens/map-hud-dark.html b/docs/design/stitch-export/screens/map-hud-dark.html
new file mode 100644
index 0000000..92d1be4
--- /dev/null
+++ b/docs/design/stitch-export/screens/map-hud-dark.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en" style=""><head></head><body class="antialiased selection:bg-primary-container selection:text-on-primary-container flex flex-col h-screen relative text-on-surface bg-surface"><svg aria-hidden="true" class="inline-defs-container" style="position:absolute;width:0;height:0;overflow:hidden"></svg>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
+<title>RIPPR - Record Activity</title>
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+  tailwind.config = {
+    darkMode: "class",
+    theme: {
+      extend: {
+        "colors": {
+                "secondary-fixed-dim": "#aec7f6",
+                "primary-fixed": "#d6e3ff",
+                "tertiary-fixed-dim": "#ffb68c",
+                "inverse-surface": "#e5e2e1",
+                "on-surface-muted": "#9ca3af",
+                "error": "#ffb4ab",
+                "inverse-primary": "#005db8",
+                "on-primary-fixed-variant": "#00458d",
+                "secondary": "#aec7f6",
+                "primary-fixed-dim": "#aac7ff",
+                "surface-container": "#201f1f",
+                "primary": "#aac7ff",
+                "tertiary-container": "#e3711f",
+                "surface-variant": "#353534",
+                "on-background": "#e5e2e1",
+                "on-secondary-fixed-variant": "#2e476f",
+                "primary-container": "#4090fe",
+                "outline-variant": "#414753",
+                "background": "#131313",
+                "surface": "#131313",
+                "on-tertiary": "#532200",
+                "on-tertiary-fixed": "#321200",
+                "on-surface": "#e5e2e1",
+                "surface-container-low": "#1c1b1b",
+                "on-primary-container": "#002958",
+                "secondary-fixed": "#d6e3ff",
+                "accent-error": "#ffb4ab",
+                "on-primary-fixed": "#001b3e",
+                "surface-container-lowest": "#0e0e0e",
+                "surface-tint": "#aac7ff",
+                "error-container": "#93000a",
+                "secondary-container": "#2e476f",
+                "surface-main": "#0a0a0c",
+                "tertiary-fixed": "#ffdbc9",
+                "surface-container-high": "#2a2a2a",
+                "on-primary": "#002f64",
+                "on-surface-bright": "#ffffff",
+                "on-tertiary-container": "#481d00",
+                "on-error": "#690005",
+                "surface-card": "#16161a",
+                "surface-container-highest": "#353534",
+                "surface-bright": "#393939",
+                "on-secondary-container": "#9db6e4",
+                "on-tertiary-fixed-variant": "#763400",
+                "on-error-container": "#ffdad6",
+                "on-secondary-fixed": "#001b3d",
+                "tertiary": "#ffb68c",
+                "outline": "#8b919f",
+                "surface-dim": "#131313",
+                "on-secondary": "#143057",
+                "inverse-on-surface": "#313030",
+                "on-surface-variant": "#c1c6d5"
+        },
+        "borderRadius": {
+                "DEFAULT": "0.25rem",
+                "lg": "0.5rem",
+                "xl": "0.75rem",
+                "full": "9999px"
+        },
+        "spacing": {
+                "margin-mobile": "16px",
+                "gutter": "24px",
+                "margin-desktop": "32px",
+                "base": "4px",
+                "max-width": "1280px"
+        },
+        "fontFamily": {
+                "headline-md": [
+                        "Inter"
+                ],
+                "label-sm": [
+                        "Inter"
+                ],
+                "body-lg": [
+                        "Inter"
+                ],
+                "body-md": [
+                        "Inter"
+                ],
+                "headline-sm": [
+                        "Inter"
+                ],
+                "headline-lg": [
+                        "Inter"
+                ],
+                "headline-lg-mobile": [
+                        "Inter"
+                ],
+                "label-md": [
+                        "Inter"
+                ],
+                "display-telemetry": ["Inter"],
+                "label-caps": ["Inter"]
+        },
+        "fontSize": {
+                "headline-md": [
+                        "24px",
+                        {
+                                "lineHeight": "32px",
+                                "fontWeight": "600"
+                        }
+                ],
+                "label-sm": [
+                        "11px",
+                        {
+                                "lineHeight": "16px",
+                                "letterSpacing": "0.5px",
+                                "fontWeight": "500"
+                        }
+                ],
+                "body-lg": [
+                        "16px",
+                        {
+                                "lineHeight": "24px",
+                                "fontWeight": "400"
+                        }
+                ],
+                "body-md": [
+                        "14px",
+                        {
+                                "lineHeight": "20px",
+                                "fontWeight": "400"
+                        }
+                ],
+                "headline-sm": [
+                        "20px",
+                        {
+                                "lineHeight": "28px",
+                                "fontWeight": "600"
+                        }
+                ],
+                "headline-lg": [
+                        "32px",
+                        {
+                                "lineHeight": "40px",
+                                "letterSpacing": "-0.02em",
+                                "fontWeight": "700"
+                        }
+                ],
+                "headline-lg-mobile": [
+                        "28px",
+                        {
+                                "lineHeight": "36px",
+                                "letterSpacing": "-0.01em",
+                                "fontWeight": "700"
+                        }
+                ],
+                "label-md": [
+                        "12px",
+                        {
+                                "lineHeight": "16px",
+                                "letterSpacing": "0.5px",
+                                "fontWeight": "500"
+                        }
+                ],
+                "display-telemetry": ["64px", { "lineHeight": "64px", "letterSpacing": "-0.04em", "fontWeight": "700" }],
+                "label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "500" }]
+        }
+},
+    },
+  }
+</script>
+<style>
+        body { margin: 0; overflow: hidden; background-color: #131313; color: #e5e2e1; min-height: max(884px, 100dvh); }
+        .hud-panel { background: rgba(32, 31, 31, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
+        .glass-btn { background: rgba(32, 31, 31, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
+    </style>
+<!-- Background Map Placeholder -->
+<div class="absolute inset-0 z-0 bg-surface">
+<div class="w-full h-full bg-cover bg-center opacity-40 mix-blend-luminosity" data-alt="A light mode stylized city map view for a fitness tracking application. Minimalist aesthetic with high contrast blue routes highlighting paths against light gray blocks representing buildings and terrain. The map appears like a clean interface overlay." data-location="Tokyo" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDr5_s-KgoDdw3V0jHBFYtHVB3aikGStl0j7TM7kPJnauzs3U1eRnVMaMh4ywSZTMLAo_LxEZnu9rTzBPq-EGev_TiD3t0VY9osDcW0xKKUZxL2rx7TPn0qh2lor7H-TT1FWRur2eVHGsIsu-YT3ht-zwG1VrgIArB7Dxx5IgNThsHCroZ6oFbBB_Uo1Y8rIjPn8NPkxuUVxmKjpNze6RAmNCuYj9V3ivWdnkUNS_Z6ybPWERqbvRA4')"></div>
+<!-- Routes and Location Overlay -->
+<svg class="absolute inset-0 w-full h-full pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 400 800">
+<defs>
+<lineargradient id="speedGradient" x1="10%" x2="50%" y1="90%" y2="50%">
+<stop offset="0%" stop-color="#4090fe"></stop>
+<stop offset="40%" stop-color="#aac7ff"></stop>
+<stop offset="70%" stop-color="#ffb4ab"></stop>
+<stop offset="100%" stop-color="#ffb4ab"></stop>
+</lineargradient>
+</defs>
+<!-- Planned Route -->
+<path d="M 200 400 C 250 250, 150 150, 300 50" fill="none" opacity="0.8" stroke="#8b919f" stroke-dasharray="10 10" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"></path>
+<!-- Completed Route -->
+<path d="M 100 750 C 150 600, 100 500, 200 400" fill="none" stroke="url(#speedGradient)" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"></path>
+<!-- Pulsing Location Dot -->
+<circle cx="200" cy="400" fill="#4090fe" r="8"></circle>
+<circle cx="200" cy="400" fill="none" r="8" stroke="#4090fe" stroke-width="2">
+<animate attributename="r" dur="1.5s" from="8" repeatcount="indefinite" to="24"></animate>
+<animate attributename="opacity" dur="1.5s" from="1" repeatcount="indefinite" to="0"></animate>
+</circle>
+</svg>
+</div>
+<!-- TopAppBar JSON Component -->
+<!-- Main Content Canvas (HUD Layout) -->
+<main class="flex-1 relative z-10 flex flex-col pb-40 px-2 md:px-margin-desktop w-full max-w-7xl mx-auto md:ml-24 md:w-[calc(100%-6rem)] p-2">
+<!-- Compact Telemetry Row -->
+<div class="flex flex-row gap-1 w-full" id="telemetry-container">
+<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
+<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Speed</span>
+<div class="metric-value font-display-telemetry text-base text-primary mt-1 transition-all duration-300 whitespace-nowrap">24.5 km/h</div>
+</div>
+<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
+<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Avg Speed</span>
+<div class="metric-value font-display-telemetry text-lg text-on-surface mt-1 transition-all duration-300">22.1</div>
+</div>
+<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
+<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Dist</span>
+<div class="metric-value font-display-telemetry text-base text-secondary mt-1 transition-all duration-300 whitespace-nowrap">12.4 km</div>
+</div>
+<div class="metric-card flex-1 hud-panel p-2 rounded-lg flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-hidden min-w-0">
+<span class="metric-title font-label-caps text-[9px] sm:text-[10px] text-on-surface-variant uppercase whitespace-nowrap truncate w-full text-center">Time</span>
+<div class="metric-value font-display-telemetry text-lg text-on-surface mt-1 transition-all duration-300">45:12</div>
+</div>
+</div>
+</main>
+<!-- Full Width Recording Control Bar -->
+<div class="fixed bottom-[80px] md:bottom-0 md:left-24 w-full md:w-[calc(100%-6rem)] z-40">
+<div class="flex flex-row w-full h-16 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.5)]">
+<button class="flex-1 bg-tertiary-container text-on-tertiary-container font-headline-md flex items-center justify-center transition-colors duration-300 border-r border-white/10"><span class="material-symbols-outlined text-[32px]" style='font-variation-settings: "FILL" 1;'>pause</span></button>
+<button class="flex-1 bg-error-container text-on-error-container font-headline-md flex items-center justify-center transition-colors duration-300"><span class="material-symbols-outlined text-[32px]" style='font-variation-settings: "FILL" 1;'>stop</span></button>
+</div>
+</div>
+<!-- BottomNavBar JSON Component -->
+<nav class="bg-surface/80 backdrop-blur-xl fixed bottom-0 w-full z-50 pb-safe border-t border-white/10 md:hidden">
+<div class="flex justify-around items-center h-20 px-margin-mobile font-label-caps text-label-caps font-display-telemetry"><button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:-bottom-1 after:w-1 after:h-1 after:bg-primary after:rounded-full hover:text-primary/80 transition-transform duration-150 scale-95">
+<span class="material-symbols-outlined" style='font-variation-settings: "FILL" 1;'>map</span>
+</button>
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style='font-variation-settings: "FILL" 0;'>book</span></button>
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">route</span>
+</button>
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">settings</span>
+</button></div>
+</nav>
+<!-- Desktop Side Nav (Visible only on md+) -->
+<aside class="hidden md:flex flex-col fixed left-0 top-16 bottom-0 w-24 bg-surface/80 backdrop-blur-xl border-r border-white/10 z-40 items-center py-8 gap-12">
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-colors w-full py-4 font-label-caps text-label-caps">
+<span class="material-symbols-outlined mb-2 text-2xl">map</span>
+            Map
+        </button>
+<button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:left-0 after:top-1/2 after:-translate-y-1/2 after:w-1 after:h-8 after:bg-primary after:rounded-r-full hover:text-primary/80 transition-colors w-full py-4 font-label-caps text-label-caps bg-white/5">
+<span class="material-symbols-outlined mb-2 text-2xl" style="font-variation-settings: 'FILL' 1;">directions_bike</span>
+            Rides
+        </button>
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-colors w-full py-4 font-label-caps text-label-caps">
+<span class="material-symbols-outlined mb-2 text-2xl">route</span>
+            Plan
+        </button>
+</aside>
+<script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Recording Toggle Logic
+            const toggleBtn = document.getElementById('recordingToggle');
+            const toggleIcon = document.getElementById('toggleIcon');
+            const toggleText = document.getElementById('toggleText');
+            let isRecording = true;
+
+            toggleBtn?.addEventListener('click', () => {
+                isRecording = !isRecording;
+                if(isRecording) {
+                    toggleBtn.classList.remove('bg-error-container', 'text-on-error-container');
+                    toggleBtn.classList.add('bg-primary-container', 'text-on-primary-container');
+                    toggleIcon.textContent = 'stop_circle';
+                    toggleText.textContent = 'Stop Recording';
+                } else {
+                    toggleBtn.classList.remove('bg-primary-container', 'text-on-primary-container');
+                    toggleBtn.classList.add('bg-error-container', 'text-on-error-container');
+                    toggleIcon.textContent = 'play_arrow';
+                    toggleText.textContent = 'Start Recording';
+                }
+            });
+
+            // Telemetry Expansion Logic
+            const metrics = document.querySelectorAll('.metric-card');
+            
+            metrics.forEach(metric => {
+                metric.addEventListener('click', () => {
+                    const isExpanded = metric.classList.contains('flex-[2.5]');
+                    
+                    // Reset all
+                    metrics.forEach(m => {
+                        m.classList.remove('flex-[2.5]', 'bg-surface-container-highest');
+                        m.classList.add('flex-1');
+                        m.querySelector('.metric-value').classList.remove('text-2xl', 'md:text-3xl');
+                        m.querySelector('.metric-value').classList.add('text-lg');
+                    });
+
+                    // Expand if it wasn't already expanded
+                    if (!isExpanded) {
+                        metric.classList.remove('flex-1');
+                        metric.classList.add('flex-[2.5]', 'bg-surface-container-highest');
+                        metric.querySelector('.metric-value').classList.remove('text-lg');
+                        metric.querySelector('.metric-value').classList.add('text-2xl', 'md:text-3xl');
+                    }
+                });
+            });
+        });
+    </script>
+</body></html>
\ No newline at end of file
diff --git a/docs/design/stitch-export/screens/map-hud-dark.png b/docs/design/stitch-export/screens/map-hud-dark.png
new file mode 100644
index 0000000..917c442
Binary files /dev/null and b/docs/design/stitch-export/screens/map-hud-dark.png differ
diff --git a/docs/design/stitch-export/screens/plan-screen-dark.html b/docs/design/stitch-export/screens/plan-screen-dark.html
new file mode 100644
index 0000000..8abe974
--- /dev/null
+++ b/docs/design/stitch-export/screens/plan-screen-dark.html
@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>RIPPR - Plan Route</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+  tailwind.config = {
+    darkMode: "class",
+    theme: {
+      extend: {
+        "colors": {
+                "secondary-fixed-dim": "#aec7f6",
+                "primary-fixed": "#d6e3ff",
+                "tertiary-fixed-dim": "#ffb68c",
+                "inverse-surface": "#e5e2e1",
+                "on-surface-muted": "#9ca3af",
+                "error": "#ffb4ab",
+                "inverse-primary": "#005db8",
+                "on-primary-fixed-variant": "#00458d",
+                "secondary": "#aec7f6",
+                "primary-fixed-dim": "#aac7ff",
+                "surface-container": "#201f1f",
+                "primary": "#aac7ff",
+                "tertiary-container": "#e3711f",
+                "surface-variant": "#353534",
+                "on-background": "#e5e2e1",
+                "on-secondary-fixed-variant": "#2e476f",
+                "primary-container": "#4090fe",
+                "outline-variant": "#414753",
+                "background": "#131313",
+                "surface": "#131313",
+                "on-tertiary": "#532200",
+                "on-tertiary-fixed": "#321200",
+                "on-surface": "#e5e2e1",
+                "surface-container-low": "#1c1b1b",
+                "on-primary-container": "#002958",
+                "secondary-fixed": "#d6e3ff",
+                "accent-error": "#ffb4ab",
+                "on-primary-fixed": "#001b3e",
+                "surface-container-lowest": "#0e0e0e",
+                "surface-tint": "#aac7ff",
+                "error-container": "#93000a",
+                "secondary-container": "#2e476f",
+                "surface-main": "#0a0a0c",
+                "tertiary-fixed": "#ffdbc9",
+                "surface-container-high": "#2a2a2a",
+                "on-primary": "#002f64",
+                "on-surface-bright": "#ffffff",
+                "on-tertiary-container": "#481d00",
+                "on-error": "#690005",
+                "surface-card": "#16161a",
+                "surface-container-highest": "#353534",
+                "surface-bright": "#393939",
+                "on-secondary-container": "#9db6e4",
+                "on-tertiary-fixed-variant": "#763400",
+                "on-error-container": "#ffdad6",
+                "on-secondary-fixed": "#001b3d",
+                "tertiary": "#ffb68c",
+                "outline": "#8b919f",
+                "surface-dim": "#131313",
+                "on-secondary": "#143057",
+                "inverse-on-surface": "#313030",
+                "on-surface-variant": "#c1c6d5"
+        },
+        "borderRadius": {
+                "DEFAULT": "0.25rem",
+                "lg": "0.5rem",
+                "xl": "0.75rem",
+                "full": "9999px"
+        },
+        "spacing": {
+                "margin-mobile": "16px",
+                "gutter": "24px",
+                "margin-desktop": "32px",
+                "base": "4px",
+                "max-width": "1280px",
+                "unit": "4px",
+                "stack-sm": "8px",
+                "stack-lg": "48px",
+                "stack-md": "24px",
+                "container-margin": "20px"
+        },
+        "fontFamily": {
+                "headline-md": [
+                        "Inter"
+                ],
+                "label-sm": [
+                        "Inter"
+                ],
+                "body-lg": [
+                        "Inter"
+                ],
+                "body-md": [
+                        "Inter"
+                ],
+                "headline-sm": [
+                        "Inter"
+                ],
+                "headline-lg": [
+                        "Inter"
+                ],
+                "headline-lg-mobile": [
+                        "Inter"
+                ],
+                "label-md": [
+                        "Inter"
+                ],
+                "label-caps": ["JetBrains Mono"],
+                "display-telemetry-mobile": ["JetBrains Mono"],
+                "display-telemetry": ["JetBrains Mono"]
+        },
+        "fontSize": {
+                "headline-md": [
+                        "24px",
+                        {
+                                "lineHeight": "32px",
+                                "fontWeight": "600"
+                        }
+                ],
+                "label-sm": [
+                        "11px",
+                        {
+                                "lineHeight": "16px",
+                                "letterSpacing": "0.5px",
+                                "fontWeight": "500"
+                        }
+                ],
+                "body-lg": [
+                        "16px",
+                        {
+                                "lineHeight": "24px",
+                                "fontWeight": "400"
+                        }
+                ],
+                "body-md": [
+                        "14px",
+                        {
+                                "lineHeight": "20px",
+                                "fontWeight": "400"
+                        }
+                ],
+                "headline-sm": [
+                        "20px",
+                        {
+                                "lineHeight": "28px",
+                                "fontWeight": "600"
+                        }
+                ],
+                "headline-lg": [
+                        "32px",
+                        {
+                                "lineHeight": "40px",
+                                "letterSpacing": "-0.02em",
+                                "fontWeight": "700"
+                        }
+                ],
+                "headline-lg-mobile": [
+                        "28px",
+                        {
+                                "lineHeight": "36px",
+                                "letterSpacing": "-0.01em",
+                                "fontWeight": "700"
+                        }
+                ],
+                "label-md": [
+                        "12px",
+                        {
+                                "lineHeight": "16px",
+                                "letterSpacing": "0.5px",
+                                "fontWeight": "500"
+                        }
+                ],
+                "label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "500" }],
+                "display-telemetry-mobile": ["48px", { "lineHeight": "48px", "fontWeight": "700" }],
+                "display-telemetry": ["64px", { "lineHeight": "64px", "letterSpacing": "-0.04em", "fontWeight": "700" }]
+        }
+},
+    },
+  }
+</script>
+<style>
+        .map-grid-overlay {
+            background-image: 
+                linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        
+        .pulse-ring {
+            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+        }
+
+        @keyframes pulse-ring {
+            0% {
+                transform: scale(0.8);
+                opacity: 0.8;
+                box-shadow: 0 0 0 0 rgba(170, 199, 255, 0.7);
+            }
+            70% {
+                transform: scale(1);
+                opacity: 0;
+                box-shadow: 0 0 0 20px rgba(170, 199, 255, 0);
+            }
+            100% {
+                transform: scale(0.8);
+                opacity: 0;
+                box-shadow: 0 0 0 0 rgba(170, 199, 255, 0);
+            }
+        }
+
+        .route-line {
+            stroke-dasharray: 10, 10;
+            animation: dash 20s linear infinite;
+        }
+
+        @keyframes dash {
+            to {
+                stroke-dashoffset: -1000;
+            }
+        }
+        
+        .tooltip-float {
+            animation: float 3s ease-in-out infinite;
+        }
+        
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-8px); }
+            100% { transform: translateY(0px); }
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+</head>
+<body class="bg-background text-on-surface h-screen w-full overflow-hidden relative selection:bg-primary-container selection:text-on-primary-container antialiased flex flex-col dark">
+<!-- Fullscreen Map Canvas -->
+<main class="flex-grow relative h-full w-full z-0 overflow-hidden">
+<!-- Base Map Layer -->
+<div class="absolute inset-0 z-0 bg-surface-container-lowest">
+<img class="w-full h-full object-cover opacity-60 mix-blend-screen invert" data-alt="A dark mode digital map showing a top-down view of city streets and terrain. The map is rendered in dark grey and black tones with subtle lighter outlines for roads." data-location="San Francisco, CA" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-oqjvzL6bUKZVJD2vvMu-0LPsY-GmGnGrfOmA0Pv5d3jBrTEuOXQ2lhZUXb9SvIGOnr2Wz64OSx0LGVbxce3zkTseW9Q62p9djWl96s-LaFizAtCBJ7okbDdDDBZVyS8RutWkvabaIwEi_lE9yq26OZuanhZ7NS6Ny4AZx69Sah-DvoE1nzwD2AEEpWJXbfX_KRFa3iGbCUa02sKaAUWzoirpWg5yU6Gk6u2OWNRefC6YtASxYmBq"/>
+</div>
+<!-- Technical Grid Overlay -->
+<div class="absolute inset-0 map-grid-overlay z-10 pointer-events-none"></div>
+<!-- Planned Route Overlay (SVG) -->
+<svg class="absolute inset-0 w-full h-full z-20 pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 1000 1000">
+<!-- Path connecting dropped pins - Primary Blue -->
+<path class="route-line opacity-80" d="M 300 700 Q 400 650 450 500 T 700 300" fill="none" stroke="#aac7ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"></path>
+<!-- Waypoint 1 (Dropped Pin) -->
+<circle cx="450" cy="500" fill="#aac7ff" r="6" stroke="#131313" stroke-width="2"></circle>
+<!-- Waypoint 2 (Destination) -->
+<circle cx="700" cy="300" fill="#131313" r="8" stroke="#aac7ff" stroke-width="3"></circle>
+</svg>
+<!-- User Location Marker (Pulsing) -->
+<div class="absolute top-[70%] left-[30%] z-30 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center pointer-events-none">
+<div class="absolute w-4 h-4 bg-primary rounded-full opacity-30"></div>
+<div class="absolute w-3 h-3 bg-primary rounded-full pulse-ring"></div>
+<div class="w-2 h-2 bg-primary rounded-full relative z-10 shadow-[0_0_10px_rgba(170,199,255,0.8)]"></div>
+<!-- Vision cone indicator -->
+<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[40px] border-t-primary/20 origin-bottom transform rotate-45"></div>
+</div>
+<!-- Interactive Map Canvas Layer (Invisible, captures clicks for dropping pins) -->
+<div class="absolute inset-0 z-40 cursor-crosshair" id="map-interaction-layer"></div>
+</main>
+<!-- Floating HUD Elements Layer -->
+<div class="absolute inset-0 z-50 pointer-events-none flex flex-col justify-end">
+<!-- Tooltip -->
+<div class="w-full flex justify-center mb-stack-md pointer-events-none px-container-margin">
+<div class="tooltip-float bg-surface-container-high/90 backdrop-blur-xl border border-outline-variant/30 rounded-full px-6 py-3 flex items-center gap-2 shadow-sm">
+<span class="material-symbols-outlined text-primary text-xl" style="font-variation-settings: 'FILL' 1;">location_on</span>
+<span class="font-label-caps text-label-caps text-on-surface">Tap to drop a pin</span>
+</div>
+</div>
+<!-- Bottom Navigation Bar -->
+<nav class="bg-surface-container/90 backdrop-blur-xl border-t border-outline-variant/20 w-full pb-safe flex justify-around items-center h-20 px-container-margin pointer-events-auto shrink-0 relative shadow-[0_-4px_20px_rgba(0,0,0,0.5)]">
+<!-- Map (Inactive) -->
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-200 w-16 h-full gap-1 group">
+<span class="material-symbols-outlined text-2xl group-active:scale-95 transition-transform duration-150">map</span>
+<span class="font-label-caps text-[10px] uppercase tracking-widest">Map</span>
+</button>
+<!-- Rides (Inactive) -->
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary transition-colors duration-200 w-16 h-full gap-1 group">
+<span class="material-symbols-outlined text-2xl group-active:scale-95 transition-transform duration-150">directions_bike</span>
+<span class="font-label-caps text-[10px] uppercase tracking-widest">Rides</span>
+</button>
+<!-- Plan (Active) -->
+<button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:bottom-2 after:w-1 after:h-1 after:bg-primary after:rounded-full hover:text-primary transition-colors duration-200 w-16 h-full gap-1 group">
+<span class="material-symbols-outlined text-2xl group-active:scale-95 transition-transform duration-150" style="font-variation-settings: 'FILL' 1;">route</span>
+<span class="font-label-caps text-[10px] uppercase tracking-widest text-primary">Plan</span>
+</button>
+</nav>
+</div>
+<!-- Micro-interaction Script for Pin Dropping Simulation -->
+<script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const mapLayer = document.getElementById('map-interaction-layer');
+            const svgLayer = document.querySelector('svg');
+            let pinCount = 0;
+            
+            mapLayer.addEventListener('click', (e) => {
+                const rect = mapLayer.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                // Visual feedback of drop
+                const ripple = document.createElement('div');
+                ripple.className = 'absolute rounded-full border-2 border-primary bg-primary/20 pointer-events-none transform -translate-x-1/2 -translate-y-1/2';
+                ripple.style.left = `${x}px`;
+                ripple.style.top = `${y}px`;
+                ripple.style.width = '0px';
+                ripple.style.height = '0px';
+                ripple.style.opacity = '1';
+                ripple.style.transition = 'all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)';
+                
+                mapLayer.parentElement.appendChild(ripple);
+                
+                // Trigger animation
+                requestAnimationFrame(() => {
+                    ripple.style.width = '60px';
+                    ripple.style.height = '60px';
+                    ripple.style.opacity = '0';
+                });
+                
+                // Clean up ripple
+                setTimeout(() => ripple.remove(), 500);
+            });
+        });
+    </script>
+</body></html>
\ No newline at end of file
diff --git a/docs/design/stitch-export/screens/plan-screen-dark.png b/docs/design/stitch-export/screens/plan-screen-dark.png
new file mode 100644
index 0000000..dabac36
Binary files /dev/null and b/docs/design/stitch-export/screens/plan-screen-dark.png differ
diff --git a/docs/design/stitch-export/screens/rides-history-dark.html b/docs/design/stitch-export/screens/rides-history-dark.html
new file mode 100644
index 0000000..3097c34
--- /dev/null
+++ b/docs/design/stitch-export/screens/rides-history-dark.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en" style=""><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>RIPPR - Rides</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+  tailwind.config = {
+    darkMode: "class",
+    theme: {
+      extend: {
+        "colors": {
+                "secondary-fixed-dim": "#aec7f6",
+                "primary-fixed": "#d6e3ff",
+                "tertiary-fixed-dim": "#ffb68c",
+                "inverse-surface": "#e5e2e1",
+                "on-surface-muted": "#9ca3af",
+                "error": "#ffb4ab",
+                "inverse-primary": "#005db8",
+                "on-primary-fixed-variant": "#00458d",
+                "secondary": "#aec7f6",
+                "primary-fixed-dim": "#aac7ff",
+                "surface-container": "#201f1f",
+                "primary": "#aac7ff",
+                "tertiary-container": "#e3711f",
+                "surface-variant": "#353534",
+                "on-background": "#e5e2e1",
+                "on-secondary-fixed-variant": "#2e476f",
+                "primary-container": "#4090fe",
+                "outline-variant": "#414753",
+                "background": "#131313",
+                "surface": "#131313",
+                "on-tertiary": "#532200",
+                "on-tertiary-fixed": "#321200",
+                "on-surface": "#e5e2e1",
+                "surface-container-low": "#1c1b1b",
+                "on-primary-container": "#002958",
+                "secondary-fixed": "#d6e3ff",
+                "accent-error": "#ffb4ab",
+                "on-primary-fixed": "#001b3e",
+                "surface-container-lowest": "#0e0e0e",
+                "surface-tint": "#aac7ff",
+                "error-container": "#93000a",
+                "secondary-container": "#2e476f",
+                "surface-main": "#0a0a0c",
+                "tertiary-fixed": "#ffdbc9",
+                "surface-container-high": "#2a2a2a",
+                "on-primary": "#002f64",
+                "on-surface-bright": "#ffffff",
+                "on-tertiary-container": "#481d00",
+                "on-error": "#690005",
+                "surface-card": "#16161a",
+                "surface-container-highest": "#353534",
+                "surface-bright": "#393939",
+                "on-secondary-container": "#9db6e4",
+                "on-tertiary-fixed-variant": "#763400",
+                "on-error-container": "#ffdad6",
+                "on-secondary-fixed": "#001b3d",
+                "tertiary": "#ffb68c",
+                "outline": "#8b919f",
+                "surface-dim": "#131313",
+                "on-secondary": "#143057",
+                "inverse-on-surface": "#313030",
+                "on-surface-variant": "#c1c6d5"
+        },
+        "borderRadius": {
+                "DEFAULT": "0.25rem",
+                "lg": "0.5rem",
+                "xl": "0.75rem",
+                "full": "9999px"
+        },
+        "spacing": {
+                "margin-mobile": "16px",
+                "gutter": "24px",
+                "margin-desktop": "32px",
+                "base": "4px",
+                "max-width": "1280px"
+        },
+        "fontFamily": {
+                "headline-md": [
+                        "Inter"
+                ],
+                "label-sm": [
+                        "Inter"
+                ],
+                "body-lg": [
+                        "Inter"
+                ],
+                "body-md": [
+                        "Inter"
+                ],
+                "headline-sm": [
+                        "Inter"
+                ],
+                "headline-lg": [
+                        "Inter"
+                ],
+                "headline-lg-mobile": [
+                        "Inter"
+                ],
+                "label-md": [
+                        "Inter"
+                ]
+        },
+        "fontSize": {
+                "headline-md": [
+                        "24px",
+                        {
+                                "lineHeight": "32px",
+                                "fontWeight": "600"
+                        }
+                ],
+                "label-sm": [
+                        "11px",
+                        {
+                                "lineHeight": "16px",
+                                "letterSpacing": "0.5px",
+                                "fontWeight": "500"
+                        }
+                ],
+                "body-lg": [
+                        "16px",
+                        {
+                                "lineHeight": "24px",
+                                "fontWeight": "400"
+                        }
+                ],
+                "body-md": [
+                        "14px",
+                        {
+                                "lineHeight": "20px",
+                                "fontWeight": "400"
+                        }
+                ],
+                "headline-sm": [
+                        "20px",
+                        {
+                                "lineHeight": "28px",
+                                "fontWeight": "600"
+                        }
+                ],
+                "headline-lg": [
+                        "32px",
+                        {
+                                "lineHeight": "40px",
+                                "letterSpacing": "-0.02em",
+                                "fontWeight": "700"
+                        }
+                ],
+                "headline-lg-mobile": [
+                        "28px",
+                        {
+                                "lineHeight": "36px",
+                                "letterSpacing": "-0.01em",
+                                "fontWeight": "700"
+                        }
+                ],
+                "label-md": [
+                        "12px",
+                        {
+                                "lineHeight": "16px",
+                                "letterSpacing": "0.5px",
+                                "fontWeight": "500"
+                        }
+                ]
+        }
+},
+    },
+  }
+</script>
+<style type="text/tailwindcss">
+        @layer utilities {
+            .glass-panel {
+                @apply bg-surface/80 backdrop-blur-[20px] border border-outline-variant;
+            }
+        }
+    </style>
+</head>
+<body class="bg-background text-on-surface min-h-screen pb-[100px]"><div class="fixed inset-0 z-0 bg-surface"><div class="w-full h-full bg-cover bg-center opacity-30 backdrop-blur-md backdrop-blur-xl" data-alt="A light mode stylized city map view for a fitness tracking application." data-location="Tokyo" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDr5_s-KgoDdw3V0jHBFYtHVB3aikGStl0j7TM7kPJnauzs3U1eRnVMaMh4ywSZTMLAo_LxEZnu9rTzBPq-EGev_TiD3t0VY9osDcW0xKKUZxL2rx7TPn0qh2lor7H-TT1FWRur2eVHGsIsu-YT3ht-zwG1VrgIArB7Dxx5IgNThsHCroZ6oFbBB_Uo1Y8rIjPn8NPkxuUVxmKjpNze6RAmNCuYj9V3ivWdnkUNS_Z6ybPWERqbvRA4");'></div><svg class="absolute inset-0 w-full h-full pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 400 800"><path d="M 200 400 C 250 250, 150 150, 300 50" fill="none" opacity="0.3" stroke="#aac7ff" stroke-dasharray="10 10" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path></svg></div>
+<!-- TopAppBar -->
+<!-- Main Content -->
+<main class="px-margin-mobile max-w-4xl mx-auto flex flex-col gap-6 pt-2 relative z-10">
+<!-- Search & Filter -->
+<div class="flex gap-gutter items-center p-2 rounded-lg border border-outline-variant bg-surface-container-lowest shadow-sm">
+<div class="flex-1 relative">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
+<input class="w-full bg-surface-container-lowest border-b border-outline-variant focus:border-primary text-on-surface pl-10 pr-4 py-2 font-body-md text-body-md outline-none transition-colors placeholder:text-on-surface-variant/70" placeholder="Search rides..." type="text"/>
+</div>
+<button class="w-10 h-10 flex items-center justify-center rounded hover:bg-surface-container-highest transition-colors text-primary border border-outline-variant shadow-sm bg-surface-container-lowest">
+<span class="material-symbols-outlined">tune</span>
+</button>
+</div>
+<!-- Summary Stats -->
+<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter mb-2 z-10">
+<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
+<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
+<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
+<div class="p-4 rounded-lg flex flex-col gap-1 bg-surface-container-lowest border border-outline-variant shadow-sm"><span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant uppercase">Total Dist</span><span class="font-headline-md text-headline-md text-primary">482<span class="text-label-sm tracking-wider ml-1 text-on-surface-variant">KM</span></span></div>
+</div>
+<!-- Rides List -->
+<div class="flex flex-col gap-gutter">
+<!-- Ride Item 1 -->
+<div class="rounded-lg flex flex-col md:flex-row overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors bg-surface-container-lowest border border-outline-variant shadow-sm">
+<div class="h-32 md:h-auto md:w-48 bg-surface-container-highest relative">
+<img class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" data-alt="A dark mode minimalist map view showing a neon green GPS route line traversing through city blocks. High contrast, technical aesthetic, muted dark charcoal background." data-location="San Francisco" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAx1uDTgkMgXUBwI-JLBmH1_3Mw1sk91ovk-19wP19I5wktrsuJ9nM757sCThvGGNFlWi88pEzXj9cB_wlHAhQoTdkoXYp1csaGHd6e_iulV84cPEhZNlj6_M-EWzoEdv7CT-q9BJLlkOBPq9D5IaX6mQk1nqZQDfeR0k535iIYJ2rXJFCyAAgCEF0gKEYyumLsUopkQMD2ig13W01XANoAJPCP--li-S1iln0VfzpqY-vmyHLZsO9H"/>
+<div class="absolute inset-0 bg-gradient-to-t from-surface/80 to-transparent md:hidden"></div>
+</div>
+<div class="p-4 flex flex-col justify-between flex-1 gap-4">
+<div>
+<h3 class="font-headline-sm text-headline-sm text-on-surface mb-1">Morning Circuit</h3>
+<p class="font-body-md text-body-md text-on-surface-variant">Oct 24, 06:30 AM</p>
+</div>
+<div class="flex gap-6">
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">DISTANCE</span>
+<span class="font-headline-sm text-headline-sm text-primary">42.5 KM</span>
+</div>
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">TIME</span>
+<span class="font-headline-sm text-headline-sm text-primary">1:45:22</span>
+</div>
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">AVG SPD</span>
+<span class="font-headline-sm text-headline-sm text-primary">24.2 KPH</span>
+</div>
+</div>
+</div>
+</div>
+<!-- Ride Item 2 -->
+<div class="rounded-lg flex flex-col md:flex-row overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors bg-surface-container-lowest border border-outline-variant shadow-sm">
+<div class="h-32 md:h-auto md:w-48 bg-surface-container-highest relative">
+<img class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" data-alt="A dark mode minimalist map view showing a neon green GPS route line winding through a mountainous region. High contrast, technical aesthetic, deep black background." data-location="Marin Headlands" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8dTKlnX4_8dnTgJ0UQpocYH5zvSgIxrAirD88D7z-dcBw6SziTL2p8niEuvn-Q-z1M3AwecI2VoHbFXE70wCOQEymO_yZatnGuP5BkKz-orUNu3Lpmy3ZnXrxYVUOF77CdUnY6WWo098sJre88SDaK82aid7U4mo6vcV5DtxUqQ-H9D0N6RvTzWc0gmev36tcOCKDZqlUsRiHMarZOD6QHiPfL7HzGu_KN1gdDF1n-7G0vLs6CzmA"/>
+<div class="absolute inset-0 bg-gradient-to-t from-surface/80 to-transparent md:hidden"></div>
+</div>
+<div class="p-4 flex flex-col justify-between flex-1 gap-4">
+<div>
+<h3 class="font-headline-sm text-headline-sm text-on-surface mb-1">Hill Repeats</h3>
+<p class="font-body-md text-body-md text-on-surface-variant">Oct 22, 17:15 PM</p>
+</div>
+<div class="flex gap-6">
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">DISTANCE</span>
+<span class="font-headline-sm text-headline-sm text-primary">28.1 KM</span>
+</div>
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">TIME</span>
+<span class="font-headline-sm text-headline-sm text-primary">1:12:05</span>
+</div>
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">AVG SPD</span>
+<span class="font-headline-sm text-headline-sm text-primary">23.4 KPH</span>
+</div>
+</div>
+</div>
+</div>
+<!-- Ride Item 3 -->
+<div class="rounded-lg flex flex-col md:flex-row overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors opacity-75 bg-surface-container-lowest border border-outline-variant shadow-sm">
+<div class="h-32 md:h-auto md:w-48 bg-surface-container-highest relative">
+<img class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0" data-alt="A dark mode minimalist map view showing a neon green GPS route line along a coastal highway. High contrast, technical aesthetic, muted dark charcoal background." data-location="Highway 1" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAr-gumM8Tc0ayTzCw3s39Z1j0cydRKq7oGECkbJNXERMpAQaP4xrvoVkTVHzGe7mG83pDzxMMZGy9SpTk19uSKlnM5Vjoz3zurdx6AbWLUisqVcuB6CjXS4wt_hJlUK4TfOICbZdPN2UzCkVYUHClJ1jwfeRwA0SFVxWC2gfneSIXny-aaJMfddGQCFtCB7Xjh6hoFigOGUZB-2yjvcHcgwh_u3hZXLDETlfCtPZmyedY1zuZJ9Lft"/>
+<div class="absolute inset-0 bg-gradient-to-t from-surface/80 to-transparent md:hidden"></div>
+</div>
+<div class="p-4 flex flex-col justify-between flex-1 gap-4">
+<div>
+<h3 class="font-headline-sm text-headline-sm text-on-surface mb-1">Coastal Cruise</h3>
+<p class="font-body-md text-body-md text-on-surface-variant">Oct 18, 08:00 AM</p>
+</div>
+<div class="flex gap-6">
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">DISTANCE</span>
+<span class="font-headline-sm text-headline-sm text-primary">85.4 KM</span>
+</div>
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">TIME</span>
+<span class="font-headline-sm text-headline-sm text-primary">3:24:10</span>
+</div>
+<div class="flex flex-col">
+<span class="font-label-sm text-label-sm tracking-wider text-on-surface-variant mb-1 uppercase">AVG SPD</span>
+<span class="font-headline-sm text-headline-sm text-primary">25.1 KPH</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+<!-- BottomNavBar -->
+<nav class="fixed bottom-0 w-full z-50 pb-safe bg-surface-container-lowest/80 backdrop-blur-xl border-t border-outline-variant flex justify-around items-center h-20 px-margin-mobile md:hidden"><button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">map</span></button><button class="flex flex-col items-center justify-center text-primary relative after:content-[''] after:absolute after:-bottom-1 after:w-1 after:h-1 after:bg-primary after:rounded-full hover:text-primary/80 transition-transform duration-150 scale-95"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">book</span></button><button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">route</span></button><button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary/80 transition-transform duration-150"><span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">settings</span></button></nav>
+<!-- Desktop Side Nav Overlay (Hidden on Mobile, replaces Bottom Nav visually in a real app, keeping it simple here) -->
+<nav class="hidden md:flex fixed left-0 top-16 bottom-0 w-24 bg-surface-container-lowest/80 backdrop-blur-md border-r border-outline-variant flex-col items-center py-6 gap-6 z-40">
+<button class="w-12 h-12 flex items-center justify-center rounded hover:bg-surface-container-highest text-on-surface-variant transition-colors group relative">
+<span class="material-symbols-outlined">map</span>
+<span class="absolute left-14 bg-surface-container px-2 py-1 rounded font-label-sm text-label-sm tracking-wider text-on-surface opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">Map</span>
+</button>
+<button class="w-12 h-12 flex items-center justify-center rounded bg-primary-container/50 text-primary transition-colors group relative border border-primary/20"><span class="material-symbols-outlined" style='font-variation-settings: "FILL" 1;'>book</span><span class="absolute left-14 bg-surface-container px-2 py-1 rounded font-label-sm text-label-sm tracking-wider text-on-surface opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">Journal</span></button>
+<button class="w-12 h-12 flex items-center justify-center rounded hover:bg-surface-container-highest text-on-surface-variant transition-colors group relative">
+<span class="material-symbols-outlined">route</span>
+<span class="absolute left-14 bg-surface-container px-2 py-1 rounded font-label-sm text-label-sm tracking-wider text-on-surface opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">Plan</span>
+</button>
+</nav>
+<style>
+        @media (min-width: 768px) {
+            body { padding-left: 96px; pb: 0; }
+        }
+    </style>
+</body></html>
\ No newline at end of file
diff --git a/docs/design/stitch-export/screens/rides-history-dark.png b/docs/design/stitch-export/screens/rides-history-dark.png
new file mode 100644
index 0000000..5afa2db
Binary files /dev/null and b/docs/design/stitch-export/screens/rides-history-dark.png differ
diff --git a/docs/design/stitch-export/screens/route-planning-dark.html b/docs/design/stitch-export/screens/route-planning-dark.html
new file mode 100644
index 0000000..0e504d4
--- /dev/null
+++ b/docs/design/stitch-export/screens/route-planning-dark.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en" style=""><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>RIPPR - Plan Route</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=JetBrains+Mono:wght@400;500;700&amp;family=Sora:wght@600;700&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "secondary-fixed-dim": "#aec7f6",
+                        "primary-fixed": "#d6e3ff",
+                        "tertiary-fixed-dim": "#ffb68c",
+                        "inverse-surface": "#e5e2e1",
+                        "on-surface-muted": "#9ca3af",
+                        "error": "#ffb4ab",
+                        "inverse-primary": "#005db8",
+                        "on-primary-fixed-variant": "#00458d",
+                        "secondary": "#aec7f6",
+                        "primary-fixed-dim": "#aac7ff",
+                        "surface-container": "#201f1f",
+                        "primary": "#aac7ff",
+                        "tertiary-container": "#e3711f",
+                        "surface-variant": "#353534",
+                        "on-background": "#e5e2e1",
+                        "on-secondary-fixed-variant": "#2e476f",
+                        "primary-container": "#4090fe",
+                        "outline-variant": "#414753",
+                        "background": "#131313",
+                        "surface": "#131313",
+                        "on-tertiary": "#532200",
+                        "on-tertiary-fixed": "#321200",
+                        "on-surface": "#e5e2e1",
+                        "surface-container-low": "#1c1b1b",
+                        "on-primary-container": "#002958",
+                        "secondary-fixed": "#d6e3ff",
+                        "accent-error": "#ffb4ab",
+                        "on-primary-fixed": "#001b3e",
+                        "surface-container-lowest": "#0e0e0e",
+                        "surface-tint": "#aac7ff",
+                        "error-container": "#93000a",
+                        "secondary-container": "#2e476f",
+                        "surface-main": "#0a0a0c",
+                        "tertiary-fixed": "#ffdbc9",
+                        "surface-container-high": "#2a2a2a",
+                        "on-primary": "#002f64",
+                        "on-surface-bright": "#ffffff",
+                        "on-tertiary-container": "#481d00",
+                        "on-error": "#690005",
+                        "surface-card": "#16161a",
+                        "surface-container-highest": "#353534",
+                        "surface-bright": "#393939",
+                        "on-secondary-container": "#9db6e4",
+                        "on-tertiary-fixed-variant": "#763400",
+                        "on-error-container": "#ffdad6",
+                        "on-secondary-fixed": "#001b3d",
+                        "tertiary": "#ffb68c",
+                        "outline": "#8b919f",
+                        "surface-dim": "#131313",
+                        "on-secondary": "#143057",
+                        "inverse-on-surface": "#313030",
+                        "on-surface-variant": "#c1c6d5"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "spacing": {
+                        "margin-mobile": "16px",
+                        "gutter": "24px",
+                        "margin-desktop": "32px",
+                        "base": "4px",
+                        "max-width": "1280px",
+                        "unit": "4px",
+                        "stack-sm": "8px",
+                        "stack-lg": "48px",
+                        "stack-md": "24px",
+                        "container-margin": "20px"
+                    },
+                    "fontFamily": {
+                        "headline-md": ["Inter"],
+                        "label-sm": ["Inter"],
+                        "body-lg": ["Inter"],
+                        "body-md": ["Inter"],
+                        "headline-sm": ["Inter"],
+                        "headline-lg": ["Inter"],
+                        "headline-lg-mobile": ["Inter"],
+                        "label-md": ["Inter"],
+                        "label-caps": ["JetBrains Mono"]
+                    },
+                    "fontSize": {
+                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
+                        "label-sm": ["11px", { "lineHeight": "16px", "letterSpacing": "0.5px", "fontWeight": "500" }],
+                        "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
+                        "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "headline-lg-mobile": ["28px", { "lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "700" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.5px", "fontWeight": "500" }],
+                        "label-caps": ["12px", { "lineHeight": "16px", "letterSpacing": "0.1em", "fontWeight": "500" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .map-grid-overlay {
+            background-image: 
+                linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        
+        .pulse-ring {
+            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+        }
+
+        @keyframes pulse-ring {
+            0% {
+                transform: scale(0.8);
+                opacity: 0.8;
+                box-shadow: 0 0 0 0 rgba(170, 199, 255, 0.5);
+            }
+            70% {
+                transform: scale(1);
+                opacity: 0;
+                box-shadow: 0 0 0 20px rgba(170, 199, 255, 0);
+            }
+            100% {
+                transform: scale(0.8);
+                opacity: 0;
+                box-shadow: 0 0 0 0 rgba(170, 199, 255, 0);
+            }
+        }
+
+        .route-line {
+            stroke-dasharray: 10, 10;
+            animation: dash 20s linear infinite;
+        }
+
+        @keyframes dash {
+            to {
+                stroke-dashoffset: -1000;
+            }
+        }
+        
+        .tooltip-float {
+            animation: float 3s ease-in-out infinite;
+        }
+        
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-8px); }
+            100% { transform: translateY(0px); }
+        }
+    </style>
+<style>
+        body {
+            min-height: max(884px, 100dvh);
+        }
+    </style>
+</head>
+<body class="bg-background text-on-surface h-screen w-full overflow-hidden relative selection:bg-primary-container selection:text-on-primary-container antialiased flex flex-col">
+<!-- Fullscreen Map Canvas -->
+<main class="flex-grow relative h-full w-full z-0 overflow-hidden">
+<div class="absolute top-4 left-1/2 -translate-x-1/2 z-50 w-auto px-container-margin pointer-events-none mt-4">
+<div class="bg-surface/90 backdrop-blur-xl border border-outline-variant/30 rounded-full px-8 py-4 flex items-center gap-8 shadow-sm pointer-events-auto">
+<div class="flex flex-col items-center">
+<span class="text-on-surface-variant font-headline-md text-[10px] uppercase tracking-widest mb-1">Distance</span>
+<span class="font-headline-md text-primary-container">12.4<span class="text-sm ml-1">km</span></span>
+</div>
+<div class="w-px h-8 bg-outline-variant/30"></div>
+<div class="flex flex-col items-center">
+<span class="text-on-surface-variant font-headline-md text-[10px] uppercase tracking-widest mb-1">Est. Time</span>
+<span class="font-headline-md text-primary-container">45<span class="text-sm ml-1">m</span></span>
+</div>
+<div class="w-px h-8 bg-outline-variant/30"></div>
+<div class="flex flex-col items-center">
+<span class="text-on-surface-variant font-headline-md text-[10px] uppercase tracking-widest mb-1">Pins</span>
+<span class="font-headline-md text-primary-container">5</span>
+</div>
+</div>
+</div>
+<!-- Base Map Layer -->
+<div class="absolute inset-0 z-0 bg-surface-container">
+<img class="w-full h-full object-cover opacity-30 mix-blend-screen" data-alt="A digital map showing a top-down view of city streets and terrain." data-location="San Francisco, CA" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDtux0iJ6r19x5fCEWn0L1Ai3ziybnKhwYCd-8xyKm8ebAQHTJPdulojF6Pi_31mtsUlhqpI5ejusGg8Rk7y9c20eWK9sqj3uubky70kqSRiHsd37IJzOiRUTYdHCyOg2g7K5uADAg-39nR48gfWmfotW13eKGb1I9OMrc8MJBtj6lD9rtqapC2DG8kLoTz50c_QCt_AVShQyLrft6yW1SShV4mZXP2kwhf4AZsh3bvkzeCQzfIB43E"/>
+</div>
+<!-- Technical Grid Overlay -->
+<div class="absolute inset-0 map-grid-overlay z-10 pointer-events-none"></div>
+<!-- Planned Route Overlay (SVG) -->
+<svg class="absolute inset-0 w-full h-full z-20 pointer-events-none" preserveaspectratio="xMidYMid slice" viewbox="0 0 1000 1000">
+<path class="route-line opacity-80" d="M 400 400 L 450 420 L 500 380 L 550 430 L 600 400" fill="none" stroke="#4090fe" stroke-dasharray="10, 10" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path>
+<circle cx="400" cy="400" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
+<circle cx="450" cy="420" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
+<circle cx="500" cy="380" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
+<circle cx="550" cy="430" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
+<circle cx="600" cy="400" fill="#4090fe" r="6" stroke="#131313" stroke-width="2"></circle>
+</svg>
+<!-- User Location Marker (Pulsing) -->
+<div class="absolute top-[70%] left-[30%] z-30 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center pointer-events-none">
+<div class="absolute w-4 h-4 bg-primary-container rounded-full opacity-30"></div>
+<div class="absolute w-3 h-3 bg-primary-container rounded-full pulse-ring"></div>
+<div class="w-2 h-2 bg-primary-container rounded-full relative z-10 shadow-[0_0_10px_rgba(64,144,254,0.5)]"></div>
+<!-- Vision cone indicator -->
+<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[40px] border-t-primary-container/20 origin-bottom transform rotate-45"></div>
+</div>
+<!-- Interactive Map Canvas Layer (Invisible, captures clicks for dropping pins) -->
+<div class="absolute inset-0 z-40 cursor-crosshair" id="map-interaction-layer"></div>
+</main>
+<!-- Floating HUD Elements Layer -->
+<div class="absolute inset-0 z-50 pointer-events-none flex flex-col justify-end">
+<!-- Tooltip -->
+<div class="w-full flex justify-center mb-stack-md pointer-events-none px-container-margin">
+<button class="pointer-events-auto bg-primary-container text-on-primary-container font-headline-md text-label-caps px-12 py-4 rounded-xl shadow-md uppercase tracking-widest hover:brightness-110 active:scale-95 transition-all">Start Route</button>
+</div>
+<!-- Bottom Navigation Bar (Generated from JSON) -->
+<nav class="bg-surface border-t border-outline-variant/30 w-full pb-safe flex justify-around items-center h-20 px-container-margin pointer-events-auto shrink-0 relative shadow-[0_-4px_20px_rgba(0,0,0,0.2)]">
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary-container transition-colors duration-150">
+<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 0;">map</span>
+</button>
+<button class="flex flex-col items-center justify-center text-primary-container relative after:content-[''] after:absolute after:-bottom-1 after:w-1 after:h-1 after:bg-primary-container after:rounded-full hover:text-primary-container transition-colors duration-150 scale-95">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">book</span>
+</button>
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary-container transition-colors duration-150">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">route</span>
+</button>
+<button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary-container transition-colors duration-150">
+<span class="material-symbols-outlined mb-1" style="font-variation-settings: 'FILL' 0;">settings</span>
+</button>
+</nav>
+</div>
+<!-- Micro-interaction Script for Pin Dropping Simulation -->
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const mapLayer = document.getElementById('map-interaction-layer');
+        const svgLayer = document.querySelector('svg');
+        let pinCount = 0;
+        
+        mapLayer.addEventListener('click', (e) => {
+            const rect = mapLayer.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            // Visual feedback of drop
+            const ripple = document.createElement('div');
+            ripple.className = 'absolute rounded-full border-2 border-primary-container bg-primary-container/20 pointer-events-none transform -translate-x-1/2 -translate-y-1/2';
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            ripple.style.width = '0px';
+            ripple.style.height = '0px';
+            ripple.style.opacity = '1';
+            ripple.style.transition = 'all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)';
+            
+            mapLayer.parentElement.appendChild(ripple);
+            
+            // Trigger animation
+            requestAnimationFrame(() => {
+                ripple.style.width = '60px';
+                ripple.style.height = '60px';
+                ripple.style.opacity = '0';
+            });
+            
+            // Clean up ripple
+            setTimeout(() => ripple.remove(), 500);
+        });
+    });
+</script>
+</body></html>
\ No newline at end of file
diff --git a/docs/design/stitch-export/screens/route-planning-dark.png b/docs/design/stitch-export/screens/route-planning-dark.png
new file mode 100644
index 0000000..ba43aab
Binary files /dev/null and b/docs/design/stitch-export/screens/route-planning-dark.png differ