# Design System Inspiration of Vrbo (iOS)

## 1. Visual Theme & Atmosphere

Vrbo's iOS app is a whole-home vacation-rental marketplace, and its entire visual language is built around one differentiator: you book the *entire place*, never a shared room. Where a generic stays app might foreground hosts and rooms, Vrbo foregrounds **the property** — big, edge-to-edge, swipeable photography that takes over the top of every listing. Open a listing and the first thing you see is a full-bleed photo gallery (≈290pt tall), a photo counter ("1 / 42"), and a share + save row floating over the image. The product wants you to feel the house before you read a word about it. The aesthetic is clean, trustworthy, and family-oriented: a bright white canvas (`#FFFFFF`), confident Vrbo Blue (`#245ABC`) for every action, generous card spacing, and a calm, uncluttered chrome that lets the photography do the selling.

The signature surface is the **listing detail screen with its photo gallery + sticky booking bar**. The gallery is swipeable with a progress-dot indicator and a "see all photos" grid affordance. Below it: trust badges (Premier Host, Instant Book), the property title, location, a single gold star with the review score, a row of property facts (Guests / Bedrooms / Bathrooms / "Whole home"), and the description. Pinned to the bottom is a **booking bar** — the nightly price in heavy type, the selected dates, and a high-contrast blue "Book now" button that stays visible as you scroll. This price-forward, photo-first, always-bookable layout is the core of Vrbo.

The other recognizable surfaces are the **map with price pins** (every property shown as a rounded price bubble; the selected one flips to gold) and the **trip board** — Vrbo's saved-property collections, organized into named trips ("Summer 2026"), shown as horizontal cards with a thumbnail, property facts, and the saved-to label. Search → results list/map → listing detail → trip board is the loop the whole app revolves around.

Color is disciplined. Vrbo Blue is the primary action color: the "Book now" button, links, selected states, the active tab, and map pins. Sky Blue (`#1D6FB8`) is a supporting shade for secondary links and accents. There is exactly one warm color — a **gold review star** (`#F2B01E`) — used for ratings and the selected map pin; nothing else competes with the blue. Success/error follow standard semantics (green confirmation, red errors). Everything else is white, near-black text, and hairline dividers, so the photography and the price always win the eye.

Typography is Apple's **SF Pro** — Vrbo ships no custom typeface; it leans on the iOS system font and Dynamic Type. Hierarchy is commerce-shaped: a heavy price hero, a strong listing title, clear section headers, readable body, and small bold badges. Price is the loudest text on every screen — Vrbo is a marketplace, and the number you'll pay is always near the visual top of the value hierarchy.

**Key Characteristics:**
- Bright white canvas (`#FFFFFF`) light / cool blue-charcoal (`#101317`) dark — clean, trustworthy, family-oriented
- **Whole-home framing everywhere** — "Entire home", "Whole home", never a shared room
- **Full-bleed swipeable photo gallery** leads every listing (≈290pt) with photo counter + dot progress
- **Sticky booking bar** — heavy price + dates + always-visible blue "Book now" CTA
- Vrbo Blue (`#245ABC`) primary action; Sky Blue (`#1D6FB8`) support; one gold review star (`#F2B01E`)
- Trust badges — Premier Host, Instant Book — small, bold, colored chips
- **Map with rounded price pins** — default blue, viewed gray, selected gold
- **Trip boards** — named saved-property collections shown as horizontal cards
- Big photo cards in results list — image-forward, price + rating below
- SF Pro system font + Dynamic Type; price is the loudest type on every screen
- Minimal chrome: a 5-tab bottom bar (Search / Trips / Inbox / Notifications / Account), translucent bars

## 2. Color Palette & Roles

### Primary (Interactive)
- **Vrbo Blue** (`#245ABC`): The primary action color — "Book now" button, primary CTAs, active tab tint, selected states, default map pin.
- **Vrbo Blue Pressed** (`#1B4794`): Pressed/active state for primary buttons.
- **Vrbo Blue Bright** (`#4F8BF0`): Dark-mode variant — links, outline buttons, pins, active tab on the dark canvas where `#245ABC` is too dim.
- **Sky Blue** (`#1D6FB8`): Supporting accent — secondary links, info chips, map accents.

