Preview Driveroo design system · 16 Oct 2026

Driveroo in lime and black

A preview of the Driveroo app design system in the colours of the Driveroo logo. Black does most of the work; lime marks the main button, the route on the map and anything selected. Use the switch to compare it with the green we used before your logo arrived.

Colour

Two layers. Primitives are the raw palette. Semantic colours say what a colour is for (button background, secondary text, pickup marker) and point at a primitive. Screens only use semantic colours. To rebrand, replace the brand ramp; the semantic layer and every screen update with it.

Primitives

Semantic (Light)

Typography

Fira Sans for everything you read and tap: a humanist face with open shapes, clear numbers and a narrow width, so long Perth addresses fit on small phones. Number plates, sign-in codes and timers use Atkinson Hyperlegible Mono, designed by the Braille Institute so 0 and O, 1 and I never look alike. That matters when a rider checks a plate in a hurry. Both are free Google Fonts, and each family is a single variable, so a client typeface can replace either one.

Spacing, corners and elevation

A 4-point spacing scale with a 20-point screen gutter. Touch targets are at least 44 points. Elevation is used for things that float over the map: controls, sheets, dialogs.

Icons

Lucide, 24-point grid, 2-point stroke, coloured by the text colour around them. One set across both apps.

Buttons

One primary action per screen. Large buttons are 52 points high and sit in the lower half of the screen within thumb reach. Danger is for cancelling a ride; it is never the default choice.

Default Pressed Focused Disabled Loading Primary Secondary Ghost Danger Danger ghost
Full width (L, 52 pt)
Medium (M, 44 pt)
Icon buttons: plain, pressed, tonal, floating on the map

Inputs

Labels sit above the field and stay visible. Errors say what went wrong and how to fix it, in text as well as colour.

Email
you@example.com
Email
priya.s
Full name
Priya Sharma
Email
priya.sharma@
Enter a full email address, like name@example.com.
Mobile number
0412 345 678
Your number is used to sign in, so it can't be changed here.
Text field: default, focused, filled, error, disabled
Mobile number
+61412 345 67
We'll text you a 6-digit code.
Phone number with country code
Search for a pickup
Elizabeth Q
Where to?
Search field and the "Where to?" bar
Empty
Typing
481
Complete
481072
Error
481073
That code didn't match. Check the text message and try again.
One-time code (6 digits)

Lists and cards

List rows are at least 64 points high. Cards are only for things you choose between, like ride options.

Place rows: saved, recent, pressed
Menu rows: default, focused, danger
Economy4 seats · 4 min away$18.40estimate
XL6 seats · 7 min away$26.90estimate
Selectable card: default, selected (sample fares)

Chips, badges and notices

Chips are choices (tip amounts, cancel reasons). Badges show a status and always carry a word, never colour alone. Notices explain a charge or a condition before it happens.

Chips: default, selected, pressed, focused, disabled
Finding a driver Driver on the way Driver has arrived On trip Completed Cancelled No drivers found Payment failed Paid
Status badges for trips and payments
DK DK DK 1HYP 448 4.9
Driver photo placeholder, WA number plate, rating, star input
Your driver waits 3 minutes freeAfter that, waiting time is $0.50 a minute.
A $5.00 cancellation fee appliesYour driver accepted more than 2 minutes ago.
Your last payment didn't go throughUpdate your card to book your next ride.
Fares are estimates. The final fare is confirmed when your trip ends.
Notices: info, warning, error, neutral (sample rates)
Card added
Couldn't send your message.
Pickup point updated
Toasts: short confirmations, shown for 4 seconds

Map

The map art is a stylised placeholder of inner Perth. The app uses Google Maps with these colours applied as its map style. Pickup is a circle and drop-off is a square, so they read differently even without colour.

3 minPickup
Elizabeth Quay
Route and markers Driver's car heading to pickup (dotted), then the trip route to drop-off (solid).
Pickup
Drop-off
Driver's car (rotates with heading)
Your location
Choose-on-map pin, resting
Pin lifted while the map moves

Sheets and dialogs

Bottom sheets carry the booking flow over the map. Dialogs are kept for decisions that cost money or can't be undone, such as cancelling with a fee.

Confirm your pickup

Move the map to put the pin where you'll wait.

Elizabeth Quay Bus StationMounts Bay Rd, Perth WA 6000
Bottom sheet Grabber, title, supporting text, content, one primary action.

Daniel is on the way

White Toyota Camry · arriving in 3 min

Dialog The safe choice ("Keep my ride") is always there and is never the red button.

Empty, loading, error and offline

Every list and map screen has these four states. Loading uses placeholder shapes in the layout, not a spinner. Errors say what happened and offer one way forward.

Your trips

No trips yet

After your first ride, your trips and receipts will show here.

Empty

Your trips

Loading

Your trips

We couldn't load your trips

Something went wrong on our side. Your trips are safe; try again in a moment.

Error

Where to?

Search needs a connection
No internet A banner, not a blocking screen. Booking is paused until the connection returns.