--- version: alpha name: "KAYAK" description: "KAYAK runs the canonical comparison-engine surface — a near-white canvas (`#ffffff`) anchored on near-black ink (`#1e2026`), accented by the unmistakable **KAYAK orange** (`#ff690f`) that paints the wordmark, primary CTAs, the price-trend graph fill, and the deal flag. Type runs **Open Sans**, the open-source workhorse humanist sans, at 600–700 weights — display 28–36px / 700, body 14/400 — because the page is engineered for data density. A typical flight search results page packs a 56px masthead, a 240px sticky filter sidebar, a horizontal price-trend graph, a sort-tab bar, and 30+ flight cards each carrying airline logo, depart/arrive times, duration/stops, fees, environmental data, and Select CTA. Where Booking is dense for booking-funnel conversion and Expedia is dense for multi-product breadth, KAYAK is dense because it is **a meta-search engine** — comparing fares across hundreds of providers means the surface must surface every datapoint. The result is the canonical price-comparison flight-search aesthetic: orange-on-white, data-dense, graph-anchored, and unapologetically utilitarian." colors: bg: "#ffffff" bg-alt: "#f8f8f8" bg-data: "#f0f3f5" surface: "#ffffff" surface-soft: "#f4f4f4" surface-strong: "#e8e8e8" surface-orange-soft: "#fff2e8" surface-graph: "#fdf3eb" surface-deal: "#fff2e8" text: "#1e2026" text-strong: "#0a0c10" text-body: "#2c2f36" text-muted: "#5e6470" text-soft: "#8a909d" text-on-brand: "#ffffff" text-on-orange: "#ffffff" brand: "#ff690f" brand-hover: "#e85a07" brand-active: "#c54a00" brand-light: "#fff2e8" brand-deep: "#7a3300" brand-graph: "#ff690f" brand-graph-fill: "#fdf3eb" link: "#0066cc" link-hover: "#004a99" link-visited: "#5a4392" border: "#dadde0" border-soft: "#eaecef" border-strong: "#a4a9b4" border-input-focus: "#ff690f" divider: "#dadde0" scrim: "rgba(0,0,0,0.5)" shadow-card: "rgba(0,0,0,0.06)" shadow-elev: "rgba(0,0,0,0.14)" shadow-deep: "rgba(255,105,15,0.18)" success: "#0a8c3e" success-soft: "#e8f6ee" success-deep: "#0a6b32" warning: "#d97706" warning-soft: "#fff7e6" danger: "#cc2935" danger-soft: "#fdeaec" info: "#0066cc" info-soft: "#e8f0f8" best-flag: "#0a8c3e" cheapest-flag: "#0a8c3e" fastest-flag: "#9333ea" short-stop-flag: "#0066cc" hacker-fare: "#ff690f" pricegraph-stroke: "#ff690f" pricegraph-fill: "#fdf3eb" pricegraph-low: "#0a8c3e" pricegraph-high: "#cc2935" typography: display: fontFamily: "Open Sans" fontSize: "72px" lineHeight: 1.43 letterSpacing: "-0.025em" body: fontFamily: "Open Sans" fontSize: "14px" lineHeight: 1.43 mono: fontFamily: "SFMono-Regular" rounded: button: "6px" card: "8px" pill: "9999px" spacing: xs: "2px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview KAYAK is the meta-search engine that the entire travel marketplace category is benchmarked against — Booking is a hotel marketplace, Expedia is a multi-product travel mall, KAYAK is the **price-comparison engine that ranges across hundreds of providers**. The base canvas is **pure white** (`#ffffff`), the dominant ink is a near-black `#1e2026` with a slight cool bias, and a single voltage of **KAYAK orange** (`#ff690f`) carries the wordmark, every primary CTA, the price-trend graph stroke, the date-picker selected day, and the "Hacker Fare" tag — KAYAK's signature multi-airline routing flag. Type runs **Open Sans** — the most utilitarian choice in the travel-marketplace category. Where Booking has Bookin Sans (custom), Expedia has Expedia Sans (custom), Airbnb has Cereal (custom), KAYAK runs the open-source workhorse. The choice is deliberate: KAYAK's product is **data**, not brand voice; the typeface should be invisible, legible, and render fast on every device. Open Sans sits at 600–700 weights for display, 400 for body, with `tnum` enabled aggressively across prices, durations, and times. The hero h1 ("Search hundreds of travel sites at once") renders at 36px / 700 — confident utility, not aspirational. The shape language is **near-square**. Buttons round at 4px, flight cards at 8px, search-bar segments at 0 (sharp dividers), filter chips at 9999px. The system trusts square corners to read as "data, transactional, fast" — pill geometry would soften the comparison-engine utility into a consumer brand experience that KAYAK explicitly avoids. The atmosphere is **data-density done well**. A typical flight search results page packs: - 56px masthead with KAYAK wordmark + product tabs (Flights, Hotels, Cars, Packages, Stays) - Search bar persistent below the masthead - Horizontal price-trend graph (60px tall) showing "$ by day" across the next 30 days, with the user's selected dates highlighted in orange - Sort tab bar (Best, Cheapest, Quickest, Other) with green/purple/blue flag system - 240px sticky filter sidebar (Stops, Airlines, Times, Duration, Cabin, Bags, Price) - 30+ flight cards each carrying airline logo+name, depart time + airport code, duration + stops, arrive time + airport code, environmental impact (CO2), price, and a Select CTA Every dense element is purposeful. The page reads as legible because the colour-coding is rigid: orange for brand and CTA, green for "Best/Cheapest", purple for "Fastest", blue for "Short stop", red for "High CO2/error". The data-viz layer (price-trend graph) is a brand surface in itself — KAYAK is the only marketplace that puts a dynamic price chart above the results. **Key Characteristics:** - Single voltage: KAYAK orange `#ff690f` carries the wordmark, every primary CTA, and the data-viz stroke - Open Sans at 400/600/700 — utilitarian, legible, fast-rendering — the brand's anti-vanity choice - Near-square shape language: 4px buttons, 8px flight cards, 0px search segments, 9999px filter chips only - Horizontal price-trend graph above flight results — orange stroke, light orange fill, green/red day markers - Strict colour-coded flag system: green = best/cheapest, purple = fastest, blue = short-stop, orange = hacker-fare, red = high-CO2 - 5-segment flight card layout — left price, middle 3-segment flight detail (depart / arc / arrive), right Select CTA - Dense filter sidebar with 8+ collapsible sections and live result count - Tabular numerals everywhere money or time appears — flight times, durations, prices, fees all align ## Colors ### Primary - **Canvas** (`#ffffff`): the default page floor for every public page. Light-only on web. - **Ink** (`#1e2026`): the dominant text colour. Near-black with a slight cool bias. - **KAYAK Orange** (`#ff690f`): the brand colour. Wordmark, primary CTA, price-trend graph stroke, date-picker selected, focus ring, "Hacker Fare" flag. ### Brand & Sub-Brand - **Orange Hover** (`#e85a07`): hover deepens. - **Orange Active** (`#c54a00`): pressed state. - **Orange Light** (`#fff2e8`): informational tint, deal cell background, active filter chip surface. - **Orange Deep** (`#7a3300`): deep orange text colour used on light orange surface tints. ### Accent (Flag System) - **Best/Cheapest** (`#0a8c3e`): green flag — "BEST", "CHEAPEST" markers on sort tabs and flight cards. - **Fastest** (`#9333ea`): purple flag — "FASTEST" sort tab and badge. - **Short Stop** (`#0066cc`): blue flag — "SHORT LAYOVER" badge. - **High CO2** (`#cc2935`): red flag — environmental impact warning on high-emission flights. - **Hacker Fare** (`#ff690f`): brand orange flag — KAYAK's proprietary multi-airline routing label. ### Interactive - **Link** (`#0066cc`): default inline link colour — sober, utilitarian blue, distinct from brand orange. - **Link Hover** (`#004a99`): hover deepens. - **Link Visited** (`#5a4392`): browser-like visited purple. - **Selected** (`#ff690f` fill, `#ffffff` text — date-picker days, active filter chips). - **Disabled** (`#a4a9b4` text on `#f4f4f4` surface). ### Neutral Scale - **Ink** (`#1e2026`) — display, body, primary labels - **Body** (`#2c2f36`) — secondary running text - **Muted** (`#5e6470`) — sub-titles, metadata, footer secondary labels - **Soft** (`#8a909d`) — captions, faint counts - **Border Strong** (`#a4a9b4`) — input outlines, disabled controls - **Border** (`#dadde0`) — default 1px hairline (card outlines, dividers) - **Border Soft** (`#eaecef`) — alt-row separators ### Surface & Borders - **Canvas** (`#ffffff`) — page floor - **Surface Soft** (`#f4f4f4`) — disabled fields, alt rows - **Surface Strong** (`#e8e8e8`) — divider band - **Surface Orange Soft** (`#fff2e8`) — promo banner soft orange, deal cells - **Surface Graph** (`#fdf3eb`) — price-trend graph fill area - **Bg Data** (`#f0f3f5`) — data-viz background (cleaner than surface-soft for chart contexts) ### Shadow Colors KAYAK uses neutral-grey-tinted shadows — utility surfaces, no brand subliminal at depth layer. The shadow philosophy is "shadow exists only where elevation is functional" — flight cards at rest are flat (border only), shadow appears on hover and on dropdown overlays. - `rgba(0,0,0,0.04) 0 1px 2px` — flat ambient - `rgba(0,0,0,0.06) 0 2px 6px` — card resting (rare — most cards at rest are flat with border only) - `rgba(0,0,0,0.14) 0 4px 16px` — card hover, dropdowns - `rgba(0,0,0,0.18) 0 12px 32px` — modal ### Semantic - **Success** (`#0a8c3e` on `#e8f6ee`) — Best/Cheapest flag, "Free cancellation" green text - **Warning** (`#d97706` on `#fff7e6`) — advisory amber for low availability, fee changes - **Danger** (`#cc2935` on `#fdeaec`) — validation error red, also "High CO2" environmental flag - **Info** (`#0066cc` on `#e8f0f8`) — informational banners, "Short layover" flag ## Typography ### Font Family **Primary**: `Open Sans` — the open-source humanist sans by Steve Matteson (Google Fonts canon). Fallback chain: `Segoe UI, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif`. The choice is deliberate: KAYAK's product is data, not brand voice; the typeface should render fast on every device, including budget phones and slow connections that travel users routinely encounter. **Mono companion**: not used in the public marketing surface. Monospace appears only inside booking-confirmation reference numbers — `tnum` provides equivalent column alignment in the body type. **OpenType features**: `tnum` is enabled aggressively across prices, durations, flight times, fees, layover times, distances. KAYAK uses `tnum` on everything numeric — this is the system's most disciplined typographic commitment. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | hero-display | Open Sans | 36 | 700 | 1.11 | -0.5px | — | Homepage h1 ("Search hundreds of travel sites at once") | | page-title | Open Sans | 28 | 700 | 1.14 | -0.25px | — | Search results h1 ("Flights to NYC: 247 results") | | section-head | Open Sans | 22 | 700 | 1.18 | 0 | — | Editorial bands | | sub-section | Open Sans | 18 | 700 | 1.22 | 0 | — | Sub-section titles | | flight-title | Open Sans | 18 | 700 | 1.22 | 0 | — | Flight card primary identifier (airline + flight number) | | title-md | Open Sans | 16 | 700 | 1.25 | 0 | — | Filter sidebar section heads | | title-sm | Open Sans | 14 | 700 | 1.29 | 0 | — | Card meta labels | | body-md | Open Sans | 14 | 400 | 1.43 | 0 | — | Default running-text — note: 14, not 16, for density | | body-sm | Open Sans | 13 | 400 | 1.38 | 0 | — | Card meta lines | | body-xs | Open Sans | 12 | 400 | 1.33 | 0 | — | Dense card secondary lines | | caption | Open Sans | 12 | 600 | 1.33 | 0 | — | Section labels ("DEPART", "ARRIVE") | | micro | Open Sans | 11 | 400 | 1.27 | 0 | — | Footer legal, fine-print disclosures | | price-display | Open Sans | 28 | 700 | 1.0 | -0.25px | tnum | Detail page price | | price-card | Open Sans | 22 | 700 | 1.0 | 0 | tnum | Flight card price | | flight-time | Open Sans | 20 | 700 | 1.0 | 0 | tnum | Depart/arrive time on flight card ("8:25 AM") | | duration-text | Open Sans | 13 | 400 | 1.0 | 0 | tnum | "5h 45m" duration label | | button-md | Open Sans | 14 | 700 | 1.0 | 0 | — | Primary CTA labels — note: weight 700 (heavier than other brands) | | button-sm | Open Sans | 13 | 700 | 1.0 | 0 | — | Filter chip labels, Select buttons on flight cards | | nav-link | Open Sans | 14 | 600 | 1.0 | 0 | — | Top product-nav labels | | badge | Open Sans | 11 | 700 | 1.18 | 0.4px | uppercase | "BEST", "CHEAPEST", "FASTEST", "HACKER FARE" | ### Principles - **Utility over voice.** Open Sans is the typographic equivalent of "the page should be invisible — let the data speak". KAYAK explicitly avoids custom typography because the brand is the comparison engine, not the typography. - **Body at 14, not 16.** KAYAK runs body at 14/400 because density is the operating mode — a flight card needs to fit airline / route / duration / price / Select within ~120px of vertical space, and 16/400 would push that to 140px. - **Display weight is 700.** Hierarchy from size — 18/22/28/36/700 ladder — never weight ladder. The system commits to bold display headlines because the page already runs dense; lighter display would get lost in the data-viz. - **Tabular numerals on every numeric.** This is non-negotiable. Flight times must align (8:25 AM next to 11:45 AM next to 2:15 PM); durations must align (5h 45m next to 7h 10m); prices must align ($247 next to $1,289). The data-viz utility depends on column alignment. - **Caption weight is 600.** Section labels ("DEPART", "ARRIVE", "DURATION") render at 12/600 uppercase — not the typical caption weight of 500. The 600 weight gives utilitarian labels the punch they need to anchor data columns. - **No display custom OT features.** No `ss01`, no `ss02`, no stylistic alternates — Open Sans renders at its default. The brand explicitly avoids vanity typography. - **Inter is a 1:1 substitute** if Open Sans is unavailable. Both are humanist sans with similar metrics. KAYAK's typography degrades gracefully to either. ## Layout ### Spacing System - Base unit: **4px** - Scale: `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96` - Section padding (vertical): 32–48px for editorial bands, 24px for search-results bands — tighter than Booking's 48px, much tighter than Expedia's 64–80px (KAYAK is utility-first, density-first) - Card internal padding: 16px for flight-card meta, 12px for tooltip, 8px for filter-chip - Gutters: 8px between flight cards (very tight — utility density), 16px between filter sections, 8px on filter-chip rows ### Grid & Container - Max content width: ~1280px centred - Search results: ~1200px centred — 240px left filter sidebar + ~960px right results column - Footer: 4-column link grid at desktop with destinations, product types, "About", "Help" - Flight detail: 2-column with full flight breakdown on the left (~70% width) and a sticky fees rail on the right (~28%) - Hero search: full-width white band with the square search bar centred at ~1024px ### Whitespace Philosophy KAYAK is the densest of the travel-marketplace systems. The page packs more functional surfaces per scroll than Booking or Expedia: the price-trend graph alone occupies the visual real estate that other brands use for editorial bands. The contrast is intentional — KAYAK wants the user to feel the comparison engine working, every signal contributing to the decision. ### Section Cadence Light/dark alternation is rare — KAYAK stays on white through 95% of the surface. The only dark surface is the tooltip; the only orange surface is the price-trend graph fill, deal banners, and the active filter chip background. The page reads as "white canvas with utility data layers" — no editorial bands, no marketing imagery, no breath. ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Top nav collapses to logo + hamburger; search bar becomes a single tappable card opening a full-screen overlay; flight cards 1-up vertically stacked; price-trend graph collapses to a 40px sparkline; filter sidebar moves to a bottom-sheet drawer | | Tablet | 600–900px | Top nav keeps product tabs; search bar narrows to 2-row layout; flight cards 1-up with image left meta right; filter sidebar slides in from left | | Desktop | 900–1200px | Full top nav with 6 product tabs; square search bar at full width with all 5 segments; flight cards 1-up with full 5-segment layout; filter sidebar 240px wide | | Wide | >1200px | Content width caps at 1280px; gutters absorb the rest | ### Touch Targets - Primary CTAs: minimum 44×44px (KAYAK runs slightly tighter than consumer-warm 48px — utility density) - Search-bar segments: 56×56px tap zones - Filter-chip: 32×32px minimum - Date-picker day cells: 36×36px square - Select-flight CTA: 36×36px (compact — fits in flight card right column) ### Collapsing Strategy - Top product tabs collapse into a hamburger sheet below 600px - Search bar's 5 segments collapse into a single-tap entry that opens a full-screen search overlay on mobile - Filter sidebar transforms into a bottom-sheet drawer on mobile (Apply/Clear buttons sticky at the bottom) - Flight cards reflow from horizontal 5-segment layout to vertical stack at <600px (depart on top, duration arc in middle, arrive on bottom) - Price-trend graph collapses to a 40px sparkline on mobile — same data, less detail ### Image Behavior KAYAK uses minimal imagery — flight cards show airline logos (28px circular), hotel cards show property photos at 1:1 aspect ratio. No editorial photography on results pages. ### Container Queries The detail-rail-card uses container queries to compress its fee breakdown when the right rail narrows below ~280px. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow, 1px border only | Body, hero, footer, masthead, filter sidebar, flight cards at rest (~90% of surfaces) | | 1 — Hover | `rgba(0,0,0,0.14) 0 4px 16px` | Flight cards on pointer hover, dropdowns | | 2 — Modal | `rgba(0,0,0,0.18) 0 12px 32px` | Centred dialogs | | 3 — Scrim | `rgba(0,0,0,0.5)` ground | Global modal backdrop | ### Shadow Philosophy KAYAK is the **flattest** of the travel-marketplace systems. Cards at rest have no shadow at all — they rely on a 1px hairline border to define their boundary. Shadow appears only on hover (a clear elevation event signalling interactivity) and on overlays (modals, dropdowns). This is the utility surface stance: depth is a functional signal, not an aesthetic flourish. There is no resting card shadow tier (where Booking has a soft 2-layer resting shadow and Expedia has a soft 2-layer resting shadow, KAYAK has nothing — just the border). The hover shadow is the system's only depth event on the flat surface, and it is significant: 14% black opacity at 16px blur, paired with a 1px lift. ## Shapes | Tier | Value | Use | |------|-------|-----| | Sharp | 0px | Search-bar inner segments, divider rules | | Micro | 2px | Sub-tabs, dense controls | | Standard | 4px | Buttons, text inputs, smaller cards, deal flags, date-picker days | | Comfortable | 6px | Tooltips, inline call-outs | | Large | 8px | Flight cards, hotel cards, modals | | Featured | 12px | Hero callout cards | | Pill | 9999px | Filter chips, score chips, small toggles | The single design rule: **square geometry by default; pill only on filter chips and toggles**. Buttons round at 4px (utility-square), cards at 8px (slightly softened), search-bar segments at 0 (sharp dividers — the only place 0 radius appears). KAYAK explicitly rejects pill geometry on buttons because pill reads as consumer-warm; KAYAK is data-utility. ## Components ### Buttons **`button-primary`** — Orange (`#ff690f`) fill, white text, 4px radius, 12×24px padding, 44px height (note: 44, not 48 — KAYAK runs slightly tighter than the consumer-warm 48px standard), weight 700. The most common CTA: "Search", "Select", "Continue". Hover deepens to `#e85a07`; active flips to `#c54a00`. **`button-secondary`** — White fill with ink text and a 1px ink outline. 4px radius, 44px height. Used for "Save", "Compare", "Cancel". **`button-tertiary-text`** — Plain blue (`#0066cc`) text, no surface, no border. Underlined on hover. **`button-select-flight`** — Compact orange CTA on flight cards. 4px radius, 8×16px padding, 36px height, weight 700, font `button-sm`. Smaller than primary CTAs because the flight card is dense and the Select button must fit in ~80px right column. ### Cards **`flight-card`** — The system's signature component. Three-row layout when stacked but visually a single horizontal card: - **Left column** (~25% width): airline logo (28×28px circular), airline name (`body-sm` muted), flight number (`body-xs` soft). - **Middle 5-segment row** (~55% width): `flight-time` depart (`8:25 AM`) + airport code (`body-sm` muted), then a horizontal duration arc with `duration-text` ("5h 45m") and stop count below ("1 stop, JFK"), then `flight-time` arrive + airport code. The arc is a 1px hairline with a small circle at each end. - **Right column** (~20% width): price stack — `price-card` ("$247"), then a `body-xs` muted "round-trip" qualifier, then a `button-select-flight` CTA. 8px outer radius, 1px hairline border, hover intensifies shadow + 1px lift. **`hotel-card`** — Three-column layout: photo column (~30% width), middle meta column (property title, location, review chip), right rate stack column (multiple provider rows — KAYAK / Booking / Expedia rates, each with their own price + Select). 8px radius, hairline border. **`package-card`** — Vertical card combining flight + hotel into a single package: flight summary at top, hotel summary in middle, total price + Select CTA at bottom. **`detail-rail-card`** — Right rail card on flight detail. White surface, 8px radius, 1px hairline, 16px padding. Contains fee breakdown, environmental impact, baggage rules, terms link. ### Badges, Tags, Pills **`best-flag`** — Green (`#0a8c3e`) fill, white text, 4px radius, 2×6px padding. "BEST" / "CHEAPEST" markers on sort tabs and flight cards. The system's most positive flag. **`fastest-flag`** — Purple (`#9333ea`) fill, white text, 4px radius. "FASTEST" — distinguished from "BEST" so sort by speed reads visually different from sort by price. **`hacker-fare-flag`** — Brand orange (`#ff690f`) fill, white text, 4px radius. "HACKER FARE" — KAYAK's proprietary signature. This is the only flag that uses brand colour — it signals "this routing is unique to KAYAK". **`short-stop-flag`** — Blue (`#0066cc`) fill, white text, 4px radius. "SHORT LAYOVER" — informational badge. **`high-co2-flag`** — Red (`#cc2935`) fill, white text, 4px radius. Environmental impact warning on high-emission flights. **`filter-chip`** — Pill-shaped (9999px), 1px hairline border, ink text. Active chip flips to light-orange tint with brand orange outline. ### Inputs / Forms **`text-input`** — White surface, 1px hairline (`#a4a9b4`) border, 4px radius, 48px height, 12×12px padding. Stacked label above (in `caption` muted). On focus the border thickens to 2px brand orange (`#ff690f`). **`search-bar`** — Square-cornered (4px radius) global search bar. White surface, 56px height, 1px hairline border. Internally divided by vertical hairlines into From / To / Depart / Return / Travelers segments. Each segment is sharp-cornered (0 radius) inside the bar — the only place 0 radius appears in the system. Right edge terminates in an orange `search-button` matching the bar height. **`search-button`** — Orange fill, white text, 4px radius (matching the search bar), 56px height, 24px horizontal padding. Always anchored to the right edge of the search bar. ### Navigation **`top-nav`** — White surface, 56px height, 1px bottom hairline. Wordmark flush left (orange + ink — "kayak" in lowercase orange), product tabs centred (Flights, Hotels, Cars, Packages, Stays, Things to Do), account utilities flush right. **`product-tab-active`** — Ink label in `nav-link`, 24px hand-illustrated icon (single colour), 2px orange underline beneath the label. **`product-tab-inactive`** — Muted label, illustrated icon, no underline. ### Data Viz **`price-trend-graph`** — Horizontal price-by-day chart that anchors the top of every flight results page. 60px tall, full width minus filter sidebar. Background fills with `#fdf3eb` (light orange surface). Stroke runs in brand orange (`#ff690f`) at 2px. Points along the stroke render as small circles (4×4px) coloured green for low-price days (`#0a8c3e`), red for high-price days (`#cc2935`), and orange for the user's selected day (currently filtered). X-axis labels render in `body-xs` muted (date abbreviations); Y-axis is unlabeled (KAYAK trusts the visual — relative price beats exact value). **`environmental-impact-bar`** — Horizontal bar inside flight cards showing CO2 emissions relative to other flights — green for "Lower than typical", grey for "Typical", red for "Higher than typical". ### Date Picker **`date-picker-day`** — 36×36px square cell (4px radius matches system) carrying the day number in `body-sm`. Default state transparent fill, ink text. Hover state fills `#fff2e8` light orange. **`date-picker-day-selected`** — Brand orange fill, white text, 4px radius. Range cells between two selected days carry a `#fff2e8` light-orange background. ### Modals & Overlays **`modal`** — Centred dialog over a 50%-opacity black scrim. White surface, 8px radius, no border, modal shadow tier. Close button is a 32px square icon-button anchored top-right. **`tooltip`** — Ink fill, white text in `body-sm`, 4px radius, 8×12px padding. ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — the default for hover lifts, hairline transitions, scrim fades - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry - **Out-soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — date-picker month flip, price-trend graph animation ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 100ms | Hover state colour swaps, filter-chip toggle | | Standard | 180ms | Card hover lift, modal scrim fade | | Slow | 280ms | Page transitions, price-trend graph initial draw | ### Per-Component Recipes - **Flight card hover**: `transform: translateY(-1px); shadow: hover tier; transition: 180ms standard.` Subtle 1px lift signals interactivity. - **Filter chip toggle**: background fades from `#ffffff` → `#fff2e8` over 100ms, border colour shifts to brand orange. - **Search button hover**: background `#ff690f` → `#e85a07` over 100ms. - **Sort tab toggle**: tab underline animates left/right under tab label over 180ms standard. - **Price-trend graph initial draw**: stroke draws left-to-right over 280ms ease-out, then point markers fade in over 180ms standard. - **Modal enter**: scrim fades in over 180ms ease-out, then dialog translates from `translateY(8px) opacity(0)` to `translateY(0) opacity(1)` over 220ms emphasized. ### Page Transitions Page-to-page navigation uses an instant content swap with a 100ms scrim fade — KAYAK is a utility, and motion adds nothing to a comparison decision. Travel agents and frequent travellers, the brand's core users, want speed over polish. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All transforms suppress; only opacity transitions remain. Card hover lift becomes shadow-only; modal enter becomes 100ms opacity-only fade; price-trend graph renders instantly without the draw animation. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #1e2026 ink on #ffffff canvas | 14.6 | AAA | | #ffffff on #ff690f orange | 4.6 | AA body / AAA large | | #0066cc link on #ffffff | 7.2 | AAA | | #5e6470 muted on #ffffff | 5.8 | AA | | #ffffff on #0a8c3e green | 4.6 | AA body | | #ffffff on #cc2935 red | 5.0 | AA body | | #ffffff on #9333ea purple | 5.4 | AA body | ### Focus Indicators Focus ring is `2px solid #ff690f` with 2px outline-offset — KAYAK uses brand orange on focus because the funnel is keyboard-heavy (search bar, filter sidebar, date picker, payment fields), and brand-coloured focus reinforces the utility surface. ### ARIA Patterns - **Search bar**: `role="search"` on the outer container; each segment is a `