Customer App
Auth Home Book Track History Profile
Pro App
Jobs Active Job Earnings Profile
Design System

IRIS Design System

High-fidelity screens for the IRIS car-wash platform — Customer & Professional apps built with Expo Router & React Native.

Customer App

Customer App

Light theme. Arabic-first RTL. Book a wash, track your pro in real-time, manage your history.

IRIS
Pro App

Professional App

Dark theme. Green accents. Accept jobs, navigate to customers, track earnings and performance.

Customer App

6 screens
→
Auth
Login · Register · OTP
→
Home
Dashboard · Nearby pros
→
Book
Service selection · Schedule
→
Track
Live map · ETA
→
History
Past bookings · Receipts
→
Profile
Account · Settings · Cars

Pro App

4 screens
→
Jobs
Available · Nearby · Accept
→
Active Job
Steps · Navigation · Complete
→
Earnings
Revenue · Chart · Payouts
→
Profile
Account · Rating · Documents

Design Tokens

Colors · Type · Components
Brand Colors
Blue
#0B96D0
Cyan
#00ACE4
Green (Pro)
#00C87A
Primary Gradient
135deg → #0B96D0 #00ACE4
Customer App — Light
Background
#F5F7FA
Card
#FFFFFF
Text
#1A1A2E
Muted
#6B7A90
Border
#E8EEF4
Pro App — Dark
Background
#111111
Card
#1C1C1E
Secondary BG
#2C2C2E
Muted
#8E8E93
Typography — Outfit
Display
28px / 900
Heading
22px / 800
Title
17px / 700
Label
15px / 600
Body
14px / 400
Caption
12px / 500
Buttons & Inputs
Primary Button · h:56px · r:30px
Outline Button
Input · h:52px · r:12px
Cards & Badges
Card · r:16px
Toyota Corolla
Full Wash · 45 min
Status Badges
Available Pending Completed