A sleek, efficient airport terminal — clean, functional, and easy to navigate.
02
Color
#000000Ink
#333333Ink soft
#ffffffBG
#f3f3f3BG soft
#efefefBG quiet
#5e5e5eMuted
rgba(0,0,0,0.12)Line
High-contrast monochrome foundation with functional grays for depth and hierarchy.
03
Typography
geometric-sans · humanist-sans
display56px · 500
h144px · 500
h236px · 500
body16px · 400
caption14px · 400
Headlines use a geometric sans-serif with tight letter-spacing for a bold, modern feel. · Body text uses a humanist sans-serif for maximum readability across devices. · Maintain a clear weight hierarchy: 500 for headlines, 400 for body text. · Avoid decorative or script fonts to preserve the platform's functional identity.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base unit ensures visual harmony and predictable component sizing.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Subtle 1px solid lines in light gray (#efefef) for input fields and dividers.
rgba(0,0,0,0.16) 0px 2px 8px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A two-column hero layout with a prominent form on the left and illustrative imagery on the right.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
Smooth background transitions for interactive elements. · Subtle scaling and color shifts on hover states. · Clean fade-ins for modal and overlay content.
Subtle background-color shifts or opacity changes to indicate interactivity. · Immediate visual feedback with background-color transitions.
08
Components
buttonPill-shaped and rectangular buttons with solid black or white backgrounds and high-contrast text.
cardClean white cards with subtle borders or shadows, used for service exploration.
chipMinimal use of chips, primarily for location indicators with a pill shape.
inputClean text fields with rounded corners, subtle borders, and placeholder text.
heroFull-width hero section with a large headline, functional form, and supporting illustration.
09
Voice & Don'ts
ToneConfident, helpful, and straightforward, emphasizing ease and global reach.
HeadlinesBold, action-oriented statements that clearly communicate the platform's value.
CTAsDirect and imperative, using clear verbs like 'Get started', 'See prices', or 'Sign up'.
Don't use multiple accent colors — screenshot shows a strict black, white, and gray palette.
Don't use decorative or script fonts — screenshot shows clean, geometric and humanist sans-serifs.
Don't use heavy drop shadows — screenshot shows subtle, soft shadows for depth.
Don't use complex gradients — screenshot shows solid color fills and simple background images.
Don't use cramped layouts — screenshot shows generous whitespace and clear section separation.
Don't use playful or rounded UI elements — screenshot shows functional, slightly rounded but professional components.
Avoid: Avoid overly technical jargon or complex metaphors.
Avoid: Avoid aggressive or overly casual language.
Avoid: Avoid excessive use of exclamation points or superlatives.
Captured from the live site · real computed styles
11
System prompt
This is Uber's consumer-facing web platform, positioned as a high-utility, global transportation service. The design DNA is built on a high-contrast monochrome palette (#000000, #ffffff, #f3f3f3) with clean, functional grays. Typography relies on a geometric sans-serif for bold headlines (weight 500) and a humanist sans-serif for readable body text (weight 400). Critical donts: never use multiple accent colors (the palette is strictly monochrome), avoid decorative fonts (the system uses clean, professional sans-serifs), and never use heavy shadows or complex gradients (the design favors subtle depth and solid fills). The layout is a clean, two-column hero with a prominent functional form, emphasizing utility and ease of use.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
