Khidma · خِدمة

Sudan services & transport marketplace · MVP — Port Sudan

Customer App · Android · RTL
v0.2 · auth + product flow (screens 1–21)
last updated 2026-05-12

Customer app — auth + product flow complete.

Twenty-one Customer screens now live on the design system — splash through complaint, plus history, profile, empty/error states, and the push prompt. The order-tracking screen handles all five states from one file. Bottom-tab navigation is locked across Home / Orders / Support / Profile.

Primary brand

Deep teal #006A6A · WCAG AA on white

Typography

IBM Plex Sans Arabic + IBM Plex Sans for Latin

Touch floor

48 dp everywhere 56 dp on primary CTAs

Direction

RTL · logical props numerals & OTP forced LTR

Design system foundation Color ramp · type scale · buttons · inputs · OTP · status badges · RTL rules · accessibility checks.

Open the foundation

Customer auth flow

First-run journey — splash → permission 7 SCREENS

Customer product flow

Home → request → tracking → post-order · 14 screens 14 SCREENS

Home & discovery

Create request

Provider selection

Active order — dynamic states

Post-order

Profile & history

System states

Decisions locked in this pass

Choices baked into tokens.css and every screen — change once at the system level and every screen follows.

Locked
Primary brand color · Deep teal #006A6A Underused in the regional market, reads as trustworthy/modern without slipping into cobalt. Provider app keeps the brand teal but flips CTAs to warm orange #D97757 so drivers can never confuse the two apps.
Locked
Typography · IBM Plex Sans Arabic + Latin sibling One Arabic family, one Latin family that pairs cleanly. Mixed-script content (phone numbers, OTP, prices) renders with unicode-bidi: isolate so BiDi never scrambles them.
Locked
Numerals · Latin everywhere (0123 not ٠١٢٣) Matches the phone keypad and the OTP boxes — fastest path for first-time app users. The system supports Arabic-Indic as a future opt-in via font fallback.
Locked
Price estimate · single approximate value Customers see one number like 500 SDG tagged “يُدفع نقداً” before they confirm. Avoids range-anxiety while keeping the cash-on-arrival reality unmistakable. Wired into welcome slide 3 already.
Locked
Chat · designed but flagged “may be cut” Will be designed alongside Call as part of the active-order flow. If cut, only that screen disappears — nothing in auth depends on it.
Locked
Photos per request · up to 3 Shipped on screen 10 with a yellow info pill explaining the why. Camera tile makes it obvious there's headroom for more — first photo encouraged, never required.
Locked
Order tracking · one file, five states Per your call: a single 13-order-tracking.html renders Pending / Accepted / On the way / Completed / Cancelled via body[data-state]. The DEMO STATE pill is a review-only control — production binds to backend state.
Locked
Empty / error states · reusable pattern Illustration + headline + body + primary CTA + optional helper panel. Designed once on screens 19 & 20, reused for "no providers nearby" / "no complaints" / "no addresses" with the same slots.
Open
Provider verification documents Working assumption: National ID minimum · vehicle photo for transport · trade license for electrical. Confirm with you before designing screens 50–51 (the document-upload + pending-approval pair).

Next up

Provider app — Android (warm-orange accent flip) Customer surface is feature-complete enough to start the provider side. Recommend tackling Auth + Onboarding (screens 44–52) first since they include the document-upload pair (50) and pending-approval screen (51) that still depend on resolving the verification-documents open question.