dilly/rippr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d9aa412e1575b839d148b67f32cb1c7e5603c39d
rippr/docs/design/stitch-export/screens/export-summary.md
uhryniuk fe8a7b6e3e Import Stitch UI export: Rippr Minimalist Activity Tracker 
Pulled via the Stitch MCP from project 8187200995279352789: the design system spec (neon-HUD dark theme -- Sora/Inter/JetBrains Mono, electric green primary, cyan secondary) plus HTML/screenshot for Map HUD, Plan Screen, Route Planning, and Rides History (all Dark Mode), and the project's own export summary.

Raw reference material only, not yet wired into the app. Flags a real discrepancy in README.md: the export summary describes a different ('Modern Professional Dark', blue) design system than the one actually attached to the project and used by every screen fetched -- treat design-system.md as current, export-summary.md as stale.
2026-08-23 18:05:37 -05:00

2.3 KiB
Raw Blame History

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.