What is Uber Eats' primary brand color?

The captured marketing surface at ubereats.com is structurally black and white — there is no declared brand-layer color with more than 1 usage occurrence. The amber warmth that defines the above-fold hero comes entirely from food photography, not from a CSS color token. The primary CTA button uses ink black as its background fill. Uber Eats' famous green appears in the mobile app and brand advertising but is absent from the marketing site's extracted palette. If you need a green accent for an Uber Eats-style component, use the app's well-known green as a supplemental token rather than treating it as extracted ground truth.

What typefaces does Uber Eats use, and what are good substitutes?

Uber Eats runs two proprietary fonts. UberMove carries every heading tier at weight 700, ranging from 28px (section headings) to 52px (the hero h1). UberMoveText handles all interface copy — navigation, body paragraphs, buttons, and captions — at weights 400 and 500, ranging from 14px to 18px. The two families create a strict editorial-versus-utility split with no middle weight tier. For open-source substitutes: Inter Black (weight 900) or Geist Bold approximate UberMove's display confidence; Inter Regular and Medium (400/500) match UberMoveText's interface role. Both families share a similar humanist grotesque structure.

Why does Uber Eats use such an extreme 500px border-radius?

The 500px border-radius value is effectively a CSS pill shorthand — on any element shorter than 1000px it renders identically to border-radius: 50% on short elements or 9999px on rectangles. Uber Eats applies this treatment to every button, badge, and status chip across the page, making the fully-rounded pill the brand's single most consistent shape signal. The nav 'Sign up' CTA, the search submission button, and every category chip all share this treatment. The alternative 8px radius appears on cards and the search-wrapper panel — the system is binary: surfaces use 8px rounding while interactive affordances use the pill.

How is the Uber Eats hero search component structured?

The above-fold hero uses an address-search typeahead as the primary CTA rather than a button. The input is a full-width white field (height 40px, no visible border, no border-radius) paired with a black pill submit button labeled with a delivery icon. This pattern defers the 'pick a restaurant' experience behind a location gate — you cannot browse until you've entered an address. The hero heading ('Order delivery near you') is followed immediately by this input rather than a subheading or value-proposition paragraph. The address typeahead is the page's single most-important interaction and the layout treats it as such.

What does the Uber Eats page look like below the hero?

Below the hero photography band, the page drops to a white canvas with ink-black typography and near-zero chromatic elements. The sections are: a three-column feature row ('Feed your employees', 'Your restaurant, delivered', 'Deliver with Uber Eats'), each with a photograph thumbnail and a two-line heading; a full-width US map tile ('Cities near me') with a grid of city-name links in 16px UberMoveText; a 'Countries with Uber Eats' link grid; and the footer. The content is dense and informational rather than editorial — no large photography below the fold, no color accents, no gradient bands. The marketing system's single design statement lives entirely in the hero.

Uber Eats Design System

Uber Eats' marketing design system: ink-black pill CTAs on a photography-led amber canvas, UberMove 52px display, address-search as the primary hero action.

About Uber Eats DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source ubereats.com

Food & Delivery
Marketplaces

Uber Eats' marketing page makes a counterintuitive move for a brand famous for its green accent: the landing page at ubereats.com is structurally black and white. The above-fold hero is warm only because a large food photograph — a burger, fries, a tomato — bleeds warmth into the composition. The actual design system tokens underneath are ink black, pure white, and two neutral grays. The green that appears in the mobile app and brand advertising is absent from the captured marketing surface. What reads as amber is photography, not a brand color declaration.

The DESIGN.md file packages the system into a machine-readable spec: 12 color tokens drawn from a strictly ink-black-and-white palette with two light gray surfaces, 11 typography tokens spanning UberMove bold at 28–52px for all heading tiers and UberMoveText at 14–18px for body and interface copy, 5 radius tokens anchored on a 500px pill as the dominant shape (the navigation sign-up button, all CTA chips, every badge), and 15 components covering the hero search form, the address typeahead input, the pill button, the split-section card, and the full-width map tile.

Feed this file to Claude or Cursor and it reproduces Uber Eats' specific moves: pure-black pill CTAs rather than a green or colored fill, hero photography carrying the chromatic weight the brand doesn't declare in CSS, address-search as the hero's primary interaction rather than a browse button, and UberMove's single bold-only heading tier that creates typographic authority without a weight ladder. The one thing worth borrowing carefully is the photography-as-canvas approach — it only works when the imagery is consistently warm and high-production; inconsistent photography collapses the system back to plain black-and-white.

What makes it distinct

Photography-as-brand-canvasthe hero amber warmth comes entirely from food photography, not a declared brand color; the design system is structurally black-and-white below the fold
500px border-radius pillthe primary CTA and every badge/tag uses a near-infinite radius, making pill geometry the single most distinctive shape signal in the system
Address-search as hero CTAunlike most food apps that lead with a Browse button, Uber Eats puts the location typeahead front-and-center as the primary above-fold action
Two-weight type splitUberMove (700 weight only) carries every heading; UberMoveText (400–500) carries everything else, creating a sharp editorial/utility divide with no middle tier
Black-on-white below the foldonce the hero photography ends, the system drops to pure ink on white with near-zero chromatic elements, trusting city-name grids and map thumbnails as the visual interest

Live at ubereats.com

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

ubereats.com

Explore Uber Eats

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Uber Eats design system FAQ

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

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

Browse all design systems

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

Uber Eats — official site

Uber Eats' public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

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