# Uber: brand book and build spec

Black and white, nothing else: a black page of dark pills with one white CTA, a custom transit-signage grotesque, and product color that only ever appears inside photos. Uber Eats owns green; Uber owns contrast.

From unfairly.ai/brand-guidelines/uber, checked 2026-10-29. Unofficial study; not affiliated with Uber.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Uber makes the interface the brand. A black page, white type and a working request form say more than any color could, so color is left to the products (Eats green) and to real photos of people on the move. Based on: From the published two-color core (black and white only), the rule that Eats green appears only on Eats assets, and the homepage, which opens on a live ride form instead of a campaign.

## Purpose

Not published on the public guide: The public brand site does not state a mission; the homepage implies it: get people and things where they need to go. (our reading; )

Story: Uber replaced its 2016 bit-and-atom icon with a plain wordmark in September 2018 (Wolff Olins with type studio MCKL), adding the custom Uber Move typeface and a black-and-white core. The "On our way" platform and Uber's first sonic identity followed on July 26, 2024. (published)

## Fixed and flexible

Never changes:
- Black and white core; no other brand color on Uber (rides) work
- The wordmark, never localized, with clear space of one U height
- Pill-shaped controls and 8px-radius buttons
- Partner logo leads, Uber second, separated by a line

The one thing that varies: Photography and product color carry the variety; product sub-brands (Eats green) bring their own color but only on their own assets.

## Positioning

- **Statement**: Uber is a digital platform connecting people with independent drivers and couriers, not a ride or delivery company (paraphrase). (published)
- **Category**: Mobility, delivery and travel platform: rides, Uber Eats, Courier, Reserve, Rent, Uber for Business, and since GO-GET 2026 hotels. (observed)
- **Audience**: Riders, eaters, earners (drivers and couriers), businesses: the homepage serves each a band. (observed)
- **Promise**: Go anywhere, get anything: the hero line and the request form are the promise. (our reading)
- **Differentiators**: One account for rides, delivery, travel and earning (homepage band order)

## Messaging

Boilerplate (published): Uber is a technology platform that connects people with independent drivers who drive with Uber and couriers who deliver with Uber Eats (paraphrase of the co-marketing messaging rule).

Taglines:
- On our way (Parent-brand tagline on every end card; campaign launched July 26, 2024)
- Go anywhere (homepage H1)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Ride | Request a ride, hop in, and go (paraphrase of the Ride card). |  | observed |
| Deliver | Meals, groceries and same-day packages from the same app. |  | observed |
| Earn | Drive, deliver or use specialized skills on your own schedule. |  | observed |
| Business | Control and insight for company travel and meal programs. |  | observed |

They never claim:
- Never call Uber a ride service, taxi or delivery company: it is a platform
- Never use "Uber" as a noun for a ride or as a verb

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Go anywhere" | homepage | https://www.uber.com/us/en/ |
| "Explore what you can do with Uber" | homepage | https://www.uber.com/us/en/ |
| "How to request a ride" | homepage | https://www.uber.com/us/en/ |
| "Planning your next getaway?" | homepage | https://www.uber.com/us/en/ |
| "More ways to use Uber" | homepage | https://www.uber.com/us/en/ |
| "Get member savings on rides and delivery" | homepage | https://www.uber.com/us/en/ |
| "Earn with Uber" | homepage | https://www.uber.com/us/en/ |
| "All the benefits of Uber, reimagined for business" | homepage | https://www.uber.com/us/en/ |
| "It’s easier in the apps" | homepage | https://www.uber.com/us/en/ |
| "On our way" | brand tagline | https://assets.uber.com/document/431#/-/end-cards |
| "Inspire possibilities" | brand portal | https://brand.uber.com/ |

## Voice

Tone words: Plain, Helpful, Brief.

Traits:
- Direct, but not Clever (observed)
- Functional, but not Decorative (observed)
- Precise about itself, but not Casual with the name (published)
- Warm in film, but not Cold (published)

- The homepage speaks in short functional imperatives and product names; the campaign voice ("On our way") is warmer and about showing up for people.
- A landing page follows the homepage voice: a two-to-four-word headline, one plain sentence, one action.

Rules a copy check enforces:
- Sentence case headlines
- Uber is never a noun or a verb: say "request a ride", "your Uber ride is here", never "call an Uber" or "Uber to the event"
- Describe Uber as a platform that connects people with independent drivers and couriers
- Approved: Request a ride, Book a ride, Your ride is here, Your driver, Savings with Uber Cash
- Translate the tagline if needed, never the logo
- Buttons and links are two or three words: See prices, Sign up now, Learn more

Their words: Request a ride, Request an Uber ride, Book a ride, Your ride is here, Your Uber ride is here, Your driver, Uber Cash.
Never: Call an Uber, Book an Uber, Uber is here, Uber savings, Uber purchases, Uber to the event.

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Homepage and product UI 1, Brand campaign and end cards 3. Two voices. The homepage is plain and functional; campaign film and end cards ("On our way") are warmer. Levels are our reading.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Black | #000000 | core | Published core color (PMS Black 6 C). The homepage ground for every band except Eats and Uber One, and the fill of buttons on white. |
| White | #FFFFFF | core | Published core color. Type on black, the one filled CTA on black, the Eats and Uber One grounds, QR cards. |
| Uber Eats green | #06C167 | sub-brand | Published for Uber Eats only (PMS 7480 C). On uber.com it appears only inside Eats photos and the journey-line gif. |
| Card grey | #292929 | surface | Explore cards on black (observed). |
| Pill black | #111111 | surface | Nav pills, footer buttons (observed). |
| Field grey | #F6F6F6 | surface | Form fields and light pills (observed). |
| Selector grey | #EFEFEF | surface | Pickup now pill (observed). |
| Placeholder grey | #4A4A4A | text | Field placeholders (observed). |
| Legal grey | #AFAFAF | text | Copyright and legal links (observed). |
| Focus blue | #276EF1 | state | Keyboard focus ring only (observed). |

