# Uber — Design Reference

> Black and white, bold and blunt, with pills for everything you tap

**Theme:** dark · **Measured from:** uber.com (English, 1440 px; redirected to the Brazil English site)

Uber looks like a tool, not an ad. The page is pure black `#000000`, the headline is two bold words ("Go anywhere") in Uber Move 700, and right under it is the product itself: a booking form with light-gray `#f6f6f6` fields and a white "See prices" button. There is no accent color anywhere — no green, no blue. Contrast is the brand: black and white, with a few grays to separate layers (`#292929` tiles on black, `#f6f6f6` fields on black or white). Main actions are solid rectangles with an 8px radius; every small control (nav items, time selector, "Details", "Sign up") is a fully rounded pill. Color only comes from photos and small 3D illustrations of cars, calendars and scooters.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Black | `#000000` | Main canvas; primary button on white sections |
| White | `#ffffff` | Text on black; primary button on black; lower canvas |
| Jet | `#111111` | Nav pill fill; text on light pills |
| Charcoal Tile | `#292929` | Service cards on black |
| Field Gray | `#f6f6f6` | Inputs, light pills, round arrows, app band |
| Pill Gray | `#f0f0f0` | "Pickup now" time selector |
| Body Gray | `#333333` | Body text on white |
| Muted Gray | `#4a4a4a` | Secondary text on white |
| Underline Gray | `#cbcbcb` | Link underline track |

Uber's CSS defines amber, blue and other ramps, but none appear in the homepage UI. Stay monochrome.

## Typography

**UberMove** for headlines. Substitute: **Inter Tight 700** from Google Fonts.
**UberMoveText** for everything else. Substitute: **Inter** 400/500 from Google Fonts.

- Headlines are always weight 700, normal tracking, sentence case, short: "Go anywhere", "Explore what you can do with Uber".
- Small headings (card titles, step titles) are UberMoveText 500 at 18px — not bold.
- Buttons and nav use 500; body uses 400.
- Text links are underlined with a 1px line (white over a `#cbcbcb` track): "Change city", "Log in to check your activity".

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 52px | 700 | 1.23 | 0 |
| Heading | 36px | 700 | 1.22 | 0 |
| Heading small | 24px | 700 | 1.33 | 0 |
| Subheading | 18px | 500 | 1.33 | 0 |
| Body | 16px | 400 | 1.5 | 0 |
| Button | 16px | 500 | 1.25 | 0 |
| Body small | 14px | 400 | 1.43 | 0 |
| Caption | 12px | 400 | 1.67 | 0 |

## Shape and spacing

- **Primary buttons, inputs and cards:** 8px radius.
- **Pills (nav, chips, selectors, "Details"):** `999px`.
- **Carousel arrows:** circles, 52px.
- **Base unit:** 4px. Scale: 4, 8, 12, 16, 24, 48, 64, 120.
- **Content width:** 1280px container (text column starts 144px in at 1440).
- **Section gap:** about 120px.

## Components

### Primary button
On black: White fill, black text. On white: Black `#000000` fill, white text. 8px radius, padding `14px 25px`, 48px tall, UberMoveText 500 at 16px. No shadow. Labels: "See prices", "Learn more", "Sign up now".

### Pill button
Field Gray `#f6f6f6` or White fill, Jet `#111111` text, `999px` radius, padding `14px 16px`, 48px tall, often with a leading icon and trailing chevron: "Pickup now ⌄", "Schedule ahead". Small version on cards: white "Details" pill, about 36px tall.

### Navigation
Black bar. White "Uber" wordmark on the left, then Ride, Earn, Travel, Business, About as Jet `#111111` pills (36px tall, padding `10px 12px`, 14px weight 500, text `#fcfcfc`). Right side: globe "EN", "Help", "Log in" as the same dark pills and "Sign up" as a white pill with black text.

### Booking form
The hero's core: a location line ("📍 Petrolina, BR · Change city"), the headline, a "Pickup now" pill, two stacked Field Gray inputs (56px tall, 8px radius, leading dot/square icons, joined by a thin vertical line), then the white "See prices" button with an underlined text link beside it.

### Service card
Charcoal Tile `#292929`, 8px radius, about 372×160, in a 3-column grid. White 18px/500 title top-left, 14px description, a white "Details" pill bottom-left and a small 3D illustration on the right.