### Canvas & Surfaces (Light Mode)
- **Canvas White** (`#FFFFFF`): Primary light canvas — search, results, listing body.
- **Surface Gray** (`#F3F5F8`): Grouped section background, search field, filter chips.
- **Surface Pressed** (`#E7EBF1`): Pressed/selected rows and cards.
- **Divider** (`#E1E5EB`): Hairline separators between facts, sections, list rows.
- **Photo Scrim** (`rgba(16,19,23,0.55)`): Gradient over gallery photos for legible overlay controls.

### Canvas & Surfaces (Dark Mode)
- **Dark Canvas** (`#101317`): Primary dark canvas — a cool blue-charcoal, not pure black.
- **Dark Surface 1** (`#181C22`): Cards, grouped section background, nav bar.
- **Dark Surface 2** (`#21262E`): Pressed rows, filter chips, trip-board cards.
- **Dark Divider** (`#2A3038`): Hairline separators on dark.

### Text
- **Text Primary Light** (`#15181D`): Listing titles, price, body — near-black, not pure black.
- **Text Secondary Light** (`#5A6470`): Location, metadata, descriptions, captions.
- **Text Tertiary Light** (`#8A93A0`): Disabled, very low-emphasis.
- **Text Primary Dark** (`#EDEFF2`): Primary text on dark canvas.
- **Text Secondary Dark** (`#A3AAB4`): Secondary text on dark canvas.

### Accent & Badges
| Role | Color | Use |
|------|-------|-----|
| Gold Review Star | `#F2B01E` | Rating stars + selected map pin — the only warm color |
| Premier Host Badge | `#245ABC` text on `rgba(36,90,188,0.12)` | Top-tier host trust badge |
| Instant Book Badge | `#1F9D57` text on `rgba(31,157,87,0.12)` | Book-without-request badge |
| Map Pin (default) | `#245ABC` fill, white text | Unselected property pin |
| Map Pin (viewed) | `#F3F5F8` / `#21262E` fill, secondary text | Already-viewed pin |
| Map Pin (selected) | `#F2B01E` fill, `#1A1206` text | Currently-selected property |

### Semantic
- **Success Green** (`#1F9D57`): Booking confirmed, Instant Book badge, "Free cancellation" labels.
- **Error / Destructive Red** (`#E04444`): Failed payment, unavailable dates, remove-from-trip.
- **Warning Amber** (`#E8920C`): "Only 2 dates left", price-change notices.
- **Link** (`#245ABC` light / `#4F8BF0` dark): Inline links, "See all photos", host profile.
- **Discount Strikethrough** (`#8A93A0`): Original price struck through when a deal applies.

## 3. Typography Rules

### Font Family
- **Primary**: `SF Pro` (Apple system font) — Vrbo ships no custom typeface; it uses the iOS system font with Dynamic Type. SF Pro Display for large titles and price heroes, SF Pro Text for body.
- **Fallback Stack (non-Apple / web mirror)**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Not user-switchable**: The face is always the system font; only Dynamic Type size scales.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Large Title | SF Pro Display | 32pt | 800 | 1.15 | -0.4pt | Top-level screen header ("Search", "Trips") |
| Price Hero | SF Pro Display | 26pt | 800 | 1.2 | -0.3pt | Nightly price in the booking bar / detail |
| Listing Title | SF Pro Display | 21pt | 700 | 1.25 | -0.3pt | Property title on detail screen |
| Section Header | SF Pro Text | 18pt | 700 | 1.3 | -0.2pt | "What this place offers", "Where you'll be" |
| Body | SF Pro Text | 16pt | 400 | 1.5 | 0pt | Description, policy text |
| Card Title | SF Pro Text | 15pt | 600 | 1.3 | 0pt | Results-card primary line |
| Fact Value | SF Pro Text | 16pt | 700 | 1.2 | 0pt | "8 Guests", "4 Bedrooms" |
| Meta / Subtitle | SF Pro Text | 14pt | 400 | 1.35 | 0pt | Location, review count, dates |
| Badge | SF Pro Text | 12pt | 700 | 1.0 | 0.2pt | Premier Host, Instant Book chips |
| Button | SF Pro Text | 16pt | 700 | 1.0 | 0pt | Primary / secondary buttons |
| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Caption | SF Pro Text | 12pt | 500 | 1.2 | 0pt | Photo counter, dot legends, fine print |

