---
name: Uber
description: "Worth including as a prime example of a high-utility consumer platform that achieves premium feel through strict restraint, bold typography, and a monochrome palette."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#333333"
  neutral: "#5e5e5e"
  bg-soft: "#f3f3f3"
  bg-quiet: "#efefef"
  muted-soft: "#afafaf"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.15
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A high-utility consumer transportation platform that balances premium minimalism with bold typographic clarity.

*A sleek, efficient airport terminal — clean, functional, and easy to navigate.*

## Colors

High-contrast monochrome foundation with functional grays for depth and hierarchy.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#5e5e5e`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Headlines use a geometric sans-serif with tight letter-spacing for a bold, modern feel.
- Body text uses a humanist sans-serif for maximum readability across devices.
- Maintain a clear weight hierarchy: 500 for headlines, 400 for body text.
- Avoid decorative or script fonts to preserve the platform's functional identity.

## Layout

A two-column hero layout with a prominent form on the left and illustrative imagery on the right.

*Rhythm:* Consistent 4px base unit ensures visual harmony and predictable component sizing.

## Elevation & Depth

- rgba(0,0,0,0.16) 0px 2px 8px 0px
- Borders: Subtle 1px solid lines in light gray (#efefef) for input fields and dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped and rectangular buttons with solid black or white backgrounds and high-contrast text.
- **card:** Clean white cards with subtle borders or shadows, used for service exploration.
- **chip:** Minimal use of chips, primarily for location indicators with a pill shape.
- **input:** Clean text fields with rounded corners, subtle borders, and placeholder text.
- **hero:** Full-width hero section with a large headline, functional form, and supporting illustration.

## Do's and Don'ts

**Don't:**
- Don't use multiple accent colors — screenshot shows a strict black, white, and gray palette.
- Don't use decorative or script fonts — screenshot shows clean, geometric and humanist sans-serifs.
- Don't use heavy drop shadows — screenshot shows subtle, soft shadows for depth.
- Don't use complex gradients — screenshot shows solid color fills and simple background images.
- Don't use cramped layouts — screenshot shows generous whitespace and clear section separation.
- Don't use playful or rounded UI elements — screenshot shows functional, slightly rounded but professional components.

---

## System Prompt (paste into AI agent)

```
This is Uber's consumer-facing web platform, positioned as a high-utility, global transportation service. The design DNA is built on a high-contrast monochrome palette (#000000, #ffffff, #f3f3f3) with clean, functional grays. Typography relies on a geometric sans-serif for bold headlines (weight 500) and a humanist sans-serif for readable body text (weight 400). Critical donts: never use multiple accent colors (the palette is strictly monochrome), avoid decorative fonts (the system uses clean, professional sans-serifs), and never use heavy shadows or complex gradients (the design favors subtle depth and solid fills). The layout is a clean, two-column hero with a prominent functional form, emphasizing utility and ease of use.
```