Expedia Design System

Expedia's homepage reads like a well-organized marketplace dashboard rather than a travel fantasy. The hero is a white canvas with a single horizontal search bar spanning flight, hotel, package, car, and activity tabs — the photography appears below the fold in destination and vacation-rental card grids. The brand voltage is a warm sunshine yellow that appears in the header loyalty stripe, the alternate primary button fill, and badge backgrounds; every other chromatic moment belongs to functional states (cobalt focus rings, green deal badges, red error banners). Against most consumer-travel sites that open with a full-bleed destination photograph, Expedia's restraint reads almost like a B2B product: the search engine is the hero, not the destination.

The DESIGN.md file exposes a token system of unusual depth. Expedia ships over 400 CSS custom properties organized into named families — `marketing_1`, `marketing_2`, `marketing_3`, `dark_1`, `dark_2`, `bright_1`, `romie`, and a multi-tier loyalty system (`global_loyalty_low`, `mid`, `high`, `extra_high`, each with a `_bright` variant). In practice, the marketing surface uses a small working palette: midnight navy as the primary ink and border color, cobalt blue for all interactive states, sunshine yellow for the brand-voltage moments, a pale blue selection tint for date-range fills, and standard white canvas. Typography runs a single sans family across every tier from 10px utility labels to display headings; the system picks practical sizes (10, 12, 14, 16, 18, 24px) rather than a dramatic editorial scale.

Feed this file to an AI coding tool and it reproduces Expedia's specific moves: a white marketplace canvas instead of atmospheric photography, sunshine yellow reserved for brand-alt CTAs rather than primary actions, cobalt blue as the single interactive-state color, and a tight 2–12px radius scale that keeps booking forms feeling transactional rather than decorative. The one move worth understanding before borrowing: the yellow is not the primary button — Expedia's primary action is cobalt blue, a deliberate choice that keeps the yellow scarce and readable as a loyalty or brand-highlight signal.