Uber Design System Reference

Foundation

Color Tokens

A high-contrast monochromatic palette anchored by pure black and white, complemented by electric blue accent for interactive elements and primary calls-to-action.

Primary Black

#000000

Dominant text · Primary buttons · Maximum contrast

Primary White

#FFFFFF

Primary surface · Main content area · Card backgrounds

Electric Blue

#0000EE

Primary CTA · Links · Accents · Focus states

Secondary Text

#333333

Subheadings · Supporting copy · Contextual information

Tertiary Text

#757575

Disabled · Hints · Placeholders · De-emphasized text

Quaternary Text

#5E5E5E

Very light hierarchies · Subtle content

Border Color

#767676

Borders · Dividers · Input strokes

Secondary Surface

#F3F3F3

Off-white backgrounds · Form containers · Secondary surfaces

Tertiary Surface

#4A4A4A

Footers · Secondary blocks · Dark surfaces

Light Gray

#EEEEEE

Tertiary buttons · Background accents · Subtle fills

Disabled Gray

#D8D8D8

Disabled states · Subtle borders · Secondary dividers

Typography

Type Scale

Two font families establish Uber's voice — UberMove for distinctive headings, UberMoveText for optimal legibility in body and UI text. Weights restricted to 400, 500, and 700 for consistency.

Display UberMove Headings 20px+ · Display · Hero titles

Body UberMoveText Body · UI text · Buttons · Forms

Display Build what matters 52px · 700 · 64px

H1 The quick brown fox 36px · 700 · 44px

H2 The quick brown fox jumps 24px · 700 · 32px

H3 The quick brown fox jumps 20px · 700 · 28px

Label The quick brown fox jumps over 18px · 500 · 24px

Body Lg The quick brown fox jumps over the lazy dog 16px · 400 · 24px

Button The quick brown fox jumps over the lazy dog 14px · 500 · 16px

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 4 or 8. Border radii default to 0px for utilitarian aesthetic, with 999px pills for buttons.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

24px lg

32px xl

64px 2xl

80px 3xl

Border Radius

None 0px

Circle 50%

Pill 999px

Shadows

Level 0 Flat · no elevation

Level 1 Hover · subtle lift

Level 2 Active · floated elements

Level 3 Modals · dialogs

Border Widths

Standard 1px

Focus 2px

Opacity

Full 100%

High 80%

Medium 50%

Disabled 20%

Z-index / Layering

Base 1

Sticky 100

Dropdown 101

Modal Overlay 2001

Modal 2002

Toast 2003

Elevation

Depth & Surfaces

Three surface levels establish hierarchy. White primary surface, light gray secondary, dark gray tertiary — minimal shadows reinforce elevation on interactive states.

Primary Surface

Main content areas · Cards · Default background

L0 · #FFFFFF

Secondary Surface

Form containers · Off-white backgrounds · Secondary sections

L1 · #F3F3F3

Tertiary Surface

Footers · Dark backgrounds · Secondary blocks

L2 · #4A4A4A

Primary #FFFFFF

Secondary #F3F3F3

Tertiary #4A4A4A

Border #767676

Components

Component Library

Core interactive elements built to exact specifications — black primary buttons, white secondary buttons, electric blue accents, and utilitarian 0px borders throughout.

Buttons

Interactive triggers — Primary, Secondary, Tertiary, Disabled

.btn

Primary: #000000 bg · #FFFFFF text · 999px radius · 10px 12px padding · 36px height. Secondary: transparent bg · #000000 border. Tertiary: #EEEEEE bg. All use Inter 14px/500.

Text Input

Form control — Default and Focused states

.input

Default: transparent bg · #767676 bottom-border · 44px height. Focus: #FFFFFF bg · #0000EE border · 1px solid. All 16px Inter/400.

Card

Content container · Surface with border

.card

Card title

A brief description of content. Lorem ipsum dolor sit amet.

#FFFFFF bg · #D8D8D8 border · 0px radius · 20px 24px padding. Title: 16px/500/#000000. Body: 14px/#757575. CTA: primary black button.

Badges

Status indicators — Primary, Error, Info

.badge

Active Closed Info

12px/600 · 4px 8px padding · 12px radius. Success: #0000EE. Error: #CF222E. Info: #0000EE.

Guidelines

Do's & Don'ts

Core principles for applying Uber's design language consistently across all surfaces and contexts globally.

Do — Embrace

Use pure black (#000000) and pure white (#FFFFFF) as the primary foundation for maximum contrast
Apply electric blue (#0000EE) sparingly for primary CTAs, links, and focus states only
Maintain 999px border-radius on all primary and secondary buttons for pill affordance
Use UberMove for headings 20px+; UberMoveText for body and UI text
Keep button padding consistent at 10px 12px with 36px minimum height for touch targets
Use 1px borders for inputs and subtle dividers; 2px for focus states
Test all color combinations for WCAG AA contrast (4.5:1 text, 3:1 UI)
Reduce padding by one spacing step at each responsive breakpoint

Don't — Avoid

Do not override 999px border-radius on buttons; it's a core affordance
Do not use color alone to convey meaning without text or icon support
Do not reduce button height below 36px; maintain touch-friendly dimensions
Do not mix UberMove and UberMoveText arbitrarily; maintain strict hierarchy
Do not add more than one box-shadow per element; keep elevation simple
Do not use custom colors outside the defined 15-token palette
Do not apply padding smaller than 8px inside buttons or form elements
Do not use opacity to make text unreadable; use lighter grays instead

Uber

Preview

Remixes of Uber