# Design System Inspiration of KAYAK (iOS)

## 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*.

| Band | Color | Use |
|------|-------|-----|
| Low (cheapest ~third) | `#1E9E5A` | Calendar day price, "best" matrix cell |
| Mid | `#16191C` (primary text) / `#E9ECEF` dark | Calendar day price, ordinary matrix cell |
| High (priciest ~third) | `#E5484D` | Calendar day price |

### Functional Semantic — Forecast Advice (NOT brand colors)
Used in the forecast banner and advice chips.

| Advice | Color | Tint Bg |
|--------|-------|---------|
| Buy now (good price) | `#1E9E5A` | `#1E9E5A29` (16%) |
| Wait (may drop) | `#E8A317` | `#E8A31729` (16%) |
| Book soon (rising) | `#E5484D` | `#E5484D29` (16%) |

### 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

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display | KAYAK Sans | 32pt | 800 | 1.15 | -0.6pt | Home ("Compare flights") |
| Route Title | KAYAK Sans | 26pt | 800 | 1.2 | -0.4pt | "SFO → JFK" results header |
| Section | KAYAK Sans | 22pt | 700 | 1.25 | -0.2pt | "Best price by date" |
| Price (Card) | KAYAK Sans | 20pt | 800 | 1.2 | -0.4pt | Fare price, tabular |
| Leg Time | KAYAK Sans | 18pt | 800 | 1.2 | -0.3pt | "7:05" depart/arrive, tabular |
| Body | KAYAK Sans | 16pt | 400 | 1.5 | 0pt | Explanatory copy |
| Time / Label | KAYAK Sans | 14pt | 600 | 1.35 | 0pt | "Nonstop", airport code label |
| Meta | KAYAK Sans | 13pt | 400 | 1.4 | 0pt | "2 booking sites · 1 stop SEA" |
| Calendar Price | KAYAK Sans | 13pt | 800 | 1.0 | 0pt | Per-day cheapest fare, tabular |
| Tag / Badge | KAYAK Sans | 11pt | 700 | 1.0 | 0.3pt | "HACKER FARE" |
| Calendar Day | KAYAK Sans | 11pt | 600 | 1.0 | 0pt | "Sat 11" |
| Button | KAYAK Sans | 16pt | 700 | 1.0 | 0pt | Primary/secondary CTAs |
| Tab Label | KAYAK Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |

### 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.

| Level | Treatment (Light) | Treatment (Dark) | Use |
|-------|-------------------|------------------|-----|
| Flat (0) | none | none | Page background, banner, matrix, tags |
| Card (1) | `0 2px 8px rgba(0,0,0,0.06)` | `0 4px 12px rgba(0,0,0,0.4)` | Fare cards, calendar day cells |
| Floating (2) | `0 8px 24px rgba(0,0,0,0.1)` | `0 8px 24px rgba(0,0,0,0.55)` | Sticky sort/filter bar, sticky CTA |
| Sheet (3) | `0 -8px 28px rgba(0,0,0,0.12)` | `0 -8px 28px rgba(0,0,0,0.6)` | Price-calendar sheet, filters, provider hand-off |
| Modal Scrim | `rgba(0,0,0,0.4)` | `rgba(0,0,0,0.55)` | Dim behind sheets/modals |

**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
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Single column; calendar shows ~5.5 day cells; matrix horizontally scrolls |
| iPhone 13/14/15 | 390pt | Standard layout; ~6 calendar cells visible |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
| iPhone 15/16 Pro Max | 430pt | ~7 calendar cells; more room for provider text |
| iPad (portrait) | 768pt | 2-column fare grid; calendar full-width; matrix fully visible |
| iPad (landscape) | 1024pt+ | Fare list + persistent forecast/matrix pane side-by-side |

### 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