Design System
Inspired by Uber

A bold, black-and-white design language built for clarity, efficiency, and confident minimalism. Every element serves a purpose.

Color Palette

Stark Duality

Uber Black
#000000
Primary CTA, headings, nav, footer
Pure White
#ffffff
Page background, card surface, inverse text
Chip Gray
#efefef
Chip buttons, filter toggles, borders
Hover Gray
#e2e2e2
Button hover state
Hover Light
#f3f3f3
Subtle hover for floating buttons
Body Gray
#4b4b4b
Secondary text, descriptions
Muted Gray
#afafaf
Tertiary text, footer links, placeholders
Default Link Blue
#0000ee
Underlined text links in body content
Typography Scale

UberMove Type System

Sample Role Specs
Display Hero Display / Hero 52px / Bold 700 / 1.23
Section Heading Section Heading 36px / Bold 700 / 1.22
Card Title Card Title 32px / Bold 700 / 1.25
Sub-heading Sub-heading 24px / Bold 700 / 1.33
Small Heading Small Heading 20px / Bold 700 / 1.40
Navigation / UI Large Nav / UI Large 18px / Medium 500 / 1.33
Body text and button labels Body / Button 16px / Regular 400 / 1.50
Caption and metadata Caption 14px / Medium 500 / 1.43
Micro text and fine print Micro 12px / Regular 400 / 1.67
Button Variants

Pill-Shaped Actions

Primary Black
Secondary Outline
Chip / Filter
Chip Active
Floating
On Dark Surface
Chip Navigation Row
Card Examples

Content Cards

Illustration
Plan for later
Reserve your ride in advance so you can relax on the day of your trip.
Illustration
Drive when you want
Make what you need in the time you have. Set your own hours and earn on your schedule.
Illustration
Business accounts
Simplify travel and meal management for your company with centralized billing.
Form Elements

Input Components

Spacing Scale

8px Grid System

4px
0.25rem
8px
0.50rem
12px
0.75rem
16px
1.00rem
20px
1.25rem
24px
1.50rem
32px
2.00rem
48px
3.00rem
64px
4.00rem
Border Radius Scale

Corner Shapes

None 0px
Standard 8px
Comfortable 12px
Full Pill 999px
Circle 50%
Elevation / Depth

Shadow Hierarchy

Flat No shadow, border only
Subtle rgba(0,0,0,0.12) 0 4px 16px
Medium rgba(0,0,0,0.16) 0 4px 16px
Floating rgba(0,0,0,0.16) 0 2px 8px + lift
Pressed rgba(0,0,0,0.08) inset