Uber Design System Deep-Dive

1. Brand Overview

Uber’s brand design language is utilitarian, stripped back, and almost aggressively functional. It’s not here to charm you with flourishes—it’s here to get you from point A to point B, fast. The site is designed for an audience that values clarity over decoration: riders checking a price, couriers signing up, business accounts being managed. Everything about the visual system says: “We’re global, we’re reliable, and we’re neutral enough to fit in anywhere.”

They lean heavily on black and white. Not charcoal, not slate—actual black (#000000) and pure white (#ffffff). That makes sense for a brand that wants ultimate flexibility across cultures and contexts. It’s also a nod to their app experience, which is minimal and map-driven. The occasional injection of blue (#0000ee) or red (#e11900) is not branding ornamentation—it’s functional signaling: links, focus rings, errors.

Typography is custom. They use UberMove and UberMoveText, their proprietary typefaces, built for high legibility and a distinctive but neutral personality. There’s no serif anywhere. No humanist curves. It’s straight, geometric sans-serif with consistent stroke weights. The fallback stack goes to system-ui, Helvetica Neue, Helvetica, Arial—safe defaults on every platform.

Spacing is strict—8px base grid, with some 4px and 2px sub-increments in tight spots. You can tell they care about vertical rhythm and proportionality. Border radii are either small (4px, 8px) for cards and inputs or extreme (999px) for pills. No in-between. That’s a brand choice: either keep it sharp-ish or go fully round.

Shadows are rare and subtle, mostly rgba(0, 0, 0, 0.12) or 0.16 with soft spreads. They don’t rely on depth for hierarchy—color and spacing do the heavy lifting.

In short: Uber’s design system is functional minimalism. It’s meant to be invisible until you need it, then instantly clear. Not cozy, not playful—just efficient.

2. Color System

2.1 Primary Colors

Uber’s “primary” is actually black (#000000), not a color in the traditional sense. That’s unusual—most brands pick a chromatic primary. For Uber, black serves as the anchor. It’s on primary buttons, headings, and navigation bars. It communicates authority, simplicity, and adaptability.

Their link color is #0000ee—classic browser blue. That’s a strong statement: they’re not reinventing link behavior. They want it instantly recognizable. Competitors like Lyft go for branded pinks and purples; Uber is happy with default blue.

Red (#e11900) shows up in error states and urgent signals. It’s high-contrast against their white backgrounds, and distinct enough from blue to avoid confusion.

Grays (#757575, #5e5e5e, #f3f3f3) handle UI hierarchy: text secondary, divider lines, backgrounds. Uber uses them sparingly—most content is black on white.

2.2 Complete Palette

2.3 Color Relationships

Black on white yields maximum contrast (WCAG AAA easily). Blue on white for links is also strong. Gray text on white drops contrast but remains readable for secondary info (check WCAG if using #757575 for small text—it’s borderline at small sizes). Red on white pops hard—good for alerts but needs careful use to avoid overwhelming.

They don’t appear to implement a dark mode here—the palette is designed for light backgrounds.

2.4 Usage Guide

• Safe combos: Black text on white, blue links in black text body, red for errors only.
• Avoid: Blue on black—it fails accessibility. Gray-on-gray—too low contrast.
• Functional rules: Only use #0000ee for links; red only for destructive/error states; grays for subdued content.

3. Typography

3.1 Font Families

• UberMove — Primary display font (headings, large links). Fallbacks: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial.
• UberMoveText — Body and UI font. Fallbacks: system-ui, Helvetica Neue, Helvetica, Arial.

No Google Fonts, no Adobe Fonts—the fonts are custom-hosted.

3.2 Type Scale

3.3 Hierarchy

They rely on large size jumps for headings: 52px → 36px → 32px. There’s no H4-H6 in this data—they probably collapse down to 24px and 16px. Body stays in the 14–16px range. High weights (700) for headings and key links make them stand out without color changes. UberMoveText weights vary from 400 to 500 for subtle emphasis.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Uber uses sub-steps (2px, 4px, 6px) for tight controls.

4.2 Layout

Breakpoints: 320px, 600px, 767px, 768px, 1119px, 1120px, 1136px. Pretty granular—they likely target specific device widths.

5. Visual Elements

Border Radius: Two personalities—small radii (4px, 8px, 12px, 20px) for boxes, and 999px for pills. 50% for circular icons.

Shadows: Soft, subtle:

• rgba(0, 0, 0, 0.12) 0px 4px 16px
• rgba(0, 0, 0, 0.16) 0px 4px 16px
• rgba(0, 0, 0, 0.16) 0px 2px 8px

No heavy drops—keeps the UI flat-ish.

Borders: Mostly 1–2px solid or inset in grays and blacks. Dividers are 1px solid rgba(0, 0, 0, 0.12).

6. Components

6.1 Buttons

Primary (css-lWgfA):

• Default: background: #000000, color: #ffffff, padding 10px 12px, radius 999px, border none.
• Active: box-shadow: rgba(255,255,255,0.2) 999px 999px 0px inset.
• Focus: double outline—white inset 2px + blue outer (#276ef1) 2px.

Secondary (css-evYoZq):

• Default: background: #ffffff, color: #000000, padding 10px 12px, radius 999px.
• Hover: background: #e2e2e2, text stays black.
• Focus: same double outline as primary, with hover background.

Tertiary/Gray (css-iZJMaq):

• Default: background: #efefef, color: #000000, padding 14px 16px, radius 999px.
• Active: subtle black inset shadow.
• Focus: same double outline.

6.2 Links

Variants:

1. Blue link: #0000ee, underline always.
2. White link: no underline, hover keeps white.
3. Black link: underline default.
4. Gray link: #afafaf, no underline, hover to white.

6.3 Forms

Text input: transparent background, no border, padding 0. Minimal style—depends on container.

6.4 Cards

No explicit card component in data, but shadows and 8px radius suggest usage.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-gray-700: #757575;
  --color-gray-600: #5e5e5e;
  --color-gray-100: #f3f3f3;
  --color-red-error: #e11900;

  /* Typography */
  --font-uber-move: "UberMove", "UberMoveText", system-ui, "Helvetica Neue", Helvetica, Arial;
  --font-uber-move-text: "UberMoveText", system-ui, "Helvetica Neue", Helvetica, Arial;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-29-88: 29.88px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-100: 100px;
  --space-150: 150px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.12) 0px 4px 16px;
  --shadow-md-dark: rgba(0, 0, 0, 0.16) 0px 4px 16px;
  --shadow-sm-dark: rgba(0, 0, 0, 0.16) 0px 2px 8px;
}

8. AI Coding Assistant Prompt

# Uber Design System Specification

You are an Uber design expert. Build UIs matching their visual language exactly.

## Brand Context
Uber values functional minimalism and high clarity. The design language is black-and-white dominant, with occasional blue for links and red for errors. Typography is custom sans-serif, spacing follows an 8px grid, and components are either sharp or fully rounded.

## Color Palette
- Link Blue: #0000ee — Hyperlinks, inline interactive text
- White: #ffffff — Page background, text on dark surfaces
- Gray-700: #757575 — Secondary text
- Gray-600: #5e5e5e — Alternative body text
- Gray-100: #f3f3f3 — Surface backgrounds
- Red Error: #e11900 — Validation errors, alerts

## Typography
- Headings: "UberMove", fallback "UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial"
- Body/UI: "UberMoveText", fallback "system-ui, Helvetica Neue, Helvetica, Arial"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 52px | 700 | 1.23 | Page titles |
| H1 alt | 36px | 700 | 1.22 | Section titles |
| Link large | 32px | 700 | 1.25 | Key action links |
| H1 small | 24px | 700 | 1.33 | Sub-headings |
| Body | 16px | 400/500 | 1.50 | Main text |
| Caption | 14px | 400/500 | 1.14-1.71 | Supporting text |
| Small caption | 12px | 400 | 1.67 | Meta info |

## Spacing & Grid
Base: 8px grid. Values: 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 29.88px, 32px, 40px, 48px, 64px, 100px, 150px.

## Border Radius
- sm: 4px — images, small cards
- md: 8px — listboxes, CTA buttons, cards
- lg: 12px — larger blocks
- xl: 20px — special divs
- full: 999px — pill buttons, avatars
- circle: 50% — icons

## Shadows & Depth
- md: rgba(0, 0, 0, 0.12) 0px 4px 16px
- md-dark: rgba(0, 0, 0, 0.16) 0px 4px 16px
- sm-dark: rgba(0, 0, 0, 0.16) 0px 2px 8px

## Component Specifications

### Primary Button
Default: black bg, white text, 10px 12px padding, radius 999px, font 14px/500, no border.
Active: inset white shadow.
Focus: white inset + blue outline.

### Secondary Button
Default: white bg, black text, 10px 12px padding, radius 999px.
Hover: bg #e2e2e2.
Focus: same as primary.

### Gray Button
Default: #efefef bg, black text, 14px 16px padding, radius 999px.

### Links
- Blue: underline always
- White: no underline
- Black: underline default
- Gray: hover to white

### Input Fields
Transparent bg, no border, no radius, padding 0.

## Layout & Responsive Rules
Breakpoints: 320px, 600px, 767px, 768px, 1119px, 1120px, 1136px. Use container max widths accordingly.

## Interaction Rules
- Transition: 150ms ease for hover/focus.
- Focus indicators: double outline on buttons.

## DO List
- Use only palette colors
- Maintain multiples of 8px for spacing
- Use UberMove for headings, UberMoveText for body
- Keep buttons pill-shaped or square corners—no mixed
- Use double focus outline on interactive elements

## DON'T List
- No custom colors
- No heavy shadows
- No mixing radii styles
- No removing link underlines for blue variant
- No gray-on-gray text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:focus {
  box-shadow: #ffffff 0 0 0 2px inset, #276ef1 0 0 0 2px;
}

Card

.card {
  background: #f3f3f3;
  border-radius: 8px;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px;
}

Input

.input {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 16px;
}

---

## 9. Summary

**TL;DR** — Uber’s design system is pure functional minimalism: black, white, blue links, red errors, tight 8px grid, pill buttons, sans-serif everything. It’s designed for speed and clarity, not personality.

**Brand Keywords** — global-neutral, functional-minimalist, contrast-driven, utilitarian-clean, grid-disciplined