Connecting Pakistan

Manzil — Interactive Design Prototypes

High-fidelity, clickable design references for the Manzil intercity mobility platform. Treat colors, type, spacing, copy and flows as the spec. These pages are the source of truth for the build.

Mobile · 390×844 · dual-theme + Urdu RTL

Passenger App

~30 screens: onboarding, search & booking, intent marketplace, live journey, wallet, support. Use the screen rail to move between screens.

 Desktop · light surface

Operator Console

Fleet registration with document OCR, journey mapping on corridors, trips, cargo, timetables, settlements.

 Desktop · light surface

Admin Console

Registration review queue, route profile builder, tiered KPIs, complaints, bids oversight.

 Desktop · light surface

Agent Portal

Beacon bidding, bundle negotiation, operator price relays.

Generating Figma files from these pages

  1. In Figma, install the free html.to.design plugin (by ‹div›RIOTS).
  2. In Figma before importing, install the fonts Plus Jakarta Sans, Bricolage Grotesque, IBM Plex Mono (all on Google Fonts).
  3. Run the plugin → Import by URL → paste one of the prototype URLs above.
  4. Import the passenger app at 390×844; consoles at desktop width (1440–1600).
  5. The prototypes are stateful single pages — use the screen rail/tabs to show a screen, then import that state ("viewport capture"). Repeat per screen.
  6. Design tokens: import design-tokens.json from the handoff bundle with the Tokens Studio plugin to get Figma variables/styles.