---
version: alpha
name: "Expedia"
website: "https://www.expedia.com"
description: >-
  A travel-marketplace brand running the most comprehensive design-token system in consumer travel — over 400 CSS custom properties organized into named theme families (marketing, dark, bright, loyalty tiers) with a deep midnight-navy ink as the dominant structural color and a warm sunshine yellow as the sole brand voltage. The nav stripe is white on pure midnight, interactive blues handle focus and link states, and a generous border-radius scale of 2–12px keeps the booking UI approachable. The product is a full trip-commerce platform: flights, hotels, vacation rentals, packages, and car rentals unified under a single search bar on a white canvas.

seo:
  title: "Expedia Design System for React — sunshine yellow, midnight navy, 18 components"
  metaDescription: "Expedia's marketing-site design system as a DESIGN.md file. Sunshine yellow brand voltage on a white canvas, midnight navy ink, a 400+ CSS variable token system, and 18 component definitions for React, Next.js, and AI tools."
  highlights:
    - "Sunshine yellow voltage — the brand yellow appears as the primary alternate button fill and header stripe, the only warm chromatic moment against an otherwise cool neutral system"
    - "400+ CSS custom properties — the most exhaustive token system in consumer travel, covering loyalty-tier palettes, marketing themes, and dark/bright mode families"
    - "Midnight navy as structural ink — the near-black with a blue undertone carries text, borders, and icon fills across the entire page, warmer than pure black"
    - "Interactive cobalt for focus and links — a distinct royal blue handles all interactive states: focus rings, selected tabs, checkbox fills, link text, and loading spinners"
    - "White-canvas marketplace layout — unlike airlines and hotels that use full-bleed photography, Expedia's homepage is a bright white grid of search, product cards, and module rows"
  tags:
    - "Travel & Hospitality"
    - "Marketplaces"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.

  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.expedia.com"
      title: "Expedia — official site"
      description: "Expedia's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-brand-color"
      title: "What is Expedia's brand color, and why isn't it the primary button?"
      answer: "Expedia's brand voltage is sunshine yellow (#fddb32), wired in CSS as --color__brand__1 and --button__primary_alt__default__background_color. It appears on the header loyalty stripe, alternate CTA fills, and brand badge backgrounds. The primary interactive button uses cobalt blue (#1668e3) instead — Expedia reserves yellow for brand-identity moments rather than primary actions. This separation keeps yellow legible as a loyalty signal (One Key rewards) rather than diluting it across every call-to-action on a page that can have dozens of booking buttons."
    - id: "typography"
      title: "What typeface does Expedia use, and what should I use as a substitute?"
      answer: "The extraction captures a single sans-serif family across all tiers, running 10–24px for utility labels through display headings. The CSS variable families are named for functional purposes (heading, subheading, paragraph) rather than font names. The stack resolves to a system sans. For React implementations, Inter at weights 400–700 replicates the proportional rhythm; the system uses weight 400 for body and nav copy and weight 700 for button labels and section headings. There is no display serif or condensed variant on the marketing surface."
    - id: "token-system-depth"
      title: "Why does Expedia have 400+ CSS custom properties when most of them aren't visible on the homepage?"
      answer: "The 400+ token families reflect the full product system — search, booking flows, calendar date-pickers, pricing tables, loyalty tier interfaces, and dark/light modal surfaces — compiled into a single CSS root. The marketing homepage uses a small working subset: midnight navy for text and borders, cobalt blue for interactive states, sunshine yellow for brand voltage, pale blue (#c8dff9) for date-range selection fills, and white canvas. The loyalty-tier palettes (low/mid/high/extra-high, each with a bright variant) power the One Key rewards UI rather than the public homepage."
    - id: "radius-and-shapes"
      title: "What is Expedia's corner-radius philosophy?"
      answer: "Expedia runs a transactional radius scale favoring tight rounding. The dominant values are 2px on micro-UI elements and pill badges, 4px on standard inputs and cards, 8px on search-bar surfaces, and 12px on promotional tiles. The scale avoids the generous-soft 16–24px tier that hospitality brands like Airbnb use; the tight radii keep the booking interface feeling fast and form-like rather than editorial. Date-range cells use 100% radius for start/end handles, consistent with a functional calendar convention."
    - id: "layout-search-bar"
      title: "How is Expedia's search bar structured and what tokens does it use?"
      answer: "The main search bar spans full content width below a slim tab row (Stays, Flights, Cars, Packages, Things to Do). The tab row sits on the white canvas at 14px font with the selected tab underlined in cobalt (#1668e3). The input fields use a white background, midnight-navy border in the resting state, cobalt border on focus, and an 8px border-radius. The search submit button fills cobalt blue with white text at 16px bold. The date-range picker fills the selected range with a pale blue (#c8dff9) tint and uses full-circle handles at the start and end dates."

