KAYAK DESIGN.md

1. Visual Theme & Atmosphere

KAYAK's iOS app is a metasearch instrument — a tool, not a store. Where Expedia sells you a stay, KAYAK compares the entire market and tells you whether to buy now or wait. The light canvas is a clean white (#FFFFFF / #F4F5F7), the chrome is restrained and data-dense, and the emotional payoff is intelligence: a price-forecast banner ("Prices are likely to rise — book soon, 87% confidence"), a horizontally scrolling price calendar (each day shows its cheapest fare, color-coded green→neutral→red), a fare-compare matrix (airlines × stops grid), and the signature Hacker Fare (two separate one-way tickets stitched into a cheaper round trip). The whole app radiates "we did the math for you."

The single brand expression is KAYAK Orange (#FF690F). It is the only accent color in the entire system and it is used with discipline: the selected date in the price calendar, the Hacker Fare tag, the primary "View Deal" CTA, the active bottom tab, the forecast banner's trend glyph. Everything else is a near-neutral greyscale (canvas, surfaces, dividers, text) plus a small set of functional semantic colors that are not brand colors: a price-signal ramp (green #1E9E5A low / neutral mid / red #E5484D high) and a forecast-advice triad (buy = green, wait = amber #E8A317, rise = red). KAYAK deliberately has no secondary brand hue — orange does all the brand work, and color elsewhere always means something (this fare is cheap; prices are rising).

The structural anchor is the flight results screen with the price calendar. Open a search and you land on: a compact route header (SFO → JFK · Oct 12 · 1 adult · Economy · Round-trip), the horizontal price-calendar strip, the forecast banner, then a vertical list of fare cards. Each fare card is the workhorse: airline row (logo + name, optional orange Hacker Fare tag), a depart-time → duration-arc-with-stops → arrive-time leg, and a bottom row with the booking-provider count and a large bold price with "round-trip" beneath. This card pattern repeats for hotels and cars with the same DNA (compare many, surface the cheapest, show the provider).

Typography is a clean grotesque/humanist sans (KAYAK's product face; Inter / SF Pro is the faithful substitute on iOS). The hierarchy is tool-UI rhythm: display → route title → section → price (loud, 20pt 800, tabular) → body → time/label → meta → tag. Prices and times are the loudest non-display elements and always use tabular figures so calendar columns and matrix cells align perfectly. Weights cluster at 400 (body), 600 (times, labels), 700 (sections, tags), 800 (display, prices, route).

Key Characteristics:

• Clean white canvas (#FFFFFF / #F4F5F7) light / near-neutral charcoal (#101214) dark — tool, not store
• KAYAK Orange (#FF690F) is the single brand accent — selected dates, Hacker Fare tag, primary CTA, active tab; nothing else is brand-colored
• Price-calendar strip — horizontal scroll, each day shows its cheapest fare, color-coded green/neutral/red
• Price-forecast banner — "likely to rise / drop" + confidence %, the metasearch intelligence signal
• Fare-compare matrix — airlines × stops grid, cheapest cell highlighted green
• Hacker Fare — two one-way tickets combined into a cheaper round trip, flagged in orange
• Fare card — airline row, depart→duration-arc-with-stops→arrive leg, provider count + bold tabular price
• Functional semantic ramp — price low/mid/high (green/neutral/red) + forecast buy/wait/rise (green/amber/red), distinct from brand orange
• Provider transparency — "2 booking sites", "JetBlue.com" — KAYAK sends you onward, it doesn't sell
• Tabular figures everywhere prices/times appear so calendar + matrix columns align
• Bottom tab bar: Search / Trends (Explore) / Trips / Price Alerts / Profile

2. Color Palette & Roles

Primary (Brand & Interactive)

• KAYAK Orange (#FF690F): The single brand accent — selected price-calendar date, Hacker Fare tag, primary "View Deal" CTA, active bottom tab, forecast trend glyph, links-as-actions.
• Orange Pressed (#E0560A): Pressed state for the orange CTA and tappable orange elements.
• Orange Soft (#FF8A42): Subtle orange for hover/secondary emphasis and 12%-tint banner borders.
• Link Blue (#2E7CF6): Plain hyperlinks and inline text links (terms, provider names) — NOT a brand color, used only where orange would over-signal.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas, card backgrounds.
• Surface Gray (#F4F5F7): App background behind cards, grouped sections.
• Surface Pressed (#E9EBEE): Pressed rows, selected list items.
• Divider (#E2E5E9): Hairline dividers between rows, card borders, leg-line.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#101214): Primary dark canvas — near-neutral, NO brand tint.
• Dark Surface 1 (#181B1E): Card backgrounds, elevated surfaces.
• Dark Surface 2 (#21262B): Chips, matrix header, airline-logo tiles.
• Dark Divider (#2C3338): Hairline dividers, card borders, leg-line.

Text

• Text Primary Light (#16191C): Prices, route, titles.
• Text Secondary Light (#5C656E): Times' airport codes, meta, labels.
• Text Tertiary Light (#8B949C): Disabled, stop dots, faint meta.
• Text Primary Dark (#E9ECEF): Prices, route, titles on dark.
• Text Secondary Dark (#9BA3AB): Meta on dark.
• Text Tertiary Dark (#6B747C): Disabled, faint meta on dark.

Functional Semantic — Price Signal (NOT brand colors)

Used in the price-calendar strip and fare-compare matrix to encode cheapness.

Functional Semantic — Forecast Advice (NOT brand colors)

Used in the forecast banner and advice chips.

Semantic (general)

• Success (#1E9E5A): Confirmed booking, price drop captured.
• Warning (#E8A317): "Prices volatile", caution states.
• Error (#E5484D): Form errors, "Fare no longer available".
• Hacker Fare Tag (#FF690F): The Hacker Fare flag uses brand orange (it's a KAYAK-branded product feature, not a generic semantic).

3. Typography Rules

Font Family

• Primary: KAYAK's product sans — a clean grotesque/humanist face used across the rebranded app for dense comparison UI: tall x-height, unambiguous figures, confident bold weights.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif
• Closest free substitute: Inter (by Rasmus Andersson, SIL OFL) — matched proportions and superb tabular numerals for prices and the calendar.
• Numerals: Tabular/lining figures mandatory for all prices, times, durations, confidence %, and matrix cells.

Hierarchy

Principles

• Price and time are the loudest content elements: fare price 20pt 800 tabular, leg time 18pt 800 tabular — the eye lands on the number and when it leaves.
• Tabular figures are mandatory: the price calendar and fare-compare matrix only work if every digit aligns; never use proportional figures for prices/times.
• Weight concentrated at 400 / 600 / 700 / 800: body regular, times/labels semibold, sections/tags bold, display/prices extra-bold. No thin, no black.
• Orange text is rare: orange is for the Hacker Fare tag, the active tab label, and the forecast trend glyph — body text and links are never orange (links are blue #2E7CF6).
• Dynamic Type first-class: display, route, section, body, prices, times scale; calendar day/price, tags, tab labels stay fixed (the strip and matrix are layout-sensitive).

4. Component Stylings

Buttons

Primary Button (View Deal / Search)

• Shape: Rounded rectangle, 10pt corner radius
• Background: #FF690F (KAYAK Orange)
• Text: #FFFFFF, KAYAK Sans 16pt weight 700
• Padding: 14pt vertical, 28pt horizontal
• Full-width on detail/booking screens (16pt insets)
• Pressed: background #E0560A + scale 0.98
• Disabled: #FF690F at 38% opacity

Secondary / Outline Button (Filters / Sort)

• Background: transparent
• Text: #16191C / #E9ECEF dark
• Border: 1pt #E2E5E9 / #2C3338
• Padding: 12pt vertical, 20pt horizontal
• Corner radius: 10pt
• Pressed: background #F4F5F7 / #21262B

Ghost / Chip Button (Track price)

• Background: #F4F5F7 / #21262B
• Text: #16191C / #E9ECEF
• Border: 0.5pt #E2E5E9 / #2C3338
• Padding: 11pt vertical, 18pt horizontal
• Corner radius: 10pt

Text Button (See all 142 results)

• Font: KAYAK Sans 14pt weight 700
• Color: #FF690F
• No underline; chevron trailing optional
• Pressed: 60% opacity

Core Atoms

Fare Card (the workhorse)

• Container: #FFFFFF / #181B1E, 14pt corner radius, 0.5pt #E2E5E9 / #2C3338 border, shadow 0 2px 8px rgba(0,0,0,0.06) light / 0 4px 12px rgba(0,0,0,0.4) dark
• Padding: 14pt all
• Airline row (top): logo tile (26pt, 7pt radius, #F4F5F7/#21262B) + airline name(s) KAYAK Sans 12pt w600 secondary; trailing optional Hacker Fare tag (#FF690F bg, white 11pt w700, 5pt radius, 3/7pt padding) or amber "Self-transfer" chip
• Leg row (12pt below): depart time (18pt w800 tabular) + airport code (11pt secondary) | duration arc center: duration 11pt secondary, 1pt #E2E5E9 leg-line with a 5pt end-dot, stops text 11pt w700 orange ("1 stop · SEA") or secondary ("Nonstop") | arrive time (mirror)
• Bottom row (14pt below, 12pt padding-top, 0.5pt top divider): provider info left ("2 booking sites" / "JetBlue.com") 11pt secondary; price right (20pt w800 tabular) with "round-trip" 11pt secondary beneath
• Tap → fare detail (full leg breakdown, fare rules, provider list)

Property / Car Card (same DNA): photo or icon header, name, comparison meta, provider count, bold tabular price + period.

Price-Calendar Day Cell

• Size: 50pt wide, ~58pt tall
• Container: #FFFFFF/#181B1E, 10pt radius, 0.5pt #E2E5E9/#2C3338 border
• Top: day label "Sat 11" KAYAK Sans 11pt w600 secondary
• Bottom: cheapest price KAYAK Sans 13pt w800 tabular, color = price-signal band (green #1E9E5A low / primary mid / red #E5484D high)
• Selected: #FF690F fill, white day + price, no border
• Horizontal scroll strip; selecting a day re-queries fares for that date

Forecast Banner

• Full-width inline, 10pt radius, background #FF690F1F (12% orange) with 0.5pt #FF690F66 border (rising) — or green/amber tint per advice
• Leading trend glyph 18pt orange (chart-uptrend) — or buy/wait glyph
• Title: "Prices are likely to rise" KAYAK Sans 12pt w700
• Subtitle: "We recommend booking soon · 87% confidence" 11pt secondary

Fare-Compare Matrix

• Container: 10pt radius, 0.5pt #E2E5E9/#2C3338 border, rows divided 0.5pt
• Header row: #F4F5F7/#21262B bg, column labels (Nonstop / 1 stop / 2+ stops) 12pt secondary, leading "Airline" label cell 1.4× width
• Body row: airline name (left, 12pt w600 primary) + price cells (12pt w800 primary, tabular); the cheapest cell in a row/column rendered green #1E9E5A w800; empty = "—" tertiary
• Tap a cell → filter results to that airline/stops combination

Hacker Fare Tag

• Pill/rounded-rect, 5pt radius
• Background: #FF690F (brand orange — it's a KAYAK product feature)
• Text: white, KAYAK Sans 11pt w700, letter-spacing 0.3pt, "HACKER FARE"

Advice Chip

• Pill, 999pt radius
• Background: advice tint (#1E9E5A29 / #E8A31729 / #E5484D29)
• Leading 6pt dot in advice color
• Text: advice color, KAYAK Sans 13pt w700 ("Buy now — good price")

Navigation

Bottom Tab Bar

• Height: 52pt + safe area
• Background: #FFFFFF/#101214 with 0.5pt top divider #E2E5E9/#2C3338
• Tabs (5): Search, Trends (Explore), Trips, Price Alerts, Profile
• Icon size: 22pt
• Active: #FF690F (orange), filled glyph
• Inactive: #8B949C/#6B747C, outline glyph
• Labels: KAYAK Sans 10pt w600, always shown
• No pill indicator — color + fill change only

Top App Bar (Results / Detail)

• Height: 44pt + safe area
• Background: #FFFFFF/#101214, 0.5pt bottom divider
• Leading: back chevron; Center: compact route ("SFO → JFK"); Trailing: edit-search + share
• Below it: the route-meta line and sort/filter chip row

Input Fields

Search Form (entry)

• Trip-type segmented control (Round-trip / One-way / Multi-city): orange underline on active segment
• Origin / Destination fields: 52pt tall, #F4F5F7/#21262B bg, 10pt radius, leading airplane glyph, swap button between them
• Date field: opens 2-month price-calendar sheet (each day shows cheapest fare, color-coded)
• Travelers / cabin stepper: bottom sheet
• Focus: 1pt #FF690F border on active field

Search Field (autocomplete)

• Height: 48pt
• Background: #F4F5F7/#21262B, 10pt radius
• Leading magnifyingglass 17pt secondary
• Placeholder: "City or airport" 14pt secondary
• Results: airport rows with code badge + city + country

Distinctive Components

Price Calendar (full sheet)

• 2-month vertical scroll; every day cell shows its cheapest fare (tabular) color-coded green/neutral/red
• Legend at top: "Lowest" green dot · "Typical" · "Highest" red dot
• Selecting a date (or range for round-trip) re-prices and dismisses

Price-Forecast Module

• Headline advice ("Prices are likely to rise") + confidence % + a small trend sparkline
• "Track this price" → creates a Price Alert (orange CTA)

Fare-Compare Matrix (see Core Atoms) — KAYAK's signature "see the whole market at once"

Price Alerts List

• Each alert row: route + dates + current price + delta arrow (green down / red up) + sparkline
• Toggle to pause; tap → results

Provider Hand-off Sheet

• When booking, KAYAK shows the list of booking sites with their prices ("JetBlue.com $284", "Expedia $291") — transparency is a feature; KAYAK does not sell, it routes

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40
• Fare-card vertical gap: 12pt
• Fare-card internal padding: 14pt
• Screen horizontal inset: 16pt
• Calendar day gap: 6pt

Grid & Container

• iPhone: single-column fare list, 16pt insets, horizontal calendar strip above
• iPad: 2-column fare grid (max content 980pt centered, 24pt insets); detail in split view
• Matrix: horizontally scrollable if airline list is long

Whitespace Philosophy

• Dense but legible: KAYAK shows a lot (calendar + forecast + matrix + many fares) so each unit is tightly padded (14pt) but separated by a clear 12pt gap — it's an instrument panel, not an editorial page
• Numbers get the spotlight: prices and times are the largest non-display type; never crowd a price with secondary copy
• Orange is scarce on purpose: at most one or two orange elements per viewport (selected date, primary CTA, or a Hacker Fare tag) — scarcity keeps it meaningful

Border Radius Scale

• Square (0pt): leg-line, dividers
• Subtle (4pt): inline price chips
• Tag (5–6pt): Hacker Fare tag, logo tiles
• Standard (10pt): buttons, cards-day-cells, fields, matrix, banner
• Card (14pt): fare cards, modules
• Pill (500pt / 999pt): advice chips, segmented control thumb
• Circle (50%): stop dots, avatars, swap button

6. Depth & Elevation

KAYAK uses minimal, functional elevation — it's an instrument, so cards lift only enough to read as discrete, tappable comparison units.

Shadow Philosophy: shadow only says "this is a tappable card." The forecast banner, matrix, advice chips, and Hacker Fare tag are deliberately flat — color and tint carry them. On dark, shadows deepen to 0.4–0.6 opacity over #101214.

Motion

• Calendar day select: tapped cell fills orange over 160ms ease-out; fare list cross-dissolves to the new date's results in 220ms; brief skeleton shimmer while re-pricing
• Forecast reveal: banner slides down + fades in 240ms ease-out on results load
• Fare card → detail: push transition 300ms ease-out; leg row is the shared anchor
• Matrix cell tap: cell flashes orange tint 140ms; results filter with a 200ms list reorder
• Sort/filter sheet: bottom sheet slides up 300ms ease-out; result count animates as filters toggle
• Price-drop in Price Alerts: delta arrow pulses green once (180ms) when a tracked price falls
• Pull-to-refresh: orange spinner; re-runs the metasearch
• Haptics: soft impact on calendar day select, segment switch, filter toggle; success haptic on a captured price drop

7. Do's and Don'ts

Do

• Use KAYAK Orange (#FF690F) as the single brand accent — selected date, Hacker Fare tag, primary CTA, active tab; keep it scarce (≤ 1–2 per viewport)
• Encode price cheapness with the functional ramp (green #1E9E5A low / neutral mid / red #E5484D high) in the calendar and matrix
• Use the forecast-advice triad (buy = green, wait = amber #E8A317, rise = red) — distinct from brand orange
• Use tabular figures for every price, time, duration, confidence %, and matrix cell so columns align
• Lead the results screen with the price-calendar strip + forecast banner, then the fare list
• Show provider transparency ("2 booking sites", "JetBlue.com") — KAYAK routes, it doesn't sell
• Flag Hacker Fares with the orange tag (it's a KAYAK product feature)
• Make plain links blue #2E7CF6, not orange
• Use a near-neutral dark canvas (#101214) with NO brand tint
• Keep cards tightly padded (14pt) but clearly gapped (12pt) — it's an instrument

Don't

• Don't introduce a second brand color — orange does all the brand work; everything else is neutral or functional-semantic
• Don't make body text or plain links orange — that dilutes the accent's meaning
• Don't use proportional figures for prices/times — the calendar and matrix break without tabular digits
• Don't reuse the price-signal green/red as brand colors — they mean cheap/expensive, nothing else
• Don't hide the forecast or provider list — the "we did the math / we route you onward" transparency is the product
• Don't tint the dark canvas — #101214 is near-neutral so the lone orange accent stays loud
• Don't over-shadow flat elements (banner, matrix, tags, advice chips stay flat)
• Don't crowd a price with secondary copy — the number is the headline
• Don't animate aggressively — motion is functional 140–300ms ease-out
• Don't replace the price calendar with a plain date picker — the color-coded cheapest-fare strip is the signature

8. Responsive Behavior

Device Sizes

Dynamic Type

• Display, route, section, body, prices, leg times: full scale
• Calendar day/price, Hacker Fare tag, tab labels, matrix cells: FIXED (strip + grid are layout-sensitive)
• Prices/times keep tabular figures at every scale

Orientation

• iPhone: portrait-primary; landscape supported on fare detail
• iPad: full rotation; landscape unlocks side-by-side list + forecast/matrix

Touch Targets

• Calendar day cell: full 50×58pt tappable
• Matrix cell: full cell tappable (≥ 44pt row height)
• Tab bar icons: 22pt glyph, 44pt hit
• Primary CTA: ≥ 48pt tall
• Swap (origin/destination) button: 40pt circle

Safe Area Handling

• Top app bar respects safe area + Dynamic Island
• Sticky sort/filter bar and bottom tab respect home indicator
• Price-calendar sheet and filter sheet respect bottom safe area
• Keyboard: airport autocomplete list scrolls above keyboard

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF / surface #F4F5F7
• Canvas (dark): #101214 (near-neutral, NO brand tint)
• Surface (dark card): #181B1E
• Divider: #E2E5E9 light / #2C3338 dark
• Text primary: #16191C light / #E9ECEF dark
• Text secondary: #5C656E light / #9BA3AB dark
• KAYAK Orange (single accent): #FF690F (pressed #E0560A)
• Link blue (plain links): #2E7CF6
• Price low / "best": #1E9E5A · Price high: #E5484D
• Forecast: buy #1E9E5A · wait #E8A317 · rise #E5484D

Example Component Prompts

• "Build the KAYAK fare card in SwiftUI: #FFFFFF card (#181B1E dark), 14pt corner radius, 0.5pt #E2E5E9 border, shadow 0 2px 8px rgba(0,0,0,0.06), 14pt padding. Top row: 26pt logo tile (7pt radius, #F4F5F7) + 'Alaska · Delta' KAYAK Sans 12pt w600 #5C656E, trailing #FF690F 'HACKER FARE' tag (white 11pt w700, 5pt radius). Leg row 12pt below: '7:05' 18pt w800 tabular + 'SFO' 11pt secondary | center duration '5h 28m' 11pt secondary over a 1pt #E2E5E9 line with end-dot + '1 stop · SEA' 11pt w700 #FF690F | mirror arrive. Bottom row 14pt below with 0.5pt top divider: '2 booking sites' 11pt secondary left; '$247' 20pt w800 tabular + 'round-trip' 11pt secondary right."

• "Create the KAYAK price-calendar strip: horizontal scroll of 50pt cells, each 10pt radius, 0.5pt #E2E5E9 border. Top: 'Sat 11' 11pt w600 #5C656E. Bottom: cheapest price 13pt w800 tabular, color = #1E9E5A if low / #16191C mid / #E5484D high. Selected cell: #FF690F fill, white text, no border. Selecting re-prices the fare list."

• "Build the KAYAK price-forecast banner: full-width, 10pt radius, #FF690F1F background, 0.5pt #FF690F66 border. Leading 18pt orange uptrend glyph. Title 'Prices are likely to rise' KAYAK Sans 12pt w700 #16191C; subtitle 'We recommend booking soon · 87% confidence' 11pt #5C656E. Swap to green/amber tint for buy/wait advice."

• "Render the KAYAK fare-compare matrix: 10pt-radius container, 0.5pt #E2E5E9 border, rows divided 0.5pt. Header #F4F5F7 bg with 'Airline' (1.4× width) / 'Nonstop' / '1 stop' / '2+ stops' 12pt #5C656E. Body rows: airline 12pt w600 primary + price cells 12pt w800 tabular; cheapest cell in the row rendered #1E9E5A w800; empty '—' tertiary."

• "Build the KAYAK primary CTA: #FF690F fill, white KAYAK Sans 16pt w700, 10pt radius, 14/28pt padding, pressed #E0560A + scale 0.98. Use it for 'View Deal' and 'Search'."

• "Create the KAYAK forecast advice chip: pill 999pt radius, background advice-tint (#1E9E5A29 buy / #E8A31729 wait / #E5484D29 rise), leading 6pt dot in advice color, text in advice color KAYAK Sans 13pt w700 ('Buy now — good price')."

Iteration Guide

1. Canvas is white (#FFFFFF/#F4F5F7) light, near-neutral charcoal #101214 dark — NO brand tint on dark
2. KAYAK Orange #FF690F is the ONLY brand color — selected date, Hacker Fare tag, primary CTA, active tab; keep it scarce
3. The price calendar (color-coded cheapest fare per day) is the signature — green low / neutral mid / red high
4. The forecast banner ("likely to rise/drop" + confidence %) is the metasearch intelligence payoff
5. Use tabular figures for every price/time/duration — the calendar and matrix break otherwise
6. The fare card (airline row → leg with duration-arc-stops → provider + bold price) is the workhorse
7. Functional semantics (price low/mid/high, forecast buy/wait/rise) are NOT brand colors — they always mean something
8. Plain links are blue #2E7CF6; orange is never body text
9. Show provider transparency — KAYAK routes you onward, it doesn't sell
10. Motion is functional 140–300ms ease-out; the calendar cross-dissolves the fare list on date change