What is Uber's primary brand color?

Uber's brand color is Ink Black — #000000, pure black with no tint. It carries every primary CTA pill, every dark promo band, and the deep-black footer fill. The system maintains zero secondary brand accent; the only chromatic value anywhere on the public surface is the browser-default #0000ee link blue inside legal copy. Black is the conversion anchor, white is the canvas, and grayscale (#5e5e5e body, #afafaf mute, #efefef canvas-soft) handles everything in between.

What typography does Uber use, and what should I use as a substitute?

Uber runs two custom faces: UberMove at weight 700 for headlines (20px display-sm up to 52px display-xxl on the hero) and UberMoveText at weights 400 and 500 for body, button, and link. Both faces are proprietary. Inter weight 700 with the ss01 stylistic set is the closest open-source substitute for UberMove; Inter weights 400 and 500 match UberMoveText's geometric width and x-height. Geist 700 is a viable second option for display.

Why is every Uber button a pill?

The 999px pill is Uber's single shape signature. Every interactive element — primary CTA, secondary white pill, gray subtle pill, app-download badge, category chip, circular icon button — rounds to rounded.pill. The only exceptions are the tab-toggle on the hero ride-request form at the off-shape rounded.pill-tab 36px and the larger button-large-rounded inside the ride-request flow at rounded.xl 16px. Cards stay at rounded.xl 16px. The pill geometry plus the black-and-white duet carries the brand even without illustrations.

Does Uber use polarity-flipped black sections instead of a dark mode?

Yes. Uber's public web does not have a per-page dark mode toggle, but the design intentionally interleaves white feature cards with full-bleed black promo bands (background #000000, text #ffffff) mid-page. The polarity shift is the depth cue — the system has no progressive shadow tiers, just Level 0 flat as the default plus three minor drop-shadow uses (the floating pill, the hero ride-request form, and elevated promo cards). Black bands appear on Uber Eats hero, the Drive landing page, and inside promo-card-on-dark callouts.

Can I use this DESIGN.md to build a React marketplace?

Yes — the file is designed to feed Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Uber's restraint (two colors, pill geometry, sentence-case display) rather than a generic shadcn theme. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted string you can paste into Tailwind config or CSS variables. The example surfaces under ex-pricing-tier, ex-cart-drawer, and ex-data-table-cell show how to re-skin SaaS primitives consistently.

What's missing from this DESIGN.md spec?

A handful of items, documented in the Known Gaps section: full hover and focus-ring color combinations, loading skeleton treatments, the live map tile style inside the ride-request flow, and the in-app post-pickup states (rider tracking, driver status) which live on the native app surface rather than the marketing web. The spec captures roughly 95% of the public marketing surface — the marketplace logistics UI behind the sign-in wall is out of scope.

Uber Inspired Design System

Uber's design system as a DESIGN.md file.

About Uber Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source uber.com

Travel & Hospitality
Marketplaces

Uber's web surface is the most disciplined two-color system in consumer marketplaces. The brand strips every page down to a black-and-white duet — pure ink "#000000" anchors every primary CTA, every dark promo band, and the full-bleed footer; pure canvas "#ffffff" carries everything else. There is no secondary accent, no gradient, no atmospheric backdrop. The only chromatic element on the entire surface is the browser-default "#0000ee" link blue inside legal fine print, a deliberately mundane choice that signals the brand will not invent decoration where none is needed.

This page packages Uber's web design language into a single DESIGN.md file following the Google Labs spec. Inside: 11 color tokens grouped into surface, text, brand, and elevated roles; 13 type styles spanning UberMove display sizes from 20px to 52px and UberMoveText body weights at 400 and 500; 8 spacing values on a 4px base; 7 corner radii anchored on the signature 999px pill; and 40+ components covering buttons, cards, navigation, the hero ride-request form, and the polarity-flipped promo bands that punctuate the page.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent renders React components that match Uber's restraint — black pill CTAs on white surfaces, sentence-case display headlines at weight 700, editorial 4:3 illustration frames inside "#rounded.xl" 16px cards. Or use the tokens directly as a reference: every hex, every font stack, every padding value is a quoted string you can paste into Tailwind config or CSS variables. The system is worth studying because it proves a marketplace brand can scale to global logistics on two colors and one shape — no third voltage required.

What makes it distinct

Two-color duetpure black #000000 and pure white #ffffff carry the entire system with zero secondary accent
Pill is the signature shape999px radius on every interactive element except cards (#rounded.xl 16px) and the off-shape 36px tab toggle
Two custom faces, two rolesUberMove 700 for 20-52px headlines, UberMoveText 400/500 for body, button, and link
Polarity-flipped black promo bands mid-page are the depth cuethe system has no progressive shadow tiers
Editorial 4:3 illustrations of riders and drivers are the only decorationno gradients, no atmospheric backdrops

Live at uber.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

uber.com

Explore Uber Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Uber Inspired design system FAQ

Common questions about Uber Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Airbnb design system

The other canonical travel-and-marketplace brand, built on a single Rausch accent and Cereal VF type.

Use Uber Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→