# Uber — Design System
> Global mobility and delivery platform.
- **Canonical:** https://uiuxskills.com/library/uber
- **Source:** https://www.uber.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:24.621Z

---

---
version: alpha
name: Uber
description: Global mobility and delivery platform.
tone: >-
  Direct, functional, and reliable. The voice is concise and action-oriented, focusing on user needs
  and service availability.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F6F6F6"
  on-surface: "#000000"
  on-primary: "#FFFFFF"
  outline: "#E2E2E2"
  error: "#D32F2F"
  success: "#388E3C"
  focus-ring: "#000000"
  neutral: "#757575"
typography:
  display-lg:
    fontFamily: Uber Move, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Uber Move, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Uber Move, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Uber Move, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Uber Move, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Uber Move, sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: Uber Move, sans-serif
    fontSize: 0.875rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: 100%
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDECEA"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Uber's visual identity is defined by high-contrast, bold typography and a clean, functional interface. The brand prioritizes clarity and efficiency, utilizing a monochromatic palette with strategic use of black and white to emphasize service utility and provide a reliable, direct user experience.

## Colors

The color strategy is strictly monochromatic, relying on high-contrast pairings to guide user attention and maintain accessibility.

*   Primary (#000000): The core brand color used for primary actions, headlines, and text.
*   Surface (#FFFFFF): The main background color for the application interface.
*   Surface-container (inferred) (#F6F6F6): A light gray used for section backgrounds and secondary cards.
*   On-surface (#000000): The primary text color used on light backgrounds.
*   On-primary (#FFFFFF): The text color used for content inside primary buttons.
*   Outline (inferred) (#E2E2E2): The standard border color for inputs and dividers.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Success (inferred) (#388E3C): Semantic color for success states.
*   Focus-ring (inferred) (#000000): High-contrast indicator for keyboard navigation.
*   Neutral (inferred) (#757575): Secondary text and icon color.

## Typography

The typography uses the "Uber Move" family exclusively, favoring clean, sans-serif legibility to support the brand's direct and action-oriented tone.

*   Display-lg (inferred): Used for main hero headlines.
*   Headline-md (inferred): Used for card titles and section headers.
*   Body-md (inferred): Standard paragraph text.
*   Label-md (inferred): Used for button labels and small UI elements.

## Layout

The layout follows a mobile-first responsive grid system that centers content on large screens and stacks elements vertically on smaller viewports. Spacing is governed by a 4px base unit, ensuring consistent margins and padding across all components. The page structure typically follows a sequence of nav, hero, features, account-login, reserve-tool, benefits, get-started, and footer.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background using subtle, single-layer shadows.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for standard cards and interactive surfaces.
*   Elevation.lg: Used for modal or drawer overlays.

## Shapes

The brand employs a balanced approach to geometry, using sharp, 0px corners for structural containers and a rounded scale for interactive elements. This creates a professional, utilitarian feel while maintaining accessibility for buttons and input fields.

*   Rounded.sm (4px): Used for input fields.
*   Rounded.md (8px): The standard radius for cards and badges.
*   Rounded.full (9999px): Reserved for pill-shaped buttons and specific UI accents.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using `{colors.primary}` background and `{colors.on-primary}` text. Use this for the main conversion point on any page; it should always be full-width in mobile contexts.

### Card
A structural container using `{colors.surface}` with `{rounded.md}` corners and an `{colors.outline}` border. Use this to group related content or features, ensuring it remains distinct from the background.

### Input Field
A functional component using `{colors.surface}` with `{rounded.sm}` corners. It must transition to `{colors.focus-ring}` on the border when active to maintain accessibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.error}` for primary action buttons. |
| Apply `{typography.display-lg}` for main hero headlines. | Avoid using `{typography.body-md}` for headings. |
| Use `{rounded.md}` for all card components. | Never mix `{rounded.full}` with sharp-edged cards. |
| Ensure `{colors.outline}` is used for all input borders. | Do not use low-contrast text on `{colors.surface-container}`. |
| Maintain `{spacing.md}` between form elements. | Do not apply `{elevation.lg}` to flat UI elements. |
| Use `{colors.on-primary}` for text inside primary buttons. | Avoid excessive use of shadows. |
| Use `{colors.focus-ring}` for keyboard navigation states. | Never use default browser outlines on inputs. |
| Apply `{typography.label-md}` for button text. | Do not use decorative fonts for UI labels. |

## Content Style

CTA labels use imperative verbs in sentence case, such as "Get started" or "Schedule ahead," to remain concise and action-oriented.

Headings are phrased to be direct and benefit-focused, clearly communicating the value proposition of the service or feature to the user.

Copy density is kept low, utilizing short, scannable paragraphs and bulleted lists to ensure the interface remains clean and easy to navigate on mobile devices.

## Imagery & Icons

The imagery style is mixed, combining high-quality 3D icons with clean, professional photography. Icons should be rounded and filled, maintaining a consistent visual weight that aligns with the brand's minimal and accessible design language. Photography should be high-resolution and represent real-world service utility.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Uber, a minimal, accessible global mobility and delivery platform. Match its direct, functional, and action-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.headline-md}`, `{spacing.md}` — never by hardcoded hex, px, or font-size values.
2. Use only the component variants listed under `components:`. Do not invent states, sizes, or visual variants the spec omits.
3. For layout and shape decisions, follow the Layout and Shapes narrative sections. Use `{rounded.sm}` for inputs, `{rounded.md}` for cards, and `{rounded.full}` only for pill-shaped elements.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations from a website render. If an authoritative design system source (theme file, Storybook, tokens file) exists, those values take precedence.

## Output contract

**Must:**
- Use all tokens by name on every component property.
- Implement hover, focus, and disabled states when the spec defines them — including `{colors.focus-ring}` as the border on focused inputs and `button-primary-hover` on button hover.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{typography.label-md}` for button text and `{typography.display-lg}` only for hero headlines, per the spec narrative.
- Write CTAs as imperative, sentence-case verbs per the Content Style section (e.g. "Get started", "Schedule ahead").

**Must NOT:**
- Invent colors, fonts, radii, or elevation values absent from the spec.
- Use generic system defaults (e.g. `gray-500`, `border-radius: 6px`) when a brand token exists.
- Mix `{rounded.full}` with sharp-edged card components.
- Apply `{colors.error}` to primary action buttons.
- Apply `{elevation.lg}` to flat UI elements.
- Add emoji, filler copy, or decorative fonts.
- Rewrite, replace, or invent page copy, headings, button labels, navigation items, or routes.

## When in doubt
- If the spec does not define a value, ask before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on light backgrounds, default to `{colors.on-surface}`.
- Follow the mobile-first layout approach; if breakpoints are unspecified, use one breakpoint at 768px.
- Surface any conflict between a user request and the Do's and Don'ts table explicitly before generating output.