---
title: "Uber design system"
variant: extended
source: https://www.uber.com/?city=los-angeles
captured_at: 2026-10-12
theme: dark
industry: travel
generator: Design DNA (https://four.wiralomi.com/style/uber-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Uber · Design System

> A high-contrast canvas for everyday mobility

**Theme:** dark · **Industry:** travel · **Source:** https://www.uber.com/?city=los-angeles · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Uber’s homepage pairs a black canvas and crisp typography with practical tools for rides, delivery, and earning. Modular cards and large lifestyle images guide visitors through distinct services without adding visual clutter.

## North star

Keep the interface stark and useful: let white-on-black typography and real service imagery carry the experience.

## Overview

The page is anchored by a black canvas, with white text and controls creating a deliberately stark, high-contrast interface. The opening ride-booking area sets utility first: location and destination fields sit beside a collage of travel photography, with a prominent white action button. UberMove supplies bold display headings; UberMoveText carries navigation, body copy, and controls in a compact, legible sans-serif. Most service sections use a spacious, centered content area, with three-column cards or two-column image-and-copy splits. The rhythm alternates service cards, instructional steps, wide media, and calls to action, while section changes are mostly conveyed by content and imagery rather than decoration. Photography is the main source of color and texture. Some page bands invert to white for the Uber Eats content, where black text and buttons remain clear. Cards use restrained dark-gray surfaces and rounded corners; the overall treatment is flat, with little visible shadow.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary text and light canvas; also used for booking fields, CTA buttons, QR panels, and selected section bands. |
| Night Canvas | `#000000` | `--color-night-canvas` | brand | Dominant page canvas and footer; used for dark-section text, links, and inverse CTA backgrounds. |
| Soft Silver | `#cbcbcb` | `--color-soft-silver` | neutral | Measured in a subtle gradient hairline; a restrained divider tone, not a defining page color. |
| Charcoal Card | `#292929` | `--color-charcoal-card` | surface | Dark service-card surface against the black page canvas, most visible in the opening feature grid. |
| Footer Ash | `#afafaf` | `--color-footer-ash` | neutral | Muted footer text for secondary legal and utility information. |

### Semantic aliases

`--color-canvas` → `#000000` (Night Canvas) · `--color-surface` → `#ffffff` (Signal White) · `--color-surface-2` → `#292929` (Charcoal Card) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#000000` (Night Canvas) · `--color-border` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#292929` | 14.55:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#292929` | 1.44:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(255, 255, 255) 1px), linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(203, 203, 203) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UberMoveText | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, captions, and links | Inter |
| UberMove | `--font-display` | webfont | 700, 400 | Display headings and prominent section titles | Inter |

- **UberMoveText:** Regular and medium weights; functional, legible sans-serif with restrained tracking and natural casing.
- **UberMove:** Bold display weight creates rounded, assertive headings; sentence case with no measured letter spacing.

### Type scale — Perfect Fifth (ratio ≈ 1.481, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 700 | 1.23 | 0 | — | UberMove | Primary hero headline, including “Go anywhere.” |
| h2 | 36px | 700 | 1.22 | 0 | — | UberMove | Major service section headings. |
| h3 | 24px | 700 | 1.33 | 0 | — | UberMove | Card titles and instructional step headings. |
| body | 16px | 400 | 1.5 | 0 | — | UberMoveText | Service descriptions, explanations, and supporting copy. |
| caption | 12px | 400 | 1.67 | 0 | — | UberMoveText | Compact secondary labels and supporting details. |
| button | 16px | 500 | 1.25 | 0 | — | UberMoveText | Booking, service, and account action labels. |
| nav | 14px | 500 | 1.14 | 0 | — | UberMoveText | Header navigation and compact menu labels. |
| link | 18px | 500 | 1.33 | 0 | — | UberMoveText | Text links and secondary calls to action. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 36, 64 px.
- Section rhythm 64px · element gap 36px · card padding — · max content width 1152px.

The measured content max width is 1152px, with wide margins and a spacious overall density. The page begins with a two-column booking hero and continues through three-column service grids, instructional steps, and image-and-copy splits. Sections follow a measured 64px rhythm, with generous gaps between content groups. Headings align left, while media is often paired with adjacent copy rather than centered in isolation. A white Eats band interrupts the dark canvas before the page returns to black for earning, business, apps, and footer content.

## Shape & elevation

- Radius: button `8px` · card `8px` · nav `9999px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0, 0, 1, 1)` on interactive elements.

The interface is mostly flat: no measured shadows define the cards or sections. Contrast comes from black and white section bands, photography, and the charcoal service-card surface. Cards and controls use modest rounded corners, while borders are sparse; image outlines in the Eats and earning areas are visible accents from the content rather than a general elevation system.

## Imagery

Photographic lifestyle imagery dominates: travel scenes, drivers, meals, delivery, and people using services. The hero assembles several images into a collage, while later sections use wide banners, card thumbnails, and paired feature images. Media is generally rectangular with modest rounded corners; small service illustrations appear within cards. A video provides motion in the getaway section. Image colors are allowed to supply contrast against the otherwise restrained black-and-white palette.

## Components

### Ride booking form

Hero form pairs a white pickup selector and stacked light location fields with a white “See prices” button and a text link on black.

### Service cards

The opening six-card grid uses #292929 surfaces, white titles and copy, concise details links, and small service imagery.

### Instruction steps

A three-step ride-request sequence combines a thumbnail image, an icon tile, a short heading, and compact explanatory text.

### Media feature split

Wide photo or video media is paired with left-aligned copy and a direct action, keeping the content legible against the section canvas.

### Food service band

A white section contrasts with the dark page, using black text and buttons beside food and grocery photography.

### App download panels

Two white QR download panels sit side by side with a code, app label, scan instruction, and directional icon.

### Footer navigation

A black footer organizes numerous utility and company links into columns, with muted legal details and compact location controls.

### Measured component styles

- **Primary button** (“See prices”): background #ffffff · text #000000 · radius 8px · padding 14px 25px · 500 16px UberMoveText
- **Secondary button** (“Search restaurants”): background #000000 · text #ffffff · radius 8px · padding 14px 25px · 500 16px UberMoveText
- **Link** (“Log in to check your activity”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px sans-serif
- **Card** (“Ride Go anywhere with Uber. Request a ri”): background #292929 · text #ffffff · radius 8px · padding 0px · 400 16px sans-serif
- **Navigation item** (“Ride”): transparent background · text #000000 · radius 0px · padding 0px 4px 0px 0px · 400 16px UberMoveText

## Do

- Use a black canvas for the primary page and footer.
- Use white text and controls to establish clear contrast.
- Keep headings bold, left-aligned, and sentence case.
- Group related services into compact, consistent card grids.
- Use real service photography as the main visual texture.
- Make key actions visually distinct with simple solid buttons.

## Don't

- Don’t introduce unmeasured brand colors into the interface.
- Don’t decorate flat sections with heavy shadows.
- Don’t crowd copy or controls around the hero booking form.
- Don’t use gradients as a dominant page treatment.
- Don’t replace practical labels with vague promotional copy.
- Don’t make card styling more prominent than its content.

## Agent prompt

Build a new Uber-style page with a near-black #000000 canvas and crisp #ffffff typography and controls. Use #292929 sparingly for dark service cards; reserve #cbcbcb for subtle hairline treatment and #afafaf for secondary footer details. Set bold UberMove-like display headings against readable UberMoveText-like body copy, navigation, and buttons. Structure content within a spacious centered area, alternating practical feature grids, instructional steps, and image-and-copy splits. Use real lifestyle photography in rectangular frames with modest rounding; let imagery provide color rather than adding decorative gradients. Keep surfaces mostly flat and shadows absent. Where a light content band is needed, use a white background with black copy and actions. Make interactions direct, labels concise, and primary actions easy to identify.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column booking hero with form on the left and a travel-image collage on the right. | Pickup and dropoff fields, Price lookup CTA, Schedule-ahead prompt | Black canvas, White form fields, Location collage |
| 2 | feature-grid | Three-column grid of dark service cards beneath a left-aligned section heading. | Service discovery, Details links | Charcoal cards, White copy, Small service illustrations |
| 3 | video | Standalone media area within a single-column section. | Passive visual storytelling | Dark surrounding canvas, Embedded visual media |
| 4 | how-it-works | Three instructional steps with imagery, icons, and text arranged across the content area. | Sequential instructions, Step navigation | Photo thumbnails, Icon tiles, Compact text |
| 5 | feature-split | Left-aligned copy and location control paired with a large video on the right. | Location selection, Travel exploration CTA | Copy-and-video split, Dark canvas |
| 6 | feature-grid | Three-column set of image-led service features with copy and direct links. | Compare service options, Direct service links | Photo thumbnails, Small vehicle illustrations, Open spacing |
| 7 | gallery | Wide horizontal image spanning a single-column content section. | Brand storytelling | Wide lifestyle image, Rounded image corners |
| 8 | feature-grid | Two-column layout with large photographs, copy, and actions on a white band. | Restaurant discovery, Grocery shopping | White canvas, Black buttons, Photo-led columns |
| 9 | feature-split | Single-column section with left copy and a large accompanying image. | Membership promotion, Sign-up CTA | Copy-and-image pairing, Direct action button |
| 10 | gallery | Wide photographic banner crossing a section transition. | Lifestyle storytelling | Panoramic photo, Rounded corners |
| 11 | feature-grid | Three-column earning grid beneath a section title. | Driver sign-up, Delivery earning, Specialized skills | Photo cards, Blue image outlines, Text links |
| 12 | feature-split | Image and copy arranged side by side within a single-column section. | Business information, Learn-more link | Lifestyle and product imagery, White text |
| 13 | product-grid | Two side-by-side QR download panels under a left-aligned heading. | Scan to download, Separate rider and driver apps | White QR panels, App labels, Directional icons |
| 14 | footer | Large multi-column footer with utility links, site categories, social controls, and legal details. | Help and company navigation, Region and language selection | Black background, Compact link columns, Muted legal text |

## Source CSS custom properties (selected)

```css
--base-font-family-body: UberMoveText, UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--base-font-family-display: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--base-font-family-mono: UberMoveMono, "Lucida Console", Monaco, monospace;
--base-font-weight-bold: 700;
--base-font-weight-light: 300;
--base-font-weight-medium: 500;
--base-font-weight-regular: 400;
--base-font-size-10: calc(10/16*1rem);
--base-font-size-12: calc(12/16*1rem);
--base-font-size-14: calc(14/16*1rem);
--base-font-size-16: 1rem;
--base-font-size-18: calc(18/16*1rem);
--base-font-size-20: calc(20/16*1rem);
--base-font-size-22: calc(22/16*1rem);
--base-font-size-24: calc(24/16*1rem);
--base-font-size-28: calc(28/16*1rem);
--base-font-size-32: calc(32/16*1rem);
--base-font-size-36: calc(36/16*1rem);
--base-font-size-42: calc(42/16*1rem);
--base-letter-spacing-ls-25: 0.25px;
--base-letter-spacing-ls-28: 0.28px;
--base-letter-spacing-ls-30: 0.3px;
--base-letter-spacing-ls-33: 0.33px;
--base-letter-spacing-ls-35: 0.35px;
--base-letter-spacing-ls-38: 0.38px;
--base-letter-spacing-ls-neg-5: -0.05px;
--base-typography-body-l-medium-font-family: UberMoveText, UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--base-typography-body-l-medium-font-size: 1rem;
--base-typography-body-l-medium-font-weight: 500;
--base-typography-body-l-medium-letter-spacing: -0.05px;
--base-typography-body-l-regular-font-family: UberMoveText, UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--base-typography-body-l-regular-font-size: 1rem;
--base-typography-body-l-regular-font-weight: 400;
--base-typography-body-l-regular-letter-spacing: -0.05px;
--base-typography-body-m-medium-font-family: UberMoveText, UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--base-typography-body-m-medium-font-size: calc(14/16*1rem);
--base-typography-body-m-medium-font-weight: 500;
--base-typography-body-m-medium-letter-spacing: -0.05px;
--base-typography-body-m-regular-font-family: UberMoveText, UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--base-typography-body-m-regular-font-size: calc(14/16*1rem);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/uber-com