Faded Teal
#9dcdd6Blue supporting accent for decorative details and low-frequency emphasis.
Uber
uber.comWebsite preview
The design language
Uber's interface is a disciplined black-on-white transit kiosk: every screen is a white canvas anchored by a single black navigation bar, a black footer, and solid black controls, with zero chromatic UI color. All color in the system lives inside flat editorial illustrations — a packed suitcase, two riders in a car, a bowl of food — that float beside the form rather than within it. Typography is custom and confident: UberMove at 52px for headlines with tight 1.22 line-height, UberMoveText at 14–18px for everything else, and a single weight (400) does the work that other systems spread across three. Components are flat, borders are 1px hairline grays, and radii are binary — 8px for cards, inputs, and standard buttons, or a full 999px pill for nav CTAs and toggles. The only structural rhythm break is the sticky black 'See prices' bar that follows scroll, a persistent commitment to the next conversion.
Color palette
accent
neutral
Jet Black
#000000Headings, body text, top navigation bar, footer background, filled controls, sticky bottom bar, location pin icons — the achromatic anchor that gives the white canvas its structure
Paper White
#ffffffPage background, card surfaces, text on dark bars, input fields — the dominant canvas that every other element sits on
Mist Gray
#f6f6f6Suggestion card backgrounds, subtle section washes, input field fills, nav hover states — a single step off white that creates depth without contrast
Charcoal
#333333Secondary headings, footer column titles, darker body text variant — used when pure black feels too heavy on dense surfaces
Iron Gray
#767676Input field borders, divider lines, placeholder-adjacent borders — the workhorse hairline color
Ash Gray
#afafafMuted helper text, disabled-link text, secondary metadata in body copy — disappears by design
Slate
#5e5e5eBody text on light surfaces where full black would feel aggressive, secondary paragraph copy
Graphite
#4b4b4bSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Typography
Type scale
Major Second (1.125) · 16px basedisplay
52px · 700 · 1.23The quick brown fox jumps
heading
36px · 700 · 1.22The quick brown fox jumps
heading-sm
24px · 400 · 1.33The quick brown fox jumps
text-20
20px · 700 · 1.4The quick brown fox jumps
subheading
18px · 500 · 1.33The quick brown fox jumps
body
16px · 400 · 1.43The quick brown fox jumps
body-sm
14px · 500 · 1.5The quick brown fox jumps
caption
12px · 400 · 1.67The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
UberMove
- Weights
- 400, 700
- Sizes
- 20px, 24px, 36px, 52px
- Line height
- 1.22, 1.23, 1.33, 1.40
- Letter spacing
- normal
- Fallback
- Inter, Helvetica Neue, system-ui
Headlines, hero copy, display text. At 52px with 1.22 line-height and weight 400, it is the brand's voice — geometric, calm, never bold-display-loud. Weight 700 reserved for nav brand mark and emphasized headings
Additional typeface
UberMoveText
- Weights
- 400, 500
- Sizes
- 12px, 14px, 16px, 18px, 24px
- Line height
- 1.14, 1.20, 1.25, 1.33, 1.43, 1.50, 1.67, 2.00
- Letter spacing
- normal
- Fallback
- Inter, system-ui, -apple-system
Body copy, button labels, nav links, input text, helper text, footer links. The workhorse family at 14–18px / weight 400. Weight 500 is rare — used only for emphasis in nav or button labels that need to carry slightly more weight than surrounding text
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tabs
8pxcards
8pxpills
9999pxinputs
8pxbuttons
8pxSpacing scale
2px4px6px8px9px10px12px14px16px18px20px24px25px28px30px32px36px48px64px73px150pxGuidelines
Do
- Use #000000 for all filled buttons, the navigation bar, the footer, and the sticky bottom bar — these three black bands are the system's structural rhythm
- Use UberMove at 52px weight 400 for the primary headline; never bold it to 700
- Use 8px border-radius for all cards, inputs, and standard buttons; use 9999px only for nav CTAs and mode toggles
- Keep all UI elements achromatic — let illustrations carry color, not controls or text
- Use 1px #767676 hairline borders for input fields; never use box-shadows for separation
- Apply 64px section gaps and 16px element gaps as the default vertical rhythm
- Use #f6f6f6 for card backgrounds when the card sits directly on a #ffffff page surface
Don’t
- Don't introduce chromatic accent colors into buttons, links, or interactive controls — the system is intentionally monochrome in its UI layer
- Don't use box-shadows or drop shadows on cards, modals, or inputs — depth comes from surface color steps, not elevation
- Don't bold UberMove headlines above weight 400; the system speaks at normal weight, not display-bold
- Don't use 9999px radius on cards or inputs — pill radius is reserved for nav CTAs and trip-mode toggles
- Don't use centered body copy; text is always left-aligned within the 1200px max-width container
- Don't let illustrations bleed beyond their bounding panels or overlap surrounding type
- Don't use the #9dcdd6 teal outside of the tab strip — it is a single-purpose active-state signal, not a general accent
Components
Black Filled Button
Primary conversion control — 'See prices', 'Log in to your account'Solid #000000 background, #ffffff text in UberMoveText 16px weight 400. 8px border-radius, 12px vertical padding × 16px horizontal padding. No shadow, no border, no hover state variation visible. Text is left-padded to clear the label; on mobile it stretches full-width.
White Pill Button
Navigation CTA — 'Sign up' in the top bar#ffffff background, #000000 text in UberMoveText 14px weight 400. 9999px border-radius (full pill), 6px vertical × 16px horizontal padding. Inverts the black-bar context it sits inside — the white pill is the only thing that breaks the black nav.
Location Input Field
Pickup and dropoff entry in the hero form#ffffff background with a 1px #767676 border, 8px radius. 16px vertical padding. Left side has a vertical timeline track with a black filled circle (pickup) and black square (dropoff) connected by a thin line. Placeholder text in UberMoveText 16px weight 400, #000000. An arrow icon sits right-aligned in the pickup row.
Trip Type Toggle
Switching between 'Pickup now' and 'Schedule ahead' modesFull-pill 9999px radius container with #f6f6f6 background. Active state shows a clock icon + 'Pickup now' label in UberMoveText 16px. Inactive state is bare text. Sits directly above the input stack as a compact mode selector.
Suggestion Card
Service category tiles — Ride, Reserve, Food, Package#f6f6f6 background, 8px border-radius, no border, no shadow. Two-column internal layout: left column holds an UberMoveText 16px weight 500 title and 14px weight 400 description in #5e5e5, plus a 'Details' link in weight 500 underlined. Right column holds a flat illustration (~120px wide) showing a car, calendar, or food bowl. Cards sit in a 3-column grid with 16px gaps.
Top Navigation Bar
Global site navigation — persistent across all pages#000000 background, full-width, ~56px height. Left: Uber wordmark in white UberMove. Center: nav links (Ride, Earn, Business, Uber Eats, About) in UberMoveText 14px weight 400 #ffffff, with a dropdown chevron on About. Right: globe icon + 'EN', 'Help' link, 'Log in' link, then the white pill 'Sign up' button. 16px horizontal padding on the link cluster.
Sticky Bottom Bar
Persistent conversion anchor that follows scroll#000000 background, full-width, ~56px height, position fixed to viewport bottom. Single centered label 'See prices' in #ffffff UberMoveText 16px weight 400. No button chrome — the entire bar IS the button. Overlays content with no shadow separator.
Section Heading
Page section titles — 'Suggestions', 'Log in to see your account details', 'Plan for later'UberMove 36px weight 400 in #000000, line-height 1.22. Left-aligned, sits at the start of each section with 32–48px of top margin. No decorative elements, no accent color, no underline — the weight of the size and the cleanness of the typeface do all the work.
Tab Strip
Mode switching in the 'Plan for later' sectionHorizontal row of tabs in UberMoveText 16px weight 400 #000000. Active tab has a #9dcdd6 background fill spanning the tab width with 8px radius; inactive tabs are bare text with 16px horizontal padding. Single chromatic UI element in the entire system.
Footer
Site-wide link directory, social, app downloads, legal#000000 background spanning full width. Top region has a 'Visit Help Center' link in white. Four-column link grid (Company, Products, Global citizenship, Travel) with column titles in #ffffff weight 500 16px and links in #afafaf weight 400 14px, 12px row gap. Bottom row: social icons (LinkedIn, YouTube, Instagram, X) on the left, language/location selectors on the right, app store badges below. 64px vertical padding top and bottom.
Illustration Panel
Editorial visual companion to text sectionsContained rectangular panels (~480px wide) holding flat vector illustrations. The suitcase scene uses warm oranges (#c44a1 area), deep teals, and sandy tans. The rider portrait uses solid cobalt blue (#276ef1 area) and warm browns. No gradients, no 3D, no photography — all flat fills with hard edges. Illustrations carry all the color in the system; the UI around them stays strictly achromatic.
City Picker Pill
Location selector in the hero — 'Barcelona, ES · Change city'Black filled circle (6px) followed by 'Barcelona, ES' in UberMoveText 18px weight 500 #000000, then a light gray pill containing 'Change city' in 14px weight 500. Sits above the hero headline as a compact location context.
Surfaces & elevation
Level 0
Paper White
#ffffffPage canvas — every section defaults to pure white
Level 1
Mist Gray
#f6f6f6Suggestion cards, input fills, subtle section differentiation
Level 2
Jet Black
#000000Top navigation bar, footer, sticky bottom bar — the structural black bands that frame the white content
The system is deliberately flat — no component uses drop shadows or elevation stacking. Depth is created exclusively through the surface progression (#ffffff page → #f6f6f6 card → #000000 structural bar) and 1px hairline borders. This keeps the interface feeling like a printed transit poster rather than a software application.
Layout & imagery
Layout
Max-width ~1200px centered container with full-bleed black bars for nav and footer. Hero is a two-column split: left holds the headline + form stack (city picker, toggle, two inputs, CTA), right holds a square illustration panel. The 'Suggestions' section is a 3-column card grid with 16px gaps. The account section mirrors the hero split — text left, illustration right. 'Plan for later' is a full-width tabbed content area. Footer is a 4-column link grid on a black band. A sticky black 'See prices' bar persists at the viewport bottom across all scroll positions. Section gaps are ~64px, creating a calm vertical rhythm. The layout is strictly left-aligned for text — no centered body copy, no asymmetric text blocks.
Imagery
All visual color lives inside flat editorial illustrations — no photography, no 3D, no gradients. Illustrations are vector-flat with hard edges and a limited palette of warm oranges, deep teals, cobalt blue, sandy tans, and warm browns. Scenes depict service scenarios: a packed suitcase for travel, two riders in a car for the account section, a food bowl for delivery, a shopping basket for packages. Illustrations are always contained in bounded panels beside text — never full-bleed, never overlapping type. They serve as emotional anchors for each service category while the surrounding UI stays strictly achromatic. Icon style is minimal: solid black glyphs for location pins, clock, arrows, and social marks, with no multicolor or outlined alternatives.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #ffffff - surface (cards, inputs): #f6f6f6 - border (hairlines): #767676 - muted text: #5e5e5e - primary action: no distinct CTA color Example Component Prompts: 1. Build the hero form: white #ffffff page background. City picker at top — black dot + 'City, Region' in UberMoveText 18px weight 500, followed by a #f6f6f6 pill containing 'Change city' in 14px weight 500. Headline below: 'Go anywhere with [Brand]' in UberMove 52px weight 400 #000000. Then a #f6f6f6 full-pill (9999px) toggle showing clock icon + 'Pickup now' in UberMoveText 16px. Two stacked input fields: #ffffff background, 1px #767676 border, 8px radius, 16px padding, left icon (filled circle for pickup, filled square for dropoff) connected by a vertical line, placeholder text 'Pickup location' / 'Dropoff location' in UberMoveText 16px #000000. Solid black #000000 button below: UberMoveText 16px weight 400 #ffffff, 8px radius, 12px 16px padding, label 'See prices'. 2. Build a suggestion card grid: 3-column layout on a #ffffff page, 16px gap between cards. Each card: #f6f6f6 background, 8px radius, 24px padding, no border, no shadow. Two-column internal layout — left 60% holds a title in UberMoveText 16px weight 500 #000000, a description in 14px weight 400 #5e5e5e, and a 'Details' link in 14px weight 500 #000000 underlined. Right 40% holds a flat vector illustration ~120px wide (car / calendar / food bowl / shopping basket). 3. Build the top navigation bar: full-width #000000 background, 56px height, flex row. Left: brand wordmark in #ffffff UberMove 20px weight 700. Center: nav links 'Ride', 'Earn', 'Business', 'Uber Eats', 'About' in UberMoveText 14px weight 400 #ffffff, 16px horizontal gap, with a small chevron after 'About'. Right cluster: globe icon + 'EN', then 'Help' text link, then 'Log in' text link, then a white #ffffff pill button 'Sign up' with 9999px radius, 6px 16px padding, text in UberMoveText 14px weight 400 #000000. 4. Build the sticky bottom bar: position fixed, bottom 0, full-width, 56px height, #000000 background. Center-aligned label 'See prices' in UberMoveText 16px weight 400 #ffffff. No border, no shadow, no rounded corners — the bar touches both viewport edges. 5. Build the tab strip: horizontal flex row, each tab is 16px horizontal padding, UberMoveText 16px weight 400 #000000. Active tab: full-width #9dcdd6 background fill, 8px radius. Inactive tabs: no background. 0px gap between tabs — the colored fill defines the active boundary.
Similar brands
Lyft
Same achromatic black-and-white transit-kiosk approach with pink as a single accent; identical split-hero layout with form left and illustration right
Bolt
Same monochrome mobility interface with solid black CTAs and flat editorial illustrations beside functional forms
Notion
Same disciplined black-on-white system where all color is withheld from the UI and only appears in user content or illustrations
Airbnb
Same custom geometric typeface (Airbnb Cereal ↔ UberMove) with editorial flat illustrations carrying all the chromatic content
DoorDash
Same consumer-marketplace pattern of white canvas, black nav bar, three-column suggestion card grid with flat category illustrations
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