### Principles
- **Price is loud**: The nightly price is one of the heaviest type styles on every screen — 800 weight, near the visual top of the value hierarchy. Vrbo is a marketplace.
- **System font, always**: Vrbo never overrides SF Pro — respect Dynamic Type and the user's preferred text size globally.
- **Weight concentrated at 400 / 500 / 600 / 700 / 800**: Regular body, medium for tabs/captions, semibold for card titles, bold for headers/facts/badges, extra-bold for price and titles.
- **Hierarchy via weight + size, not color**: Color is reserved for the blue and the gold star. Text hierarchy comes from size and weight.
- **Dynamic Type first-class**: Titles, price, headers, body all scale. Tab labels, badges, photo counter stay fixed (layout-sensitive).

## 4. Component Stylings

### Buttons

**Primary Button ("Book now" / Reserve / Continue)**
- Shape: Rounded rectangle, 10pt corner radius
- Background: `#245ABC` (Vrbo Blue) — stays the deep brand blue even on dark
- Text: `#FFFFFF`, SF Pro Text 16pt weight 700
- Padding: 14pt vertical, 28pt horizontal (full-width in the booking bar)
- Pressed: background `#1B4794` + scale 0.98 + light haptic
- Disabled: background `#245ABC` at 35% opacity, text at 60%

**Secondary / Outline Button ("Contact host" / Save)**
- Background: transparent
- Text: `#245ABC` light / `#4F8BF0` dark
- Border: 1.5pt `#245ABC` / `#4F8BF0`
- Padding: 12pt vertical, 22pt horizontal
- Corner radius: 10pt
- Font: SF Pro Text 15pt weight 700
- Pressed: background `#245ABC` at 8% opacity

**Pill Button (Filters / Sort / Map toggle)**
- Background: `#F3F5F8` light / `#21262E` dark
- Text: `#15181D` / `#EDEFF2`
- Border: 1pt `#E1E5EB` / `#2A3038`
- Padding: 10pt vertical, 18pt horizontal
- Corner radius: 999pt (full pill)
- Font: SF Pro Text 14pt weight 600
- Active filter: blue fill `#245ABC`, white text, count badge

**Text Button ("See all 42 photos" / host link)**
- Font: SF Pro Text 15pt weight 600
- Color: `#245ABC` light / `#4F8BF0` dark
- Underlined
- Pressed: 0.6 opacity

**Gallery Overlay Button (back / share / save)**
- Circular, 36pt diameter
- Background: `rgba(16,19,23,0.55)` + 8pt backdrop blur
- Glyph: 18pt white; save heart fills `#FFFFFF` (or `#E04444` when saved)

### Photo Gallery (the core component)

The signature Vrbo element — a full-bleed, swipeable photo carousel at the top of every listing.

- **Height**: ≈290pt on iPhone (≈360pt on Pro Max), full screen width, square top corners
- **Swipe**: horizontal paging, 1:1 finger tracking, snap with 250ms spring
- **Progress**: a dot row at the bottom — active dot widens to a pill (`#FFFFFF`), inactive `rgba(255,255,255,0.45)`
- **Photo counter**: bottom-right pill "1 / 42" — `rgba(16,19,23,0.7)` bg, white 12pt w600, with a small grid glyph
- **Overlay controls**: back / share / save buttons float top, over a top-to-bottom scrim gradient for legibility
- **Tap**: opens a full-screen photo grid ("See all 42 photos")

### Sticky Booking Bar

- Pinned to the bottom of the listing detail, ≈76pt tall + safe area
- Background: `rgba(16,19,23,0.97)` (dark) + 20pt backdrop blur, 1pt top divider
- Leading: price hero (26pt w800) + "/ night" + the selected dates as an underlined tappable line
- Trailing: full "Book now" primary button
- Stays visible as the page scrolls; the price updates live when dates change

### Listing Cards (results list)

- Photo-forward: a 4:3 (or 16:10) image with rounded 14pt corners and a save heart top-right
- Below image: title (15pt w600), location (14pt secondary), a gold-star rating row, and price ("$486 night", price in 16pt w700)
- Whole-home label always present ("Entire home")
- Tap target = full card; 90% width in carousels, full width in lists

### Map Price Pins

