Design System

Go anywhere,
do anything.

A clean, bold design system built for movement. Jet black foundation, electric blue accent, and typography that commands attention.

15 color tokens 12 type steps 4px grid Dual light/dark theme
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

High-contrast black-and-white foundation with a single electric blue accent. 15 tokens spanning surfaces, text, interaction, and semantic states.

Jet Black
#000000
Primary text, dark backgrounds
Snow White
#FFFFFF
Light backgrounds, button text
Uber Blue
#276EF1
CTAs, links, active states
Ride Blue
#3B82F6
Hover states, secondary accents
Arctic White
#F6F7F8
Secondary backgrounds, inputs
Platinum
#E5E7EB
Borders, dividers
Iron Gray
#6B7280
Secondary text, placeholders
Graphite
#374151
Body text, subtle headings
Smoke
#9CA3AF
Captions, helper labels
Onyx
#1F2937
Dark mode cards
Carbon
#111827
Dark mode surfaces
Ink
#030712
Deepest dark surface
Success Green
#10B981
Completed, positive states
Warning Amber
#F59E0B
Pending, caution states
Error Red
#EF4444
Errors, destructive actions
Typography

Type Scale

Inter as the sole typeface. Clean geometric forms with tight tracking for headings and generous line-height for body text.

Display-lg Go anywhere 56px / 1.0 / −0.025em
Display Move forward 48px / 1.0 / −0.025em
Title Section title 32px / 1.1 / −0.025px
Heading Page heading 24px / 1.25 / −0.02px
Subheading Section subtitle 18px / 1.4 / 0
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, secondary descriptions 14px / 1.5 / 0
Caption Meta info · Timestamps · Labels 12px / 1.5 / 0.025px
Layout

Spacing & Shapes

Base unit 4px. Compact density for information-rich interfaces. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

sm 4px
md 8px
lg 12px
xl 16px
2xl 24px
pill 9999px
Elevation

Surfaces

4 distinct surface levels that adapt between light and dark themes. Clean, solid backgrounds — no translucency or glass effects.

Base #FFFFFF / #030712
Raised #F6F7F8 / #111827
Overlay #FFFFFF / #1F2937
Sunken #E5E7EB / #374151
Components

Button Variants

Primary (Uber Blue), secondary (outlined), and ghost variants. 8px radius shared across all button types.

Primary CTA Button
Main call to action — ride booking, sign up
.btn-primary
Uber Blue (#276EF1) background, Snow White text, 8px radius. Use exclusively for the primary action on any screen.
Secondary Button
Alternative actions, navigation
.btn-secondary
Transparent background, Jet Black text, 1px Platinum border. For less prominent actions.
Ghost Button
Tertiary actions, inline links
.btn-ghost
Uber Blue text, no border, minimal padding. For inline navigation and supplementary actions.
Input Field
Text entry, search, address input
.input
Arctic White background, 8px radius, Platinum border. Focus state uses Uber Blue border.
Status Badges
Ride state, driver status
.badge
Completed In Progress Pending Cancelled
Pill-shaped (9999px radius), semantic colors only for status. Never use these colors decoratively.
Guidelines

Do's & Don'ts

Do
  • Jet Black / Snow White as primary backgrounds
  • Uber Blue exclusively for interactive elements
  • Compact density with 4px grid alignment
  • Inter at 400 (body), 500 (UI), 600 (headings), 700 (display)
  • 8px radius for buttons/inputs, 12px for cards
  • Semantic colors only for status indicators
  • WCAG AA contrast on all text
Don't
  • Uber Blue as a large-area background
  • Gradients on text or small elements
  • Mix radius values within a component group
  • Iron Gray / Smoke for primary body text
  • Decorative or heavy drop shadows
  • Additional accent colors beyond the palette
  • Monospace font for non-technical content