mockups:
  - "marketing-hero"
  - "checkout-flow"

colors:
  primary: "#1668e3"
  primary-light: "#c8dff9"
  secondary: "#fddb32"
  ink: "#191e3b"
  ink-muted: "#676a7d"
  ink-soft: "#818494"
  canvas: "#ffffff"
  surface-1: "#eff3f7"
  surface-2: "#dfe0e4"
  hairline: "#dfe0e4"
  hairline-dark: "#999ca8"
  scrim: "#0c0e1c"
  positive: "#227950"
  positive-light: "#beecc6"
  error: "#a7183c"
  warning: "#8b6400"
  loyalty-yellow: "#fddb32"
  loyalty-amber: "#ffb800"

typography:
  display-xl:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: 0
  heading-lg:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  heading-md:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  body-lg:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  body-sm:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  label-md:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0
  button-md:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "44px"
  button-primary-alt:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px 20px"
    height: "44px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px 16px"
    height: "60px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px"
    borderColor: "{colors.hairline}"
  card-hover:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.hairline-dark}"
  text-input-focus:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.primary}"
  badge-brand:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "2px 8px"
  badge-deal:
    backgroundColor: "{colors.positive}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "2px 8px"
  date-range-fill:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
  pill-selected:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "6px 16px"
    borderColor: "{colors.primary}"
  footer:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "48px 24px"
---

## Overview

Expedia's homepage is the rare travel brand that leads with the product rather than the destination. **Marketplace-First Canvas.** The above-fold experience is a white grid with a tabbed search engine at center — no full-bleed hero photography, no overlaid gradient text, no atmospheric backdrop. The booking interface is the identity. This puts Expedia closer to Google Flights or Kayak in visual logic than to Airbnb or booking.com, which both use destination photography as their primary emotional hook.

The color discipline reinforces the transactional framing. One midnight navy structural ink (`{colors.ink}` — the near-black with a blue cast) carries text and borders. One cobalt blue (`{colors.primary}`) handles every interactive state — focus rings, selected tabs, checkbox fills, link text, loading spinners, the primary search button. One sunshine yellow (`{colors.secondary}`) appears as the brand-alt button fill and loyalty stripe. The remaining tokens are semantic: green for deals, red for errors, pale blue for date-range selection fills. The marketplace grid below the fold is entirely photographic — destination thumbnails carry all the visual warmth that the chrome withholds.

The token system is the deepest in consumer travel. Over 400 CSS custom properties organized into marketing, dark, bright, loyalty-tier, and "romie" (AI-assistant) families live on `:root`. The marketing homepage consumes a small fraction; the depth reflects a unified design system spanning search, booking flows, calendar pickers, loyalty dashboards, and multi-surface dark/light modes.

**Key Characteristics:**
- White canvas marketplace layout — search engine above the fold, photography in card grids below; no hero photography.
- Midnight navy ink (`{colors.ink}`) as the dominant structural color — text, borders, icon fills — a blue-tinted near-black rather than pure black.
- Cobalt blue (`{colors.primary}`) reserved for all interactive states: focus rings, selected underlines, checkbox fills, primary search CTA.
- Sunshine yellow (`{colors.secondary}`) as the brand-alt voltage — alternate button fill, header loyalty stripe, brand badge backgrounds.
- Tight transactional radius scale: 2px micro, 4px standard, 8px search fields, 12px promotional tiles.
- 400+ CSS custom properties organized into named theme families — marketing, dark, bright, loyalty tiers (low/mid/high/extra-high each with a bright variant), and "romie" for the AI-assistant surface.
- Pale blue (`{colors.primary-light}`) reserved for date-range fill tints in the calendar picker — a functional accent that never appears in marketing chrome.
- One Key loyalty rewards badge rendered in sunshine yellow — the only above-fold chromatic moment that isn't functional.

## Colors

### Brand

