# RideFlow design preview

**Personality:** Urban Signal Precision

Tactical urban transit utility rendered with geometric clarity, signal-level status accenting, and instant state feedback.

**Design read:** Reading RideFlow as a high-velocity, real-time urban transit platform demanding spatial clarity, instant state feedback, and driver-centric legibility under active movement. The visual language marries clean map-first interfaces with high-contrast signal status indicators for seamless transition between passenger booking and driver navigation.

## Taste dials
- Design variance: 6/10
- Motion intensity: 5/10
- Visual density: 4/10

## System
- Direction: High-Contrast Transit Navigation
- Default mode: light
- Display font: Plus Jakarta Sans
- Body font: DM Sans
- Landing composition: Asymmetric hero pairing a dynamic interactive route preview stage on the right with a bold, left-aligned booking callout. Features transition into structured split-screen workstation previews.

## Surfaces

### landing
Navigation: Top-tier sticky header navigation bar with brand logotype, quick links for Passenger and Driver role features, and a prominent M-Auth sign-in button.
- Public Landing Shell (/*): Introduce RideFlow transit capabilities, showcase live map routing and driver tracking, and route incoming passengers and drivers into M-Auth login.
  - hero-interactive-preview: Asymmetric Interactive Hero Stage - High-contrast light slate canvas (#f8fafc) with crisp border enclosure around vector route preview. Telemetry blue accents draw eyes to pickup actions.
  - dual-role-workstation-overview: Split Navigation Workstation Showcase - Side-by-side elevated slate cards with 1px border outlines (#cbd5e1), signal badges in emerald green and telemetry blue.
  - live-telemetry-capabilities: Linear Dual-Workflow Process Strip - Full-bleed muted slate strip (#f1f5f9) delimited by sharp top and bottom hairline borders (#e2e8f0).
  - safety-companion-framework: Full-Width Signal Capability Deck - Deep dark inverse surface (#0f172a) with crisp white typography and emerald verification accents for high visual contrast.
  - authentication-access-cta: Centered High-Contrast Signal Banner - Crisp slate background with dark primary CTA button (#0f172a) and telemetry blue focus rings.

### application
Navigation: Top bar shell with prominent active trip banner, role-aware navigation switches (Passenger / Driver / Circles / History), and drawer access on small screens.
- Onboarding & Safety Setup (/app/onboarding): Guide new users through role selection, driver vehicle registration, and private companion safety consent setup.
  - role-selection: Linear Single-Column Setup Form - Crisp white bordered surface with signal indigo selected state
  - driver-vehicle-form: Linear Single-Column Setup Form - Muted slate inset form field group with distinct border boundaries
  - companion-safety-profile: Linear Single-Column Setup Form - Light slate card with emerald verified border accenting
- Passenger Workstation (/app/ride): Interactive map interface for booking rides, estimating route fare, tracking driver movement live, and rating completed trips.
  - booking-panel: Floating Bottom Sheet over Interactive Canvas - Crisp surface with high-contrast primary button and signal accents
  - live-tracking-panel: Floating Bottom Sheet over Interactive Canvas - Slate inverse card background with vibrant telemetry status badges
  - trip-rating-modal: Linear Single-Column Setup Form - Clean dialog with crisp divider and prominent primary star selectors
- Driver Workstation (/app/driver): Control panel for drivers to toggle online availability, review incoming ride requests, navigate active trips, and report live GPS location.
  - availability-header: Split View Navigation Workstation - Dark slate bar with bright emerald status glow when online
  - incoming-requests: Split View Navigation Workstation - High-contrast white cards with thick slate left border
  - active-navigation-controls: Floating Bottom Sheet over Interactive Canvas - Tactical dark bottom bar with large high-contrast primary action button
- Companion Circles & Activity Hub (/app/circles): View companion circles, handle invitations, manage recurring activity plans, and register RSVPs.
  - circles-overview: Split View Navigation Workstation - Bordered card stack with crisp badge indicators
  - activity-planning: Linear Single-Column Setup Form - Clean dialog surface with clear form row grouping
  - activity-rsvp-list: Split View Navigation Workstation - Crisp white card with left emerald accent line for 'Going' status
- Ride & Activity History (/app/history): Comprehensive log of past ride bookings and companion activities with statuses, drivers, timestamps, and ratings.
  - history-filters: Dense Tactical Data Table - Light slate filter toolbar with clear active tab indicator
  - history-table-list: Dense Tactical Data Table - Dense table with subtle hover row highlights and crisp status badges

### admin
Navigation: Sidebar Navigation with Top System Header and Tabbed Context Panels
- System Overview (/admin): Provide system operators with real-time operational telemetry, active ride counts, user volume stats, and system health status.
  - admin-kpi-summary: Dense Tactical Data Table - Slate container with crisp subtle borders, emerald telemetry badge indicators, and high-contrast bold typography.
  - admin-quick-navigation: Split View Navigation Workstation - Clean slate background with strong dark borders and distinct action buttons.
- User Directory (/admin/users): Enable system operators to inspect registered passengers, drivers, and admin accounts in a structured table.
  - user-table-controls: Linear Single-Column Setup Form - Framed surface bar with muted slate border and explicit input labels.
  - user-directory-table: Dense Tactical Data Table - Clean white table surface with subtle slate row dividers and high-contrast text contrast.
- System Ride Logs (/admin/rides): Allow system admins to audit all historical and active ride requests, driver assignments, locations, status progressions, and passenger ratings.
  - ride-log-filters: Split View Navigation Workstation - Slate tabs with active slate-900 high-contrast underline visual indicator.
  - ride-log-table: Dense Tactical Data Table - Tabular grid with alternating slight surface contrast for easy line scanning.

## Generated image placements
- landing-01-hero-interactive-preview: landing /* / hero-interactive-preview
- landing-02-dual-role-workstation-overview: landing /* / dual-role-workstation-overview
- landing-03-live-telemetry-capabilities: landing /* / live-telemetry-capabilities
- landing-04-safety-companion-framework: landing /* / safety-companion-framework
- application-01-role-selection: application /app/onboarding / role-selection
- application-02-driver-vehicle-form: application /app/onboarding / driver-vehicle-form
- admin-01-admin-kpi-summary: admin /admin / admin-kpi-summary