Vrbo DESIGN.md

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

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

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.

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

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