## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uber-com/6fbdb16b-1d65-42c3-b533-0bc1468316af-1789146324299-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uber-com/6fbdb16b-1d65-42c3-b533-0bc1468316af-1789146320631.webp
- Design on Kage: https://kage.design/designs/uber-landing-page

## Before you start
Ask the user:
- What product or service are they offering, and what is the primary action a visitor should complete (book, order, sign up, get a quote)?
- Who is the audience — consumers, drivers/partners, businesses?
- What brand assets exist: name, logo, hex colours, typefaces, illustration style?
Wait for the answers. Everything below is applied to their product, never to Uber.

## Page structure
1. **Top navigation bar** — black full-width bar with wordmark left, six plain white text links, and right utility cluster: language selector, Help, Log in (text) and a white pill Sign up. Nav is text-only, no icons, no megamenu visible.
2. **Location strip** — small pin icon + detected city ('Madrid, ES') with an underlined 'Change city' link, left-aligned above the hero.
3. **Hero: booking panel + illustration** — two columns. Left: a very large two-line headline in heavy grotesque ('Go anywhere with Uber'), a 'Pickup now' pill with dropdown, then a connected two-field form (pickup location with a send/arrow icon, dropoff location) whose inputs are light grey with dotted vertical connector between them. Below, a black 'See prices' button and a quiet 'Log in to see your recent activity' link. Right: a large warm, saturated illustration of a suitcase in a vehicle, with an overlaid translucent caption bar 'Ready to travel?' and a white pill 'Schedule ahead' pinned bottom-right of the image.
4. **Services grid** — heading 'Explore what you can do with Uber' left-aligned. A 3-column × 2-row grid of six light-grey cards, each with a bold small title, one-line description, small 'Details' text link, and a small 3D/flat product icon anchored bottom-right. Cards: Ride, Reserve, Courier, Hourly, Food, Grocery.
5. **Account split block** — left: medium headline 'Log in to see your account details', one supporting sentence, black button 'Log in to your account' plus inline 'Create an account' link. Right: flat editorial illustration of two characters (passenger and driver).
6. **Reserve feature panel (accent block)** — full-width light-teal panel. Left half: bold heading 'Get your ride right with Uber Reserve', a 'Choose date and time' form (labelled Date and Time fields with calendar/clock icons) and a full-width black 'Next' button. Right half: collage-style illustration of a watch and notebook. A right rail inside the panel lists three 'Benefits' rows with tiny line icons and two-line descriptions, ending in an underlined 'See terms' link.
7. **Travel/getaway block** — text left ('Planning your next getaway?' heading, paragraph, black city-selector pill), flat cityscape illustration right with rounded corners.
8. **Driver block** — image left (interior car scene illustration), text right: heading 'Drive when you want, make what you need', paragraph, black 'Get started' button plus 'Already have an account? Sign in' inline link.
9. **Business block** — text left: heading 'The Uber you know, reimagined for business', paragraph, black 'Get started' button and 'Check out our solutions' link. Illustration right (architectural city/road scene).
10. **App download section** — light grey band, heading 'It's easier in the apps', two side-by-side white cards each containing a QR code, 'Download the Uber app / Driver app', 'Scan to download' caption and an arrow icon.
11. **Footer** — black, tall and dense. Wordmark and 'Visit Help Center' link on the left, a small support/contact notice top-right. Four link columns (Company, Products, Global citizenship, Travel), each 4–8 text links. Below: social icons row, language and city selectors as outlined pills, then two store badges (Google Play, App Store) and a legal row with copyright and Privacy/Accessibility/Terms.

## Design language
- **Hierarchy**: oversized heavy sans headlines (60–72px equivalent, 2-line max) drive every block; body text is small (14–15px) and grey-black; UI labels in components are small and bold. The size jump between headline and body is deliberately huge — do not shrink headlines to 'fit'.
- **Layout rhythm**: after a two-column hero, the page alternates left-text/right-image, image-left/right-text, and a full-width colour panel. Keep one narrow text column (max ~340–400px) beside each image rather than centred stacks. Insert generous vertical space (96–120px) between blocks so each reads as its own scene.
- **Grid**: content in a wide centred container with left-aligned text; the services grid uses equal thirds with small gaps. Cards never exceed ~3 across.
- **Colour**: near-monochrome UI — pure black (#000) for nav, buttons and footer; white page; light grey (#f3f3f3) for input fields and service cards; black text. All colour lives in the illustrations (warm reds, oranges, yellows, teals). Reserve exactly one brand accent panel per page (here a desaturated teal, ~#a8cdd0) and keep form elements inside it black-on-light. Buttons: black fill, white 14px text, 4–6px radius, no gradients or shadows; secondary actions are plain underlined or plain text links beside the primary button.
- **Type pairing**: a single grotesque family in heavy weight for headings (like Uber Move/Circular/Founders Grotesk) with the same family in regular for body; system-ui fallback is acceptable. Uppercase only sparingly, never in headlines.
- **Borders/shadows**: flat — hairline or no borders, no drop shadows; elevation is suggested only by the grey fill of inputs and cards, and the translucent overlay bar on the hero illustration.
- **Illustration direction**: flat, editorial, warm-toned scenes tied to real product moments (luggage, driver's seat, city views), not stock photography or abstract blobs. Anchor small product glyphs to the bottom-right of grid cards.
- **Forms**: stacked location-style inputs in light grey with small leading icons and a dotted connector line between related fields; labels minimal; primary submit button below, full-width inside feature panels, auto-width in the hero.
- **Motion/interaction**: none visible beyond hover affordances; keep interaction quiet — underline on hover for links, slight darkening on buttons. No parallax or scroll animation.
- **Footer discipline**: a dense black footer is part of the look — four link columns, small 12–13px text, low-contrast but legible white links, outlined pill selectors and store badges at the bottom.

## Never
- Do not use the Uber wordmark, logo, any Uber product names (Uber Eats, Uber Reserve, Uber for Business), or copy from the reference page.
- Do not reproduce the specific illustrations, characters or photographs from the reference; create original art in the same flat editorial spirit if the user's brand calls for it.
- Do not clone the exact headlines, taglines or footer link lists; write copy for the user's own product.
- Never present the result as Uber's site; apply the layout system to the user's brand assets and content.