73 lines
6.8 KiB
Markdown
73 lines
6.8 KiB
Markdown
# 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 |