Proportion (observed; Not published as a ratio. Measured share of the uber.com homepage height at 1440: about 70% black ground, 15% white ground, 15% photography; no colored grounds.): Black 70%, White 15%, Photography 15%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Uber Move | Proprietary to Uber (drawn with MCKL for the 2018 identity). The brand portal lists font packages (Global, English and Monospace collections); not an open font | Outfit | system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif |
| body | Uber Move Text | Proprietary (Uber) | Public Sans | system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (h1) | --text-hero-headline-h1-* | display | 52px | 36px | 1.23 | 0px | 660 |
| Section headline (h2) | --text-section-headline-h2-* | display | 36px | 28px | 1.22 | 0px | 660 |
| QR card title | --text-qr-card-title-* | display | 24px | 24px | 1.33 | 0px | 660 |
| Item title | --text-item-title-* | body | 18px | 18px | 1.33 | 0px | 600 |
| Body | --text-body-* | body | 16px | 16px | 1.5 | 0px | 400 |
| Button label | --text-button-label-* | body | 16px | 16px | 1.25 | 0px | 600 |
| Location label | --text-location-label-* | body | 16px | 14px | 1.25 | 0px | 600 |
| Explore card title | --text-explore-card-title-* | body | 16px | 12px | 1.25 | 0px | 600 |
| Explore card description | --text-explore-card-description-* | body | 12px | 12px | 1.67 | 0px | 400 |
| Pill label | --text-pill-label-* | body | 14px | 14px | 1.14 | 0px | 600 |
| Footer link | --text-footer-link-* | body | 14px | 14px | 1.43 | 0px | 400 |
| Legal | --text-legal-* | body | 12px | 12px | 1.67 | 0px | 400 |

## Layout

Measured on https://www.uber.com/us/en/: computed styles, bounding boxes and hover/focus states at 1440 and 390 in headless Chromium, 2026-10-29; images downloaded from their original tb-static.uber.com files.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 144px | 24px |
| Section padding | 64px | 40px |
| Container max width | 1152px | full |
| Grid columns | 12 | 1 |
| Gutter | 36px | 16px |
| Card gap | 18px | 18px |
| Navigation height | 64px | 64px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| hero headline | 36px / 44px | 52px / 64px |
| section headline | 28px / 36px | 36px / 44px |
| side margin | 24px | 144px (nav 80px) |
| band padding | 40px | 64px |
| explore cards | 3x2 tiles 106x96, label only | 3x2 cards 372x160 with copy and Details |
| three-up rows | carousel, one card, pager | three columns 360 wide |
| photo banners | hidden | 1152x270 |
| nav | wordmark, Log in, Sign up, menu | wordmark, 6 pills, 4 utility pills |

Breakpoints from Uber's CSS: 600, 1136px.

Homepage bands, top to bottom (observed):
1. Nav
   - Desktop: y 0-64, black, not sticky; wordmark at x 80, six pills from x 155, four utility pills ending at x 1360
   - Phone: 64px: wordmark at x 24; Log in pill, white Sign up pill, 36px round menu button ending at x 380
   - Nav pills: #111111, 36px tall, 14px #FCFCFC, 12px side padding, 4px apart
   - Only Sign up is a white pill with black text
2. Hero: Go anywhere
   - Desktop: y 64-651: ride request form left (x 144), 459x459 photo collage right at x 738, y 128
   - Phone: y 64-496: form only, no collage, no Pickup now pill
   - Location line, 52px headline, Pickup now pill, two #F6F6F6 fields, See prices button + underlined Log in link
   - Glass bar (rgba 255,255,255,0.2, 16px radius) over the bottom of the collage with Schedule ahead pill
3. Explore what you can do with Uber
   - Desktop: h2 y 651 (no gap after the hero band); six #292929 cards, 3x2, 372x160, 18px gaps, y 725-1081
   - Phone: h2 y 516; 3x2 grid of 106x96 tiles at y 611 and 723
   - Card: title 16px, 12/20 description, white Details pill, 128px 3D illustration at right
   - Illustrations are full-color 3D renders on transparent ground: car, calendar, luggage, key fob, teen, courier
4. Journey line
   - Desktop: 1152x270 image at x 144, y 1145-1415 (64px below the cards)
   - Phone: 342x80 at x 24, y 839-919
   - A single animated green line; no text
5. How to request a ride
   - Desktop: h2 y 1543 (128px below the journey image); images y 1623; pager buttons y 1974-2026
   - Phone: h2 y 1019; one card; pager 1/5
   - Each step image (supplied) has the photo and a white icon tile baked in
   - Step title 18/24, body 16/24, 354px wide, 12px between title and body
6. Planning your next getaway?
   - Desktop: video 558x318 at x 738, y 2154; text block (h2 2181, body 2293, pill 2397) vertically centered on it
   - Phone: h2 y 1560, body, pill y 1776, video y 1860
   - City pill: #F6F6F6, pin icon, "NW Indiana", chevron, 162x48
7. More ways to use Uber
   - Desktop: h2 y 2600; three 360x240 images at y 2680; titles y 2940; links y 3044
   - Phone: h2 y 2137; carousel, one card, pager 1/3
   - Images have a grey product-tile composite baked in
8. Eats banner (black to white)
   - Desktop: 1152x270 photo at y 3186-3456; ground switches black to white at y 3322 (the photo middle)
   - Phone: hidden; hard switch from black to white at y 2726
   - The photo has rounded corners baked in (transparent PNG)
9. Uber Eats two-up
   - Desktop: two 558x372 photos with a baked 4px green frame at y 3567; titles y 3960; buttons y 4051
   - Phone: stacked, first photo y 2766, second y 3214
   - Buttons: black fill, white 16px, 8px radius, 48px
10. Uber One
   - Desktop: photo 558x372 at x 738, y 4163; text block (h2 4229, body 4341, button 4421) vertically centered on it
   - Phone: h2 y 3666, body, button y 3834, photo y 3918
   - Black Sign up now button
11. Family banner (white to black)
   - Desktop: 1152x270 photo at y 4663-4933; ground switches white to black at y 4731
   - Phone: hidden; hard switch from white to black at y 4186
   - Same banner geometry as the Eats banner
12. Earn with Uber
   - Desktop: h2 y 5029; three 360x203 photos at y 5109; titles y 5331; links y 5441
   - Phone: h2 y 4206; carousel, pager 1/3
   - One underlined link per card
13. Uber for Business
   - Desktop: image 558x558 at x 144, y 5531; text (h2 5666, body 5778, button 5906) at x 837, vertically centered on it
   - Phone: image y 4760 first, then h2 y 5138, body, button y 5378
   - White Learn more button
14. It’s easier in the apps
   - Desktop: h2 y 6153; two white 558x198 QR cards at y 6232
   - Phone: h2 y 5466; two stacked 342x118 cards at y 5538 and 5692
   - QR title 24/32 bold black, "Scan to download" 16px, arrow right
15. Footer
   - Desktop: y ~6494-7536: policy links and wordmark row, Help, four link columns, socials, store badges, legal
   - Phone: single column from y 5850 to 7872
   - Four columns at x 144, 441, 738, 1035 (297px apart)
   - Legal 12px #AFAFAF

