Vrbo Design System

Overview

Vrbo's marketing site is a utility-first travel marketplace that uses a near-navy structural ink so consistently it redefines what "dark text" means. Saturated structural authority. Where Airbnb deploys a warm neutral grey for body text and lets its coral-red carry the brand identity, Vrbo saturates every text element and border with a deep navy-indigo that reads as a brand tone even in running body copy. The color appears 2,547 times — 1,277 as text, 1,268 as borders — making it the most-used single hex in the system by a factor of five. The effect is a page that feels authoritative and transactional rather than aspirational, which is appropriate for a platform competing on trust and selection rather than lifestyle aspiration.

The brand voltage sits in contrast: cobalt blue handles every interactive surface — the "Search" button, focus rings on the date picker and guest count, selected tab underlines, loading spinners, and all link text. It appears 519 times, split almost evenly between text (262) and border (257) — evidence of a mature component system where focus states are as carefully engineered as the CTA fills. The pairing of deep navy ink with cobalt-blue interactions creates a blue-on-blue hierarchy that reads as unified rather than redundant because the values are separated by roughly 30 lightness points in OKLCH.

The surface is pure white, the photography is warm and aspirational, and the search form above the fold is the primary UI gesture. The category navigation below the hero (Tropical, Beachfront, Cabin, Mountain, Lake) uses icon chips and scrollable labels that function as the browseable taxonomy. Property cards below show photography, price, and review scores in a familiar 3-column grid.

Key Characteristics:

• Deep navy-indigo as the universal structural ink — text, borders, subheadings, labels — not neutral grey.
• Single cobalt-blue brand voltage for every interactive surface, appearing roughly 50/50 as text and border.
• White canvas with warm-cream card surfaces ({colors.surface-1} — ) for secondary content areas.
• Green as the confirmation color — deal badges, toggle switches, positive pricing — distinct from the blue CTA system.
• Source Sans Pro — a free, openly licensed humanist sans used as the utility workhorse at 12px through 24px.
• Enterprise-depth token system: 200+ CSS variables covering 8 loyalty tiers, 3 marketing themes, and every badge and dialog state.
• 8px default card radius; pill geometry (9999px) for tag chips and search pills.

Colors

Brand

• Primary ({colors.primary} — ): frequency 519 total (262 text, 257 border). Layer: brand, wired as --color__brand__1. The single interactive voltage. CTA button fill, focus ring color, active tab underline, link text color, loading spinner. Not used as a section background — Vrbo reserves cobalt for interaction, not decoration.
• Primary Active ({colors.primary-active} — ): frequency 0 rendered (declared as active-state). Darker navy-blue for button active/pressed states — a deeper cobalt rather than a separate brand signal.
• Primary Tint ({colors.primary-tint} — ): frequency 0 rendered (declared as hover surface). The light blue hover-background for tertiary buttons, action list items, and selected range fills in the date picker.
• Positive ({colors.positive} — ): frequency 8 bg. The confirmation green for deal badges, toggle-selected states, and positive pricing indicators. Used exclusively for outcomes, not for actions.

Surface

• Canvas ({colors.canvas} — ): frequency 95 total (26 text, 38 bg, 31 border). The page floor — pure white. Wired as --color__background__1 and --background_color__base.
• Surface-1 ({colors.surface-1} — ): frequency 6 bg. A warm cream for secondary card surfaces and highlighted content zones — the "Rent your property confidently" CTA section and highlighted deal cards use this tone.

Text

• Ink ({colors.ink} — ): frequency 2,547 total (1,277 text, 1,268 border). The dominant structural color. Not a neutral grey — a deep navy-indigo that carries perceptible hue even in body text, giving the page a proprietary visual tone.
• Ink Muted ({colors.ink-muted} — ): frequency 4 total. Placeholder text, muted subtext, and secondary icon fills. A mid-grey with a slight blue-purple tint that echoes the navy ink.
• Ink Faint ({colors.ink-faint} — ): frequency 5 border. The lightest visible grey in the hierarchy — used for navigation active states, card placeholder backgrounds, and loyalty display text.

Structure

