anant/app-s01qyw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
app-s01qyw/frontend/design/DESIGN.md
MWorld Deployer 6e64fa16ea feat: add frontend in /frontend
2026-09-29 20:17:53 +05:30

6.8 KiB
Raw Permalink Blame History

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