Uber Design System
Light · Generated 18/04/2026 · uber.com · India
v1.0.0
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
White 2
#F3F3F3
White 3
#F6F6F6
Light Gray 2
#EEEEEE
Light Gray 3
#EFEFEF
Light Cyan
#9DCDD6
Text Colors
Blue (link)
#0000EE
Dark Gray 2
#333333
Dark Gray 3
#4B4B4B
Dark Gray
#5E5E5E
Mid Gray
#757575
Mid Gray 4
#A6A6A6
Mid Gray 2
#AFAFAF
Red (error)
#E11900
Border & Fill Colors
Mid Gray 3 (border)
#767676
Light Gray (fill)
#CBCBCB
Note: Uber's palette is entirely monochromatic — pure blacks, whites, and grays. #000000 appears 4,113 times (brand, text, CTAs). The only chromatic colors are #0000EE (hyperlinks), #E11900 (errors), and #9DCDD6 (decorative accent, used once).
Typography
Display / Headings · UberMove
UberMove
Proprietary Uber display typeface. Used for large headlines, hero text, and marketing copy. Clean, confident geometric sans-serif.
Regular · 400 Medium · 500 Bold · 700
Body / UI · UberMoveText
UberMoveText
Companion typeface for body copy and UI text. Optimized for readability at smaller sizes. Used for descriptions, labels, metadata, and all functional text.
Regular · 400 Medium · 500 Bold · 700
Get in the app
Display Hero · 44px · UberMove Bold · line-height: 52px
Ride with Uber
Heading XL · 36px · UberMove Bold · line-height: 44px
Drive when you want
Heading Large · 32px · UberMove Bold · line-height: 40px
Earn on your schedule
Heading Medium · 24px · UberMove Bold · line-height: 32px
Request a ride, hop in, and go. Tap a button, get a ride. Uber is the smartest way to get around.
Body Large · 18px · UberMoveText Regular · line-height: 28px
Affordable and convenient rides in minutes — wherever you need to go.
Body Default · 16px · UberMoveText Regular · line-height: 24px
Estimated arrival 4 min · ₹ 150–180 · UberGo
Body Small · 14px · UberMoveText Regular · line-height: 20px
RIDES · EATS · CONNECT
Caption / Label · 12px · UberMoveText Medium · line-height: 16px
Line Heights
Tight
16px
Snug
20px
Normal
24px
Relaxed
28px
Loose
32px
LH-6
36px
LH-7
40px
LH-8
44px
LH-9
52px
LH-10
112px
Letter Spacing
No letter-spacing tokens defined.