• Hairline ({colors.hairline} — ): frequency 4 total. The standard divider and card border — a barely-warm light grey, wired as --border_color__muted and --light_1__outline_variant.
• Hairline Mid ({colors.hairline-mid} — ): frequency 5 border. The stronger border color for form inputs in their resting state — visible against the white canvas without being as dark as the ink.
• Shadow ({colors.shadow} — ): frequency 3 shadow. Used exclusively as a shadow base — a near-black with blue tint that echoes the navy palette even in drop shadows.
• Teal ({colors.teal} — ): teal for specific informational UI states (not rendered in the marketing surface capture; declared as a system token).

Typography

Font Family

The system runs Source Sans Pro — Adobe's open-source humanist sans-serif released in 2012, now maintained as Source Sans 3. Available on Google Fonts at no cost, it is one of the rare cases where a major marketplace has committed to an open typeface rather than a custom or licensed family.

Hierarchy

Principles

Source Sans Pro is a utilitarian choice — it lacks the editorial distinction of custom typefaces but has excellent legibility across screen sizes and renders well at 12px caption sizes that are common in data-dense travel UIs. The weight scale tops out at 700 (bold) which appears in headings and button labels; body text sits at 400. No ultralight or thin weights appear, consistent with a platform where density and legibility matter more than typographic mood.

Note on Font Substitutes

Source Sans Pro (now Source Sans 3) is freely available at fonts.google.com — it is the substitute. If you need a comparable fallback: Inter has similar proportions at the 14-16px body range and is available as a variable font. Noto Sans is another open alternative with strong multilingual coverage appropriate for a global travel platform.

Layout

Spacing System

• Base unit: 4px (8px as the dominant module).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Card internal padding: {spacing.base} (16px) on property cards; {spacing.lg} (24px) on feature cards.
• Header height: 64px with 24px horizontal padding.
• Footer padding: 48px vertical, 24px horizontal.

Grid & Container

• Above-fold search: The hero is a full-bleed photography background with the Vrbo wordmark and a white search-form card centered at the viewport. The search form carries destination typeahead, date range picker, and guest count selector in a single horizontal row at desktop.
• Category navigation: A horizontally scrollable icon-and-label chip rail (Tropical, Beachfront, Cabin, Mountain, Lake, All-inclusive, Ranch...) below the search bar.
• Property grid: A 3-column responsive grid of property cards at desktop, each showing a photography carousel, price, rating, and review count.
• Max content width: approximately 1280px, with padding to the viewport edge at desktop.

Rhythm

The page alternates between photography-led sections (hero, property grid) and text-led feature sections ("Early booking deals," "Discover what Vrbo is all about," "Go further with the Vrbo app"). Feature sections use the warm-cream surface to differentiate them from the white-canvas property grid. There is no dark-canvas section — Vrbo is a light-mode-only surface.

Elevation

The system uses a shadow-plus-border strategy. Property cards have a visible 1px border in {colors.hairline} and no shadow in the resting state — elevation is expressed by surface contrast (card white against page white, bordered). The {colors.shadow} token is a near-black with blue tint used for overlay shadows (modals, dropdowns). The date picker and guest-count dropdown appear with a soft card shadow using this token as the shadow color — consistent with the brand's navy palette even in shadow form.

Shapes

The radius scale runs from 4px (badges) through 8px (buttons, inputs) to 16px (property cards) and 24px (feature cards), with 9999px (pill) for search input pills and tag chips. The 8px default on buttons and inputs is a moderate-soft tier — not as rounded as consumer apps like Airbnb (12px+ buttons) nor as sharp as utility tools. The category icon chips appear as pills (9999px) which creates visual variety against the rectangular cards.

Components

button-primary — Cobalt-blue fill, white text, weight-700 button label, 8px radius, 12x24 padding, 48px height. The "Search" button in the hero form and the "Rent your property" CTA.

button-primary-hover — Darker cobalt fill for hover/active states — a deeper navy-blue rather than a lightened version.

button-secondary — White fill, cobalt border and text — the ghost variant used for secondary CTAs like "Explore more deals."

