---
version: alpha
name: Uber
description: "Black ink on white space, Uber Move set huge — mobility as pure contrast."
colors:
  on-surface-variant: "#4A4A4A"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#4B4B4B"
  primary: "#9DCDD6"
  gray-5e: "#5E5E5E"
  gray-af: "#AFAFAF"
  fill-light: "#F6F6F6"
  fill-card: "#F3F3F3"
  pill-gray: "#EFEFEF"
typography:
  caption:
    fontFamily: Uber Move Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-small:
    fontFamily: Uber Move Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Uber Move Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Uber Move Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: Uber Move Text
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading:
    fontFamily: Uber Move Text
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.01em
  section:
    fontFamily: Uber Move Text
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  display:
    fontFamily: Uber Move
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  pill-button-pill-input: 999px
  large-card: 16px
  standard-card: 12px
  rounded-control-cta: 8px
  small-control: 6px
  hero-illustration-frame: 36px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 36px
---
# Uber — Style Reference
> Black ink on white space, Uber Move set huge — mobility as pure contrast.

**Theme:** light

Uber's system is a two-color argument: near-total black on near-total white, with a short gray ramp doing all the work in between. There is no brand accent color in the chrome — the only saturated hue on the page (`#9DCDD6`, a soft teal) lives inside the hero illustration, never in a button or a link. The signature move is Uber Move, a geometric proprietary sans set enormous (52px display, 700 weight) and tight, so a two-word headline like "Go anywhere with Uber" becomes the largest object on the screen. Actions are pill-shaped (999px) and monochrome — black pill on white, white pill on black, gray pill (`#EFEFEF`) for tertiary. The layout is calm and gridded: a contained page, generous white gutters, and flat `#F3F3F3`/`#F6F6F6` cards that carry an illustration and a "Details" pill, with elevation conveyed by luminance steps rather than heavy shadow.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#000000` | `--color-black` | Primary ink, nav bar, headings, primary button fill. The brand is black — used with total confidence, never softened. |
| White | `#FFFFFF` | `--color-white` | Canvas and the text/fill that rides on black (nav labels, primary-button text, Sign up pill). |
| Ink 4A | `#4A4A4A` | `--color-ink-strong` | Strong secondary text — dark enough to read as near-black body copy. |
| Ink 4B | `#4B4B4B` | `--color-ink-border` | Secondary text and the darkest hairline border tone. |
| Gray 5E | `#5E5E5E` | `--color-ink-muted` | Muted supporting copy under card headings and captions. |
| Gray AF | `#AFAFAF` | `--color-ink-faint` | Faint text — placeholders, disabled, least-important labels. |
| Fill Light | `#F6F6F6` | `--color-fill` | Input-field fill (Pickup / Dropoff) and the lightest surface step. |
| Fill Card | `#F3F3F3` | `--color-surface` | Explore-card background and the standard hairline border. |
| Pill Gray | `#EFEFEF` | `--color-fill-strong` | Tertiary/secondary pill button fill on white. |
| Illustration Teal | `#9DCDD6` | `--color-illustration` | Soft teal — appears ONLY inside hero illustration art, never as a UI accent, link, or CTA. |

## Tokens — Typography
### Uber Move — display & headings: the proprietary geometric sans, set large and tight for hero display and section titles · `--font-display`
- **Substitute:** system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif
- **Weights:** 200, 400, 500, 600, 700 (headings run 700; hero display is 700 at 52px)
- **Sizes:** 52px (hero), 36px (section), 24px, 20px
- **Line height:** tight, ~1.0–1.1 on display
- **Letter spacing:** slightly negative on large display; the geometry does the work
- **Role:** Every headline. Its job is to be the biggest, most confident object on the page.

### Uber Move Text — body & UI: the text-optimized companion for paragraphs, labels, inputs, and buttons · `--font-body`
- **Substitute:** system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif
- **Weights:** 200, 400, 500, 600 (body 400; buttons and UI labels 500)
- **Sizes:** 18px, 16px (body), 14px (buttons/labels), 12px (fine print)
- **Line height:** ~1.4–1.5 for body copy
- **Letter spacing:** neutral / normal
- **Role:** Card copy, input placeholders, button labels, nav items — everything that is read rather than seen.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | normal | `--text-caption` |
| Body Small | 14px | 1.45 | normal | `--text-sm` |
| Body | 16px | 1.5 | normal | `--text-base` |
| Body Large | 18px | 1.5 | normal | `--text-lg` |
| Subheading | 20px | 1.3 | tight | `--text-xl` |
| Heading | 24px | 1.25 | tight | `--text-2xl` |
| Section | 36px | 1.1 | tight | `--text-3xl` |
| Display | 52px | 1.05 | -0.01em | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |
| 2xl | 36px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Pill button / pill input | 999px |
| Icon / avatar circle | 50% |
| Large card | 16px |
| Standard card | 12px |
| Rounded control / CTA | 8px |
| Small control | 6px |
| Hero illustration frame | 36px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Float | `rgba(0, 0, 0, 0.16) 0px 4px 16px 0px` | `--shadow-float` |

