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

Authentication Screens

Login, registration, and OTP verification flows for the IRIS customer app. Lightweight, RTL-ready, Outfit-powered.

3 screens
Light theme
React Native
9:41
Login
Existing users
9:41
←
Create Account
Join IRIS today — fresh car awaits
FULL NAME
PHONE NUMBER
🇹🇳 +216
EMAIL (optional)
PASSWORD
CONFIRM PASSWORD
✓
I agree to the Terms of Service and Privacy Policy
Already have an account? Login
Register
New users
9:41
←
Verify Phone
Enter the 6-digit code sent to your number
+216 ••• ••• 789
3
Resend code in 0:47
OTP Verification
Phone confirmation
Screens
1
Login
Phone + password
2
Register
5-field form
3
OTP
6-digit verify
Component Specs
Input height
52px
Input radius
12px
Button height
56px
Button radius
30px
OTP digit
40×52px
Logo circle
64×64px
Header height
220px
Typography
Labels
Outfit 600
Inputs
Outfit 400
Buttons
Outfit 700
Headings
Outfit 800
Colors
Primary
#0B96D0
Gradient →
#00ACE4
Text
#1A1A2E
Muted
#6B7A90
Border
#E8EEF4
BG
#F5F7FA
Input Component
Height
52px
Border Radius
12px
Border
1.5px #E8EEF4
Background
#F5F7FA
Font
Outfit 400 14px
Label Font
Outfit 600 12px
Focus border
#0B96D0
Primary Button
Height
56px
Border Radius
30px
Gradient
135deg
Color start
#0B96D0
Color end
#00ACE4
Font
Outfit 700 16px
Shadow
blue .35 opacity
OTP Digit Box
Width
40px
Height
52px
Border Radius
12px
Gap
8px
Font
Outfit 700 22px
Active border
#0B96D0
Active shadow
blue .12 opacity
Auth Header
Height
220px
Gradient
160deg
Logo circle
64×64px r:20px
Logo font
Outfit 900 22px
Title font
Outfit 800 22px
Subtitle font
Outfit 400 13px
BG circles
rgba(255,255,255,.08)