### Step card
Photo on top with a white square icon tile overlapping its lower-left corner, then an 18px/500 title and 14px body. Laid out three-up in a carousel with round arrows and a "1/2" counter.

## Do

- Keep the page black and white; let photos and 3D illustrations supply color.
- Put a working product control (booking form) in the hero.
- Use 8px rectangles for main actions and pills for small controls.
- Invert the primary button by background: white on black, black on white.
- Use bold 700 headlines and 500 for small headings.
- Underline text links.

## Don't

- Don't introduce an accent color for buttons or links.
- Don't make the main CTA a pill; reserve pills for secondary controls.
- Don't add shadows or gradients to cards.
- Don't use light or thin headline weights.
- Don't use long marketing headlines; two to six words.
- Don't put gray body text on the black canvas below 14px.

## Layout

Hero: two columns inside 1280px — left, the booking form under a 52px headline; right, a mosaic of four photos with a translucent "Ready to travel? · Schedule ahead" bar. Then a 36px headline over a 3×2 grid of service cards, a "How to request a ride" step carousel, a split block (text + photo) for travel planning, a "More ways to use Uber" three-up row, and a membership split block. The page then switches to white for "Earn with Uber" and a business split block, ending on a `#f6f6f6` band with two white QR-code app cards.

## Agent prompt guide

- Text on black: `#ffffff` · Text on white: `#000000` / `#333333` · Muted: `#4a4a4a`
- Canvas: `#000000` · Tiles: `#292929` · Fields and pills: `#f6f6f6` · Nav pills: `#111111`
- Action: white on black / black on white, 8px radius

Example prompts:

1. "Hero on #000000: 52px Inter Tight 700 white headline 'Go anywhere'; a #f0f0f0 pill 'Pickup now' (999px radius, 48px tall, Inter 500 16px #111111); two stacked #f6f6f6 inputs, 56px tall, 8px radius; a white 'See prices' button, 8px radius, padding 14px 25px, black Inter 500 16px."
2. "Service card: background #292929, 8px radius, 372x160; title Inter 500 18px white top-left, 14px white description, white pill 'Details' bottom-left, small 3D illustration on the right."
3. "Top nav on black: white wordmark left; items as #111111 pills, 36px tall, padding 10px 12px, Inter 500 14px #fcfcfc; right side 'Log in' dark pill and 'Sign up' white pill with black text."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-jet: #111111;
  --color-charcoal-tile: #292929;
  --color-field-gray: #f6f6f6;
  --color-pill-gray: #f0f0f0;
  --color-body-gray: #333333;
  --color-muted-gray: #4a4a4a;
  --color-underline-gray: #cbcbcb;

  /* Fonts */
  --font-display: 'UberMove', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'UberMoveText', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 52px;
  --text-display--line-height: 1.23;
  --text-display--font-weight: 700;
  --text-heading: 36px;
  --text-heading--line-height: 1.22;
  --text-heading--font-weight: 700;
  --text-heading-sm: 24px;
  --text-heading-sm--line-height: 1.33;
  --text-heading-sm--font-weight: 700;
  --text-subheading: 18px;
  --text-subheading--line-height: 1.33;
  --text-subheading--font-weight: 500;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1.25;
  --text-button--font-weight: 500;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.43;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.67;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 8px;
  --radius-tags: 999px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1280px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-jet: #111111;
  --color-charcoal-tile: #292929;
  --color-field-gray: #f6f6f6;
  --color-pill-gray: #f0f0f0;
  --color-body-gray: #333333;
  --color-muted-gray: #4a4a4a;
  --color-underline-gray: #cbcbcb;

  /* Fonts */
  --font-display: 'UberMove', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'UberMoveText', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 52px;
  --text-display--line-height: 1.23;
  --text-display--font-weight: 700;
  --text-heading: 36px;
  --text-heading--line-height: 1.22;
  --text-heading--font-weight: 700;
  --text-heading-sm: 24px;
  --text-heading-sm--line-height: 1.33;
  --text-heading-sm--font-weight: 700;
  --text-subheading: 18px;
  --text-subheading--line-height: 1.33;
  --text-subheading--font-weight: 500;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1.25;
  --text-button--font-weight: 500;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.43;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.67;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 8px;
  --radius-tags: 999px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1280px;
}
```

---

*Measured from https://www.uber.com/br/en/ on 2026-10-28 by Faundr. Inspired by Uber; not its official design system and not affiliated with Uber.*