### Layout
- **Page max-width:** contained centered column (~1200px), wide white gutters
- **Section gap:** ~36–64px between hero and explore grid
- **Card padding:** ~16–24px
- **Element gap:** 8–16px between stacked inputs and controls

## Components
### Primary Button (black pill)
**Role:** The main commit action — "See prices", "Sign up".
Fill `#000000`, text `#FFFFFF`, radius 999px, padding 10px 12px, 14px / 500 Uber Move Text. The "See prices" hero CTA variant uses radius 8px with padding 14px 25px at 16px. No border, no shadow — contrast alone carries it.

### Inverted Button (white pill)
**Role:** The primary action when placed ON the black nav bar (Sign up).
Fill `#FFFFFF`, text `#000000`, radius 999px, padding 10px 12px, 14px / 500. Same geometry as the black pill, colors flipped.

### Tertiary Button (gray pill)
**Role:** Lower-priority action on a white surface (e.g. "Pickup now" selector, Details).
Fill `#EFEFEF`, text `#000000`, radius 999px, padding 14px 16px, 16px / 500. Reads as a control, not a commitment.

### Text Input (fill field)
**Role:** Pickup / Dropoff location entry.
Fill `#F6F6F6`, text `#000000`, no visible border, radius carried by the field container, padding 10px 14px 10px 48px (left inset reserves room for the leading location icon). Placeholder in faint gray. Icon-led, borderless, calm.

### Nav Bar
**Role:** Global top navigation.
Full-bleed `#000000` bar, `#FFFFFF` wordmark and labels at 14–16px, dropdown carets for grouped menus (Earn, About). A single white Sign up pill anchors the right edge. Language + Help + Log in as plain white links.

### Display Heading
**Role:** The hero statement.
Uber Move 52px / 700, `#000000`, tight leading, two lines max. This is the largest element on the page by design.

### Section Heading
**Role:** Introduces a content block ("Explore what you can do with Uber").
Uber Move 36px / 700, `#000000`.

### Explore Card
**Role:** A tappable feature tile in the explore grid (Ride, Reserve, Food…).
Background `#F3F3F3`, radius ~12px, contains a 20px/700 title, a `#5E5E5E` muted description at 14px, a spot illustration, and a white "Details" pill. Flat — depth comes from the fill step against white, not shadow.

### Details Pill
**Role:** Secondary in-card action.
White fill on the gray card, black label, radius 999px — an inverse of the card ground.

### Text Link
**Role:** Inline navigation ("Change city", "Log in to see your recent activity").
`#000000`, underlined, no color shift — Uber does not use a blue link color; emphasis is weight and underline only.

### Illustration Frame
**Role:** The hero art panel.
Large rounded container (radius up to 36px) holding a full-color spot illustration; a translucent info bar with a white "Schedule ahead" pill floats over its lower edge.

### Info Overlay Bar
**Role:** A caption + action floated over imagery.
Semi-transparent dark bar, `#FFFFFF` text at 18px / 500, white pill CTA on the right.

## Do's and Don'ts
### Do
- Set headlines in Uber Move at maximum confident size (52px display, 700) with tight leading.
- Keep all chrome monochrome: black, white, and the `#5E5E5E`/`#4B4B4B`/`#AFAFAF` gray ramp.
- Use 999px pills for actions and flip black/white by ground (black pill on white, white pill on black).
- Build surfaces from luminance steps — `#FFFFFF` canvas → `#F6F6F6` field → `#F3F3F3` card.
- Let icons lead inputs (48px left inset) and keep fields borderless.

### Don't
- Don't introduce a brand accent color into buttons or links — `#9DCDD6` teal is illustration-only.
- Don't color your links blue; use black + underline + weight for emphasis.
- Don't add heavy borders or drop shadows to cards; the gray fill is the separation.
- Don't mix Uber Move (display) and Uber Move Text (body) roles — headings get Move, everything read gets Move Text.
- Don't soften the black — `#000000` is the brand; use it at full strength.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page background. |
| 1 | Field | `#F6F6F6` | Input fills sitting on canvas. |
| 2 | Card | `#F3F3F3` | Explore tiles and grouped content. |
| 3 | Pill Gray | `#EFEFEF` | Tertiary control fills. |
| — | Inverse | `#000000` | Nav bar and any surface that flips the whole palette. |

