The calm co-driver: warm paper, honest numbers, unhurried motion. Every component and animation, on demo data. Try the theme switch at the top and your OS reduced-motion setting.
Colour
Saffron Clay is the one highlight per screen. Highway Teal means road, progress and focus.
--paper
--paper-2
--surface
--ink
--ink-2
--line
--accent
--road
--good
--warn
--bad
Type
Fraunces for titles and big totals; Inter for everything else, with tabular numbers.
48Where are you headed?
32₹2,340 total
24Pickup Pass
20Your ₹2,000 deposit returns after inspection.
16Body text stays at 16 px on phones. Numbers line up: ₹1,23,456 · 21,450 km.
14Secondary details and table text.
12Captions, legends, chip labels.
Buttons
Scale to 0.98 on press. Loading swaps the label for a turning wheel.
Forms
Inputs have 8 px corners and a teal focus ring.
Chips
Filter, status and removable chips. Pills everywhere.
Scooter
Mount AbuWed 21 Oct, 9 am → Thu 22 Oct, 9 am1 day, assumed
ConfirmedWaiting for the shopOn tripDeclined by shopHiddenClosed
Ask Saarthi composer
Placeholder cycles every 4 s. Send it: matched words lift out and fly into chips (FLIP). Here it stays on the page.
Vehicle cards
Line-art on a tinted card when there's no photo. Lift 2 px on hover. Tap the compare button: the thumbnail arcs into the tray.
The road paints itself between steps; the current step pulses. The coin travels Held → Inspection → Released → Credited and the amount counts down for deductions.
Confirmed
Ready for pickup
Checked in
On trip
Returned
Closed
Waiting for the shop, usually under 15 minShown before step 1 when instant book is off.
Refundable deposit Held during the trip and returned after inspection
₹1,320 is back in your account.
₹1,320
Held
Inspection
Released
Credited
₹
Held
₹1,500
Extra kilometres60 km over · ₹3 × 60 km
−₹180
Back to you
₹1,320
Proof photos
Cars walk around 8 angles plus the odometer and fuel gauge; two-wheelers 4 angles plus the odometer. Each photo fills its zone in teal; all of them unlock the swipe. The real flow uses the full-screen camera on a ready trip.
Front · 9:05 am
Back · 9:06 am
Left side
Right side
Before / after wipe
Pickup and return photos of the same angle, stacked. Drag the slider (or use the arrow keys) to wipe between them.
Front leftPickup Tue 20 Oct, 9:05 am · Return Thu 22 Oct, 8:40 am
PickupReturn
Help popovers
Every term from the tooltip table gets a "?" that opens on tap, click or Enter, and closes on Esc or a tap outside. Never hover-only.
Total Rent, fees and taxes for your dates. Deposit shown separatelyRefundable deposit Held during the trip and returned after inspectionLate fee Charged per hour after your return time, after 30 min graceProof photos Photos are timestamped so nobody can blame you later
Pickup PassAbu RidersConfirmed
Booking code
SAR-7K2QX
Wed 21 Oct · 9 am
A wallet pass: perforated divider, big code in tabular numerals, a decorative pattern generated from the code.
Date range picker and calendar
Pick a start, then an end: the range fills as one sliding pill. Booked days are struck through.
October 2026
Mo
Tu
We
Th
Fr
Sa
Su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
FreeBookedPart of the day booked
Swipe to confirm
The thumb follows your finger and springs back if released early. Keyboard: focus it and hold Enter for 1 s.
Swipe to start trip
Tabs and tables
Code
Vehicle
Status
Total
SAR-7K2QX
Honda Activa 6G
Confirmed
₹1,062
SAR-M4TZ9
Royal Enfield Classic 350
On trip
₹2,124
Map view
Leaflet with price pins. Tiles follow the theme.
Motion
Fast 180 ms · base 260 ms · slow 400 ms · hero 600 ms. Only transform and opacity animate. With reduced motion, everything becomes a 120 ms fade.
Pickup Pass reveal
Rises and flips once, the wheel turns once, a 15 ms buzz. No confetti.
Pickup Pass
SAR-7K2QX
Calendar conflict
A booking bar shakes 3 times and snaps back when you try to block over it.