button-tertiary — Transparent fill, cobalt text, no border. Used for low-emphasis CTAs ("Learn more," "Show all").

top-nav — White surface, 64px height, navy-indigo text, 1px hairline bottom border. Houses the Vrbo wordmark (left), primary nav links (center-left), and sign-in / list-your-property actions (right).

search-form — White surface, 24px radius, hairline border, 8x16 padding. The above-fold booking form carrying the destination input, date range pickers, and guest count stepper in a single horizontal container.

card — White surface, 16px radius, 1px hairline border, 16px padding. The default property card — photography carousel on top, metadata (price, rating, location) below.

card-warm — Warm-cream surface, 16px radius, 24px padding. Feature content cards on the "Rent your property" and "Go further with the Vrbo app" sections.

text-input — White surface, navy text, 8px radius, 1px grey border, 12x16 padding, 48px height. Standard form inputs in the booking search.

text-input-focus — Same geometry but with cobalt border on focus. Wired to --input__focus__border_color in the system.

price-lockup — Transparent surface, navy text at 18px/700. Property pricing displayed below card photography.

badge-brand — Cobalt fill, white text, caption size, 4px radius. Brand promotion labels.

badge-deal — Green fill, white text, caption size, 4px radius. Deal and discount labels — the only green element in the marketing chrome.

footer — White canvas, muted-grey text, body-small, 48x24 padding. The standard marketing page footer with links and legal.

Do's and Don'ts

Do use {colors.ink} for all body text and structural borders, not a neutral grey. The navy-indigo is Vrbo's most distinctive system decision — replacing it with or removes the brand's single most pervasive visual signature.

Do reserve {colors.primary} exclusively for interactive surfaces: CTAs, links, focus rings, selected states. Vrbo uses cobalt as an action signal, not as a decorative accent — decorative use would dilute the affordance signal.

Do use {colors.positive} for confirmation and deal states, and keep it separate from the cobalt CTA. The two-color interactive system (cobalt for actions, green for outcomes) is a usability choice as much as a design one.

Do trust photography to provide warmth. The page canvas is pure white and the ink is cold navy — the warmth comes entirely from vacation-rental photography. Without property photography, this color system reads as a banking interface, not a travel marketplace.

Don't use {colors.primary-tint} as a card background. It is a hover-state and selection-range fill for interactive elements (button hover, date-range mid-selection). Using it as a static card surface would make static elements look hover-active.

Don't use {colors.surface-1} as a background for the main property grid. It is the warm-cream reserved for feature sections that need to stand out from the standard white canvas — overusing it collapses the visual hierarchy between primary content and feature callouts.

Don't set the primary button radius above 8px. Vrbo's 8px button radius sits in a deliberate middle ground between the tighter 4px of fintech interfaces and the softer 12-16px of consumer social apps. Going to 12px would shift the register toward Airbnb's consumer warmth; going to 4px would read as enterprise software.

Don't introduce a third chromatic role (orange, purple, red) for marketing decorations. The system is dual-voltage: cobalt for interactive, green for positive. Adding a decorative accent would break the semantic clarity of the two-color interactive system — any new color would be interpreted as either an action or a confirmation signal.

Known Gaps

• Loyalty tier components: the CSS declares 8 loyalty tier themes (low, mid, high, extra_high, each with a bright variant) with distinct surface, border, and text tokens — none of these render in the static marketing-surface capture.
• Dark-mode overlay states: photo-overlay text uses dark scrims for legibility; the full overlay system is not captured here.
• Date picker internals: the booking calendar (selected dates, range fills, disabled states, today indicator) is one of the most complex components in the system; only the resting and focus states are captured.
• Map view: the property search can switch to a map view with pin markers and card overlays — a distinct component surface not represented here.
• Mobile navigation: the collapsed mobile header (hamburger menu, bottom-nav bar) behaves differently from the desktop nav captured here.
• Marketing themes 1–3: the CSS declares three distinct marketing theme contexts (marketing_1 through marketing_3) which appear to drive promotional landing-page variants; only the default light theme is captured.
• Animation: the search results carousel and the destination photography hero have entrance animations not captured in the static token extraction.