# Uber · Design system migration spec

> Source: https://www.uber.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a high-utility consumer platform that achieves premium feel through strict restraint, bold typography, and a monochrome palette.

## 1. Identity DNA

The Uber design system is a clean, reliable urban transport network made visual. Like the service itself, its interface prioritizes clarity, speed, and universal accessibility over decorative flourish, creating a utility-first framework for global mobility.

**One-liner:** A high-utility consumer transportation platform that balances premium minimalism with bold typographic clarity.
**Keywords:** mobility · transportation · service · global · logistics
**Analogy:** A sleek, efficient airport terminal — clean, functional, and easy to navigate.

## 2. Color

Color operates on a strict monochrome utility principle, using high-contrast black and white to ensure readability and direct attention to action. The system forgoes accent hues entirely, trusting the hierarchy of the interface to guide the user.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f3f3f3` | card background |
| `--bg-quiet` | `#efefef` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#5e5e5e` | placeholder |
| `--muted-soft` | `#afafaf` | weak hint |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** High-contrast monochrome foundation with functional grays for depth and hierarchy.

The absence of color becomes the defining characteristic, a deliberate constraint that reinforces trust and functional clarity.

## 3. Typography

Typography is rendered in a purely geometric sans-serif voice, chosen for its clarity and consistency across global contexts. The scale is reserved, serving communication rather than spectacle, with short, action-oriented headlines driving the user toward their next step.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headline 'Go anywhere with Uber' |
| h1 | 44px | 1.1 | 500 | -0.5px | Section headlines 'Explore what you can do with Uber' |
| h2 | 36px | 1.15 | 500 | 0px | Subsection headlines 'The Uber you know, reimagined for business' |
| body | 16px | 1.5 | 400 | 0px | General paragraph text and UI labels |
| caption | 14px | 1.4 | 400 | 0px | Secondary text and supporting details |

**Type rules:**
- Headlines use a geometric sans-serif with tight letter-spacing for a bold, modern feel.
- Body text uses a humanist sans-serif for maximum readability across devices.
- Maintain a clear weight hierarchy: 500 for headlines, 400 for body text.
- Avoid decorative or script fonts to preserve the platform's functional identity.

## 4. Spacing

Generous vertical spacing establishes a rhythmic cadence between sections, preventing visual clutter and allowing content to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit ensures visual harmony and predictable component sizing.

## 5. Surfaces

Surfaces are defined by subtle 1px borders and an almost complete absence of drop shadows, creating a flat, honest hierarchy. Depth is communicated through position and typographic weight, not through skeuomorphic layering.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.16) 0px 2px 8px 0px
- **Borders:** Subtle 1px solid lines in light gray (#efefef) for input fields and dividers.

## 6. Layout

The layout begins with an asymmetric two-column hero, structurally prioritizing the booking action. This primary node then gives way to a clean grid of feature cards, maintaining a singular focus throughout the user's journey.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A two-column hero layout with a prominent form on the left and illustrative imagery on the right.

## 7. Motion & Interaction

Motion is a subtle support actor, designed for efficiency rather than expression. Transitions use a smooth, consistent easing curve to connect states fluidly, ensuring the interface feels responsive without becoming performative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth background transitions for interactive elements.
  - Subtle scaling and color shifts on hover states.
  - Clean fade-ins for modal and overlay content.

- **Hover:** Subtle background-color shifts or opacity changes to indicate interactivity.
- **Click:** Immediate visual feedback with background-color transitions.
- **Transition:** All interactive elements use smooth 0.2s transitions for a polished feel.
- **Keyboard:** Standard focus states with clear outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, helpful, and stripped of unnecessary jargon. Every headline and call-to-action is a short, imperative phrase, engineered to propel the user toward a clear outcome.

- **Tone:** Confident, helpful, and straightforward, emphasizing ease and global reach.
- **Headline style:** Bold, action-oriented statements that clearly communicate the platform's value.
- **CTA style:** Direct and imperative, using clear verbs like 'Get started', 'See prices', or 'Sign up'.
- **Avoid:** Avoid overly technical jargon or complex metaphors. / Avoid aggressive or overly casual language. / Avoid excessive use of exclamation points or superlatives.

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a strict black, white, and gray palette.
- ❌ Don't use decorative or script fonts — screenshot shows clean, geometric and humanist sans-serifs.
- ❌ Don't use heavy drop shadows — screenshot shows subtle, soft shadows for depth.
- ❌ Don't use complex gradients — screenshot shows solid color fills and simple background images.
- ❌ Don't use cramped layouts — screenshot shows generous whitespace and clear section separation.
- ❌ Don't use playful or rounded UI elements — screenshot shows functional, slightly rounded but professional components.

The system deliberately avoids high-chroma accents, serif typography, and decorative excess to maintain its core promise of utility and trust.

## System Prompt (paste into AI tool)

```
This is Uber's consumer-facing web platform, positioned as a high-utility, global transportation service. The design DNA is built on a high-contrast monochrome palette (#000000, #ffffff, #f3f3f3) with clean, functional grays. Typography relies on a geometric sans-serif for bold headlines (weight 500) and a humanist sans-serif for readable body text (weight 400). Critical donts: never use multiple accent colors (the palette is strictly monochrome), avoid decorative fonts (the system uses clean, professional sans-serifs), and never use heavy shadows or complex gradients (the design favors subtle depth and solid fills). The layout is a clean, two-column hero with a prominent functional form, emphasizing utility and ease of use.
```
