A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
23tokens
9type steps
2radius steps
10pxspacing base
Vrbo, in one page
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
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#4F8BF0on 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
#245ABCfor 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 —#15181Dnear-black is correct - Don't hide trust badges below the fold — they belong above the title
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Vrbo design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- gold review star: #f2b01e
- Vrbo Blue: #245abc
- Vrbo Blue Pressed: #1b4794
- Vrbo Blue Bright: #4f8bf0
- Sky Blue: #1d6fb8
- Canvas White: #ffffff
- Surface Gray: #f3f5f8
- Surface Pressed: #e7ebf1
- Divider: #e1e5eb
- Dark Canvas: #101317
Type:
- families: SF Pro, SF Pro Display, SF Pro Text
- scale: 10, 12, 14, 15, 16, 18, 21, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 10, 14
- elevation: Selected: `#F2B01E` gold fill, `#1A1206` text, slight scale-up + shadow
Spacing: 10, 12, 14, 16, 24
Rules:
- 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
Avoid:
- 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`
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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#245ABCis 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 (
#245ABClight /#4F8BF0dark): Inline links, "See all photos", host profile. - Discount Strikethrough (
#8A93A0): Original price struck through when a deal applies.
Type scaleRead the full spec
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).
Components and layoutRead the full spec
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
#245ABCat 35% opacity, text at 60%
Secondary / Outline Button ("Contact host" / Save)
- Background: transparent
- Text:
#245ABClight /#4F8BF0dark - Border: 1.5pt
#245ABC/#4F8BF0 - Padding: 12pt vertical, 22pt horizontal
- Corner radius: 10pt
- Font: SF Pro Text 15pt weight 700
- Pressed: background
#245ABCat 8% opacity
Pill Button (Filters / Sort / Map toggle)
- Background:
#F3F5F8light /#21262Edark - 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:
#245ABClight /#4F8BF0dark - 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#E04444when 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), inactivergba(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:
#245ABCfill, white 14pt w700 price - Viewed: neutral surface fill, secondary text (so you can tell what you've seen)
- Selected:
#F2B01Egold fill,#1A1206text, 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
#E04444dot on Inbox/Notifications when unread
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-vrbo {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #101317;
--heading-color: #101317;
--link-color: #245abc;
--link-hover-color: #1c4691;
--border-color: #d4d5d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(16,19,23,0.06);
--card-hover-shadow: 0 6px 18px rgba(16,19,23,0.12);
--header-bg: #101317;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #646668;
--button-bg: #e8920c;
--button-text-color: #000000;
--button-hover-bg: #b87309;
--button-border: none;
--button-border-radius: 14px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #101317;
--button-secondary-hover-bg: #e2e3e3;
--button-secondary-border: 1px solid #d4d5d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #101317;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 14px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- hevy 83.1%
- apple wallet 81.8%
- overcast 80.3%
- grammarly 79.9%
- life360 79.7%
Where this came from
- Source document
ios/design-md/travel/vrbo/DESIGN.md· 25.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.