Uber Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

13tokens

13type steps

5radius steps

4pxspacing base

Uber, in one page

Uber is a transportation-and-delivery super-app — ride, eats, freight, the whole urban logistics layer — and the brand's web surface signals that scale through restraint: no third colour, no accent palette, no illustration that fights the headline. The page is structurally a black-and-white duet, where black {colors.primary} is the conversion anchor (every CTA pill, every nav login button, the footer fill) and {colors.canvas} white carries everything else. The only consistent decoration is a body of editorial 4:3 illustrations — riders, drivers, parking lots, cars-on-highway — that ground the marketing without leaking accent colour into the system.

Type is the second decisive voice. Two custom faces carry every page: UberMove at weight 700 for headlines (32 – 52 px display sizes with tight 1.22 – 1.25 line-height, never letter-spaced), and UberMoveText at weights 400 / 500 for body, button, and link. The pairing reads as engineering-grade — no italic, no decorative weight, no tracking flourish. Headlines are sentence-case; eyebrows are uppercase only when used as the section eyebrow ("WHY BECOME"); buttons are sentence-case.

The single shape signature is the pill. Every interactive element rounds to {rounded.pill} 999 px — primary CTA, secondary CTA, subtle gray pill, white floating pill, category chip, app-download badge. Cards and surfaces round to {rounded.xl} 16 px; the larger "Go Get 2026" annual-showcase card uses the same 16 px shape, just at scale. The tab-toggle on the hero ride-request form uses an off-shape {rounded.pill-tab} 36 px — barely-pill, deliberately tighter than the canonical 999 px pill.

Key Characteristics:

A two-colour CTA hierarchy: black {colors.primary} pill for primary conversion targets; white {colors.canvas} pill (sometimes with a soft drop shadow) for secondary; subtle gray {colors.canvas-soft} pill for tertiary or chip variants.
The pill is the single signature shape — {rounded.pill} 999 px on every interactive element except the tab-toggle ({rounded.pill-tab} 36 px) and the larger product cards ({rounded.xl} 16 px).
Every headline is sentence-case in {typography.display-xl} / {typography.display-xxl} weight 700; no all-caps display.
Editorial 4:3 illustrations of riders / drivers / cars are the only consistent decorative system; no gradients, no atmospheric backdrops, no shadows that aren't card-elevation hints.
A signature alternating-band rhythm: white feature card → black promo card (with white text and white CTA) → white feature card → black footer. The black bands are NOT hero-only; they appear mid-page as promo callouts.
A signature ride-request form card on the hero: pickup pin input + destination input + date/time chip + black "See prices" pill, all stacked inside a {rounded.xl} shadowed card.

Do's and don'ts

Do

