Sudan services & transport marketplace · Port Sudan MVP
v0.1 · design system foundation
mobile · Arabic-first RTL · Android
Design system foundation
Color, type, and core components — the kit every screen is built from. Materials 3 underneath, deeply customized for an Arabic-first, low-connectivity market.
01 — Palette · Deep teal
Teal was chosen because it reads as trustworthy and modern without slipping into the over-used cobalt blue of every ride-hailing app. The neutrals are warm-leaning (yellow-green undertone) so the product never feels clinical.
Brand ramp
brand-50
#E6F4F3
brand-100
#C9E8E6
brand-200
#97D3CF
brand-300
#5BB5B0
brand-400
#2E938E
brand-500 · primary
#006A6A
brand-600
#00524F
brand-700
#00403D
brand-800
#002E2C
brand-900
#001D1B
App accents — customer vs provider
--primary
Customer app — Deep teal #006A6A
Primary CTA, headers, active states, map markers. Reads as “service / safe / regional.”
--provider-500
Provider app — Warm orange #D97757
Same brand teal underneath, but provider CTAs and primary accents flip to orange — so a driver toggling between apps never confuses the two.
Status colors — the 5 order states
--warning
Pending
--info
Accepted
--brand
On the way
--success
Completed
--gray
Cancelled
Neutrals — warm gray ramp
gray-50 · bg
paper
gray-100
surface 2
gray-200
border
gray-400
hint
gray-600
secondary
gray-700
body
gray-800
heading
gray-900
display
02 — Typography · IBM Plex Sans Arabic
A single Arabic family for the entire mobile product. IBM Plex Sans Arabic pairs with its Latin sibling, so phone numbers, English place names, and OTP codes stay visually quiet inside Arabic body text. Latin numerals are used everywhere — they match phone keypads and reduce friction for first-time users.
display · 700
مرحباً بك في خِدمة
34 / 42 / -1%
headline · 600
اكتب رقمك للمتابعة
26 / 34 / -0.5%
title-lg · 600
اختر اللغة المناسبة لك
22 / 30
title · 600
السائق في الطريق إليك
18 / 26
body-lg · 400
سيتم إرسال رمز التحقق إلى الرقم +249 91 234 5678 خلال لحظات.
16 / 24
body · 400
اضغط للسماح للتطبيق بالوصول إلى موقعك الحالي.
14 / 20
caption · 400
يدفع المبلغ نقداً للسائق عند وصوله.
12 / 16
overline · 600
REQUEST PENDING · ٤٢ ثانية
11 / 14 / +6%
Mixed-script rule. Numerals (phone numbers, OTPs, prices, distances) use Latin digits in a Latin font (+249 91 234 5678), wrapped in unicode-bidi: isolate so they never break the RTL flow. Arabic content uses the Arabic font.
03 — Buttons
All buttons clear the 48dp Android touch floor. Primary is reserved for one CTA per screen. Outline is the default secondary; tertiary is reserved for inline “skip / not now” affordances.
Customer app — primary teal
min-height 48pxradius 14pxfont 16/600focus ring 3px brand-300/35%full-width on mobile
note only CTA / status accents flip — neutrals, type, spacing stay identical to customer app
Icon buttons
48 × 48radius pillhover gray-100 wash
04 — Inputs
Text fields are tall (56dp) and use a soft border that strengthens on focus. The phone-number variant has a locked Sudan prefix and forces LTR direction on the digit stream — even inside an RTL screen.
Standard text field — RTL
سيظهر اسمك للسائقين عند قبول الطلب.
Phone number — locked +249 prefix, LTR digit stream
48 × 56auto-advance on keybackspace jumps prevpaste distributes all 6 digits
05 — Order status — the 5 states
Status is the single most-glanced piece of UI in the entire product. Every state has a distinct color, a distinct icon-dot, and (for time-sensitive states) a gentle pulse. Color is never the only indicator — every badge ships with a label.
قيد الانتظار
Pending
تم القبول
Accepted
في الطريق
On the way
اكتمل
Completed
ملغي
Cancelled
pending + on-the-way pulse (1.4s ease)accepted + completed static dotcancelled neutral gray — never error red, to keep room for real errors
06 — Accessibility commitments
Older providers, low-end screens, and Android system font scaling are not edge cases for this product — they’re the median. Every choice in the system has been pre-checked against the floor.
Pair
Ratio
WCAG AA
Use
#FFFFFF on #006A6A (primary CTA)
5.6 : 1
PASS · AA Large + Normal
Buttons, headers, marker labels
#FFFFFF on #D97757 (provider CTA)
3.2 : 1
PASS · AA Large only
Reserved for large CTA text (16px/600 ≥) — never on body
gray-800 on gray-50 (body)
12.4 : 1
PASS · AAA
Default body / heading
gray-500 on gray-50 (muted)
4.7 : 1
PASS · AA
Captions, secondary metadata
gray-400 on gray-50 (hint)
3.0 : 1
PASS · AA Large
Placeholder text only — never load-bearing copy
Touch targets all ≥ 48 × 48 dpFont scaling screens reflow at 130% system fontState indicator color + icon + label (never color alone)Focus ring 3px brand-300 / 35% opacity on every focusable element
07 — RTL rules of the road
Arabic is the primary language and the entire mobile shell is RTL. A short set of rules keeps the bilingual cases (phone numbers, OTPs, English place names) from breaking the visual flow.
Set direction at the document. Every screen ships with <html lang="ar" dir="rtl">. Icons and chevrons flip with transform: scaleX(-1) when their meaning is directional (back arrows, “next” chevrons). Status icons (check, clock, pin) stay un-flipped.
Use logical properties.margin-inline-start, padding-inline-end, border-inline-end. Never margin-left.
Isolate mixed scripts. Wrap phone numbers and English names in <span dir="ltr"> (or set unicode-bidi: isolate) so the BiDi algorithm doesn’t scramble them.
Bottom navigation does NOT mirror. Home stays in the middle. Active tab order matches Android conventions, not reading order.
Maps don’t flip. North stays up; map controls (zoom, recenter) stay in the corner the user’s thumb expects (bottom-right in RTL = same thumb position).
Numerals are Latin everywhere. Decided MVP convention. Avoids confusion at phone keypads, OTP, prices, and times. A future setting can opt users back to ٠١٢٣ later — system already supports it via font fallback.
08 — Elevation
Three quiet steps. Drop shadows are warm-toned, not pure black, and always paired with a light surface — never glow on dark.