01 / Color Palette

## Color Palette

Stark black + white duet, grayscale only. Every primary CTA pill, every dark band, every footer fill is one shade of ink. The system has no second accent — validation cues lean on the editorial illustrations instead of a semantic palette.

### Brand & Accent

Ink Black
#000000
Primary CTA pills, dark promo bands, footer fill, nav login button.
Surface Pressed
#e2e2e2
Pressed-state fill for white pills; soft grey used only on active.
Black Elevated
#282828
Near-black for hover on the translucent tab-toggle pill.

### Surface

Canvas
#ffffff
Default page background.
Canvas Soft
#efefef
Category chips, form-input rows, subtle pill buttons.
Canvas Softer
#f3f3f3
Nested-input fill on white surfaces.

### Text

Ink
#000000
Every heading and body paragraph on light surfaces.
Body
#5e5e5e
Secondary text — captions, sub-headings, supporting copy.
Hairline Mid
#4b4b4b
Muted footer-column link text and breadcrumb-style nav.
Mute
#afafaf
Placeholder text, fine print, low-priority metadata.
On Dark
#ffffff
All text on ink surfaces (footer, dark promo bands).
Link Blue
#0000ee
Browser-default inline link blue inside legal / footer fine print.

#### Semantic palette

The brand does not maintain a separate error / success / warning palette in its public marketing surface. Validation cues come from the primary black or from the brand's editorial illustrations. `#0000ee` is the system's only chromatic exception.

02 / Typography

## Typography Scale

Two faces carry the entire system. The display face (substituting Inter 700 for the proprietary geometric display sans) at 32–52 px display sizes with tight 1.22–1.25 line-heights; the text face (Inter 400 / 500) for body, button, link, and small headings. Sentence-case only — never letter-spaced.

display-xxl 52px / 700 / 64lh
Hero headline
Go anywhere with Uber
display-xl 36px / 700 / 44lh
Page section headlines
Plan for later
display-lg 32px / 700 / 40lh
Promo-card headlines
Drive when you want
display-md 24px / 700 / 32lh
Card titles, illustrated promos
Safety, simplified
display-sm 20px / 700 / 28lh
Sub-card headings
Reserve in advance
body-lg 18px / 500 / 24lh
Lead paragraphs
Request rides for now or up to 30 days ahead.
body-md 16px / 400 / 24lh
Default paragraph body
Choose your destination, then a vehicle option. Confirm your pickup with a single tap.
body-md-strong 16px / 500 / 20lh
Bold inline body, button labels
See prices
body-sm 14px / 400 / 20lh
Captions, secondary metadata
Fares are estimates and may change due to traffic or demand.
body-sm-strong 14px / 500 / 16lh
Bold caption / chip labels
Reserve
caption 12px / 400 / 20lh
Fine print, footer secondary
Service availability varies by region. Subject to terms.
button-large 18px / 500 / 24lh
Large rounded buttons
Yes, help me
button-md 16px / 500 / 20lh
Default button label
See prices

03 / Buttons

## Button Variants

Six button roles, all pill-shaped except the larger ride-request CTA (16 px) and the translucent tab-toggle (36 px). One black pill per visible viewport is the brand's whole conversion story.

button-primary
bg #000 · text #fff · radius 999 · pad 12 12 · button-md (16/500)
button-secondary
bg #fff · text #000 · radius 999 · pad 12 12 · button-md
button-subtle
bg #efefef · text #000 · radius 999 · pad 12 16 · button-md
button-floating
bg #fff · text #000 · radius 999 · pad 12 · Level 3 shadow
button-large-rounded
bg #000 · text #fff · radius 16 · pad 16 20 · button-large (18/500) · the only black CTA that breaks the pill rule
button-tab-translucent
bg #fff · text #000 · radius 36 · body-md-strong · off-shape, tighter than the canonical pill

04 / Cards & Containers

## Cards & Containers

Cards round to 16 px. Promo cards come in light and dark polarity-flipped variants. The signature alternating-band rhythm — white card, black card, white card, black footer — is the brand's whole depth system.

#### Card content

Default content card chrome — flat, no shadow.

card-content · bg #fff · radius 16 · pad 24

#### Card elevated

Same chrome plus Level 1 subtle drop shadow.

card-elevated · bg #fff · radius 16 · pad 24 · shadow 1

#### Card soft tinted

Gray-tinted sub-region inside a page band.

card-soft-tinted · bg #efefef · radius 16 · pad 24
/ 4:3 editorial illustration

#### Plan for later

Reserve your ride up to 30 days ahead. Set a pickup time and lock the price.

promo-card-illustrated · bg #fff · radius 16 · pad 24 · display-md headline

#### Drive with Uber

Set your hours. Earn on your terms. Polarity-flipped mid-page promo with a white-pill CTA.

promo-card-on-dark · bg #000 · text #fff · radius 16

#### Request form card

Pickup + destination + date/time + black CTA, stacked inside a 16 px shadowed card.

request-form-card · radius 16 · pad 16 · shadow 2
Showcase image card

#### Go•Get 2026

