designmd-forge 1.2.0

package/dist/data/designs/ios-expedia.md

@@ -0,0 +1,431 @@
+# Design System Inspiration of Expedia (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Expedia's iOS app is a **deal-forward travel marketplace** wrapped in a confident, trip-blue identity. The light canvas is a clean near-white (`#FFFFFF` / `#F5F7FA`) and the app's emotional center of gravity is the moment you see a *better price*: bundle savings, member prices, and One Key rewards are surfaced everywhere, almost always in the brand's signature **Expedia Yellow** (`#FFC94D`). The app is dense but not cluttered — it leans on full-bleed property and destination photography, big legible price typography, and a yellow "savings" accent that punches against the otherwise blue-and-grey chrome. Where Airbnb whispers and Notion disappears, Expedia *sells*: every card has a reason-to-believe (a strikethrough price, a "−24% Bundle" flag, a "Member price" tag, an "Earn 2,040 One Key cash" line).
+
+The structural anchor is the **search-and-results loop**. Open the app and you land on a search surface with a segmented mode switch — **Stays / Flights / Cars / Packages (Bundle)** — sitting above a single tappable search pill ("San Diego, CA · Oct 12–17 · 2 travelers · 1 room"). Tap search and you drop into a vertically scrolling **results list** of property cards: a 16:10 hero photo with a deal flag top-left and a save-heart top-right, then title, neighborhood, a navy review-score badge ("9.2 Wonderful · 1,847 reviews"), a price block (strikethrough → discounted → "/ night"), and a gold One Key earn line. This card is the workhorse of the entire app and its anatomy is repeated for flights (fare cards) and cars.
+
+Color is purposeful and role-bound. **Expedia Yellow** `#FFC94D` is the *savings/deal/loyalty highlight* — bundle tags, member-price flags, the One Key chip, primary "Bundle & save" CTAs. **Action Blue** `#1668E3` is the *interactive* color — links, secondary CTAs, the reserve button, selected states. **Expedia Navy** `#00355F` is the *brand/trust* color — the logomark field, review-score badge backgrounds, dark headers. **One Key gold** `#F5C518` is a tightly-scoped *rewards-only* color — One Key cash balances and "earn" lines, never used for generic UI. There is a clear hierarchy: navy says "trusted travel brand," blue says "tap me," yellow says "you're saving money," gold says "this is your loyalty currency."
+
+Typography is **Expedia Sans** (the company's proprietary geometric humanist family, designed by Pentagram for the 2017+ rebrand), which falls back gracefully to **Inter** / SF Pro on iOS when the bundled face is unavailable. The hierarchy is product-UI rhythm (display → screen title → section → card title → body → meta → badge), not editorial. Prices are the loudest non-display element: an 18pt 800-weight number with a strikethrough antecedent and a quiet "/ night" suffix. Weights concentrate at 400 (body), 600 (subtitles, badges), 700 (card titles, sections), 800 (display, prices).
+
+**Key Characteristics:**
+- Light near-white canvas (`#FFFFFF` / `#F5F7FA`) light / navy-tinted charcoal (`#0E1116`) dark — content-forward, deal-forward
+- Search-and-results loop — segmented Stays/Flights/Cars/Bundle switch → single search pill → vertical results list
+- Property/fare result card — 16:10 hero, deal flag (top-left), save heart (top-right), title, location, review-score badge, price block, One Key earn line
+- Expedia Yellow (`#FFC94D`) = savings/deal/loyalty highlight; never generic chrome
+- Action Blue (`#1668E3`) = interactive (links, CTAs, selection)
+- Expedia Navy (`#00355F`) = brand/trust (logomark, review badge, headers)
+- One Key gold (`#F5C518`) = rewards-only (balances, earn lines, One Key chip)
+- Navy review-score badge ("9.2 Wonderful · 1,847 reviews") — Expedia's signature trust signal
+- Bundle + Save — packaging stay+flight+car for a discounted "Bundle" price (the core monetization gesture)
+- Strikethrough → discounted price pattern on nearly every card
+- Trips tab — itinerary timeline grouping flights, stays, cars under a single trip
+- Bottom tab bar: Search / Saved / Trips / Support / Account
+
+## 2. Color Palette & Roles
+
+### Primary (Brand & Interactive)
+- **Expedia Yellow** (`#FFC94D`): Savings/deal/loyalty highlight — bundle tags, member-price flags, One Key chip, "Bundle & save" primary CTA fill (text on it is navy `#00355F`).
+- **Yellow Deep** (`#FFB31A`): Pressed state for yellow CTAs and tags.
+- **Action Blue** (`#1668E3`): Primary interactive — "Reserve" CTA, links, secondary CTAs, selected segment underline, in-card actions.
+- **Action Blue Pressed** (`#0F4FB0`): Pressed state for blue CTAs.
+- **Expedia Navy** (`#00355F`): Brand/trust — logomark field, review-score badge background, dark hero overlays, top app bar on detail screens.
+- **Navy Soft** (`#14416B`): Lighter navy for secondary badges and chips on dark.
+- **One Key Gold** (`#F5C518`): Rewards-only — One Key cash balance, "Earn X One Key cash" lines, One Key membership chip. Never used for generic UI.
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary light canvas, card backgrounds.
+- **Surface Gray** (`#F5F7FA`): App background behind cards, grouped sections.
+- **Surface Pressed** (`#ECEFF4`): Pressed rows, selected list items.
+- **Divider** (`#E3E7ED`): Hairline dividers between rows, card borders.
+- **Scrim** (`#00000066`): 40% black overlay on hero photos for text legibility.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#0E1116`): Primary dark canvas — carries a subtle navy bias (NOT pure black) echoing Expedia Navy.
+- **Dark Surface 1** (`#161B22`): Card backgrounds, elevated surfaces.
+- **Dark Surface 2** (`#1F2630`): Chips, segmented controls, secondary fills.
+- **Dark Divider** (`#2A323E`): Hairline dividers and card borders.
+- **Dark Scrim** (`#00000080`): 50% black overlay on hero photos.
+
+### Text
+- **Text Primary Light** (`#1A1F26`): Primary body and titles on light.
+- **Text Secondary Light** (`#5A6573`): Metadata, neighborhoods, captions.
+- **Text Tertiary Light** (`#8A95A3`): Strikethrough prices, disabled.
+- **Text Primary Dark** (`#E8EBEF`): Primary text on dark.
+- **Text Secondary Dark** (`#9AA4B2`): Metadata on dark.
+- **Text Tertiary Dark** (`#6A7585`): Strikethrough prices, disabled on dark.
+
+### Semantic
+- **Success Green** (`#1A8B4B`): "Free cancellation", high review scores (9.0+ badge), confirmed booking.
+- **Error Red** (`#D93A3A`): Form errors, "Only 2 rooms left at this price" urgency, cancellation warnings.
+- **Warning Amber** (`#E8830C`): Price-change alerts, "Prices may rise" banners.
+- **Star Gold** (`#FFC94D`): Star ratings on properties (shares Expedia Yellow).
+- **Member Price Tint** (`#FFC94D1F`): 12% yellow background behind member-price callouts.
+
+### Review-Score Badge Color Ramp
+The navy/blue/green badge that fronts every property — color shifts with score band.
+
+| Score Band | Badge Background | Label Text |
+|------------|------------------|------------|
+| 9.0–10 (Wonderful) | `#1A8B4B` | Wonderful |
+| 8.0–8.9 (Excellent) | `#1668E3` | Excellent |
+| 7.0–7.9 (Very Good / Good) | `#14416B` | Good |
+| 6.0–6.9 (Pleasant) | `#5A6573` | Pleasant |
+| < 6.0 | `#8A95A3` | — |
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Expedia Sans` (proprietary, by Pentagram for Expedia Group, 2017+ rebrand) — geometric humanist sans tuned for travel commerce: legible price figures, generous x-height, confident bold weights.
+- **Fallback Stack**: `'Expedia Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Closest free substitute**: `Inter` (by Rasmus Andersson, SIL OFL) — matched x-height, geometric construction, excellent tabular figures for prices.
+- **Numerals**: Tabular/lining figures for all prices and review scores (so columns of prices align).
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Expedia Sans | 32pt | 800 | 1.15 | -0.6pt | Home hero ("Find your next trip") |
+| Screen Title | Expedia Sans | 26pt | 800 | 1.2 | -0.4pt | Destination / results header |
+| Section | Expedia Sans | 22pt | 700 | 1.25 | -0.2pt | "Bundle + Save deals" |
+| Card Title | Expedia Sans | 18pt | 700 | 1.3 | -0.2pt | Property / fare name |
+| Price (Now) | Expedia Sans | 18pt | 800 | 1.2 | -0.2pt | Discounted price figure |
+| Body | Expedia Sans | 16pt | 400 | 1.5 | 0pt | Descriptions, policy text |
+| Card Subtitle | Expedia Sans | 15pt | 600 | 1.35 | 0pt | Neighborhood, "0.4 mi from center" |
+| Review Score | Expedia Sans | 15pt | 800 | 1.0 | 0pt | "9.2" inside navy badge |
+| Meta | Expedia Sans | 14pt | 400 | 1.4 | 0pt | "1,847 reviews · Free cancellation" |
+| Price (Strike) | Expedia Sans | 13pt | 400 | 1.0 | 0pt | Strikethrough antecedent price |
+| Badge / Tag | Expedia Sans | 12pt | 600 | 1.0 | 0.2pt | "−24% Bundle", "Member price" |
+| One Key Line | Expedia Sans | 11pt | 700 | 1.2 | 0.1pt | "Earn 2,040 One Key cash" |
+| Button | Expedia Sans | 16pt | 700 | 1.0 | 0pt | Primary/secondary CTAs |
+| Tab Label | Expedia Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Price is the loudest content element**: discounted price at 18pt 800, strikethrough at 13pt 400 tertiary, "/ night" suffix at 12pt secondary — the eye lands on savings.
+- **Tabular figures everywhere prices appear**: prices, review scores, point balances must align in vertical lists.
+- **Weight concentrated at 400 / 600 / 700 / 800**: body regular, subtitles/badges semibold, titles/sections bold, display/prices extra-bold. No thin, no black.
+- **Navy on yellow, white on blue**: text on Expedia Yellow is always navy `#00355F`; text on Action Blue is always white `#FFFFFF`.
+- **Dynamic Type first-class**: display, titles, body, prices scale; tab labels, badges, One Key lines stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Reserve / Continue)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#1668E3` (Action Blue)
+- Text: `#FFFFFF`, Expedia Sans 16pt weight 700
+- Padding: 14pt vertical, 28pt horizontal
+- Full-width on detail/checkout screens (leading + trailing 16pt insets)
+- Pressed: background `#0F4FB0` + scale 0.98
+- Disabled: `#1668E3` at 38% opacity
+
+**Savings / Bundle Button (Bundle & save)**
+- Shape: Rounded rectangle, 8pt corner radius
+- Background: `#FFC94D` (Expedia Yellow)
+- Text: `#00355F` (Expedia Navy), Expedia Sans 16pt weight 700
+- Padding: 14pt vertical, 28pt horizontal
+- Pressed: background `#FFB31A` + scale 0.98
+- Used for the package/bundle conversion CTA — the highest-intent action
+
+**Secondary / Outline Button (Add a flight)**
+- Background: transparent
+- Text: `#1668E3` (Action Blue)
+- Border: 1pt `#1668E3`
+- Padding: 12pt vertical, 20pt horizontal
+- Corner radius: 8pt
+- Pressed: background `#1668E31A` (10% blue)
+
+**Text Button (See all 38 deals)**
+- Font: Expedia Sans 14pt weight 600
+- Color: `#1668E3`
+- No underline; chevron trailing optional
+- Pressed: 60% opacity
+
+**Icon Button (Save heart)**
+- Size: 20pt glyph in 30pt circular hit area
+- On hero photo: filled-black-40% circle behind for contrast
+- Unsaved: hollow heart, `#FFFFFF` stroke 1.8pt, `rgba(0,0,0,0.4)` fill
+- Saved: filled `#1668E3` with `#FFFFFF` 1.6pt stroke
+- Toggle: scale-bounce 1.0 → 1.2 → 1.0 in 220ms + soft haptic
+
+### Core Atoms
+
+**Property / Result Card**
+- Container: `#FFFFFF` light / `#161B22` dark, 16pt corner radius, 0.5pt `#E3E7ED` / `#2A323E` border, subtle shadow `0 4px 12px rgba(0,0,0,0.08)` light / `0 4px 12px rgba(0,0,0,0.4)` dark
+- Hero photo: full-width, 16:10 aspect ratio, square top corners (clipped to card radius)
+- **Deal flag** (top-left, 12pt inset): `#FFC94D` background, `#00355F` text, Expedia Sans 12pt w800, 6pt corner radius, 4pt vertical / 9pt horizontal padding ("−24% Bundle", "Member price")
+- **Save heart** (top-right, 10pt inset): see Icon Button
+- Body padding: 12pt top, 14pt horizontal, 14pt bottom
+- Title: Expedia Sans 18pt w700
+- Subtitle (location): Expedia Sans 15pt w600 secondary, 3pt below title
+- **Review-score row** (8pt below subtitle): navy badge (`#14416B`/`#1A8B4B`/`#1668E3` per band) with white 15pt w800 score + 6pt gap + word ("Wonderful") in 12pt w700 + " · 1,847 reviews" in 12pt secondary
+- **Price row** (10pt below): optional strikethrough `#8A95A3` 13pt + discounted `#1A1F26` 18pt w800 + "/ night" 12pt secondary
+- **One Key earn line** (7pt below): gold dot/coin + "Earn 2,040 One Key cash" Expedia Sans 11pt w700 `#F5C518`
+
+**Flight / Fare Card** (variant of result card)
+- Top row: airline logo (24pt) + airline name + cabin
+- Center: depart time → duration arc with stops dots → arrive time (times Expedia Sans 18pt w700, airport codes 13pt secondary)
+- Bottom: price block (right-aligned, 18pt w800) + "Round trip" 12pt secondary + One Key earn line
+- "Hacker fare" / "Self-transfer" badge: amber `#E8830C` chip when mixed-carrier
+
+**Review-Score Badge**
+- Rounded rectangle, 6pt corner radius
+- Background per score band (see §2 ramp)
+- Text: white, Expedia Sans 15pt w800
+- Padding: 3pt vertical, 7pt horizontal
+- Always paired with a word label and review count to its right
+
+**Price Block**
+- Strikethrough antecedent: Expedia Sans 13pt w400 `#8A95A3`, `line-through`
+- Discounted/now: Expedia Sans 18pt w800 `#1A1F26` (or `#E8EBEF` dark)
+- Period suffix: Expedia Sans 12pt w400 secondary, baseline-aligned
+- "Member price" / "Bundle price" label: 12pt w600, color = green `#1A8B4B` for member, navy `#00355F` on yellow tag for bundle
+
+**One Key Chip / Pill**
+- Pill, 500pt corner radius
+- Background: `#1F2630` dark / `#FFC94D1F` light
+- Leading 7pt gold dot or coin glyph
+- Text: Expedia Sans 11pt w700 `#F5C518`
+- Content: "12,480 One Key" or "$124.80 One Key cash"
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `#FFFFFF` / `#0E1116` with 0.5pt top divider `#E3E7ED` / `#2A323E`
+- Tabs (5): Search, Saved, Trips, Support, Account
+- Icon size: 22pt
+- Active: `#1668E3` (Action Blue), filled glyph
+- Inactive: `#8A95A3` / `#6A7585`, outline glyph
+- Labels: Expedia Sans 10pt w600, always shown
+- No pill indicator — color + fill change only
+
+**Top App Bar (Detail / Results)**
+- Height: 44pt + safe area
+- On photo hero: transparent → solidifies to `#FFFFFF`/`#0E1116` on scroll
+- Leading: back chevron (white over photo, primary text once solid)
+- Trailing: share + save heart
+- Title: appears centered on scroll past hero
+
+**Segmented Mode Switch (Stays / Flights / Cars / Bundle)**
+- 4 equal segments, each a 10pt-radius pill, 9pt vertical padding
+- Inactive: `#F5F7FA`/`#1F2630` background, `#5A6573`/`#9AA4B2` text, 0.5pt divider border
+- Active: `#FFC94D` background, `#00355F` text, no border
+- Transition: 200ms ease-out background + text color crossfade
+
+### Input Fields
+
+**Search Pill (the entry point)**
+- Height: 52pt
+- Background: `#FFFFFF`/`#161B22`, 0.5pt `#E3E7ED`/`#2A323E` border
+- Corner radius: 14pt
+- Shadow: `0 4px 12px rgba(0,0,0,0.08)` / `rgba(0,0,0,0.4)`
+- Leading: `magnifyingglass` 17pt secondary
+- Two-line content: line 1 destination Expedia Sans 14pt w700; line 2 "Oct 12 – 17 · 2 travelers · 1 room" 11pt secondary
+- Tap: pushes full search form (destination autocomplete, date range, traveler stepper)
+
+**Text Field (forms / traveler details)**
+- Height: 52pt
+- Background: `#F5F7FA`/`#1F2630`
+- Corner radius: 8pt
+- Border: 1pt transparent → `#1668E3` on focus
+- Label: floating, Expedia Sans 12pt secondary
+- Error: 1pt `#D93A3A` border + helper text `#D93A3A` 12pt
+
+**Date Range / Calendar**
+- Two-month vertical scroll calendar
+- Selected start/end: `#1668E3` filled circle, white text
+- In-range: `#1668E31A` (10% blue) connecting band
+- Today: `#1668E3` ring
+
+### Distinctive Components
+
+**Bundle + Save Module**
+- A horizontally laid "stay + flight (+ car)" stack with a yellow savings ribbon
+- Header: "Bundle and save $214" — savings figure in `#00355F` on `#FFC94D1F` band
+- CTA: yellow "Bundle & save" button
+- Each component row: icon + name + individual price (strikethrough) → bundled price
+
+**One Key Rewards Strip**
+- Surface `#F5F7FA`/`#1F2630`, 12pt corner radius, 0.5pt divider
+- Leading 36pt gold coin ("1K"), title "One Key cash available" 13pt w700, subtitle 11pt secondary
+- Trailing balance: Expedia Sans 16pt w800 `#F5C518`
+- Appears on home, checkout, and Account
+
+**Trips Timeline**
+- Vertical itinerary grouped by trip → by day
+- Each item: type icon (flight/bed/car) + time + title + status chip
+- Connecting vertical rail `#E3E7ED`/`#2A323E` between items
+- Confirmed status: green `#1A8B4B` chip; pending: amber `#E8830C`
+
+**Price Forecast / Change Banner**
+- Full-width inline banner, `#FFC94D1F` background, 8pt radius
+- Leading trend glyph, text "Prices for these dates are trending up" 13pt w600
+- Optional "Track price" outline button trailing
+
+**Map Price Pins**
+- Pill, 12pt radius, drop shadow `0 2px 6px rgba(0,0,0,0.4)`
+- Default: `#FFFFFF`/`#161B22` bg, navy text
+- Selected: `#1668E3` bg, white text
+- Viewed: `#ECEFF4`/`#0E1116` muted
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Card vertical gap: 16pt
+- Card internal padding: 12–14pt
+- Screen horizontal inset: 16pt
+- Section header to first card: 10pt
+
+### Grid & Container
+- iPhone: single-column results list, 16pt insets, full-bleed hero photos within cards
+- iPad: 2-column results grid (max content width 980pt centered, 24pt insets); detail uses split (list + map/detail)
+- Map view: full-bleed map with floating result carousel at bottom
+
+### Whitespace Philosophy
+- **Commerce density with breathing room**: cards are information-dense (photo, title, score, price, loyalty) but separated by a generous 16pt gap so each is a discrete decision unit
+- **Savings gets the spotlight**: yellow deal flags and One Key lines get their own visual lane — never crowded by body copy
+- **Photo-first**: every result leads with a 16:10 photo; chrome is minimal over it (just deal flag + heart)
+
+### Border Radius Scale
+- Square (0pt): hero photo top edge (clipped to card), dividers
+- Subtle (4pt): inline price chips
+- Tag (6pt): deal flags, review-score badge
+- Standard (8pt): buttons, text fields, inline banners
+- Card (12–16pt): result cards, rewards strip, modules
+- Pill (500pt): One Key chip, segmented control, map pins
+- Circle (50%): save-heart hit area, avatars, One Key coin
+
+## 6. Depth & Elevation
+
+Expedia uses **soft, functional elevation** — cards lift just enough to read as tappable units; deal flags and CTAs sit flat on their surfaces.
+
+| Level | Treatment (Light) | Treatment (Dark) | Use |
+|-------|-------------------|------------------|-----|
+| Flat (0) | none | none | Page background, deal flags, badges |
+| Card (1) | `0 4px 12px rgba(0,0,0,0.08)` | `0 4px 12px rgba(0,0,0,0.4)` | Result cards, rewards strip, search pill |
+| Floating (2) | `0 8px 24px rgba(0,0,0,0.12)` | `0 8px 24px rgba(0,0,0,0.55)` | Map result carousel, sticky CTA bar |
+| Sheet (3) | `0 -8px 28px rgba(0,0,0,0.14)` | `0 -8px 28px rgba(0,0,0,0.6)` | Bottom sheets (filters, traveler picker) |
+| Modal Scrim | `rgba(0,0,0,0.4)` | `rgba(0,0,0,0.55)` | Dim behind modals & sheets |
+
+**Shadow Philosophy**: shadow signals "this is a tappable card / it floats." Deal flags, review badges, and the One Key chip are deliberately flat (color carries them). On dark, shadows deepen to 0.4–0.6 opacity to register over `#0E1116`.
+
+### Motion
+- **Card tap → detail**: shared-element hero photo expands, push transition 320ms ease-out
+- **Save heart**: scale 1.0 → 1.2 → 1.0 over 220ms + soft haptic; deal recalculates silently
+- **Segmented switch**: active pill background + text crossfade 200ms ease-out
+- **Price update (date change)**: old price cross-dissolves to new in 180ms; brief `#FFC94D` flash on the price if it dropped
+- **Bundle reveal**: savings ribbon slides down + scales from 0.96 over 240ms ease-out when a flight is added
+- **Filter sheet**: bottom sheet slides up 300ms ease-out; result count animates as filters toggle
+- **Sticky CTA bar**: fades/translates in over 200ms once the user scrolls past the fold on a detail screen
+- **Pull-to-refresh**: Expedia-yellow spinner
+- **Haptics**: soft impact on save, segment switch, date-range commit; success haptic on booking confirmation
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Expedia Yellow (`#FFC94D`) strictly for savings/deal/loyalty highlights — bundle tags, member prices, One Key chip, the "Bundle & save" CTA
+- Put navy `#00355F` text on yellow, white on Action Blue `#1668E3`
+- Lead every result card with a 16:10 photo; deal flag top-left, save heart top-right
+- Show the review-score badge with score + word + count ("9.2 Wonderful · 1,847 reviews")
+- Use the strikethrough → discounted price pattern when there is a real saving
+- Reserve One Key gold (`#F5C518`) exclusively for rewards balances and earn lines
+- Use Action Blue (`#1668E3`) for the primary "Reserve" CTA and all links
+- Give cards a 16pt gap and a soft `0 4px 12px` shadow so each is a discrete decision
+- Carry the search-and-results loop: segmented mode switch → search pill → vertical list
+- Use a navy-biased dark canvas (`#0E1116`), NOT pure black
+- Animate a brief yellow price flash when a price drops
+
+### Don't
+- Don't use Expedia Yellow for generic chrome, body text, or non-savings UI — it dilutes the savings signal
+- Don't put white text on yellow or yellow text on blue (contrast + brand violation)
+- Don't use One Key gold for anything other than rewards (no generic icons, no body accents)
+- Don't show a strikethrough price when there is no real discount
+- Don't bury the review-score badge — it's the primary trust signal and must front the card
+- Don't use pure black (`#000000`) for the dark canvas — `#0E1116` carries the navy bias
+- Don't make the bundle/savings CTA blue — the highest-intent action is yellow
+- Don't over-shadow flat elements (deal flags, badges, One Key chip stay flat)
+- Don't crowd the One Key earn line with other copy — it has its own lane
+- Don't animate aggressively — motion is functional, 180–320ms ease-out
+- Don't replace the segmented mode switch with a dropdown — Stays/Flights/Cars/Bundle is a glanceable, always-visible switch
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Single column; hero photo 16:10; segmented switch labels may abbreviate |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; sticky CTA respects safe area |
+| iPhone 15/16 Pro Max | 430pt | Larger hero photos; 2-line meta has more room |
+| iPad (portrait) | 768pt | 2-column results grid; detail in split view (list + detail) |
+| iPad (landscape) | 1024pt+ | Results list + persistent map pane side-by-side |
+
+### Dynamic Type
+- Display, screen title, section, card title, body, prices: full scale
+- Tab labels, deal flags/badges, One Key lines, review-score number: FIXED (layout-sensitive)
+- Prices keep tabular figures at every scale
+
+### Orientation
+- iPhone: portrait-primary; landscape supported on detail/photo gallery
+- iPad: full rotation; landscape unlocks side-by-side list + map
+
+### Touch Targets
+- Save heart: 30pt circle hit (20pt glyph)
+- Tab bar icons: 22pt glyph, 44pt hit
+- Segmented switch segment: full segment height (≥ 36pt)
+- Search pill: full 52pt height tappable
+- Primary CTA: ≥ 48pt tall
+
+### Safe Area Handling
+- Top app bar respects safe area + Dynamic Island
+- Sticky CTA bar and bottom tab respect home indicator
+- Map result carousel floats above bottom safe area
+- Keyboard: search form scrolls above keyboard; date picker is a sheet above it
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF` / surface `#F5F7FA`
+- Canvas (dark): `#0E1116`
+- Surface (dark card): `#161B22`
+- Divider: `#E3E7ED` light / `#2A323E` dark
+- Text primary: `#1A1F26` light / `#E8EBEF` dark
+- Text secondary: `#5A6573` light / `#9AA4B2` dark
+- Expedia Yellow (savings): `#FFC94D` (text on it: navy `#00355F`)
+- Action Blue (interactive): `#1668E3`
+- Expedia Navy (brand/trust): `#00355F`
+- One Key Gold (rewards): `#F5C518`
+- Success: `#1A8B4B`
+- Error: `#D93A3A`
+- Review badge — Wonderful: `#1A8B4B`, Excellent: `#1668E3`, Good: `#14416B`
+
+### Example Component Prompts
+- "Build the Expedia property result card in SwiftUI: `#FFFFFF` card (`#161B22` dark), 16pt corner radius, 0.5pt `#E3E7ED` border, shadow `0 4px 12px rgba(0,0,0,0.08)`. Top: 16:10 hero photo with a `#FFC94D` deal flag top-left (text `#00355F`, Expedia Sans 12pt w800, 6pt radius, '−24% Bundle') and a save heart top-right (20pt glyph in 30pt black-40% circle). Body 12/14/14pt padding: title Expedia Sans 18pt w700; location 15pt w600 `#5A6573`; review row = `#1A8B4B` badge with white 15pt w800 '9.2' + '· Wonderful · 1,847 reviews'; price row = strikethrough `#8A95A3` 13pt '$268' then `#1A1F26` 18pt w800 '$204' + '/ night' 12pt secondary; One Key line = gold dot + 'Earn 2,040 One Key cash' 11pt w700 `#F5C518`."
+
+- "Create the Expedia segmented mode switch: 4 equal pills (Stays / Flights / Cars / Bundle), 10pt radius, 9pt vertical padding. Inactive: `#F5F7FA` bg, `#5A6573` text, 0.5pt `#E3E7ED` border. Active: `#FFC94D` bg, `#00355F` text, no border. 200ms ease-out crossfade on switch."
+
+- "Build the Expedia search pill: 52pt tall, `#FFFFFF` bg, 14pt radius, 0.5pt `#E3E7ED` border, shadow `0 4px 12px rgba(0,0,0,0.08)`. Leading magnifyingglass 17pt `#5A6573`. Two lines: 'San Diego, CA' Expedia Sans 14pt w700; 'Oct 12 – 17 · 2 travelers · 1 room' 11pt `#5A6573`. Tap pushes full search form."
+
+- "Render the Expedia One Key rewards strip: `#F5F7FA` surface (`#1F2630` dark), 12pt radius, 0.5pt divider. Leading 36pt gold (`#F5C518`) coin '1K'. Title 'One Key cash available' Expedia Sans 13pt w700; subtitle 11pt `#5A6573`. Trailing balance Expedia Sans 16pt w800 `#F5C518`."
+
+- "Build the Expedia primary CTA pair: 'Reserve' = `#1668E3` fill, white Expedia Sans 16pt w700, 8pt radius, 14/28pt padding, pressed `#0F4FB0` + scale 0.98. 'Bundle & save' = `#FFC94D` fill, `#00355F` text, same metrics, pressed `#FFB31A`."
+
+- "Create the Expedia review-score badge: rounded rect 6pt radius, background by band — `#1A8B4B` (9.0+ Wonderful), `#1668E3` (8.0+ Excellent), `#14416B` (7.0+ Good). White Expedia Sans 15pt w800 score, 3/7pt padding, followed by word label 12pt w700 + ' · 1,847 reviews' 12pt `#5A6573`."
+
+### Iteration Guide
+1. Canvas is near-white (`#FFFFFF`/`#F5F7FA`) light, navy-biased charcoal `#0E1116` dark — NOT true black
+2. Expedia Yellow `#FFC94D` is the savings/deal/loyalty color ONLY — never generic chrome; text on it is navy `#00355F`
+3. Action Blue `#1668E3` is interactive — Reserve CTA, links, selection; white text on it
+4. Every result card leads with a 16:10 photo, deal flag top-left, save heart top-right
+5. The review-score badge (score + word + count) fronts every card — it's the trust signal
+6. Use strikethrough → discounted price only when there's a real saving; prices use tabular figures
+7. One Key gold `#F5C518` is rewards-only (balances, earn lines, One Key chip)
+8. The search-and-results loop is the spine: segmented switch (Stays/Flights/Cars/Bundle) → search pill → vertical list
+9. The highest-intent CTA ("Bundle & save") is yellow, not blue
+10. Motion is functional 180–320ms ease-out; flash the price yellow when it drops