What is Vrbo's brand color, and how does it differ from Airbnb's?

Vrbo's brand voltage is cobalt blue (#0f51ec), wired as --color__brand__1. It appears 519 times in the extracted page — 262 as text (links, active labels) and 257 as borders (focus rings, selected tabs, input focus states). Unlike Airbnb's Rausch (#ff385c), which is a warm emotional coral deployed on the primary search CTA and rating dots, Vrbo's cobalt is a transactional trust signal — cooler, more institutional, positioned to read as 'secure booking action' rather than 'aspirational stay.' The dominant structural tone — deep navy-indigo (#191e3b) at 2,547 occurrences — is Vrbo's actual visual signature: it saturates the page with a proprietary near-navy that no other major travel marketplace uses.

What font does Vrbo use and what substitutes work?

The marketing surface runs Source Sans Pro — a free, open-source humanist sans-serif from Adobe released under the SIL Open Font License, available on Google Fonts. The hierarchy spans 12px (caption/label) to 24px (display heading), with weights from 400 (regular) to 700 (bold) used in headings. Source Sans Pro is publicly available at fonts.google.com/specimen/Source+Sans+3 (the updated Source Sans 3 release is identical in character). The system also shows a monospace stack (ui-monospace, SFMono-Regular, Menlo...) used for any code-style elements, but this does not appear in the marketing chrome.

Why does Vrbo use white instead of a navy or dark canvas?

Vrbo's white canvas (#ffffff, declared as --color__background__1 and --background_color__base) is a deliberate choice to showcase property photography. Vacation rental browsing depends on the user being able to evaluate multiple properties at a glance — dark canvases compress photography and add visual weight that slows scanning. The white surface lets property photos render at maximum apparent brightness and warmth. The navy-indigo (#191e3b) is used exclusively as ink (text and border), not as a background fill — appearing as a dark structural tone on a white canvas rather than as a page surface. This is the inverse of how brands like Linear or Spline use their dark tones.

Why does Vrbo's token system have 200+ CSS variables?

Vrbo runs on what appears to be an internal system called 'Vrbo Harmony' — a multi-theme, multi-surface enterprise design system. The CSS declares tokens for 8 loyalty tiers (global_loyalty_low, mid, high, extra_high, each with a bright variant), 3 marketing theme contexts (marketing_1, marketing_2, marketing_3), 4 surface elevation levels, and 6 badge categories (brand, loyalty, deal, notification, sponsored, program). The 200+ variables are not complexity for its own sake — they reflect a product that renders differently for loyalty members, shows deal badges on certain properties, and has dark-mode overlays for photography sections. The DESIGN.md spec captures only the marketing-surface subset that appears in the static extraction.

When does Vrbo use green vs. cobalt blue?

Vrbo uses two distinct chromatic roles: cobalt blue (#0f51ec) for interactive and brand surfaces (CTA buttons, focus rings, selected tabs, links), and green (#127d3b) for positive/confirmation states (deal badges, toggle-on switches, positive price indicators, success banners). The split is clear: cobalt drives action and navigation; green confirms positive outcomes and deals. This two-color system is more nuanced than single-voltage brands like Airbnb — Vrbo's transaction-heavy booking flow needs explicit green confirmation states that a single accent color cannot carry. The green also matches the convention for 'deal' and 'savings' badges in travel marketplaces.

Vrbo Design System

Vrbo's marketing site runs deep navy-indigo as its structural ink with cobalt-blue as the brand CTA voltage, on a white canvas with vacation photography.

About Vrbo DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source vrbo.com

Travel & Hospitality
Marketplaces

Vrbo's marketing page is the operational face of a two-million-listing vacation rental platform, and its design system reflects that scale. The header carries a full search form — destination, check-in, check-out, guests — above the fold in a white bar anchored to the deep navy-indigo brand tone. Below it, a category navigation with icons (Tropical, Beachfront, Cabin, Mountain, Lake...) and destination photography cards carry the visual weight. The page is white-canvas and photography-led in the same way as Airbnb, but where Airbnb's coral-red (#ff385c) is a warm emotional choice, Vrbo's cobalt-blue (#0f51ec) reads as a transactional trust signal — the color of a booking button, a focus ring, a selected date.

The DESIGN.md file captures the system's ground truth: 18 color tokens covering a deep navy-indigo structural ink used 2,547 times, a single cobalt-blue brand voltage (519 occurrences, all as text or border), a pure-white canvas, a warm-cream card surface, three grey steps, a green confirmation color, and a light-blue interaction tint. Twelve typography tokens run Source Sans Pro — a utility-grade humanist sans used at sizes from 12px caption to 24px display — with no weight above 700. Eighteen component definitions cover the full booking search form, property cards, the navigation, and badge variants. The system underneath the marketing surface is an enterprise design system: the CSS exports 200+ variables covering loyalty tiers (low/mid/high/extra_high), marketing themes (marketing_1 through marketing_3), and every badge and dialog state.

Feed this file to an AI coding tool and it reproduces Vrbo's specific moves: deep navy-indigo for all structural text and borders rather than the neutral grey most marketplaces use, cobalt blue reserved exclusively for interactive and brand surfaces, warm-cream cards lifted off the white canvas, and a search-form-first above-the-fold composition. The one implementation note worth flagging: Vrbo's token system is an enterprise design system with hundreds of role-specific variables — the 18 tokens in this spec are the marketing-surface subset, not the complete Vrbo Harmony token vocabulary.

What makes it distinct

Deep navy-indigo dominance#191e3b appears 2,547 times as text and borders, making it the most-used color by a factor of 5x over any other token
Single cobalt CTA voltage#0f51ec wired as --color__brand__1 drives every interactive surface: primary buttons, focus rings, links, selected tabs, and loading spinners
White canvas with warm photographythe page surface is pure white, with vacation-rental property photos supplying all warmth and aspirational tone
Enterprise-grade token depththe design system exports 200+ CSS variables covering loyalty tiers, marketing themes, date-picker states, and badge variants
Green confirmation color#127d3b handles deal badges, positive indicators, and toggle-on states at a distinct hue separate from the cobalt CTA

Live at vrbo.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

vrbo.com

Explore Vrbo

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Vrbo design system FAQ

Common questions about Vrbo's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Vrbo — official site

Vrbo's public marketing and search site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.