Foundations
One system. Every surface.
Mobile app, admin console, website and this lab are drawn from the same tokens. Nothing in this build uses a hard-coded colour — which is exactly why a rebrand, a dark theme and an Arabic mirror are configuration rather than a redesign.
Colour tokens
Page
--background
Text
--foreground
Surface
--card
Forest
--primary
Bronze
--accent
Sand
--secondary
Quiet text
--muted-foreground
Line
--border
Confirmed
--success
Pending
--warning
Cancel
--destructive
Defined in oklch for perceptually even contrast across light and dark themes.
Typography
Where should I go?
DISPLAY · FRAUNCES · EDITORIAL, WARM, HUMAN
Body copy carries the substance of the product. It has to stay readable at length, in two languages, on a phone in sunlight.
BODY · KARLA · 15PX / 1.6
VY-HTL-44921 · AED 1,860 · 12–17 MAY
METADATA · IBM PLEX MONO · REFERENCES, PRICES, TIMES
رحلتك القادمة إلى جورجيا
ARABIC · NOTO KUFI ARABIC
Buttons
Status badges
NeutralConfirmedPendingCancelledAI generated
Status colour is semantic and consistent everywhere — a traveller learns it once.
Progress & metrics
Trip readiness68%
Bookings today
612
+3.1%
Motion
Rise
animate-rise
Fade
animate-soft-fade
Shimmer
shimmer
Lift
lift
Motion is used to show causality — an itinerary changing because the traveller asked — never as decoration.
Principles
Conversation firstThe interface is a sentence
Show the structureChat produces data you can see and edit
No dead endsEvery state offers a next action
Honest statesBeta, coming soon and errors are labelled
Direction agnosticLogical properties only
Quiet by defaultColour signals meaning, not mood