Uber: A Design System Teardown
70 countries, 10,000+ cities, one visual language. Inside the system that lets 10,000+ engineers and designers ship against the same vocabulary, daily.
Uber.
A close look at the system behind one tap, one ride, one hundred countries.
Why Uber's system
is worth studying.
The principles.
Four ideas repeat across every Uber surface, from the wordmark to the ride sheet.
Ruthlessly legible.
Huge type, high contrast, one action per screen. Built for a driver glancing at a phone at 40mph.
Color as signal.
Black and white carry the system. Color only appears where it must: alerts, promos, confirmation.
Geometry first.
Monolinear wordmark, circular buttons, square photo crops. A single geometric logic across the system.
Globally neutral.
No slang, no gradients, no illustration style that reads as American. The system is built to translate.
The wordmark.
- Weight900 · Black
- CaseTitle case
- Tracking−4% (tight)
- TerminalsCleanly cut, 90°
- Optical correction"b" bowl widened
Drawn in-house (Wolff Olins, 2018) to read equally well at favicon size and on the side of a car. A wordmark, never a logo. Uber deliberately walked away from the "U in a circle" icon era.
Uber Move.
A custom geometric sans, designed with MCKL. Built to replace every third-party face in the system. Consistency as infrastructure.
Type in practice.
Every size is named, not guessed. The token, not the pixel value, is what ships.
A ten-step neutral,
and four signals.
98% of pixels shipped are mono. The accents earn their place.
Black isn't a brand color.
It's a structural one.
Observation
The map is light, so the sheet is white, so the primary action has to be black to anchor the composition. Every Uber product inherits this hierarchy, and every surface reads the same way.
A 4-point grid,
12 columns on web.
Every spacing value is a multiple of 4. Every layout snaps to twelve. The system is boring, on purpose.
Base, the open-source kit.
Uber open-sourced the design system so partners, vendors and the community build on the same vocabulary. Confidence, not secrecy.
The Button.
A pill, not a rectangle. The curvature is tied to height, so every button scales proportionally. No magic numbers.
The ride sheet.
The web experience.
The marketing site is an extension of the product. Same type, same black, same pill buttons. No second brand.
Photography & motion.
Candid, desaturated, documentary. Drivers and riders as real people, never models.
What we can steal.
Own your typeface. A custom face is the cheapest, loudest brand differentiator you can ship.
02Keep the palette boring. A mono ramp plus four signals will outlast any trend-driven color system.
03Make the token the contract. Designers and engineers should trade token names, never hex codes.
04Open-source the primitives. It forces discipline internally and earns trust externally.
05One shape family. Pills everywhere, or rectangles everywhere. Pick, and commit.
next week.
One system every week, taken apart with love. The next teardown lands on Thursday. If you want it in your feed, follow along on LinkedIn.
Follow on LinkedIn →GET IN TOUCH
Have a project?
Describe what you need. You'll hear back with a straight answer and a rough timeline.