Uber Eats Design System

Overview

Uber Eats' marketing system is built on a paradox. Photography-as-canvas: a brand associated with a specific green delivers its entire above-fold chromatic energy through food photography rather than declared brand colors. The ink black and pure white that the CSS actually specifies are the entire structural palette — 997 and 36 occurrences respectively. The amber and warmth that register visually come from burgers, fries, and fresh produce photographed at high production quality. Where DoorDash runs a red-filled hero band and Grubhub uses dark near-black surfaces, Uber Eats delegates the hero's mood entirely to the imagery.

The typography system makes a matching editorial choice: two proprietary families with a strict role split and no overlap. UberMove runs exclusively at weight 700 across all heading sizes (28–52px), creating authority through scale alone. UberMoveText handles every other surface — buttons, body copy, navigation, captions — at weights 400 and 500. There is no medium-weight heading, no light-weight display. The gap between the bold heading tier and the interface tier is wide enough that no element risks occupying an ambiguous middle.

Key Characteristics:

• No declared brand color with more than 1 usage occurrence — ink black ({colors.ink}) at frequency 997 is the page's dominant color, used as text, border, and shadow.
• 500px border-radius pill geometry on every interactive element — the primary CTA, the nav sign-up button, all category chips — while cards and the search wrapper use 8px rounding. The system is binary: pill or soft-card, nothing in between.
• UberMove bold (700) for all headings, UberMoveText medium/regular (400–500) for all interface copy — a two-family split with no weight crossover.
• Address-search typeahead as the primary above-fold action, not a Browse button — the hero gates restaurant browsing behind location entry.
• Below-fold sections drop to pure white canvas with dense city-name and country-name link grids — no photography, no color, no gradient bands.
• Photography carries the entire emotional weight of the brand; the CSS token system is structurally monochrome.

Colors

Structural