## Page anatomy

How Uber's own landing pages are built, part by part (observed; https://www.uber.com/us/en/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: A black 64px bar of dark pills: wordmark, product pills left, utility pills right, one white Sign up pill
- ground: #000000, no border, no shadow, scrolls away (not sticky)
- height: 64px at 1440 and 390
- logo: white wordmark (assets: logo.white SVG) 51x18 at x 80, y 23 (vertically centered). On phones it is smaller: 42x15 at x 24, y 25
- links: 6 pills in order "Ride", "Earn", "Travel", "Business", "Uber Eats", "About" (About adds chevron-down-nav.svg 18px after the label, 90x36). Widths 53, 54, 64, 83, 88, 90. Pills #111111, 36px tall, 999px radius, 12px side padding, 14/16 #FCFCFC, 4px apart, first at x 155, y 14
- actions: right group ending at x 1360, 4px apart: "EN" pill with globe-nav.svg 16px before the label (67x36, x 1089), "Help" (54x36), "Log in" (64x36), "Sign up" white pill with black text (74x36, x 1286)
- sticky: no
- phone: wordmark at x 24; right group: "Log in" #111111 pill (64x36, x 198), "Sign up" white pill (74x36, x 266), and a 36x36 #111111 circle with menu.svg (two white bars, 16px) at x 344. No product pills
- menu labels:
  - Ride
  - Earn
  - Travel
  - Business
  - Uber Eats
  - About
- utility labels:
  - EN
  - Help
  - Log in
  - Sign up

**Hero**
- summary: Black band; left: a location line, a 52px "Go anywhere" headline and a ride request form; right: a square photo collage with a frosted Schedule ahead bar
- desktop: band y 64-651. Left column x 144. Location row y 128-152: pin.svg 14px white at x 144, "NW Indiana, US" 16/20 medium white at x 166, then "Change city" 16/24 regular white with a plain 1px text-decoration underline at the default offset (tight to the text, not the background-line link style) at x 290. Headline y 160-224 (52/64, one line). Pickup now pill y 240-288, fixed 174x48, no wrapping: clock icon at x 160, label at x 188, chevron at x 282. Pickup field y 312-368 and Dropoff field y 384-440, each 396x56. See prices y 456-504, fixed width 127px (not text plus padding); "Log in to check your activity" link starts at x 295, its text at y 470. Grid: the hero uses the two-up grid (558px columns at x 144 and 738, 36px gutter); the form sits in the left column (fields 396 wide, text 459 max) and the collage is a 459x459 square left-aligned in the right column at x 738, y 128-587; no CSS radius (any corner softening is in the image file). The band ends 64px below the collage (y 651)
- phone: band y 64-496. Location row y 104 (pin, "NW Indiana, US" 14/16 medium, "Change city" 16/24 underlined at x 153); headline 36/44 y 136; fields 342x56 at y 212 and 284; See prices 127x48 at y 356; "Log in to check your activity" on its own row at y 422. No Pickup now pill, no collage. All at x 24
- at rest: Collage is a single static JPEG; the glass bar sits over its bottom. Fields are empty, showing placeholders "Pickup location" and "Dropoff location" in #4A4A4A
- media: hero-travel-collage.jpg (1080x1080): six travel photos in a 2-column grid with black gutters baked in; shown at 459x459, object-fit cover
- type: headline display 52/64 white; location 16/20 medium; field placeholders 16/24 #4A4A4A
- cta: white See prices button (8px radius) plus one underlined text link 24px to its right. Pickup now pill: clock.svg 20px at x+16, "Pickup now" 16/20 medium #111111, chevron-down-small.svg 20px at the right. Field icons: pickup-dot.svg and dropoff-square.svg, 16px, at x 160, joined by a 1px #FFFFFF line from dot center to square center (visible across the black gap); navigation-arrow.svg 24px black at x 500 inside the pickup field
- proof: none
- overlay: glass bar: 423x80 at x 756, y 489 (18px inside the collage left edge, 18px above its bottom), rgba(255,255,255,0.2) with backdrop-filter blur(12px), 16px radius; "Ready to travel?" 16/20 medium white at x 768, vertically centered; "Schedule ahead" #F6F6F6 pill 152x48 at x 1015, 12px from the bar right edge

**Explore what you can do with Uber**
- summary: Six product cards on #292929
- ground: #000000
- desktop: h2 36/44 at y 651, x 144, one line; cards start y 725 (30px below the h2), columns x 144 / 534 / 924, 372x160, 18px gaps; row 2 at y 903; last card ends y 1063 and the band ends y 1081
- phone: h2 28/36 two lines at y 516-588; tiles 106x96 at x 24 / 142 / 260 (12px gaps), rows y 611 and 723 (16px gap), radius 12, #292929: illustration 56x56 centered at the tile top (y+8), label 12/16 medium white centered at y+72. No descriptions, no Details pills
- anatomy:
  - Order and labels: Ride, Reserve, Airport / Rental Cars, Teens, Courier
  - Descriptions (their words): Ride "Go anywhere with Uber. Request a ride, hop in, and go." Reserve "Reserve your ride in advance" plus a short clause about relaxing on trip day (two lines) Airport "Request a ride to or from the airport with room for your luggage." Rental Cars "Your perfect rental car is a few clicks away. Learn more about Uber Rent." Teens "Teen accounts offer top-rated drivers and built-in safety tools." Courier "Uber makes same-day item delivery easier than ever."
  - Card: 16px padding; title 16/20 medium white at x+16, y+16; description 12/20 white at y+44, max 212px, two lines; Details pill (white, black 14/16 medium, 70x36, 999px) at x+16, y+108
  - Illustration 128x128 at x+228, y+16
- components: explore_card, details_pill

**Journey line**
- summary: A wordless animated divider
- ground: #000000
- desktop: journey-line.gif 1152x270 at x 144, y 1145-1415 (64px after the last card); the next h2 starts 128px below the image
- phone: the same image at 342x80, x 24, y 839-919 (20px below the tiles); the next h2 starts 100px below it, at y 1019
- anatomy:
  - Use the supplied gif (it holds its own resting frame); never draw text here
- components: image