- Rounded pill bubbles anchored on the map
- Default: `#245ABC` fill, white 14pt w700 price
- Viewed: neutral surface fill, secondary text (so you can tell what you've seen)
- Selected: `#F2B01E` gold fill, `#1A1206` text, slight scale-up + shadow
- Tapping a pin opens a peek card at the bottom of the map

### Trip Board

- Vrbo's saved-property collections, organized into named trips
- Each saved property: a horizontal card — 64pt thumbnail, property name (14pt w700), facts line (location · BR · sleeps), and a gold "★ 4.9 · Saved to '{Trip}'" tag
- Boards are organized in a tab; add/remove via the save heart anywhere in the app

### Navigation

**Listing Nav (over gallery)**
- No solid bar — translucent circular overlay buttons (back / share / save) float over the photo with a scrim
- On scroll past the gallery, a solid compact bar fades in: back chevron + property title (truncated) + share/save

**Bottom Tab Bar**
- Height: ≈68pt incl. home indicator
- Tabs: Search, Trips, Inbox, Notifications, Account
- Icon size: 22pt
- Active color: `#245ABC` / `#4F8BF0` (filled glyph); inactive: `#8A93A0`
- Labels: SF Pro Text 10pt w500, always shown
- Background: blurred translucent, 0.5pt top divider
- Badge: red `#E04444` dot on Inbox/Notifications when unread

### Input Fields

**Search Bar**
- Pill-shaped, ≈54pt tall, `#F3F5F8` / `#21262E` background, 999pt radius
- Two lines: "Where to?" (15pt w700) and "Add dates · Add guests" (12pt secondary)
- Leading magnifier glyph; trailing filter glyph in a 36pt circle

**Date / Guest Picker**
- Inline calendar with range selection: selected range filled `#245ABC` at 12% with endpoints solid blue
- Guest stepper rows with `−` / `+` round buttons (blue outline)

### Distinctive Components

**Full-Bleed Photo Gallery** — see core component. The product's first impression.

**Sticky Booking Bar** — always-visible price + Book now. The commerce anchor.

**Trust Badge Row** — Premier Host (blue) + Instant Book (green) chips above the listing title.

**Trip Board Card** — named saved-property collections; Vrbo's wishlist equivalent.

**Whole-Home Banner** — a small reassurance chip ("You'll have the entire place to yourself") reinforcing the core differentiator.

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 18, 24, 32, 40, 48
- Screen content inset: 18pt horizontal (slightly wider than 16 — Vrbo gives photos and cards room)
- Card vertical gap: 16pt
- Section gap: 24pt; fact row padded 14pt top/bottom between dividers

### Grid & Container
- iPhone: content at 18pt horizontal insets; gallery and map are full-bleed
- iPad: results in a 2-column grid; listing detail uses a split (gallery+facts | sticky booking panel)
- Results list cards: full width; carousels cap cards at ~90% width with a peek of the next

### Whitespace Philosophy
- **Photography wins**: the gallery is full-bleed and tall; chrome is minimal so the house sells itself
- **Price is always reachable**: the booking bar pins the price + CTA on screen at all times
- **Trust is surfaced early**: badges sit above the title; reviews are immediately visible with the gold star
- **Color is scarce**: white/blue-charcoal dominates; blue and the single gold star are the only saturated pixels

### Border Radius Scale
- Square (0pt): full-bleed gallery top, map
- Subtle (4pt): inner photo frames, small chips
- Small (6pt): trust badges, code/policy blocks
- Standard (10pt): primary/secondary buttons, grouped cards
- Comfortable (14pt): listing photo cards, bottom sheets
- Large (20pt): hero cards, modal sheets
- Pill (999pt): search bar, filter chips, map price pins
- Circle (50%): gallery overlay buttons, avatars

## 6. Depth & Elevation

Vrbo is mostly flat with functional elevation — photography and price carry the visual weight, not shadows.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | List rows, listing body, settings cells |
| Card (Level 1) | `rgba(0,0,0,0.08) 0 2px 8px` | Results photo cards, trip-board cards |
| Bar (Level 2) | Backdrop blur + 1pt hairline divider | Booking bar, nav bar, tab bar |
| Floating (Level 3) | `rgba(0,0,0,0.16) 0 4px 16px` | Map peek card, context menus, popovers |
| Sheet (Level 4) | `rgba(0,0,0,0.2) 0 -4px 24px` | Date picker, filters, share sheets |
| Modal Overlay | `rgba(0,0,0,0.45)` scrim | Dim behind sheets and full-screen photo grid |

**Shadow Philosophy**: Cards get a soft lift so they read as tappable over white; the booking bar and nav use translucency + a hairline divider rather than a heavy shadow. On dark mode shadows nearly vanish, so floating panels add a 1pt `#2A3038` border as the elevation cue. Photos never carry a shadow — they are full-bleed and edge-anchored.

### Motion
- **Gallery swipe**: 1:1 finger tracking; release snaps to the nearest photo with a 250ms spring (damping 0.85); the active progress dot animates width over 200ms
- **Booking bar price update**: when dates change, the price number cross-dissolves + counts to the new value over 250ms
- **Save heart**: tap scales 1.0 → 1.25 → 1.0 over 280ms with a soft haptic; fill transitions to `#E04444`
- **Map pin select**: pin scales 1.0 → 1.12, recolors to gold over 180ms; peek card slides up 250ms ease-out
- **Card appear (results)**: fade + 8pt slide-up, 60ms stagger per card, 220ms ease-out
- **Push navigation**: native iOS push, 300ms horizontal slide
- **Sheet present**: slides up 300ms ease-out; scrim fades 250ms
- **Tab switch**: instant; active glyph crossfades fill in 120ms
- **Haptics**: soft impact on Book now, light tick on save and tab change, selection feedback on date range endpoints

## 7. Do's and Don'ts

### Do
- Use a bright white canvas (`#FFFFFF`) light / cool blue-charcoal (`#101317`) dark — clean and trustworthy
- Lead every listing with a full-bleed, swipeable photo gallery + photo counter + progress dots
- Keep the booking bar sticky — price (heavy) + dates + blue "Book now" always visible
- Use Vrbo Blue (`#245ABC`) for all primary actions; brighten to `#4F8BF0` on dark for links/pins/outline
- Reinforce the whole-home promise ("Entire home", "Whole home") on cards and the detail screen
- Use exactly one warm color — the gold review star (`#F2B01E`) — for ratings and the selected map pin
- Surface trust badges (Premier Host blue, Instant Book green) above the listing title
- Render map properties as rounded price pins — blue default, gray viewed, gold selected
- Make price one of the loudest type styles on every screen (800 weight)
- Use SF Pro + Dynamic Type — respect the user's text-size setting globally
- Keep chrome minimal: translucent bars, hairline dividers, soft card lifts only

### Don't
- Don't introduce a second accent color — Vrbo is blue with one gold star; nothing else competes
- Don't shadow photos — the gallery is full-bleed and edge-anchored, never a floating card
- Don't bury the price — it must stay visible in the sticky booking bar as the user scrolls
- Don't frame listings as shared rooms — Vrbo is whole-home; the copy and badges must say so
- Don't ship a custom typeface — Vrbo uses the system font; respect Dynamic Type
- Don't use the deep brand blue `#245ABC` for thin links on dark — switch to `#4F8BF0`
- Don't tint the gold star or recolor it per theme — it's constant across light and dark
- Don't over-decorate with gradients or heavy shadows — let photography and price carry the weight
- Don't animate aggressively — motion is calm, 180-300ms ease-out/spring
- Don't use pure black (`#000000`) for body text — `#15181D` near-black is correct
- Don't hide trust badges below the fold — they belong above the title

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Gallery ≈250pt; single-column cards; compact booking bar |
| iPhone 13/14/15 | 390pt | Standard layout; gallery ≈290pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the compact scroll nav |
| iPhone 15/16 Pro Max | 430pt | Gallery ≈360pt; larger price hero; bigger cards |
| iPad (portrait) | 768pt | 2-column results grid; detail = gallery+facts / sticky booking panel |
| iPad (landscape) | 1024pt+ | 3-column results; persistent map split-view |

### Dynamic Type
- Large titles, price hero, listing title, section headers, body: full scale
- Tab labels, trust badges, photo counter, progress-dot legends: FIXED (layout-sensitive)
- Cards grow vertically with text; photo aspect ratio is preserved

### Orientation
- All screens support rotation
- iPad uses split-view: results list/map + listing detail; full-screen photo grid in landscape becomes a multi-column grid
- Gallery supports landscape (wider photos, same paging)

### Touch Targets
- Gallery overlay buttons: 36pt visual, 44pt hit
- Map price pins: pin body is the tap target, ≥ 44pt effective
- Tab bar icons: 22pt glyph, 49pt hit
- Listing card: full-card tap; save heart 36pt visual, 44pt hit
- Book now: full-width bar button, ≥ 50pt tall

### Safe Area Handling
- Top: gallery extends under the status bar; overlay controls inset to the safe area
- Bottom: booking bar and tab bar respect the home indicator
- Keyboard: search and message fields scroll above the keyboard
- Sides: 18pt content inset; gallery and map are full-bleed including safe areas

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (light): `#FFFFFF`
- Canvas (dark): `#101317`
- Surface gray: `#F3F5F8` light / `#21262E` dark
- Divider: `#E1E5EB` light / `#2A3038` dark
- Text primary: `#15181D` light / `#EDEFF2` dark
- Text secondary: `#5A6470` light / `#A3AAB4` dark
- Vrbo Blue: `#245ABC` light / `#4F8BF0` dark (links/pins/outline)
- Vrbo Blue pressed: `#1B4794`
- Sky Blue (support): `#1D6FB8`
- Gold review star: `#F2B01E` (constant across themes)
- Success: `#1F9D57`
- Error / destructive: `#E04444`
- Premier Host badge: `#245ABC` on `rgba(36,90,188,0.12)`
- Instant Book badge: `#1F9D57` on `rgba(31,157,87,0.12)`

### Example Component Prompts
- "Build the Vrbo photo gallery in SwiftUI: a full-bleed `TabView` with `.page` style, ≈290pt tall, square top corners. Add a bottom progress-dot row where the active dot widens to an 18pt pill (`#FFFFFF`), inactive `rgba(255,255,255,0.45)`. Bottom-right: a photo counter pill '1 / 42' (`rgba(16,19,23,0.7)` bg, white SF Pro 12pt w600, leading grid glyph). Float back / share / save circular 36pt buttons (`rgba(16,19,23,0.55)` + blur) over a top-to-bottom scrim. Tap opens a full-screen photo grid."

- "Create the Vrbo sticky booking bar: pinned bottom, ≈76pt + safe area, `rgba(16,19,23,0.97)` + 20pt blur, 1pt `#2A3038` top divider. Leading: price '$486' SF Pro Display 26pt w800 `#EDEFF2` + '/ night' 13pt secondary + an underlined 'Jun 14 – 21 · 7 nights' tappable line. Trailing: a full 'Book now' button — `#245ABC` fill, white 15pt w700, 10pt radius, pressed `#1B4794` + scale 0.98."

- "Render a Vrbo results card: a 4:3 photo with 14pt corners and a save heart top-right (white, `#E04444` when saved). Below: title SF Pro 15pt w600, location 14pt `#A3AAB4`, a gold-star (`#F2B01E`) rating row '4.9 · 186', and price '$486 night' with the number in 16pt w700. Soft card lift `rgba(0,0,0,0.08) 0 2px 8px`. Always include an 'Entire home' label."

- "Build a Vrbo map price pin set: rounded pill bubbles. Default `#245ABC` fill + white 14pt w700 price; viewed `#21262E` fill + `#A3AAB4` text; selected `#F2B01E` fill + `#1A1206` text with a 1.12 scale and a soft shadow. On select, animate scale + recolor over 180ms and slide a peek card up from the bottom over 250ms ease-out."

- "Create a Vrbo trip-board card: horizontal layout — 64pt rounded thumbnail, property name SF Pro 14pt w700 `#EDEFF2`, a facts line 'Outer Banks, NC · 4 BR · Sleeps 8' 12pt `#A3AAB4`, and a gold tag '★ 4.9 · Saved to "Summer 2026"' 11pt w700 `#F2B01E`. Card background `#21262E`, 1pt `#2A3038` border, 12pt radius."

- "Render the Vrbo bottom tab bar: ≈68pt incl. home indicator, tabs Search / Trips / Inbox / Notifications / Account, 22pt glyphs, active tint `#4F8BF0` (filled glyph) inactive `#8A93A0`, labels SF Pro 10pt w500 always shown, translucent blurred background with a 0.5pt `#2A3038` top divider, and a red `#E04444` unread dot on Inbox/Notifications."

### Iteration Guide
1. Canvas is bright white (`#FFFFFF`) light, cool blue-charcoal `#101317` dark — clean, trustworthy, NOT pure black
2. Every listing leads with a full-bleed, swipeable photo gallery + counter + progress dots — photography sells
3. The booking bar is sticky — heavy price + dates + blue "Book now" stays on screen as you scroll
4. Vrbo Blue `#245ABC` is the primary action; brighten to `#4F8BF0` on dark for links/pins/outline
5. Whole-home is the differentiator — say "Entire home" / "Whole home" on cards and detail
6. Exactly one warm color — the gold review star `#F2B01E` — used for ratings and the selected map pin only
7. Trust badges (Premier Host blue, Instant Book green) sit above the listing title, never buried
8. Price is one of the loudest type styles everywhere (800 weight) — Vrbo is a marketplace
9. Typography is SF Pro + Dynamic Type — no custom typeface, respect the user's text size
10. Keep it calm — translucent bars, hairline dividers, soft card lifts; photos never carry a shadow