Uber

Difficulty:
Industry
Uber Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 4px
md · 8px
lg · 12px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Uber is the global mobility and delivery platform connecting riders, drivers, couriers, and merchants. Its interface is built on pure black and white with virtually no mid-tone grays in the chrome, the proprietary UberMove and UberMoveText family carries every level, buttons, chips, and nav items are all 999px pills, and warm human illustrations contrast the stark monochrome, with card shadows kept to 0.12–0.16 opacity.

ConsumerMinimal

Prompt Template

Base Template
Design a Uber-inspired interface. - Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome; - UberMove (headlines) + UberMoveText (body/UI) -- proprietary geometric sans-serif family; - Pill-shaped everything: buttons, chips, nav items all use 999px border-radius; - Warm, human illustrations contrasting the stark monochrome interface; - Card-based layout with whisper-soft shadows (0.12-0.16 opacity). Colors: #000000, #ffffff, #e2e2e2, #f3f3f3 with #0000ee accent. Typography: - Background: Uber Black (.

Variant Prompts

📱 Mobile
Design a mobile app with Uber aesthetics. Use Uber color identity with #0000ee accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Uber style. Use Uber color identity with #0000ee accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Uber design language. Use Uber color identity with #0000ee accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Uber visual identity. Use Uber color identity with #0000ee accents. Compelling, conversion-focused.

Usage Examples

Uber App

Web
Build a web app with Uber design language and #0000ee color system.

Uber Dashboard

Dashboard
Create a dashboard using Uber style with data visualization and - Background: Uber Black ( typography.

✅ Best For

  • Consumer
  • Mobility platform interfaces
  • High-contrast brand pages

❌ Avoid For

  • Soft lifestyle brands
  • Retro decorated sites

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download