**How to request a ride**
- summary: Five-step carousel, three steps visible
- ground: #000000
- desktop: h2 at y 1543; images 354x199 at y 1623 (36px below the h2) for x 144 / 534 / 924, steps 4 and 5 continue past the 1296 edge and are clipped; step title 18/24 medium at y 1842 (20px below the image); body 16/24 two lines at y 1878 (12px below the title); pager row: "1/2" 14/16 medium white at x 1138, y 1992, then the previous button (disabled) at x 1180 and next at x 1240, both 52x52 at y 1974
- phone: h2 28/36 at y 1019; image 329x185 at y 1091; title y 1296; body y 1332 (two lines); pager "1/5" at x 207, buttons at x 250 and 310, y 1428
- anatomy:
  - Steps (their words): "Get started" / "Enter your destination on Uber.com or in the Uber app." then a three-word sentence to choose a ride and confirm; "Get matched with a driver" / "A nearby driver accepts your request. You'll be notified when they're close."; "Meet your driver" / "Verify your driver's name, vehicle details and your destination, then enter the vehicle."; "Enjoy the ride" / "Your driver has turn-by-turn directions for the fastest route."
  - Step 5 sits beyond the clipped edge on desktop and behind the pager on phones: give it the image only, never visible at rest
  - Images howto-1..5 already include the photo, the white rounded icon tile at bottom-left and black space: place them as-is
  - Pager buttons: chevron-left.svg / chevron-right.svg 24px; previous disabled (#E0E0E0 at 60%, chevron #C4C4C4), next #F6F6F6 with #111111 chevron
- components: carousel_button

**Planning your next getaway?**
- summary: Split: text + city pill left, autoplay video right
- ground: #000000
- desktop: video 558x318 at x 738, y 2154; text column x 144, 459 max, vertically centered on the video: h2 two lines at y 2181-2269, body 16/24 three lines at y 2293 (24px below), city pill 162x48 at y 2397 (32px below the body)
- phone: h2 two lines y 1560, body four lines y 1648, city pill y 1776, video 342x196 at y 1860
- anatomy:
  - Body (their words): "From weekend road trip to international destination, we've got you covered." then "Explore transport options, points of interest, and more with our new City Hub."
  - City pill: #F6F6F6, pin-city.svg 14px, "NW Indiana" 14/16 medium #111111, chevron-down-city.svg 16px, 999px
- components: light_pill, video

**More ways to use Uber**
- summary: Three-up cards with underlined links
- ground: #000000
- desktop: h2 at y 2600; images 360x240 at y 2680 (x 144 / 540 / 936); title 18/24 at y 2940 (20px below); body 16/24 two lines at y 2976 (12px below the title); link row y 3044-3076 (20px below the body)
- phone: h2 y 2137; image 331x221 at y 2209; title y 2450; body y 2486; link y 2560; pager "1/3" y 2634
- anatomy:
  - Titles / bodies / links (their words): "Plan your trip in advance" / "Book your ride up to 90 days ahead" plus a clause naming Reserve on Uber.com or the app (two lines) / Reserve now; "Ride in style" / "Travel in high-end vehicles with our top-rated drivers." / See prices; "Send items within the day" / "Get same-day local delivery of forgotten keys, care packages, and much more." / Send a package
  - Images include a light grey car tile overlapping the photo at bottom-left: place as-is
- components: text_link, carousel_button

**Eats banner**
- summary: Rounded photo banner bridging black to white
- ground: split: #000000 above y 3322, #FFFFFF below
- desktop: banner-eats-bags.png 1152x270 at x 144, y 3186-3456 (110px below the link row); the ground line passes behind the image at its vertical middle
- phone: not shown; the black band ends at y 2726 and the white band starts with a straight edge
- anatomy:
  - The PNG carries its own rounded corners (transparent): no CSS radius
- components: image

**Uber Eats**
- summary: Two-up photo cards with black buttons
- ground: #FFFFFF
- desktop: photos 558x372 at y 3567 (111px below the banner), x 144 and 738; title 18/24 black at y 3960 (21px below); body 16/24 one line at y 3995 (12px below the title); black button 48px at y 4051 (32px below the body)
- phone: photo 342x228 at y 2766; title y 3015; body two lines y 3050; button y 3130; second photo y 3214 (36px after the button)
- anatomy:
  - Titles / bodies (their words): "Order from your favorite spots" / "Find local meals for delivery or pickup in the Uber Eats app or online."; "Get essentials delivered" / "Shop for groceries and everyday items from stores near you."
  - Buttons: Search restaurants (193x48), Stock up now (151x48)
  - The 4px green frame and rounded corners are part of the photos
- components: button_primary_on_light

**Uber One**
- summary: Split: text left, photo right
- ground: #FFFFFF
- desktop: photo 558x372 at x 738, y 4163 (64px below the Eats buttons); text column x 144 (459 max), vertically centered on it: h2 two lines y 4229, body two lines y 4341, Sign up now (142x48) y 4421
- phone: h2 y 3666; body y 3754; button y 3834; photo 342x228 y 3918
- anatomy:
  - Body (their words): "Join Uber One for member pricing and exclusive perks with Uber."
  - Photo carries a thin gold square line and the Uber One badge
- components: button_primary_on_light

**Family banner**
- summary: Second photo banner bridging white back to black
- ground: split: #FFFFFF above y 4731, #000000 below
- desktop: banner-family-car.png 1152x270 at x 144, y 4663-4933 (128px below the Uber One photo); the ground turns black 68px below the image top
- phone: not shown; straight switch to black at y 4186
- anatomy:
  - Rounded corners are in the PNG
- components: image

**Earn with Uber**
- summary: Three-up earning cards
- ground: #000000
- desktop: h2 at y 5029 (96px below the banner); photos 360x203 at y 5109; title y 5331; body two lines y 5367; link y 5441
- phone: h2 y 4206; photo 331x186 y 4278; title y 4484; body y 4520; link y 4594; pager "1/3" y 4668
- anatomy:
  - Titles / bodies / links (their words): "Drive and earn on your schedule" / "Make money with rides, deliveries, or both. Use your car or rent one." / Sign up to drive; "Deliver when you want" / "Turn your commute into earnings. Just go online, pick up, and drop off." / Get details; "Earn with your specialized skills" / "Turn your expertise into a remote earning opportunity with Uber AI Solutions." / Sign up
  - Blue frames are baked into the photos
- components: text_link

**Uber for Business**
- summary: Split: composite image left, text right
- ground: #000000
- desktop: image 558x558 at x 144, y 5531 (58px below the links); text column x 837 (459 max), vertically centered on it: h2 two lines y 5666, body four lines y 5778, Learn more (136x48) y 5906
- phone: image 342x342 at y 4760; h2 y 5138; body five lines y 5226; button y 5378
- anatomy:
  - Body (their words, two sentences, four lines at 459px; line 1 ends after "more control," and line 2 after "enterprise users."): first a sentence that Uber for Business gives your organization more control, deeper insights, and features built for enterprise users; then "Manage and track business travel, meal programs, and more on one dashboard."
  - The image already includes the circular photo crop and three dark icon tiles
- components: button_primary_on_dark

**It’s easier in the apps**
- summary: Two white QR download cards
- ground: #000000
- desktop: h2 at y 6153 (64px below the image); cards 558x198 at y 6232, x 144 and 738, white, square corners
- phone: h2 y 5466; two stacked 342x118 cards at y 5538 and 5692 with a 1px rgba(0,0,0,0.12) border; 84px QR at x 41; titles 24/32 in two lines at x 141
- anatomy:
  - Titles (their words): "Download the Uber app" and "Download the Driver app"
  - Card: 150x150 QR at x+24, y+24; title 24/32 display black at x+198, y+72; "Scan to download" 16/24 under it; arrow-right.svg 16x25 black at x+518, vertically centered
- components: qr_card

**Footer**
- summary: Black footer: privacy links stacked top-right, wordmark and Help left, four link columns, socials, store badges, legal row
- ground: #000000
- anatomy:
  - Footer starts after ~64px of black below the QR cards
  - Top right: "Do not sell or share my personal information" at y 6559 and "Google Data Policy" at y 6595, 14/20 white, stacked and RIGHT-aligned to x 1296 (the shorter line starts further right)
  - Left: white wordmark 51x18 at x 144, y ~6606 (centered in a 112px row starting y 6559); "Visit Help Center" 16/16 white at x 144, y 6672
  - Columns: heads at y 6789, x 144 / 441 / 738 / 1035, 18/24 medium white; links from y 6833, 14/20 white, 36px pitch
  - Company: About us, Our offerings, Newsroom, Investors, Blog, Careers, Uber One
  - Products: Ride, Drive, Deliver, Eat, Uber for Business, Uber Freight, Gift cards, Uber Health, Uber Advertising, Merchants
  - Global citizenship: Safety, Sustainability
  - Travel: Reserve, Airports, Hotels, Cities
  - Social row y 7241: four 48x48 #111111 squares, 8px radius, touching, from x 132: linkedin.svg, youtube.svg, instagram.svg, x-twitter.svg (16px white glyphs). Right, same row: "English" with globe.svg (97x36 at x 1063) and "NW Indiana" with location-marker.svg (about 128x36 at x 1164): a tight pair 4px apart, #111111, 8px radius, 14/16 medium #FCFCFC, the pair ending about x 1292
  - Store badges y 7341: Google Play 128x38 at x 148, App Store 128x43 at x 284
  - Legal row: "© 2026 Uber Technologies Inc." 12/20 #AFAFAF at x 144, y 7443; right: "Privacy" x 1089, "Accessibility" x 1160, "Terms" x 1262, all at y 7432, 12/20 #AFAFAF
  - Page ends at y 7536
- phone: one column at x 24: wordmark row y 5890, "Visit Help Center" y 6003, then the two privacy links y 6057 and 6093, column heads at y 6180 / 6527 / 6982 / 7149 with links on a 36px pitch, socials at y 7385 from x 12, English and NW Indiana buttons stacked (y 7481, 7527), badges, © line y 7695, Privacy / Accessibility / Terms in one row at y 7796 (x 24 / 96 / 198). Page ends y 7872

**On dark grounds**
- secondary button: none: on black the alternative to the white CTA is the underlined text link (white text, white 1px line over a #CBCBCB track, 6px below)
- link: white, no text-decoration, the two-line background underline; footer links have no underline
- muted text: none in body copy: all body and descriptions are #FFFFFF; only the legal row is #AFAFAF
- hairline: none: no rules or borders anywhere on black
- logo variant: white wordmark

## Components

- **button primary on dark** (observed): fill #FFFFFF, text #000000, radius 8, height 48, padding x 25, font size 16, weight 600, use See prices, Learn more: the one filled CTA on black bands, transition background 0.2s cubic-bezier(0, 0, 1, 1)
  - hover (observed): box-shadow inset 999px 999px 0 rgba(236,236,236,0.15)
  - focus (observed): box-shadow inset 0 0 0 2px #FCFCFC, 0 0 0 2px #276EF1
- **button primary on light** (observed): fill #000000, text #FFFFFF, radius 8, height 48, padding x 25, font size 16, weight 600, use Search restaurants, Stock up now, Sign up now on white bands
  - hover (observed): box-shadow inset 999px 999px 0 rgba(236,236,236,0.15)
  - focus (observed): box-shadow inset 0 0 0 2px #FFFFFF, 0 0 0 2px #276EF1
- **nav pill** (observed): fill #111111, text #FCFCFC, radius pill, height 36, padding x 12, font size 14, weight 600, use Every nav link (Ride, Earn, Travel, Business, Uber Eats, About), EN, Help, Log in. Pills sit 4px apart
- **nav signup** (observed): fill #FFFFFF, text #000000, radius pill, height 36, padding x 12, font size 14, weight 600, use Sign up, the only white pill in the nav
  - hover (observed): background-color #E2E2E2
- **time pill** (observed): fill #EFEFEF, text #111111, radius pill, height 48, padding x 16, font size 16, weight 600, use "Pickup now" with a clock icon left and chevron right, 174x48
- **light pill** (observed): fill #F6F6F6, text #111111, radius pill, height 48, padding x 16, font size 16, weight 600, use "Schedule ahead" inside the hero glass bar; the city selector (14px, pin icon + chevron, 162x48)
- **field** (observed): fill #F6F6F6, text #4A4A4A, radius 8, height 56, padding x 48, font size 16, weight 400, use Pickup location / Dropoff location: 396x56 at 1440 (342x56 on phones), 16px apart. Icons from assets: pickup-dot.svg (a black ring with a white center, 16px) and dropoff-square.svg (a black square with a small white square center, 16px), both at x+16, vertically centered; a 1px #FFFFFF vertical line joins their centers and stays visible across the 16px black gap between the fields; navigation-arrow.svg (24px, black) at the right end of the pickup field only (x+356). Placeholder text starts at x+48
- **details pill** (observed): fill #FFFFFF, text #000000, radius pill, height 36, padding x 12, font size 14, weight 600, use "Details" pill bottom-left of each Explore card
- **explore card** (observed): fill #292929, text #FFFFFF, radius 8, height 160, padding x 16, font size 16, weight 600, use 372x160: title 16px 600 top-left, description 12/20 white max 212px, Details pill at bottom-left (y+108), 128x128 3D illustration right-aligned at x+228, vertically centered. Phones: 106x96 tile, radius 12, illustration on top, title 14px 600 centered below, no description, no Details pill
- **text link** (observed): fill transparent, text #FFFFFF, radius 0, height 32, font size 16, weight 400, use Log in to check your activity, Reserve now, See prices, Send a package, Sign up to drive, Get details, Sign up, anatomy An inline span, 16px regular, no text-decoration, padding-bottom 6px; the underline is two 1px background-image lines at the bottom edge of the span (a #CBCBCB track with a line in the text color drawn over it), so the line sits 6px below the text box and runs exactly the text width. The span measures 25px tall; it sits in a 32px tall row. On white bands the text and line are #000000, transition 0.5s cubic-bezier(0.22, 1, 0.36, 1)
- **carousel button** (observed): fill #F6F6F6, text #111111, radius pill, height 52, padding x 14, font size 14, weight 600, use 52x52 circles, right-aligned, 8px apart, a "1/2" counter (14px 600 white) 22px to their left. The previous button at rest is disabled: #E0E0E0 at 60% with a #C4C4C4 chevron
- **glass bar** (observed): fill rgba(255,255,255,0.2), text #FFFFFF, radius 16, height 80, padding x 12, font size 16, weight 600, use Overlay on the bottom of the hero collage: 423x80 at collage x+18, y+361; "Ready to travel?" 16px 600 white left, Schedule ahead light pill right
- **qr card** (observed): fill #FFFFFF, text #000000, radius 0, height 198, padding x 24, font size 24, weight 660, use Two 558x198 white rectangles, square corners: 150x150 QR at x+24, y+24; title 24/32 display bold at x+198 vertically centered with "Scan to download" 16px under it; a 24px arrow at the right edge (48px right padding)
- **social button** (observed): fill #111111, text #FCFCFC, radius 8, height 48, padding x 0, font size 16, weight 400, use Footer: 48x48 squares (LinkedIn, YouTube, Instagram, X), touching, white 16px glyph centered
- **footer select** (observed): fill #111111, text #FCFCFC, radius 8, height 36, padding x 12, font size 14, weight 600, use Footer language (globe + "English") and city (pin + "NW Indiana") buttons, right-aligned

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-press | cubic-bezier(0, 0, 1, 1) | 200ms | background / inset-shadow wash on buttons and pills (hover darkens by an inset rgba(236,236,236,0.15) fill; light pills use rgba(17,17,17,0.06)) | observed |
| link-underline | cubic-bezier(0.22, 1, 0.36, 1) | 500ms | text-link underline transition | observed |
| journey-line |  |  | GIF: a thin green vertical line draws down in a black 1152x270 frame between Explore and How to request a ride. In the reference screenshot the line spans the full 270px height, about 6px wide, centered, green on black. Use the gif as-is; the draw-down is animation only | observed |
| getaway-video |  |  | autoplaying muted loop in the Planning your next getaway band (558x318). Resting state: the first frame, supplied as getaway-video-frame.jpg | observed |

## Icon tokens

Grid not published, stroke filled glyphs (pin, clock, chevron, arrow, globe, square, dot) at 16-24px, black on light pills and white on black (observed).
| Name | Size | Use |
|---|---|---|
| s | 16px |  |
| m | 24px |  |

## Signature moves

### Every control is a pill on black

Where: the nav and all hero controls.
Do: Nav items are #111111 pills 36px tall, 999px radius, 12px side padding, 14px semibold #FCFCFC, 4px apart; only Sign up flips to white with black text. The hero repeats the language: a #EFEFEF "Pickup now" pill, #F6F6F6 fields with 8px corners, a white 8px-radius See prices button. Square-cornered cards appear only for QR blocks..
Don't: No outlined buttons, no colored buttons, no underlined nav links.

### Black page, one white interruption

Where: uber.com/us/en homepage, top to bottom.
Do: Ground is #000000 from the nav to the More ways band, switches to #FFFFFF for Uber Eats and Uber One, then returns to #000000 for Earn, Business, apps and the footer. Each switch happens behind a full-width 1152x270 photo banner with 40px (Eats) corners: the ground changes color at a straight horizontal line passing behind the photo (at its middle for the Eats banner, 68px below its top for the family banner), so the photo bridges the two grounds..
Don't: No grey bands, no gradients, no colored section grounds.

### Product color lives inside the photo

Where: Eats and Earn rows.
Do: Uber Eats green (#06C167) appears only as a 4px frame baked into the Eats photos and on the bags; the Earn photos carry a 4px #276EF1-like blue frame; Uber One carries a thin gold square line and its badge. The CSS never colors anything but black, white and greys. Use the supplied images as-is: never redraw the frame in CSS..
Don't: Never add green or blue to buttons, type or grounds.

### Circle and square journey glyphs

Where: end cards (guide) and the pickup/dropoff fields (site).
Do: A filled circle marks the start and a filled square marks the end of a trip: Uber Move glyphs on either side of the "On our way" tagline, sized to the tagline; on the site, a 16px black dot icon (pickup) and 16px black square icon (dropoff) joined by a 1px line..
Don't: No arrows or other shapes in their place.

## Messaging: rules

The guide publishes how to talk about Uber more than what to say: Uber is a digital platform connecting people with independent drivers and couriers, never a ride or delivery company. Partner copy goes to Brand Desk for approval (3-5 business days). The homepage message is a list of doors: Go anywhere, Explore, How to request, Earn, Business, apps.

Why it works: Calling Uber a platform keeps legal and labor positioning consistent in every partner piece.

|  |  |
|---|---|
| Approval turnaround | 3-5 business days |
| Landing page voice | homepage voice: 2-4 word headline, one sentence, one action |

- Describe Uber as a platform, not a ride service or delivery company
- Use approved phrasing: Request a ride, Your ride is here
- Partner offers: "Earn Uber Cash", "Complete a qualifying ride with Uber"
- Submit all co-marketing to Brand Desk before launch
- Don't "Your Uber is here"
- Don't "Let's Uber to the show"
- Don't "Uber savings"

Real examples, to look at on Uber's own pages (not for reuse):
- Homepage hero collage beside the "Go anywhere" ride form: https://www.uber.com/us/en/

Sources: https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines, https://www.uber.com/us/en/

## Voice: rules

Short, sentence-case, practical. Buttons are two or three words (See prices, Sign up now, Learn more); body sentences explain one benefit each. Banned and approved phrase lists are published.

Why it works: The voice gets out of the way of the task; warmth is reserved for film.

|  |  |
|---|---|
| Approved | Request a ride; Book a ride; Your ride is here; Your driver |
| Not approved | Call an Uber; Book an Uber; Uber is here; Uber savings |

- Sentence case everywhere
- One idea per sentence
- Never "Uber" as noun or verb
- Don't Call an Uber
- Don't Book an Uber
- Don't An Uber fast deal

Do and don't:
- Do: "Your Uber ride is here". Approved phrasing.
- Don't: "Your Uber is here". Uber is never a noun.
- Do: "Request a ride". Approved verb phrase.
- Don't: "Call an Uber". Not approved.

Sources: https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines

## Logo: rules

A wordmark only: "Uber" in custom letterforms, black on light and white on dark. Clear space equals the height of the U. Partner lockups put the partner first, a line glyph between, spaced one U width each side. App icons are the white wordmark on a black rounded square (iOS), square or circle (Android). The logo is never localized.

Why it works: The 2018 identity brought the name back after users asked where the U went; a plain wordmark works in every market.

|  |  |
|---|---|
| Clear space | height of the U |
| Lockup spacing | width of the U each side of the line |
| Colors | black #000000 or white #FFFFFF |

- Black logo on light grounds, white on dark
- Clear space at least the U height on all sides
- Partner logo first, Uber second, separated by a line
- Never translate or localize the logo
- Don't Uber in a color
- Don't Uber leading a partner lockup
- Don't Recreating the wordmark in Uber Move type

Do and don't:
- Do: "Partner | Uber". Partner logo first, a line, then Uber in black.
- Don't: "Uber | Partner". Uber never leads a partner lockup.

Real examples, to look at on Uber's own pages (not for reuse):
- End card: white wordmark on black with the "On our way" tagline: https://assets.uber.com/document/431#/-/end-cards
- Uber for Business end card: stacked black logo on white: https://assets.uber.com/document/431#/-/end-cards

Sources: https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines, https://assets.uber.com/document/431#/-/end-cards, https://assets.uber.com/document/471

## Color: rules

Two core colors for Uber: black and white, published with HEX, RGB, CMYK and PMS. Uber Eats adds a third, Uber Eats green #06C167, restricted to the Eats app icon, badges, gift cards, bags and gifs. uber.com builds every surface from black, white and a short grey ramp (#111111, #292929, #4A4A4A, #AFAFAF, #EFEFEF, #F6F6F6).

Why it works: With only black and white, the interface reads as Uber anywhere, and product color stays a signal of the product.

- Uber work: black and white only
- Eats green only on Eats assets, as a ground for the logo or badge
- Greys are for UI surfaces, not for brand moments
- Blue only for focus rings

Not published: Grey ramp values (observed on uber.com only); A color ratio.

Do and don't:
- Do: "See prices". On black, the CTA is a white 8px-radius button with black text.
- Don't: "See prices". Eats green is for Eats assets only; never an Uber CTA or text color.

Real examples, to look at on Uber's own pages (not for reuse):
- Uber Eats end card: black logo on Eats green: https://assets.uber.com/document/431#/-/end-cards

Sources: https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines, https://assets.uber.com/document/468#/co-marketing-guidelines/uber-eats-co-marketing-guidelines, https://www.uber.com/us/en/

## Typography: rules

Uber Move for headlines and Uber Move Text for everything else, both proprietary. The portal distributes font packages (Global, English, Monospace collections, plus Uber Move Japanese and Source Han Sans for CJK). On uber.com, headings render bold (from the 600 file) with normal tracking; body is 16/24.

Why it works: A transit-signage grotesque owned outright keeps the voice consistent across 70+ markets.

|  |  |
|---|---|
| Hero | 52/64 desktop, 36/44 phone |
| Section | 36/44 desktop, 28/36 phone |
| Body | 16/24 |
| CJK | Uber Move Japanese; Source Han Sans for Chinese and Korean |

- Headlines bold, sentence case, normal tracking
- Body 16/24 regular; labels 14 and 18 medium
- End-card tagline at one third the logo size, medium weight
- Don't Light or thin headline weights
- Don't All caps headlines
- Don't Italic

Do and don't:
- Do: "Go anywhere". Bold, sentence case, normal tracking.
- Don't: "GO ANYWHERE". No all-caps headlines on uber.com.

Sources: https://assets.uber.com/document/398, https://assets.uber.com/document/431#/-/end-cards, https://www.uber.com/us/en/

## Iconography: rules

Small filled glyphs in UI (pin, clock, chevrons, navigation arrow, globe, circle and square trip markers), and full-color 3D product illustrations (car, calendar, luggage, key fob, teen, courier) on the Explore cards.

Why it works: Glyphs stay quiet inside pills; the 3D illustrations make each product door recognizable at a glance.

- UI glyphs filled, 16-24px, single color
- Circle = pickup, square = dropoff
- Product illustrations are 3D renders on transparent ground

Real examples, to look at on Uber's own pages (not for reuse):
- Ride illustration from the Explore card (3D sedan): https://www.uber.com/us/en/
- Reserve illustration (calendar): https://www.uber.com/us/en/

Sources: https://www.uber.com/us/en/, https://assets.uber.com/document/431#/-/end-cards

## Illustration: rules

Illustration on uber.com is limited to 3D product renders and a few composites (photo plus icon tile). The illustration chapter of the identity system is behind sign-in.

Why it works: Renders keep products concrete; people and places are shown in photos.

- Use 3D renders for product doors only
- Never flat cartoon people

Not published: Illustration guidelines (behind sign-in).

Real examples, to look at on Uber's own pages (not for reuse):
- More ways card: photo with a grey 3D car tile overlapping its corner: https://www.uber.com/us/en/

Sources: https://www.uber.com/us/en/

## Photography: rules

Candid, warm, mid-action photos of real-looking people in cities and cars: hands with phones, luggage, a smiling driver seen through glass, food from above. Product color shows up naturally (green Eats bags). Frames are square-cornered rectangles, wide 1152x270 banners with rounded corners, or a circle crop.

Why it works: People on the move are the product; candid moments sell reliability without saying it.

- Candid, natural light, people mid-task
- Let product color appear in the scene, not as a filter
- Wide banners bridge black and white bands

Real examples, to look at on Uber's own pages (not for reuse):
- Eats banner: bouquets beside green Uber Eats bags: https://www.uber.com/us/en/
- Earn with Uber: driver laughing, blue frame baked into the photo: https://www.uber.com/us/en/
- Uber One: couple exiting a car with the gold Uber One square: https://www.uber.com/us/en/
- Co-marketing guide header photo: rider stepping out of a car: https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines

Sources: https://www.uber.com/us/en/, https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines

## Motion: rules

UI motion is minimal: a 0.2s linear wash on buttons and a 0.5s ease-out underline. Brand motion is video and gif: an autoplaying travel film and a green line that draws down between sections. End cards may carry the sonic ID.

Why it works: The app moves; the website stays still so the task stays clear.

- Controls: 0.2s cubic-bezier(0, 0, 1, 1)
- Underlines: 0.5s cubic-bezier(0.22, 1, 0.36, 1)
- Static resting state for every animated asset

Real examples, to look at on Uber's own pages (not for reuse):
- Frame from the GO-GET 2026 travel-mode film on the homepage: https://www.uber.com/us/en/
- Journey line gif: green line drawing on black: https://www.uber.com/us/en/

Sources: https://www.uber.com/us/en/, https://assets.uber.com/document/431#/-/end-cards

## Interface and layout: rules

A 1152px content column (144px margins at 1440) under a wider 1280px nav. Bands alternate split (459px text + 558px media), three-up (360px) and two-up (558px), each with 64px padding; ground switches happen behind wide rounded photo banners. Phones collapse to 24px margins and carousels.

Why it works: One column and a fixed set of patterns keep a page of many products scannable.

|  |  |
|---|---|
| Container | 1152px |
| Margins | 144 desktop / 24 phone |
| Nav | 64px, 80px margins |

- Text column max 459px
- Gutters 36px; explore cards 18px
- Bands 64px padding desktop, 40px phone
- Phones: carousels with a 1/N pager instead of rows

Sources: https://www.uber.com/us/en/

## Rules: rules

The public guide is mostly co-marketing and end-card law; the full identity system (illustration, photography, motion, iconography) is behind sign-in.

Why it works: Partners need logo, color and phrasing rules; the rest is internal.

- Partner brand takes the visual lead
- Black or white logo by contrast
- Never localize the logo
- Get Brand Desk approval before launch
- Don't Altering, outlining or recoloring the wordmark
- Don't Eats green on Uber rides work

Sources: https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines, https://assets.uber.com/document/468#/co-marketing-guidelines/uber-eats-co-marketing-guidelines, https://assets.uber.com/document/431#/-/end-cards

## Campaigns

### On our way (2024)

Global brand platform launched July 26, 2024 during the Paris Olympics Opening Ceremony, made by Uber's in-house creative team, with a 90-second film and a 60-second cutdown, and Uber's first sonic identity (made with amp).

How the system shows: Every film ends on a standard end card: the wordmark as hero, "On our way" a third its size between a circle and a square glyph, on black (Uber), Eats green (Eats) or white (Uber for Business).
Why it works: The line is what every rider sees in the app when a car is coming, so the campaign borrows the product's best moment.
Channels: TV, online video, Uber app, TikTok, YouTube, end cards. Source: https://www.uber.com/newsroom/on-our-way

### GO-GET 2026 (2026)

Uber's annual product event (April 29, 2026) framing Uber as one app for everything: Hotels on Uber with Expedia Group, Uber One hotel perks, Reserve upgrades and voice booking.

How the system shows: The homepage Planning your next getaway band plays the GO-GET 2026 travel-mode film beside a city selector.
Why it works: The event film is reused as a product door, not a banner ad.
Channels: product event, newsroom, homepage. Source: https://www.uber.com/us/en/newsroom/go-get-2026/

### The 2018 identity (2018)

Wolff Olins with type studio MCKL replaced the 2016 icon with a plain wordmark, introduced Uber Move and a black-and-white core, announced September 2018.

How the system shows: Black and white wordmark, custom grotesque, the U as a recurring shape.
Why it works: One wordmark people recognized replaced an abstract mark they didn't.
Channels: identity system, app, web. Source: https://www.dezeen.com/2018/09/14/uber-rebrand-wolff-olins-black-white-wordmark-logo-typography/

## Applications

| Format | What | Source |
|---|---|---|
| website | uber.com homepage: black page, pill nav, ride request form hero, product bands, black footer. | https://www.uber.com/us/en/ |
| end card | 16:9, 1:1 and 9:16 end cards in black, Eats green or white, wordmark plus "On our way". | https://assets.uber.com/document/431#/-/end-cards |
| app icon | White wordmark on a black rounded square (iOS), square or circle (Android). | https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines |
| co-marketing | Partner-led lockups and approved offer copy for merchants and partners. | https://assets.uber.com/document/468#/co-marketing-guidelines/uber-co-marketing-guidelines |
| Eats packaging | Green delivery bags, gift cards and stickers with the black Eats logo. | https://assets.uber.com/document/468#/co-marketing-guidelines/uber-eats-co-marketing-guidelines |

## By format

How our engine applies Uber's system to each format. This is our recipe built from their rules, not something Uber publishes. Level = how far toward the campaign end (warm film, tagline) from the functional end. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | Black 64px nav of #111111 pills with one white Sign up pill; black hero with a 52px two-word headline and one white 8px-radius CTA; product bands in a 1152 column; one white interruption bridged by a rounded photo banner; black footer with four link columns | which product bands follow the hero, and whether the hero has a form or a photo |
| Deck | 2 | Black slides, white bold sentence-case headlines, one photo per slide, end on the wordmark and "On our way" | white slides for data |
| Social post | 3 | Full-bleed candid photo, short white headline, end on the wordmark | square or story crop |
| Email | 1 | Black header with white wordmark, white body, black 8px button | one hero photo |

## Checks before anything ships

- **Logo hidden**: Cover the wordmark. It should still read as Uber: a black page, dark pills, one white button, bold sentence-case type and candid photos.
- **Swap test**: Put another company's name on it. If nothing but the name changed, the pill controls, black-white bands and product-colored photos are missing.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Uber's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Uber's full identity system (color palette beyond black and white, typography rules, iconography, illustration, photography, motion and tone) is behind sign-in at brand.uber.com; only co-marketing, end cards, logos and font downloads are public
- A brand color ratio is not published (the proportion shown is measured on uber.com)
- The grey UI ramp is not published (observed only)
- Uber Move and Uber Move Text are proprietary; stand-ins are calibrated, not identical
- Exact responsive breakpoints were not measured (only 390 and 1440)
- Icon grid and stroke rules are not published
- Sonic identity specifications are not published
- No mission statement is published on the public brand site
- Stand-in fonts: Outfit and Public Sans are calibrated to Uber Move by line width and ink; headline shapes and small-label weights still differ from the real faces (the last graded build lost most of its remaining points there)

Logos and reference images belong to Uber. Look at them on Uber's own pages; don't reuse them.