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">Usewrite_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: - 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) - 8px spacing grid with compact, information-dense layouts - Bold photography integrated as full-bleed hero backgrounds - Black footer anchoring the page with a dark, high-contrast environment
#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)
- Background: Uber Black (#000000)
- Text: Pure White (#ffffff)
- Padding: 10px 12px
- Radius: 999px (full pill)
- Outline: none
- Focus: inset ring rgb(255,255,255) 0px 0px 0px 2px
- The primary action button -- bold, high-contrast, unmissable
Secondary White
- Background: Pure White (#ffffff)
- Text: Uber Black (#000000)
- Padding: 10px 12px
- Radius: 999px (full pill)
- Hover: background shifts to Hover Gray (#e2e2e2)
- Focus: background shifts to Hover Gray, inset ring appears
- Used on dark surfaces or as a secondary action alongside Primary Black
Chip / Filter
- Background: Chip Gray (#efefef)
- Text: Uber Black (#000000)
- Padding: 14px 16px
- Radius: 999px (full pill)
- Active: inset shadow rgba(0,0,0,0.08)
- Navigation chips, category selectors, filter toggles
Floating Action
- Background: Pure White (#ffffff)
- Text: Uber Black (#000000)
- Padding: 14px
- Radius: 999px (full pill)
- Shadow: rgba(0,0,0,0.16) 0px 2px 8px 0px
- Transform: translateY(2px) slight offset
- Hover: background shifts to #f3f3f3
- Map controls, scroll-to-top, floating CTAs
#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 - Horizontal row of pill-shaped buttons for top-level navigation ("Ride", "Drive", "Business", "Uber Eats", "About") - Each pill: Chip Gray background, black text, 999px radius - Active state indicated by black background with white text (inversion)
Hero with Dual Action - Split hero: text/CTA on left, map/illustration on right - Two input fields side by side for pickup/destination - "See prices" CTA button in black pill
Plan-Ahead Cards - Cards promoting features like "Uber Reserve" and trip planning - Illustration-heavy with warm, human-centric imagery - Black CTA buttons with white text at bottom
| 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 |