• Ink ({colors.ink} — #000000): frequency 997. Used as text (483), border (483), shadow (28), background (3). The near-total dominant color — pure black runs the entire navigation, heading, body-copy, and link system. Not near-black; true zero-lightness black is the deliberate choice for every typographic surface.
• Canvas ({colors.canvas} — #ffffff): frequency 36. Used as background (31), text (3), border (2). The page floor beneath the photography hero and in all below-fold content bands. Pure white, not an off-white — there is no cream or warm-white softening in the system.
• Surface-1 ({colors.surface-1} — #f3f3f3): frequency 5. Used as background (3), shadow (2). The light neutral behind section divider bands and subtle card lift contexts.
• Surface-2 ({colors.surface-2} — #e8e8e8): frequency 3. Used as background (3). The secondary neutral for map tile backgrounds and feature-section fills.

Typography

Font Families

The system runs two proprietary custom families. UberMove carries every heading tier — it appears exclusively at weight 700, at sizes 28px, 36px, and 52px. The fallback stack is sans-serif, which makes the system entirely dependent on the custom font loading correctly; there is no system-ui intermediate fallback. UberMoveText runs on every non-heading surface — body paragraphs, navigation links, buttons, form labels, captions — at weights 400 and 500. The fallback stack is system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, which provides reliable degradation through a standard system-ui chain.

Hierarchy

Note on Font Substitutes

Both UberMove and UberMoveText are proprietary. For UberMove at weight 700, Geist Bold or Inter Black (weight 900) approximates the display confidence; both share the humanist grotesque structure. For UberMoveText, Inter at weights 400 and 500 is the closest open-source substitute — the proportions transfer cleanly at the 14–18px interface sizes.

Layout

Spacing System

• Base unit: 8px, with 16px as the primary module.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 40px · {spacing.2xl} 64px · {spacing.section} 72px.
• Hero section padding (vertical): 72px top, 88px bottom — the most generous spacing interval in the system.
• Nav horizontal padding: 40px on each side, creating a wide gutter that keeps the wordmark and navigation from crowding the viewport edges.
• Card internal padding: 16px — consistent across all card surfaces.

Grid & Container

• Hero: full-width with a 240px-wide left column holding the headline, search input, and subtext, while the right side extends into the full-bleed food photography.
• Feature row: 3-column equal-width grid for the B2B feature cards (employee ordering, restaurant delivery, courier sign-up).
• City grid: multi-column alphabetical link list filling the full container width — the system's densest typographic surface.
• Max content width: implied at ~1280px based on the nav padding and hero composition.

Rhythm

The page is organized as a two-act structure: a single above-fold photographic hero (the brand moment), followed by a sequence of white-canvas informational sections with progressively denser content — feature cards, a full-bleed map, a city grid, a country grid, and the footer. The rhythm compresses as you scroll down; the brand expression concentrates entirely at the top.

Elevation

The system has no meaningful shadow tier. The 28 shadow occurrences captured all use {colors.ink} (black) at low opacity — subtle elevation cues on the search wrapper and the nav bar. Depth on the page comes from three sources: the photography hero blending into the white canvas below, the {colors.surface-1} gray bands separating content sections, and the 8px border-radius card containers sitting on the white floor. No decorative drop-shadow treatment appears anywhere below the fold.

Shapes

The radius vocabulary is binary: pill or soft-card.

• {rounded.none} 0px — applied to the address typeahead input field, which sits flush inside its search wrapper container.
• {rounded.sm} 8px — the search wrapper, cards, and map tile containers. The default "content surface" radius.
• {rounded.pill} 500px — the primary CTA button, the nav "Sign up" link, every category chip, and every badge element on the page. This value renders as a fully-rounded pill on any button-height element.
• {rounded.full} 9999px — equivalent to the pill treatment for icon-only circular elements.

The 500px pill is the brand's most distinctive geometric signal. On a page this typographically restrained, the fully-rounded interactive elements stand out as the system's single personality statement.

Components

button-primary — Ink-black fill, white text, {rounded.pill} 500px radius, 12px padding, 36px height. The page's primary CTA — "Sign up" in the nav and the search submission target.

button-secondary — White fill, ink text, 1px ink border, pill radius. Used for secondary actions at the same size as the primary.

top-nav — White canvas, 72px height, 40px horizontal padding. Houses the Uber Eats wordmark and a right-aligned "Sign in" / "Sign up" cluster. No bottom border, no shadow.

nav-link — The nav "Sign up" target: ink-black background, white text, 8px radius, 12x16px padding — deliberately a filled dark pill in contrast to a transparent nav link, signaling the single recommended action.

hero-heading — Ink text on transparent surface, {typography.display-xl} (52px / 700). The hero h1 sits over the white left-column background before the photography takes over.

section-heading — Ink text, {typography.display-md} (36px / 700). Section-level headings in below-fold content.

body-paragraph — Ink text at {typography.body-md-medium} (16px / 500). Slightly heavier than the default 400 weight — product descriptions and feature callouts use medium weight body copy.

text-input — White canvas, ink text, no border-radius, no visible border in the captured extraction. Sits inside the {component.search-wrapper} as a contained input.

search-wrapper — White canvas, ink text, {rounded.sm} 8px radius, 12x16px padding, 56px height. The outer container holding the address typeahead and delivery-type selectors — the hero's primary interaction element.

card — White canvas, ink text, {rounded.sm} 8px, 16px padding. The base card for feature sections.

city-link — Transparent background, ink text at {typography.body-md}. Renders in dense multi-column grids — typographically the smallest unit in the system.

section-band — Light gray {colors.surface-1} background, full-width, generous vertical padding. Separates the content sections below the fold.

footer — White canvas, ink text at {typography.caption}, 40px padding. No surface contrast against the page floor.

Do's and Don'ts

Do use photography to carry the system's chromatic weight above the fold. The ink-black token structure works because a high-production food photograph does the color work. A composition that relies on the CSS tokens alone will read as a black-and-white directory — the photography is load-bearing, not decorative.

Do apply the 500px pill radius to every interactive affordance — buttons, chips, badges, and status tags. The binary radius language (8px for surfaces, pill for interactives) is the system's shape signature; mixing in a 12px or 24px rounded button would read as an error.

Do keep UberMove exclusively at weight 700. Using UberMove at any weight other than 700 is not supported by the extraction — the font appears only in bold, and a lighter-weight display heading in the same family would undercut the heading-versus-interface division.

Do treat the address typeahead as the hero's primary action, not a "Get started" or "Order now" button. The location-gate pattern is the page's information architecture, not decorative — it sets the user's path through the product.

Don't use {colors.surface-2} (#e8e8e8) as a text background inside cards — it appears only 3 times, all as background fills on the map tile. Pairing body text on this gray would introduce a mid-tone surface the system doesn't use for content.

Don't add a heading weight below 700 in UberMove. The two-family split has no intermediate heading weight — using UberMove at 400 or 500 would conflict with the system's division where UberMoveText owns all non-700 weights.

Don't substitute a colored CTA button for the ink-black primary. The primary button is #000000 fill — introducing a green, amber, or any chromatic button fill invents a token that doesn't exist in the captured marketing surface.

Don't use {colors.canvas} (#ffffff) as an ink or border color over dark backgrounds. The system has no dark-surface sections — all content areas below the fold are white-canvas. There is no established light-on-dark pattern for content components.

Known Gaps

• Brand green: Uber Eats' well-known green accent (visible in the mobile app and brand advertising) does not appear in the captured marketing page extraction. Any green implementation would require referencing the app's color system, not these marketing tokens.
• Mobile breakpoints: the captured surface is at 1440px desktop width. The below-fold city grids and feature cards likely reflow significantly on mobile — the multi-column dense grids would not survive at 375px without substantial restructuring.
• Hover and focus states: no hover captures exist in the extraction. The full state matrix (input focus ring, button hover, nav hover) is not represented here.
• Dark mode: the marketing site is light-only. The Uber Eats app carries a dark theme that is not represented in this spec.
• Restaurant card / browse surface: the main product interaction — restaurant cards, menu items, ratings, price indicators — belongs to the app and authenticated delivery UX, which is not captured by the marketing landing page extractor.
• Animation: the hero photography loads with a fade-in sequence; the search typeahead has dropdown autocomplete styling. End-state values only are captured here.