Design System Inspired by Uber

Uber's design language is a masterclass in confident minimalism -- a black-and-white universe where every pixel serves a purpose and nothing decorates without earning its place. The entire experience is built on a stark duality: jet black (#000000) and pure white (#ffffff), with virtually no mid-tone grays diluting the message. This isn't the sterile minimalism of a startup that hasn't finished designing -- it's the deliberate restraint of a brand so established it can afford to whisper.

The signature typeface, UberMove, is a proprietary geometric sans-serif with a distinctly square, engineered quality. Headlines in UberMove Bold at 52px carry the weight of a billboard -- authoritative, direct, unapologetic. The companion face UberMoveText handles body copy and buttons with a slightly softer, more readable character at medium weight (500). Together, they create a typographic system that feels like a transit map: clear, efficient, built for scanning at speed.

What makes Uber's design truly distinctive is its use of full-bleed photography and illustration paired with pill-shaped interactive elements (999px border-radius). Navigation chips, CTA buttons, and category selectors all share this capsule shape, creating a tactile, thumb-friendly interface language that's unmistakably Uber. The illustrations -- warm, slightly stylized scenes of drivers, riders, and cityscapes -- inject humanity into what could otherwise be a cold, monochrome system. The site alternates between white content sections and a full-black footer, with card-based layouts using the gentlest possible shadows (rgba(0,0,0,0.12-0.16)) to create subtle lift without breaking the flat aesthetic.

Key Characteristics:

• Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome

• UberMove (headlines) + UberMoveText (body/UI) -- proprietary geometric sans-serif family

• Pill-shaped everything: buttons, chips, nav items all use 999px border-radius

• Warm, human illustrations contrasting the stark monochrome interface

• Card-based layout with whisper-soft shadows (0.12-0.16 opacity)

• 8px spacing grid with compact, information-dense layouts

• Bold photography integrated as full-bleed hero backgrounds

• Black footer anchoring the page with a dark, high-contrast environment

### Buttons

Primary Black (CTA)