Uber's design system contains no declared letter-spacing CSS custom properties. The letterSpacing object in the DTCG JSON export is empty. UberMove and UberMoveText are designed at their native optical tracking, with any spacing applied directly in component stylesheets rather than through shared tokens.
Spacing
Spacing Scale
Token scale — 2px → 84px (sub-pixel values at mid-range)
2
4
6
8
10
12
14
16
18
18.8
20
23.2
24
25
26.6
28
32
36
48
56
84
Borders
Border Radii
SM
6px
MD
8px
LG
12px
XL
16px
2XL
50% (circle)
Full
999px (pill)
Border Widths
Hairline
1px · subtle dividers
Thin
2px · buttons, inputs, emphasis
Uber uses a 2-weight border system. The --border-width-thin: 2px is the primary interactive border — all buttons and inputs use it — while hairline is reserved for decorative dividers and card edges.
Shadow / Elevation
Shadow Tokens
3 tokens — clean black shadows, no color tinting
Small
--shadow-sm
rgba(0,0,0,.16) 4px 16px · cards, modals, elevated surfaces
Medium
--shadow-md
rgba(0,0,0,.12) 4px 16px · softer version for secondary elevation
Large
--shadow-lg
rgba(0,0,0,.16) 2px 8px · tighter spread, subtle lift for inputs
Z-Index
TokenValueUsage
--z-11Base content layer, default stacking
--z-22Slightly elevated elements, overlapping images
--z-32002Critical overlays — navigation, modals, full-screen takeovers
The jump from --z-2: 2 to --z-3: 2002 is intentional — Uber leaves a large numeric gap to ensure navigation, cookie banners, and promotional overlays always stack above any third-party embedded content or map layers that may use arbitrary z-index values.
Breakpoints
📱
--breakpoint-xs
320px
Minimum mobile width
📱
--breakpoint-sm
600px
Mobile / small tablet
📲
--breakpoint-md
767px
Tablet (lower edge)
💻
--breakpoint-lg
768px
Tablet / small desktop
💻
--breakpoint-xl
1119px
Desktop (lower edge)
🖥️
--breakpoint-2xl
1120px
Desktop threshold
🖥️
--breakpoint-3xl
1136px
Wide desktop / container max
Opacity
Opacity Tokens
Single token — 20%
--opacity-20
20% · overlay tint
Uber defines only a single opacity token — --opacity-20: 0.2. This is used for overlay and scrim effects. All other transparency values are embedded directly into rgba() color definitions rather than through standalone opacity tokens.
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Blue (link)White9.4:1AAA
Blue (link)White 28.47:1AAA
Blue (link)Black2.23:1Fail
Mid GrayBlack4.56:1AA
Mid GrayWhite4.61:1AA
Mid GrayWhite 24.15:1AA Large
Mid GrayLight Gray 23.97:1AA Large
Dark GrayWhite6.48:1AA
Dark GrayBlack3.24:1AA Large
Dark GrayLight Gray 25.59:1AA
Red (error)White4.84:1AA
Red (error)Black4.34:1AA Large
Mid Gray 2Black9.57:1AAA
Mid Gray 2White2.19:1Fail
Mid Gray 2Light Gray 21.89:1Fail
CSS Variables Reference
Colors
Black (brand, 4113×)--color-black#000000
White--color-white#FFFFFF
White 2--color-white-2#F3F3F3
White 3--color-white-3#F6F6F6
Light Gray 2--color-light-gray-2#EEEEEE
Light Gray 3--color-light-gray-3#EFEFEF
Light Gray (fill)--color-light-gray#CBCBCB
Light Cyan (accent)--color-light-cyan#9DCDD6
Dark Gray 2--color-dark-gray-2#333333
Dark Gray 3--color-dark-gray-3#4B4B4B
Dark Gray--color-dark-gray#5E5E5E
Mid Gray--color-mid-gray#757575
Mid Gray 3 (border)--color-mid-gray-3#767676
Mid Gray 4--color-mid-gray-4#A6A6A6
Mid Gray 2--color-mid-gray-2#AFAFAF
Blue (hyperlinks)--color-blue#0000EE
Red (errors)--color-red#E11900
Typography, Spacing & More
Base font--font-family-basesans-serif
UberMoveText--font-family-2UberMoveText
UberMove (display)--font-family-3UberMove
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
Caption--font-size-2xs12px
Body Small--font-size-xs14px
Body Default--font-size-sm16px
Body Large--font-size-base18px
Heading MD--font-size-xl24px
Heading LG--font-size-3xl32px
Display--font-size-5xl44px
LH: 112px (hero)--line-height-lh-10112px
Space 4--space-48px
Space 6--space-612px
Space 10--space-1016px
Space 32--space-3224px
Space 96--space-9636px
Space 128--space-12848px
Space 160--space-16056px
Space 192--space-19284px
Hairline--border-width-hairline1px
Thin (primary)--border-width-thin2px
MD--radius-md8px
LG--radius-lg12px
2XL (circle)--radius-2xl50%
Full (pill)--radius-full999px
Instant--duration-instant0.2s
Fast--duration-fast0.3s
Normal--duration-normal0.4s
Slow--duration-slow0.5s
Slower--duration-slower1s
Ease Out--easing-ease-outease-out
Overlay--opacity-2020%
Base--z-11
Elevated--z-22
Critical overlay--z-32002
XS--breakpoint-xs320px
SM--breakpoint-sm600px
MD--breakpoint-md767px
LG--breakpoint-lg768px
XL--breakpoint-xl1119px
2XL--breakpoint-2xl1120px
3XL--breakpoint-3xl1136px
Design System Preview · Uber (Light) · Generated 18/04/2026