Editor’s pick
Save NZ$60/day
Design system
Every token, component and state used across the Olivia Motors product surface — the single source of truth for design and engineering.
42 components
Tailwind v4 tokens
01
Foundations
The design language in one line: modern, minimal, premium. Generous whitespace, restrained colour, and one accent used sparingly.
Typeface
Inter
Variable, 5 weights
Grid
1440 / 768 / 390
Desktop · tablet · mobile
Spacing
8px base
All rhythm derives from 8
Radius
12 / 16 / 20
Inputs · cards · hero
02
Colour
Orange carries every primary action. Use the secondary orange scale for supporting highlights.
Primary
#FF7600
50
100
200
300
400
500
600
700
800
Secondary
#F97316
50
100
200
300
400
500
600
700
800
Success
#10B981
50
100
500
600
700
Warning
#F59E0B
50
100
500
600
700
Danger
#EF4444
50
100
500
600
700
Neutrals
Ink
#111827
Ink soft
#374151
Muted
#6B7280
Faint
#9CA3AF
Line
#E5E7EB
Surface
#F8FAFC
03
Typography
Inter throughout. Display sizes carry negative tracking; body copy stays at default tracking for readability.
Display 2XL
72 / 700
Olivia Motors
Display XL
60 / 700
Luxury on demand
Display LG
48 / 700
Premium travel made simple
Display MD
36 / 700
Handpicked for this week
Display SM
28 / 600
Section heading
Body LG
16 / 400
Reserve a premium vehicle with flexible pickup and concierge service.
Body
14 / 400
Reserve a premium vehicle with flexible pickup and concierge service.
Body SM
13 / 400
Reserve a premium vehicle with flexible pickup.
Eyebrow
12 / 600
Featured fleet
04
Spacing & radius
An 8px base scale keeps every gap, pad and offset on a shared rhythm.
Spacing scale
8px
gap-2
12px
gap-3
16px
gap-4
24px
gap-6
32px
gap-8
48px
gap-12
64px
gap-16
Radius
12px
Inputs
16px
Cards
20px
Hero
24px
Panels
05
Elevation
Soft, low-contrast shadows. Elevation communicates interactivity, never decoration.
XS
shadow-xs
Soft
shadow-soft
Card
shadow-card
Lift
shadow-lift
Float
shadow-float
Brand
shadow-brand
06
Icons
A single 24×24 stroke set at 1.75px. Consistent optical weight beside 14–16px text.
car-front
steering-wheel
fuel
gauge
snowflake
briefcase
baby
navigation
key
wrench
user
users
user-check
headphones
map-pin
calendar
calendar-check
clock
globe
building
plane
credit-card
wallet
receipt
tag
percent
dollar-sign
gift
check-circle
x-circle
alert-circle
alert-triangle
info
help-circle
shield-check
lock
star
heart
bookmark
bell
mail
phone
message-square
send
file-text
image
quote
play
download
printer
search
filter
sliders
settings
plus
edit
trash
eye
refresh
log-out
layout-dashboard
grid
list
bar-chart
pie-chart
trending-up
activity
package
layers
sparkles
zap
award
thumbs-up
home
wifi
sun
moon
smartphone
inbox
folder
08
Form controls
Every field shares one focus treatment: a 1px brand border plus a 4px translucent ring.
Inputs
We only use this for booking confirmations.
This licence has already been registered.
Selects & pickers
Choice controls
Transmission
Progress
Profile completeness 85%
Fleet utilisation 62%
Storage used 34%
09
Badges, avatars & ratings
Badges
Neutral
Brand
Accent
Success
Warning
Danger
Solid
Brand
Accent
Confirmed
Pending
Cancelled
Verified
New
Glass on dark
Avatars & ratings
AO
CD
+8
5.0
(214)
4.5
(98)
3.2
10
Cards
Seven card patterns cover every surface in the product.
Stat, feature & testimonial
Revenue this month
NZ$148k
+12.4%
vs last month
Insurance included
Comprehensive cover and roadside assistance on every rental.
“Booked in under two minutes and the child seat was already fitted on arrival.”
Priya Raghunathan
Product Lead, Fernwood
Pricing
Essential
City compacts for short trips.
NZ$95
/ day
- Unlimited mileage on 3+ days
- Comprehensive insurance
- 24/7 roadside assistance
- Free upgrades
- Concierge delivery
Most popular
Premium
Our most-booked tier.
NZ$180
/ day
- Everything in Essential
- Free vehicle upgrades
- Concierge delivery
- Zero-excess insurance
- Exotic fleet access
Signature
The exotic collection.
NZ$410
/ day
- Everything in Premium
- Exotic fleet access
- Dedicated concierge
- Airport meet & greet
12
Feedback
Alerts
One-way rental fee
Returning to a different branch adds a distance-based fee, calculated at checkout.
Booking confirmed
Reference RN-48210. A confirmation email is on its way.
Licence expiring soon
Your driving licence expires in 34 days. Upload a renewal to avoid pickup delays.
Payment failed
We couldn't charge the card ending 8891. Update your payment method to keep this booking.
Toasts
Timeline
-
Booking confirmed
Payment of NZ$1,384 received
-
Documents verified
Licence and ID approved
-
Vehicle preparation
Scheduled for Aug 12, 08:00
Empty state
No bookings yet
When you reserve a vehicle it will appear here with all its details.
Modal
Built on the native <dialog> element —
focus trapping and backdrop dismissal come for free.
Loading skeletons
13
Interaction states
Every interactive element answers four questions: can I click it, am I hovering it, is it focused, is it disabled?
Button states
Hover and focus these to compare
Book
Default
Book
Hover
Book
Focus
Book
Active
Book
Disabled
Book
Loading
Field states
Default
Focus
Error
Enter a valid email address.
Disabled
Card hover
Lift + border tint on hover
Resting
shadow-soft, border-line
Hovered
−1px Y, shadow-lift
Image hover
Slow 700ms scale keeps it premium
Resting
Hovered (scale 1.06)