• Background: Uber Black (#000000)

• Text: Pure White (#ffffff)

• Padding: 10px 12px

• Radius: 999px (full pill)

• Outline: none

• Focus: inset ring rgb(255,255,255) 0px 0px 0px 2px

• The primary action button -- bold, high-contrast, unmissable

Secondary White

• Background: Pure White (#ffffff)

• Text: Uber Black (#000000)

• Padding: 10px 12px

• Radius: 999px (full pill)

• Hover: background shifts to Hover Gray (#e2e2e2)

• Focus: background shifts to Hover Gray, inset ring appears

• Used on dark surfaces or as a secondary action alongside Primary Black

Chip / Filter

• Background: Chip Gray (#efefef)

• Text: Uber Black (#000000)

• Padding: 14px 16px

• Radius: 999px (full pill)

• Active: inset shadow rgba(0,0,0,0.08)

• Navigation chips, category selectors, filter toggles

Floating Action

• Background: Pure White (#ffffff)

• Text: Uber Black (#000000)

• Padding: 14px

• Radius: 999px (full pill)

• Shadow: rgba(0,0,0,0.16) 0px 2px 8px 0px

• Transform: translateY(2px) slight offset

• Hover: background shifts to #f3f3f3

• Map controls, scroll-to-top, floating CTAs

### Cards & Containers

• Background: Pure White (#ffffff) on white pages; no distinct card background differentiation

• Border: none by default -- cards are defined by shadow, not stroke

• Radius: 8px for standard content cards; 12px for featured/promoted cards

• Shadow: rgba(0,0,0,0.12) 0px 4px 16px 0px for standard lift

• Cards are content-dense with minimal internal padding

• Image-led cards use full-bleed imagery with text overlay or below

### Inputs & Forms

• Text: Uber Black (#000000)

• Background: Pure White (#ffffff)

• Border: 1px solid Black (#000000) -- the only place visible borders appear prominently

• Radius: 8px

• Padding: standard comfortable spacing

• Focus: no extracted custom focus state -- relies on standard browser focus ring

### Navigation

• Sticky top navigation with white background

• Logo: Uber wordmark/icon at 24x24px in black

• Links: UberMoveText at 14-18px, weight 500, in Uber Black

• Pill-shaped nav chips with Chip Gray (#efefef) background for category navigation ("Ride", "Drive", "Business", "Uber Eats")

• Menu toggle: circular button with 50% border-radius

• Mobile: hamburger menu pattern

### Image Treatment

• Warm, hand-illustrated scenes (not photographs for feature sections)

• Illustration style: slightly stylized people, warm color palette within illustrations, contemporary vibe

• Hero sections use bold photography or illustration as full-width backgrounds

• QR codes for app download CTAs

• All imagery uses standard 8px or 12px border-radius when contained in cards

### Distinctive Components

Category Pill Navigation

• Horizontal row of pill-shaped buttons for top-level navigation ("Ride", "Drive", "Business", "Uber Eats", "About")

• Each pill: Chip Gray background, black text, 999px radius

• Active state indicated by black background with white text (inversion)

Hero with Dual Action

• Split hero: text/CTA on left, map/illustration on right

• Two input fields side by side for pickup/destination

• "See prices" CTA button in black pill

Plan-Ahead Cards

• Cards promoting features like "Uber Reserve" and trip planning

• Illustration-heavy with warm, human-centric imagery

• Black CTA buttons with white text at bottom

### Spacing System

• Base unit: 8px

• Scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px

• Button padding: 10px 12px (compact) or 14px 16px (comfortable)

• Card internal padding: approximately 24-32px

• Section vertical spacing: generous but efficient -- approximately 64-96px between major sections

### Grid & Container

• Max container width: approximately 1136px, centered

• Hero: split layout with text left, visual right

• Feature sections: 2-column card grids or full-width single-column

• Footer: multi-column link grid on black background

• Full-width sections extending to viewport edges

### Whitespace Philosophy

• Efficient, not airy: Uber's whitespace is functional -- enough to separate, never enough to feel empty. This is transit-system spacing: compact, clear, purpose-driven.

• Content-dense cards: Cards pack information tightly with minimal internal spacing, relying on shadow and radius to define boundaries.

• Section breathing room: Major sections get generous vertical spacing, but within sections, elements are closely grouped.

### Border Radius Scale

• Sharp (0px): No square corners used in interactive elements

• Standard (8px): Content cards, input fields, listboxes

• Comfortable (12px): Featured cards, larger containers, link cards

• Full Pill (999px): All buttons, chips, navigation items, pills

• Circle (50%): Avatar images, icon containers, circular controls

### Breakpoints

| Name | Width | Key Changes |

|------|-------|-------------|

| Mobile Small | 320px | Minimum layout, single column, stacked inputs, compact typography |

| Mobile | 600px | Standard mobile, stacked layout, hamburger nav |

| Tablet Small | 768px | Two-column grids begin, expanded card layouts |

| Tablet | 1119px | Full tablet layout, side-by-side hero content |

| Desktop Small | 1120px | Desktop grid activates, horizontal nav pills |

| Desktop | 1136px | Full desktop layout, maximum container width, split hero |

### Touch Targets

• All pill buttons: minimum 44px height (10-14px vertical padding + line-height)

• Navigation chips: generous 14px 16px padding for comfortable thumb tapping

• Circular controls (menu, close): 50% radius ensures large, easy-to-hit targets

• Card surfaces serve as full-area touch targets on mobile

### Collapsing Strategy

• Navigation: Horizontal pill nav collapses to hamburger menu with circular toggle

• Hero: Split layout (text + map/visual) stacks to single column -- text above, visual below

• Input fields: Side-by-side pickup/destination inputs stack vertically

• Feature cards: 2-column grid collapses to full-width stacked cards

• Headings: 52px display scales down through 36px, 32px, 24px, 20px

• Footer: Multi-column link grid collapses to accordion or stacked single column

• Category pills: Horizontal scroll with overflow on smaller screens

### Image Behavior

• Illustrations scale proportionally within their containers

• Hero imagery maintains aspect ratio, may crop on smaller screens

• QR code sections hide on mobile (app download shifts to direct store links)

• Card imagery maintains 8-12px border radius at all sizes

### Quick Color Reference

• Primary Button: "Uber Black (#000000)"

• Page Background: "Pure White (#ffffff)"

• Button Text (on black): "Pure White (#ffffff)"

• Button Text (on white): "Uber Black (#000000)"

• Secondary Text: "Body Gray (#4b4b4b)"

• Tertiary Text: "Muted Gray (#afafaf)"

• Chip Background: "Chip Gray (#efefef)"

• Hover State: "Hover Gray (#e2e2e2)"

• Card Shadow: "rgba(0,0,0,0.12) 0px 4px 16px"

• Footer Background: "Uber Black (#000000)"

### Example Component Prompts

• "Create a hero section on Pure White (#ffffff) with a headline at 52px UberMove Bold (700), line-height 1.23. Use Uber Black (#000000) text. Add a subtitle in Body Gray (#4b4b4b) at 16px UberMoveText weight 400 with 1.50 line-height. Place an Uber Black (#000000) pill CTA button with Pure White text, 999px radius, padding 10px 12px."

• "Design a category navigation bar with horizontal pill buttons. Each pill: Chip Gray (#efefef) background, Uber Black (#000000) text, 14px 16px padding, 999px border-radius. Active pill inverts to Uber Black background with Pure White text. Use UberMoveText at 14px weight 500."

• "Build a feature card on Pure White (#ffffff) with 8px border-radius and shadow rgba(0,0,0,0.12) 0px 4px 16px. Title in UberMove at 24px weight 700, description in Body Gray (#4b4b4b) at 16px UberMoveText. Add a black pill CTA button at the bottom."

• "Create a dark footer on Uber Black (#000000) with Pure White (#ffffff) heading text in UberMove at 20px weight 700. Footer links in Muted Gray (#afafaf) at 14px UberMoveText. Links hover to Pure White. Multi-column grid layout."

• "Design a floating action button with Pure White (#ffffff) background, 999px radius, 14px padding, and shadow rgba(0,0,0,0.16) 0px 2px 8px. Hover shifts background to #f3f3f3. Use for scroll-to-top or map controls."

### Iteration Guide

1. Focus on ONE component at a time

2. Reference the strict black/white palette -- "use Uber Black (#000000)" not "make it dark"

3. Always specify 999px radius for buttons and pills -- this is non-negotiable for the Uber identity

4. Describe the font family explicitly -- "UberMove Bold for the heading, UberMoveText Medium for the label"

5. For shadows, use "whisper shadow (rgba(0,0,0,0.12) 0px 4px 16px)" -- never heavy drop shadows

6. Keep layouts compact and information-dense -- Uber is efficient, not airy

7. Illustrations should be warm and human -- describe "stylized people in warm tones" not abstract shapes

8. Pair black CTAs with white secondaries for balanced dual-action layouts