Reserve {colors.primary} (#000000) for every primary CTA pill. One black pill per visible viewport is the brand's whole conversion story.
Use {rounded.pill} 999 px on every interactive element (buttons, chips, app pills). The pill IS the brand's geometric signature.
Render cards in {rounded.xl} 16 px — promo cards, content cards, the ride-request form card, the annual-showcase card all share this radius.
Set every headline in {typography.display-*} weight 700 in sentence-case. The display face never carries body copy.
Use polarity-flipped black promo bands mid-page to break up white-on-white rhythm. The polarity shift IS the depth cue.
Anchor every promo card with a 4:3 editorial illustration; never use generic stock imagery.

Don't

Don't introduce a second brand accent colour (orange, blue, green). The brand's entire UI is black-and-white plus grayscale; new accents flatten the system.
Don't render the primary CTA as a {rounded.xl} rectangle except inside the larger ride-request flow (where button-large-rounded is the documented exception).
Don't use all-caps display headlines. Sentence-case is the voice; uppercase is restricted to rare eyebrow tags.
Don't drop a soft drop-shadow on every card. The brand uses Level 0 flat as the default; shadow is reserved for the floating pill and the ride-request form.
Don't reduce the brand to its illustration system alone. The pill geometry + black/white duet carries the brand even without illustrations.
Don't tighten or loosen letter-spacing on the display face. The brand never letter-spaces; default tracking is part of the voice.
Don't use {rounded.full} 9999 px for square cards — the pill 999 px and full 9999 px effects are identical for interactive elements, but cards stay at {rounded.xl} 16 px.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Uber design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #000000
- on-primary: #ffffff
- ink: #000000
- body: #5e5e5e
- mute: #afafaf
- hairline-mid: #4b4b4b
- canvas: #ffffff
- canvas-soft: #efefef
- canvas-softer: #f3f3f3
- surface-pressed: #e2e2e2

Type:
- families: UberMove, UberMoveText, Helvetica Neue, Arial
- scale: 12, 14, 16, 18, 20, 24, 28, 32, 36
- weights: 400, 500, 700

Shape:
- radius: 0, 8, 12, 16, 36
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 4, 6, 8, 12, 16, 20, 24, 32

Rules:
- Reserve `{colors.primary}` (`#000000`) for every primary CTA pill. One black pill per visible viewport is the brand's whole conversion story.
- Use `{rounded.pill}` 999 px on every interactive element (buttons, chips, app pills). The pill IS the brand's geometric signature.
- Render cards in `{rounded.xl}` 16 px — promo cards, content cards, the ride-request form card, the annual-showcase card all share this radius.
- Set every headline in `{typography.display-*}` weight 700 in sentence-case. The display face never carries body copy.
- Use polarity-flipped black promo bands mid-page to break up white-on-white rhythm. The polarity shift IS the depth cue.
- Anchor every promo card with a 4:3 editorial illustration; never use generic stock imagery.

Avoid:
- Don't introduce a second brand accent colour (orange, blue, green). The brand's entire UI is black-and-white plus grayscale; new accents flatten the system.
- Don't render the primary CTA as a `{rounded.xl}` rectangle except inside the larger ride-request flow (where `button-large-rounded` is the documented exception)…
- Don't use all-caps display headlines. Sentence-case is the voice; uppercase is restricted to rare eyebrow tags.
- Don't drop a soft drop-shadow on every card. The brand uses Level 0 flat as the default; shadow is reserved for the floating pill and the ride-request form.
- Don't reduce the brand to its illustration system alone. The pill geometry + black/white duet carries the brand even without illustrations.
- Don't tighten or loosen letter-spacing on the display face. The brand never letter-spaces; default tracking is part of the voice.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Ink Black ({colors.primary} — #000000): The brand's only conversion colour. Every primary CTA pill, the footer fill, every dark promo band, every nav login button. The system has no secondary accent.
Surface Pressed ({colors.surface-pressed} — #e2e2e2): The pressed-state fill for white pills — a soft grey that's used only in active / pressed states.
Black Elevated ({colors.black-elevated} — #282828): A near-black used on hover for the translucent white tab-toggle pill. Documented as a system colour because it appears on a recurring brand control.

Surface

Canvas ({colors.canvas} — #ffffff): The default page background.
Canvas Soft ({colors.canvas-soft} — #efefef): The soft gray fill for category chips, form-input rows inside the ride-request card, and subtle pill buttons.
Canvas Softer ({colors.canvas-softer} — #f3f3f3): A slightly lighter gray used as a nested-input fill on white surfaces.

Text

Ink ({colors.ink} — #000000): Every heading and body paragraph on light surfaces.
Body ({colors.body} — #5e5e5e): Secondary text — captions, sub-headings, supporting copy.
Hairline Mid ({colors.hairline-mid} — #4b4b4b): A mid-gray used for muted link text inside footer columns and breadcrumb-style nav.
Mute ({colors.mute} — #afafaf): The lightest text role — placeholder text, fine print, low-priority metadata.
On Dark ({colors.on-dark} — #ffffff): All text on {colors.ink} surfaces (footer, dark promo bands).

Semantic

The brand does not maintain a separate error / success / warning palette in its public marketing surface. Validation cues come from the primary black or from the brand's editorial illustrations. The #0000ee link colour is the system's only chromatic — it's the browser-default link blue, appearing in body-copy inline links inside legal / footer text.

Type scaleRead the full spec

Font Family

Two custom faces carry the entire system:

A custom geometric display sans (extracted as UberMove) for every headline. Weight 700 only; no italic; no tracking variation. Sizes range from display-sm 20 px up to display-xxl 52 px on the hero. Line-heights tighten to 1.22 – 1.25 at display sizes for a poured-on-the-page look.
A custom text sans (extracted as UberMoveText) for body, button, link, and small headings. Weights 400 and 500 are the working pair. Used at 12 – 18 px; 24 px maximum for ride-request form labels. Tracking is always neutral.

The two faces share a family DNA but never overlap roles — the display face never carries a body paragraph; the text face never carries a hero headline.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display-xxl}`	52px	700	64px	Hero headline ("Go anywhere with Uber", "Drive when you want").
`{typography.display-xl}`	36px	700	44px	Page section headlines ("Plan for later", "Safety, simplified").
`{typography.display-lg}`	32px	700	40px	Promo-card headlines.
`{typography.display-md}`	24px	700	32px	Card titles, illustrated-promo headlines.
`{typography.display-sm}`	20px	700	28px	Sub-card headings.
`{typography.body-lg}`	18px	500	24px	Lead paragraphs and larger body.
`{typography.body-md}`	16px	400	24px	Default paragraph body.
`{typography.body-md-strong}`	16px	500	20px	Bolded inline body and most button labels.
`{typography.body-sm}`	14px	400	20px	Captions, secondary metadata.
`{typography.body-sm-strong}`	14px	500	16px	Bold caption / chip labels.
`{typography.caption}`	12px	400	20px	Fine print, footer secondary lines.
`{typography.button-large}`	18px	500	24px	Large rounded buttons inside the ride-request form.
`{typography.button-md}`	16px	500	20px	Default button label.

Principles

Sentence-case is the voice. No all-caps headlines. Eyebrow tags ("WHY BECOME") are the rare exception.
Weight 700 is for headlines; weight 500 is for buttons and emphasis. Don't promote button labels to 700.
No tracking flourish. The display face is never letter-spaced, positive or negative.
Two faces, two roles. UberMove for display; UberMoveText for everything else. Never cross the streams.

Note on Font Substitutes

The two faces are proprietary. Open-source substitutes:

Display sans — *Inter* weight 700 with font-feature-settings: "ss01" enabled comes closest. *Geist* weight 700 is the second-best option.
Text sans — *Inter* weights 400 / 500 match the geometric width and x-height. *Plus Jakarta Sans* is a softer alternative if the brand wants a less neutral feel.

Components and layoutRead the full spec

Buttons

button-primary — the canonical black pill, the brand's conversion target.

Background {colors.primary}, text {colors.on-primary}, label set in {typography.button-md}, padding {spacing.md} {spacing.md}, shape {rounded.pill} 999 px.

button-secondary — the white pill paired with the black primary.

Background {colors.canvas}, text {colors.ink}, same label and padding as button-primary, shape {rounded.pill}.

button-subtle — the gray secondary pill used for tertiary actions inside cards (e.g., "Learn more" / "Use Reserve").

Background {colors.canvas-soft} (#efefef), text {colors.ink}, label in {typography.button-md}, padding {spacing.md} {spacing.lg}, shape {rounded.pill}.

button-floating — the white pill with a subtle drop-shadow that floats over a dark or photographic surface.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md}, shape {rounded.pill}. Carries a Level 3 pill-float shadow.

button-large-rounded — the bigger black call-to-action used inside the ride-request flow ("Yes, help me").

Background {colors.primary}, text {colors.on-primary}, label in {typography.button-large}, padding {spacing.lg} {spacing.xl}, shape {rounded.xl} 16 px (not pill — the only black CTA that breaks the pill rule, used in the larger form context).

button-tab-translucent — the tab-toggle on the hero ride-request form (Ride / Drive).

Background {colors.canvas}, text {colors.ink}, label in {typography.body-md-strong}, shape {rounded.pill-tab} 36 px (off-shape, deliberately tighter than the canonical 999 px pill).

Cards & Containers

card-content — the canonical content card.

Background {colors.canvas}, text {colors.ink}, padding {spacing.2xl}, shape {rounded.xl} 16 px. No shadow on the default state.

card-elevated — the content card with Level 1 subtle drop.

Background {colors.canvas}, text {colors.ink}, same padding + shape as card-content. Shadow at Level 1.

card-soft-tinted — the gray-tinted card used as a sub-region inside the page (e.g., "Plan for later" callout).

Background {colors.canvas-soft}, text {colors.ink}, padding {spacing.2xl}, shape {rounded.xl}.

promo-card-illustrated — the 2-column promo card with illustration on one side and copy on the other.

Background {colors.canvas}, text {colors.ink}, padding {spacing.2xl}, shape {rounded.xl}. Headline in {typography.display-md} or larger.

promo-card-on-dark — the polarity-flipped promo card in black.

Background {colors.ink}, text {colors.on-dark}, padding {spacing.2xl}, shape {rounded.xl}. Used for the "Drive with Uber" mid-page band.

request-form-card — the hero ride-request form chrome.

Background {colors.canvas}, text {colors.ink}, padding {spacing.lg}, shape {rounded.xl}. Carries Level 2 card drop shadow.

request-form-input-row — the per-field row inside the request-form card.

Background {colors.canvas-soft}, text {colors.ink}, padding {spacing.lg}, shape {rounded.md} 8 px. Hosts an icon + label + value.

showcase-image-card — the giant "GO•GET 2026" annual showcase card.

Background {colors.ink}, text {colors.on-dark} overlay, padding {spacing.3xl}, shape {rounded.xl}. Display-xxl headline overlays the bottom of the image.

Inputs & Forms

text-input — the canonical text input.

Background {colors.canvas-soft}, text {colors.ink}, body in {typography.body-md}, padding {spacing.lg}, shape {rounded.md} 8 px.

text-input-on-soft — the nested input on a white card (slightly lighter fill).

Background {colors.canvas-softer}, otherwise identical to text-input.

Navigation

nav-bar — the sticky top nav.

Background {colors.canvas} on light pages, switches to {colors.ink} on the rare dark page (e.g., Uber Eats hero). Padding {spacing.lg} {spacing.3xl}.

nav-link — the link row inside nav-bar.

Text {colors.ink}, set in {typography.body-md-strong} 500 weight.

footer — the deep-black footer band.

Background {colors.primary} (the brand's only true black surface), text {colors.on-dark}, padding {spacing.3xl} {spacing.3xl}. Body in {typography.body-sm}; column eyebrows in {typography.body-md-strong}.

Signature Components

hero-band-light — the white hero with the ride-request card.

Background {colors.canvas}, text {colors.ink}, padding {spacing.3xl} {spacing.3xl}. Headline in {typography.display-xxl} (52 px / 700) on the left; request-form-card on the right.

hero-band-dark — the rare black hero (used on Uber Eats and Drive landing).

Background {colors.ink}, text {colors.on-dark}, padding {spacing.3xl} {spacing.3xl}. Same display-xxl headline scale; CTA inverts to button-secondary white pill.

category-button — the horizontal-scroll category row ("Reserve / Rentals / Teens / Group rides").

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-uber {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #0000ee;
  --link-hover-color: #0000bb;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #000000;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

nendo 81.5%
spacex 78.6%
shiro 77.9%
kddi 74.3%
gyokusendo 70.8%

Where this came from

Source document: volt/design-md/uber/DESIGN.md · 33.7 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.