Annual showcase image card — 2:3 desktop, 4:3 mobile. display-xxl headline overlays the bottom.

05 / Forms

## Form Elements

Two input variants — a canvas-soft default and a slightly-lighter nested variant for use inside white cards. Inputs sit on canvas-soft surface with flat corners; only the ride-request-form-input-row rounds to 8 px.

Pickup location
text-input · bg #efefef · radius 0 · pad 16 · body-md
Destination
text-input-on-soft · bg #f3f3f3 · radius 0 · pad 16
Notes for driver
textarea · same chrome as text-input

06 / Spacing

## Spacing Scale

Base unit 4 px. Sections sit at 32 px gutters; promo-card insets at 24 px; the ride-request form keeps a compact 16 px interior so the form-input rows breathe.

xxs4 px
xs6 px
sm8 px
md12 px
lg16 px
xl20 px
2xl24 px
3xl32 px

07 / Radius

## Border Radius Scale

The pill is the brand's signature interactive shape — 999 px on every interactive element. Cards sit at 16 px. The tab-toggle is the only off-shape exception at 36 px.

none0 pxFull-bleed hero / footer
md8 pxRequest-form-input rows
lg12 pxSmaller secondary cards
xl16 pxCanonical card radius
pill999 pxEvery interactive element
pill-tab36 pxTab-toggle only
full9999 pxCircular icon containers

08 / Elevation

## Elevation & Depth

Four levels. Level 0 (flat) is the default — the brand leans on the hairline-of-canvas contrast and the polarity-flipped black bands for depth, not shadow. Shadow is reserved for the floating pill and the ride-request form card.

##### Level 0 — Flat

No shadow, no border. The default — most cards lean on hairline-of-canvas contrast.

##### Level 1 — Subtle Drop

rgba(0,0,0,0.12) 0 4 16 0 — card-elevated frames around promo cards.

##### Level 2 — Card Drop

rgba(0,0,0,0.16) 0 4 16 0 — the ride-request form card on the hero.
Level 3 — Pill Float — shadow 0 2 8 0.16

09 / Signature

## Signature Components

The ride-request form card, the category chip row, the FAQ accordion, the app-download pill, the alternating hero bands (light + dark), and the showcase image card — the components that, taken together, carry the brand even without illustrations.

### Request form card

Current location
Where to?
TodayNow

#### Anatomy

- Tab toggle — Ride / Drive at 36 px radius.
- Pickup row — square dot + current-location label, 8 px radius input row.
- Destination row — square dest dot + Where to placeholder.
- Date / time chip — Today + Now, right-aligned.
- Primary CTA — black "See prices" pill, 999 px.

#### Card chrome

- Background #ffffff, radius 16 px, padding 16 px.
- Level 2 drop shadow 0 4 16 rgba(0,0,0,0.16).
- Max-width 490 px on desktop; full-width edge-to-edge on mobile.

### Category button row

### FAQ accordion

What is the cancellation policy?+
Can I reserve a ride for someone else?+
How are fare estimates calculated?+
When am I charged for my ride?+

### App download pills

Download the Rider app Download the Driver app

### Hero bands (light + dark)

### Go anywhere with Uber

Request a ride, hop in, and go. Light hero band — display-xxl headline at 52 / 700 on canvas white.

### Drive when you want

Make the money you need. Set your own hours. Dark hero band — same headline scale, secondary white-pill CTA.

10 / Responsive

## Responsive Behavior

Mobile-first breakpoints. Nav stays horizontal until ~1120 px; promo cards collapse from 2-up to 1-up at the mobile boundary; ride-request form scales from a 490-px max-width card to full-bleed edge-to-edge.

Name | Width | Key Changes
--- | --- | ---
Mobile | < 600 px | Nav collapses to hamburger; promo cards stack; ride-request form full-width.
Mobile-Large | 600–767 px | Same as Mobile; chip rows enable horizontal scroll.
Tablet | 768–1119 px | 2-up promo grid at upper widths; nav stays horizontal.
Desktop | 1120–1135 px | Full nav row visible; promo cards 2-up.
Desktop-Large | ≥ 1136 px | Container caps at ~1200 px; bands stay edge-to-edge while content centres.

Mobile< 600
Mobile-Large600–767
Tablet768–1119
Desktop1120–1135
Desktop-Large≥ 1136

#### Touch Targets

- button-primary renders ~44 px tall (10 px vertical padding + 24 px label line-height) — meets WCAG AAA.
- button-large-rounded renders ~56 px tall — comfortable for the ride-request flow's primary CTA.
- category-button chips inflate to ≥ 44 px through extra padding on touch viewports.

#### Collapsing Strategy

- Nav — full link row + Help / Log in / Sign up pills at desktop. Collapses to logo + hamburger at mobile; menu overlays full-screen with the same link list stacked.
- Ride-request form card — at desktop, the form sits inside a max-490-px 16 px card with shadow. At mobile, full-width edge-to-edge.
- Promo cards — at desktop, image-left + content-right (or alternating). At mobile, image always above content.
- Annual showcase card — scales from a 2:3 desktop frame to a 4:3 mobile frame; date text resizes proportionally.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding