Foundation · Design System
One language across five products.
Every screen in this prototype is assembled from these tokens and components — which is why the app, website and portals feel like one company.
Brand
Marks
Product mark and design partner mark.
Colour
Semantic tokens
No raw hex in any component — every colour is a token.
Sayara Blue
--color-brand
Primary action
Brand Deep
--color-brand-deep
Gradient end
Midnight Navy
--color-navy
Authority surface
Ice
--color-ice
App background
Ice Deep
--color-ice-deep
Dividers, tracks
Success
--color-success
Completed states
Warning
--color-warning
Attention needed
Danger
--color-danger
Emergency, destructive
Typography
Sora + Plus Jakarta Sans
Sora for display authority, Plus Jakarta Sans for long-form legibility on mobile.
Your car. One digital home.
Sora · 900 · tracking-tight · display hero
Section heading
Sora · 700 · 24px
Body copy carries the explanation. It stays quiet, readable and generous with line height so a full paragraph never feels heavy on a phone screen.
Plus Jakarta Sans · 400/500 · 14px · leading-relaxed
Eyebrow label
Plus Jakarta Sans · 700 · 10px · tracking-[0.18em]
Iconography
Purpose-built automotive set
Every icon maps to a real feature — services, ecosystem roles, portal modules and system states.
Components
The working kit
Buttons, chips, inputs, stats, feedback and loading states.
Buttons
Chips
Rating
★4.8(327)Inputs
Vehicle plate
Service needed
Progress
Loading
Requests today
1,284
GMV
AED 8.6M
Open tickets
42
Suspended
4
Feedback
Quote accepted
Elite Auto Works is preparing your booking.
Smart Match found 4 garages
Ranked by price, distance and rating.
Elevation & radii
Depth with restraint
Three shadows, three radii — nothing else.
shadow-card
rounded-2xl
Cards, tables, list rows
shadow-float
rounded-2xl
Overlays, floating panels
shadow-brand
rounded-[2rem]
Primary emphasis surfaces