## Elevation
Depth is almost entirely a luminance ladder, not shadow: white canvas → `#F6F6F6` field → `#F3F3F3` card each read as one step deeper without a single border. The lone shadow token (`rgba(0,0,0,0.16) 0px 4px 16px`) is reserved for genuinely floating objects — a menu or a card lifted over imagery. Borders, when they appear, are a single hairline in `#F3F3F3` or `#4B4B4B`, never boxes-in-boxes.

## Imagery
Rich, full-color spot illustrations and product renders — a packed suitcase, a car, a rental key, a grocery basket — each isolated on the flat card ground. The illustration palette is where all the color lives (the `#9DCDD6` teal, warm oranges, purples) precisely because the UI itself is monochrome; art carries warmth so the chrome can stay austere. Illustrations sit inside rounded frames (up to 36px) and cards, never bleeding full-width.

## Layout
Contained, centered, and gridded. The hero splits into a left action column (location, headline, inputs, CTA) and a right illustration panel. Below it, a section title introduces a responsive 3-up card grid of feature tiles. Full-bleed is reserved for the black nav bar; everything else lives in a max-width column with generous white gutters. Navigation is a single black top bar with grouped dropdown menus and a right-anchored auth cluster.

## Typography Signature
Uber runs a deliberate two-family split: Uber Move for anything *seen* and Uber Move Text for anything *read*. Move is the geometric, slightly condensed display face — set at 52px/700 with tight leading, a two-word headline dominates the viewport, which is the whole point of a mobility brand promising "anywhere." Move Text is quieter and text-optimized, carrying 14–18px UI copy at normal spacing and ~1.5 line height so cards and forms stay legible. The signature is scale contrast: enormous tight display against small calm body, with zero italic and zero color — hierarchy is size and weight alone.

## Agent Prompt Guide
## Quick Color Reference
- background: #FFFFFF / text: #000000 / surface: #F3F3F3 / border: #F3F3F3 / accent: none (illustration-only #9DCDD6) / primary action: #000000 (black pill)

## Example Component Prompts
1. **Hero headline**: Uber Move 700 at 52px, color #000000, tight leading, on a #FFFFFF canvas, two lines max ("Go anywhere with Uber").
2. **Black pill CTA**: button fill #000000, text #FFFFFF, radius 999px, padding 10px 12px, font Uber Move Text 14px / 500, no border, no shadow.
3. **Location input**: fill #F6F6F6, no border, text #000000, placeholder #AFAFAF, padding 10px 14px 10px 48px with a leading location icon, Uber Move Text 16px / 400.
4. **Explore card**: background #F3F3F3, radius 12px, padding 16–24px, title Uber Move 20px / 700 #000000, description Uber Move Text 14px #5E5E5E, spot illustration top-right, white "Details" pill (radius 999px) bottom-left.
5. **Top nav**: full-bleed #000000 bar, #FFFFFF wordmark + 14–16px labels with dropdown carets, right-anchored white "Sign up" pill (radius 999px, text #000000).

## Similar Brands
- **Nike (nike.com)** — the same monochrome-plus-one-proprietary-sans confidence, headlines set huge and tight to shout with type alone.
- **Apple** — restraint through near-total black/white and system-level typographic scale contrast; color reserved for product imagery.
- **Linear** — flat luminance-step surfaces and disciplined grayscale UI where hierarchy is weight and spacing, not accent color.
- **Lyft** — a mobility peer, but the inverse aesthetic (rounded pink playfulness) — useful as the anti-reference that clarifies Uber's austerity.
- **Vercel** — pure black-and-white chrome with a geometric sans and zero decorative color in the interface.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-ink-strong: #4A4A4A;
  --color-ink-border: #4B4B4B;
  --color-ink-muted: #5E5E5E;
  --color-ink-faint: #AFAFAF;
  --color-fill: #F6F6F6;
  --color-surface: #F3F3F3;
  --color-fill-strong: #EFEFEF;
  --color-illustration: #9DCDD6;

  /* Typography — Families */
  --font-display: 'UberMove', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'UberMoveText', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-display: 52px;
  --leading-display: 1.05;
  --leading-tight: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 36px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-frame: 36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadow */
  --shadow-float: rgba(0, 0, 0, 0.16) 0px 4px 16px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-ink-strong: #4A4A4A;
  --color-ink-border: #4B4B4B;
  --color-ink-muted: #5E5E5E;
  --color-ink-faint: #AFAFAF;
  --color-fill: #F6F6F6;
  --color-surface: #F3F3F3;
  --color-fill-strong: #EFEFEF;
  --color-illustration: #9DCDD6;

  /* Typography — Families */
  --font-display: 'UberMove', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'UberMoveText', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-display: 52px;
  --leading-display: 1.05;
  --leading-tight: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 36px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-frame: 36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadow */
  --shadow-float: rgba(0, 0, 0, 0.16) 0px 4px 16px 0px;
}
```