# Design System
Inspired by Uber

A bold, black-and-white design language built for clarity, efficiency, and confident minimalism. Every element serves a purpose.

Color Palette

## Stark Duality

Uber Black
#000000
Primary CTA, headings, nav, footer
Pure White
#ffffff
Page background, card surface, inverse text
Chip Gray
#efefef
Chip buttons, filter toggles, borders
Hover Gray
#e2e2e2
Button hover state
Hover Light
#f3f3f3
Subtle hover for floating buttons
Body Gray
#4b4b4b
Secondary text, descriptions
Muted Gray
#afafaf
Tertiary text, footer links, placeholders
Default Link Blue
#0000ee
Underlined text links in body content

Typography Scale

## UberMove Type System

Sample | Role | Specs
--- | --- | ---
Display Hero | Display / Hero | 52px / Bold 700 / 1.23
Section Heading | Section Heading | 36px / Bold 700 / 1.22
Card Title | Card Title | 32px / Bold 700 / 1.25
Sub-heading | Sub-heading | 24px / Bold 700 / 1.33
Small Heading | Small Heading | 20px / Bold 700 / 1.40
Navigation / UI Large | Nav / UI Large | 18px / Medium 500 / 1.33
Body text and button labels | Body / Button | 16px / Regular 400 / 1.50
Caption and metadata | Caption | 14px / Medium 500 / 1.43
Micro text and fine print | Micro | 12px / Regular 400 / 1.67

Button Variants

## Pill-Shaped Actions

Primary Black
Secondary Outline
Chip / Filter
Chip Active
Floating
On Dark Surface
Chip Navigation Row

Card Examples

## Content Cards

Illustration
Plan for later
Reserve your ride in advance so you can relax on the day of your trip.
Illustration
Drive when you want
Make what you need in the time you have. Set your own hours and earn on your schedule.
Illustration
Business accounts
Simplify travel and meal management for your company with centralized billing.

Form Elements

## Input Components

Pickup location
Destination
Ride type
Special instructions
Split fare with riders
Request quiet ride

Spacing Scale

## 8px Grid System

4px
0.25rem
8px
0.50rem
12px
0.75rem
16px
1.00rem
20px
1.25rem
24px
1.50rem
32px
2.00rem
48px
3.00rem
64px
4.00rem

Border Radius Scale

## Corner Shapes

None 0px
Standard 8px
Comfortable 12px
Full Pill 999px
Circle 50%

Elevation / Depth

## Shadow Hierarchy

Flat No shadow, border only
Subtle rgba(0,0,0,0.12) 0 4px 16px
Medium rgba(0,0,0,0.16) 0 4px 16px
Floating rgba(0,0,0,0.16) 0 2px 8px + lift
Pressed rgba(0,0,0,0.08) inset