skills/creative/popular-web-designs/templates/uber.md
Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
- Primary:
DM Sans| Mono:system monospace stack- Font stack (CSS):
font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">Use
write_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Uber's design language is a masterclass in confident minimalism -- a black-and-white universe where every pixel serves a purpose and nothing decorates without earning its place. The entire experience is built on a stark duality: jet black (#000000) and pure white (#ffffff), with virtually no mid-tone grays diluting the message. This isn't the sterile minimalism of a startup that hasn't finished designing -- it's the deliberate restraint of a brand so established it can afford to whisper.
The signature typeface, UberMove, is a proprietary geometric sans-serif with a distinctly square, engineered quality. Headlines in UberMove Bold at 52px carry the weight of a billboard -- authoritative, direct, unapologetic. The companion face UberMoveText handles body copy and buttons with a slightly softer, more readable character at medium weight (500). Together, they create a typographic system that feels like a transit map: clear, efficient, built for scanning at speed.
What makes Uber's design truly distinctive is its use of full-bleed photography and illustration paired with pill-shaped interactive elements (999px border-radius). Navigation chips, CTA buttons, and category selectors all share this capsule shape, creating a tactile, thumb-friendly interface language that's unmistakably Uber. The illustrations -- warm, slightly stylized scenes of drivers, riders, and cityscapes -- inject humanity into what could otherwise be a cold, monochrome system. The site alternates between white content sections and a full-black footer, with card-based layouts using the gentlest possible shadows (rgba(0,0,0,0.12-0.16)) to create subtle lift without breaking the flat aesthetic.
Key Characteristics:
#000000): The defining brand color -- used for primary buttons, headlines, navigation text, and the footer. Not "near-black" or "off-black," but true, uncompromising black.#ffffff): The primary surface color and inverse text. Used for page backgrounds, card surfaces, and text on black elements.#e2e2e2): White button hover state -- a clean, cool light gray that provides clear feedback without warmth.#f3f3f3): Subtle hover for elevated white buttons -- barely-there gray for gentle interaction feedback.#efefef): Background for secondary/filter buttons and navigation chips -- a neutral, ultra-light gray.#4b4b4b): Secondary text and footer links -- a true mid-gray with no warm or cool bias.#afafaf): Tertiary text, de-emphasized footer links, and placeholder content.#000000): Thin 1px borders for structural containment -- used sparingly on dividers and form containers.rgba(0, 0, 0, 0.12)): Standard card elevation -- a featherweight lift for content cards.rgba(0, 0, 0, 0.16)): Slightly stronger elevation for floating action buttons and overlays.rgba(0, 0, 0, 0.08)): Inset shadow for active/pressed states on secondary buttons.#0000ee): Standard browser blue for text links with underline -- used in body content.#ffffff): Links on dark surfaces -- used in footer and dark sections.#000000): Links on light surfaces with underline decoration.UberMove, with fallbacks: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serifUberMoveText, with fallbacks: system-ui, Helvetica Neue, Helvetica, Arial, sans-serifNote: UberMove and UberMoveText are proprietary typefaces. For external implementations, use system-ui or Inter as the closest available substitute. The geometric, square-proportioned character of UberMove can be approximated with Inter or DM Sans.
| Role | Font | Size | Weight | Line Height | Notes |
|---|---|---|---|---|---|
| Display / Hero | UberMove | 52px (3.25rem) | 700 | 1.23 (tight) | Maximum impact, billboard presence |
| Section Heading | UberMove | 36px (2.25rem) | 700 | 1.22 (tight) | Major section anchors |
| Card Title | UberMove | 32px (2rem) | 700 | 1.25 (tight) | Card and feature headings |
| Sub-heading | UberMove | 24px (1.5rem) | 700 | 1.33 | Secondary section headers |
| Small Heading | UberMove | 20px (1.25rem) | 700 | 1.40 | Compact headings, list titles |
| Nav / UI Large | UberMoveText | 18px (1.13rem) | 500 | 1.33 | Navigation links, prominent UI text |
| Body / Button | UberMoveText | 16px (1rem) | 400-500 | 1.25-1.50 | Standard body text, button labels |
| Caption | UberMoveText | 14px (0.88rem) | 400-500 | 1.14-1.43 | Metadata, descriptions, small links |
| Micro | UberMoveText | 12px (0.75rem) | 400 | 1.67 (relaxed) | Fine print, legal text |
Primary Black (CTA)
#000000)#ffffff)rgb(255,255,255) 0px 0px 0px 2pxSecondary White
#ffffff)#000000)#e2e2e2)Chip / Filter
#efefef)#000000)rgba(0,0,0,0.08)Floating Action
#ffffff)#000000)rgba(0,0,0,0.16) 0px 2px 8px 0pxtranslateY(2px) slight offset#f3f3f3#ffffff) on white pages; no distinct card background differentiationrgba(0,0,0,0.12) 0px 4px 16px 0px for standard lift#000000)#ffffff)#000000) -- the only place visible borders appear prominently#efefef) background for category navigation ("Ride", "Drive", "Business", "Uber Eats")Category Pill Navigation
Hero with Dual Action
Plan-Ahead Cards
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, solid background | Page background, inline content, text sections |
| Subtle (Level 1) | rgba(0,0,0,0.12) 0px 4px 16px | Standard content cards, feature blocks |
| Medium (Level 2) | rgba(0,0,0,0.16) 0px 4px 16px | Elevated cards, overlay elements |
| Floating (Level 3) | rgba(0,0,0,0.16) 0px 2px 8px + translateY(2px) | Floating action buttons, map controls |
| Pressed (Level 4) | rgba(0,0,0,0.08) inset (999px spread) | Active/pressed button states |
| Focus Ring | rgb(255,255,255) 0px 0px 0px 2px inset | Keyboard focus indicators |
Shadow Philosophy: Uber uses shadow purely as a structural tool, never decoratively. Shadows are always black at very low opacity (0.08-0.16), creating the bare minimum lift needed to separate content layers. The blur radii are moderate (8-16px) -- enough to feel natural but never dramatic. There are no colored shadows, no layered shadow stacks, and no ambient glow effects. Depth is communicated more through the black/white section contrast than through shadow elevation.
#000000) and pure white (#ffffff) as the primary palette -- the stark contrast IS Uber| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | 320px | Minimum layout, single column, stacked inputs, compact typography |
| Mobile | 600px | Standard mobile, stacked layout, hamburger nav |
| Tablet Small | 768px | Two-column grids begin, expanded card layouts |
| Tablet | 1119px | Full tablet layout, side-by-side hero content |
| Desktop Small | 1120px | Desktop grid activates, horizontal nav pills |
| Desktop | 1136px | Full desktop layout, maximum container width, split hero |