- **Cobalt Blue** (`{colors.primary}` — #1668e3): frequency 309. Used as text (158), border (151) — focus borders, selected tab underlines, checkbox backgrounds, link text, loading spinners, the primary search button fill. The interactive-state color for the entire system. Wired across 100+ variables including `--button__primary__default__background_color`, `--link__default__text_color`, `--input__focus__border_color`.
- **Sunshine Yellow** (`{colors.secondary}` — #fddb32): frequency 12. Used as background only — alternate primary button fill, header loyalty stripe, brand badge backgrounds. Wired as `--color__brand__1` and `--button__primary_alt__default__background_color`. The brand-identity voltage; not used for primary actions.
- **Pale Blue Selection** (`{colors.primary-light}` — #c8dff9): frequency 14. Used as background only — date-range cell fills, active pill backgrounds, secondary button active states. Wired as `--date_range_grid__cell__date__selected__background_color` and `--light_1__primary_container`. Functional, never decorative.

### Structure

- **Midnight Navy** (`{colors.ink}` — #191e3b): frequency 3348. Used as text (1682), border (1661) — the dominant ink and border tone across the entire system. Wired across 170+ variables; the most-used color in the extraction by a wide margin. A blue-tinted near-black that reads warmer than true black against white.
- **Deep Scrim** (`{colors.scrim}` — #0c0e1c): frequency 92. Used as background (17), gradient (24) — scrim overlays, shadow tokens, dark inverse surfaces. The true darkest tone in the system.
- **Pure Black** (not declared as a named token — frequency 17 in extraction). Border only — sparse use in shadow and gradient definitions.

### Canvas

- **White Canvas** (`{colors.canvas}` — #ffffff): frequency 214. Used as text (66), background (83), border (65) — the primary page canvas, card backgrounds, input fills, button text on dark fills. The dominant surface across the marketplace layout.
- **Surface-1** (`{colors.surface-1}` — #eff3f7): frequency 3. Used as background — hover states on cards, secondary tab container backgrounds, and low-elevation surfaces. A cool off-white with a slight blue tint.
- **Surface-2** (`{colors.surface-2}` — #dfe0e4): frequency 4. Used as border — card borders, table dividers, input group separators. The standard light-gray hairline color.

### Text / Muted

- **Ink Muted** (`{colors.ink-muted}` — #676a7d): frequency 2. Used as text and border — placeholder text in inputs, secondary metadata labels, nav header link muted state.
- **Ink Soft** (`{colors.ink-soft}` — #818494): frequency 10. Used as border only — unselected pill borders, radio button resting borders, switch container borders, input default borders.
- **Mid Gray** (`{colors.hairline-dark}` — #999ca8): frequency 7. Used as border — tertiary button borders, nav dividers, placeholder card backgrounds.

### Semantic

- **Positive** (`{colors.positive}` — #227950): frequency 0 on marketing surface. Wired as deal badge fill, positive progress bar fill, switch selected state, confirmation icon color across the product.
- **Error** (`{colors.error}` — #a7183c): frequency 0 on marketing surface. Wired as error text, required field indicator, error badge background, negative price highlight.
- **Loyalty Amber** (`{colors.loyalty-amber}` — #ffb800): frequency 0. Wired as the high-tier loyalty surface, alternate primary button hover fill.

## Typography

### Font Family

The system resolves to a single sans-serif family across every tier — the CSS declarations use functional variable names without explicit font-family strings in the extracted samples, pointing to the system sans stack. Display and body use the same family at different weights. There is no separate serif or condensed display family anywhere in the marketing surface.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 24px | 700 | 32px | Section headings ("Vacation rentals for your kind of stay") |
| `{typography.heading-lg}` | 18px | 700 | 24px | Module headings, promotional card titles |
| `{typography.heading-md}` | 16px | 700 | 20px | Card headings, tab labels |
| `{typography.body-lg}` | 16px | 400 | 24px | Standard body text, input values |
| `{typography.body-md}` | 14px | 400 | 20px | Default running text, nav links, filter labels |
| `{typography.body-sm}` | 12px | 400 | 16px | Secondary metadata, price sub-labels |
| `{typography.label-md}` | 14px | 700 | 20px | Button labels, badge text, selected tab labels |
| `{typography.caption}` | 10px | 400 | 14px | Fine-print metadata, utility labels, loyalty-tier badges |
| `{typography.button-md}` | 16px | 700 | 24px | Primary and alternate CTA button text |
| `{typography.nav-link}` | 14px | 400 | 20px | Top-nav link labels and secondary navigation |

### Principles

The system avoids display-scale type entirely. The largest heading on the marketing surface is 24px — closer to a B2B dashboard than a consumer brand hero. Weight 700 carries all emphasis: headings, button labels, selected state labels. Weight 400 handles body, nav, and metadata. There is no intermediate semibold (600) tier in the captured surface.

### Note on Font Substitutes

The system stack resolves to the device system sans. Inter at the same size and weight scale is the closest web-font match; the proportions of 14px body and 16px button labels transfer cleanly. For the caption tier (10px), ensure the chosen typeface remains legible at that size — Inter works well; avoid condensed alternatives.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px and 12px as the dominant modules in booking UI.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px.
- **Card internal padding:** `{spacing.md}` (12px) on standard search-result cards; `{spacing.base}` (16px) on promotional module tiles.
- **Section vertical padding:** 24–32px between module rows below the fold.

### Grid & Container

- **Max content width:** ~1200px with side padding collapsing gracefully to mobile.
- **Hero:** full-width white band, centered search bar stack (tab row + input row + submit button), no background fill beyond white.
- **Vacation rentals:** 4-column responsive card grid with property photography, price, and rating.
- **Package deals:** horizontal scroll row of 4-column cards with thumbnail + headline + price below.
- **Navigation:** single-row top nav with Expedia wordmark left, category links center, sign-in / One Key right; a slim yellow loyalty-stripe banner below on eligible sessions.

### Rhythm

The page alternates between **search/utility** bands (white, high-density form fields) and **browseable product** bands (white card grids with photography). There is no background-color alternation — every section sits on the same white canvas; module boundaries are marked by section headings and horizontal visual rhythm, not surface-color changes.

## Elevation

The system uses standard drop shadows on interactive overlays (date-picker popovers, dropdown menus, tooltips) drawn from the `{colors.scrim}` token. Marketing surface cards are flat with hairline borders (`{colors.surface-2}`) rather than shadow — elevation reads through border contrast against the white canvas.

- **Flat (hairline border):** search-result cards, product tiles, input fields — the vast majority of surfaces.
- **Shadow elevation:** date-picker calendar popover, nav dropdowns, modal dialogs — popovers above the canvas plane.
- **No elevation:** section headings and body text — the canvas floor is the base.

## Shapes

The radius scale is **transactional-tight**, optimized for booking interfaces:

- `{rounded.none}` 0px — table cells, date-range mid-range fills.
- `{rounded.xs}` 2px — micro badges, step-indicator dots, tight chip variants.
- `{rounded.sm}` 4px — standard input fields, search-result cards, primary and alternate buttons.
- `{rounded.md}` 8px — the main search-bar input group, promotional feature tiles.
- `{rounded.lg}` 12px — larger promotional card surfaces.
- `{rounded.full}` 9999px — date-range start/end handles (full circle), tag pills, filter chips, badge labels.

There is no 16px or 24px tier. The scale is binary-ish: tight (2–4px) for booking UI, moderate (8–12px) for featured surfaces, pill (full) for selection handles.

## Components

**`button-primary`** — The main search/booking CTA. Cobalt `{colors.primary}` fill, white text at `{typography.button-md}`, `{rounded.sm}` 4px radius, 12x24 padding, 44px height. Used for "Search" on the main search bar and "Book now" on individual listings.

**`button-primary-alt`** — The brand-voltage button. Sunshine yellow `{colors.secondary}` fill, midnight navy text, same radius and sizing as `button-primary`. Used for "Bundle & Save" featured CTAs and One Key loyalty upsell buttons.

**`button-secondary`** — Transparent fill, cobalt text and border, `{rounded.sm}` radius. Used for filter actions and secondary navigation CTAs.

**`top-nav`** — White surface, midnight navy text at `{typography.nav-link}`, hairline bottom border, 60px height. Houses the Expedia wordmark, product tab navigation, and account/loyalty cluster. A slim sunshine-yellow stripe (`{colors.secondary}`) may appear below on loyalty sessions.

**`nav-link`** — Transparent background, midnight navy text, 8x12 padding. Selected state adds a cobalt underline.

**`hero-heading`** — Midnight navy text, `{typography.display-xl}` (24px/700). Used for module section headings on the white canvas — no photographic hero heading exists at this font size.

**`body-paragraph`** — Midnight navy text, `{typography.body-lg}`, transparent background. Default body text across the marketplace surface.

**`body-paragraph-muted`** — Muted ink `{colors.ink-muted}`, `{typography.body-md}`. Used for secondary metadata: price sub-labels, listing address lines, filter counts.

**`card`** — White fill, midnight navy text, `{rounded.sm}` 4px radius, 12px padding, hairline border `{colors.surface-2}`. The standard property / package / deal card.

**`card-hover`** — Shifts background to `{colors.surface-1}` on pointer hover. The standard hover affordance across all product grids.

**`text-input`** — White fill, midnight navy text, `{rounded.sm}` radius, `{colors.hairline-dark}` border in resting state.

**`text-input-focus`** — Border flips to `{colors.primary}` cobalt on focus; the only chromatic change during interaction.

**`badge-brand`** — Sunshine yellow fill, midnight navy text, full-pill radius, `{typography.caption}`. Used for "Sale", "One Key Cash", "Member Price" loyalty signals.

**`badge-deal`** — Positive green `{colors.positive}` fill, white text. Used for "Save X%", "Tonight only" deal callouts in product grids.

**`date-range-fill`** — Pale blue `{colors.primary-light}` background on the mid-range cells between selected start and end dates in the calendar picker. No radius on interior cells; full-circle handles on endpoints.

**`pill-selected`** — Surface-1 fill, cobalt text and border, full-pill radius, 6x16 padding. Used for selected filter chips on search-results pages.

**`footer`** — `{colors.surface-1}` background, muted ink text, `{typography.body-sm}`, 48x24 padding. Houses site links, app download CTAs, Expedia Group sub-brand logos.

## Do's and Don'ts

**Do** use cobalt blue (`{colors.primary}`) as the single interactive-state color. Every focus ring, selected tab underline, checkbox fill, and link text should resolve to the same cobalt — consistency here is what makes the interface legible across dozens of interactive elements on a single search-results page.

**Do** keep sunshine yellow (`{colors.secondary}`) for brand-identity moments only: the alternate CTA, loyalty-tier highlights, and brand badge fills. The moment yellow appears on a primary form action it loses its identity signal — Expedia deliberately keeps it off the primary search button.

**Do** use the pale blue selection tint (`{colors.primary-light}`) for calendar date-range fills rather than a full cobalt fill. The tint is functional and readable across the multi-week calendar grid; a saturated primary fill would make ranges visually heavy and obscure the dates beneath.

**Do** keep section headings at 24px / weight 700. The marketplace layout reads dense — display-scale type above 28px would fight the card grid rather than organizing it.

**Don't** introduce photography or gradient fills above the fold. The search bar is the hero; adding a destination photograph behind it shifts Expedia toward a travel-magazine aesthetic and away from the transactional clarity that distinguishes it from competitors like booking.com.

**Don't** use `{colors.secondary}` sunshine yellow as a text color. At `#fddb32` on white, the contrast ratio fails WCAG AA at any size. Yellow is background-only in this system; text on yellow should always be `{colors.ink}` midnight navy.

**Don't** round inputs or cards past `{rounded.md}` 8px. The tight radius scale is deliberate — generous rounding (16–24px) makes a booking interface feel like a consumer app rather than a transactional marketplace.

**Don't** use `{colors.loyalty-amber}` (#ffb800) outside the loyalty-tier surfaces. It is the high-tier rewards badge color and belongs to the One Key ecosystem; using it as a general accent introduces a second yellow and dilutes the brand-yellow signal of `{colors.secondary}`.

## Known Gaps

- **Dark mode:** the extraction captures the light-mode marketing surface only. The `dark_1`, `dark_2`, `bright_1`, and `romie` theme families in the CSS are populated but not rendered in the captured page state.
- **Loyalty tier interfaces:** the `global_loyalty_low`, `mid`, `high`, `extra_high` (and `_bright` variants) palettes power the One Key rewards dashboard, which requires authentication and is not captured here.
- **Animation and microinteractions:** the date-range picker, destination typeahead, and tab transitions all include motion but the spec captures resting-state tokens only.
- **Responsive breakpoints:** the marketing surface is captured at desktop width; the tab navigation collapses, the card grids reflow, and the search bar stacks differently on mobile — breakpoint tokens are not represented.
- **Error and validation states:** `{colors.error}` (#a7183c) and related form-error tokens are fully wired in the CSS but not rendered in the marketing surface; they live in the booking and account flows.
- **Hover state matrix:** button hover states (`button__primary_alt__hover` resolves to `{colors.loyalty-amber}`) are defined in the CSS but not captured from the marketing surface interaction.