Uber

# Design System: Uber

## 1. Visual Theme & Atmosphere

The interface projects confidence through bold contrasts and generous whitespace, creating a sense of reliability and professionalism. Vibrant illustrations inject personality and human warmth into what could otherwise feel sterile, making transportation services feel approachable and trustworthy. The overall mood balances corporate efficiency with consumer friendliness.

Subtle shadows on service tiles and cards create gentle elevation without overwhelming the clean aesthetic. The design uses minimal layering, preferring flat surfaces with occasional floating elements to maintain visual clarity.

Rounded corners appear consistently across interactive elements, creating a modern, approachable feel. Illustrations feature organic, flowing shapes that contrast with the geometric precision of the interface elements. Icons maintain consistent sizing and stroke weights throughout.

## 2. Color Palette & Roles

**Primary Foundation:**
- Midnight Black (#000000) — text
- Pure White (#ffffff) — text

**Accent & Interactive:**
- Classic Link Blue (#0000ee) — primary
- Sky Blue (#4285f4) — secondary
- Ocean Blue (#276ef1) — accent

**Neutral & Surface:**
- Charcoal Gray (#5e5e5e) — text
- Silver Gray (#afafaf) — border

## 3. Typography Rules

**UberMoveText** (custom), **UberMove** (custom), **Open Sans** (custom), **Roboto-Regular** (custom), **arial** (custom), **Google Sans** (custom)

- **heading-1**: UberMove, UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 52px/64px, weight 700 — Page titles
- **heading-2**: UberMove, UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 36px/44px, weight 700 — Section headings
- **heading-3**: sans-serif 18.72px/normal, weight 700 — Sub-section headings
- **body**: sans-serif 16px/normal, weight 400 — Base body text
- **body-text**: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 16px/24px, weight 400 — Paragraph text
- **inline-text**: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 16px/24px, weight 400 — Inline text elements
- **link**: sans-serif 16px/normal, weight 400 — Hyperlinks
- **button**: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 14px/16px, weight 500 — Button labels
- **button-role**: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 24px/24px, weight 400 — Button-role elements
- **navigation**: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif 16px/24px, weight 400 — Navigation text

## 4. Component Stylings

* **primary-button:** Black filled buttons with white text, rounded corners, used for primary actions like 'Get started'
* **secondary-button:** Outlined buttons with black borders and black text on white background for secondary actions
* **hero-card:** Large illustrated cards with vibrant graphics, rounded corners, and overlaid text for main service promotion
* **service-tile:** Clean white cards with icons, minimal text, and subtle shadows for service options like Ride, Reserve, Food
* **feature-section:** Full-width sections with large illustrations on one side and descriptive content on the other, generous padding
* **navigation-header:** Clean white header with black logo, minimal navigation links, and prominent sign-up button

## 5. Layout Principles

Content follows a centered, max-width container with generous horizontal margins. Vertical rhythm is established through consistent section spacing, with major content blocks separated by substantial whitespace. The grid system accommodates both single-column mobile layouts and multi-column desktop arrangements.