Vrbo

Overview

Vrbo is a global vacation rental marketplace that empowers travelers to discover and book authentic homes and experiences worldwide. The brand serves independent travelers, families, and groups seeking personalized accommodations beyond traditional hotels. The design aesthetic is 'Confident Minimalism'—a clean, accessible interface that prioritizes trust, clarity, and discovery through generous whitespace, purposeful color accents, and photography-forward layouts. The emotional response is one of possibility and ease: users feel empowered to explore, confident in their choices, and excited by the variety of authentic experiences available.

Vrbo's voice is warm, encouraging, and straightforward. The brand speaks to travelers as peers, using conversational language that celebrates individuality and adventure without pretension. Vocabulary emphasizes authenticity ('real homes,' 'genuine experiences'), discovery ('explore,' 'find'), and confidence ('trusted,' 'secure'). The tone avoids corporate jargon, preferring active verbs and human-centered language. Example sentence in Vrbo's voice: 'Um lugar inteiro, só para você—reserve com confiança e comece sua próxima aventura.'

Colors

Vrbo's color system balances trust, energy, and accessibility through a primary accent-driven palette anchored in a clean white canvas. Primary (#0F51EC) is a vivid, confident blue used exclusively on call-to-action buttons, interactive states, and key navigation elements—it signals trust and invites action without overwhelming the interface. Secondary (#127D3B) is a natural green reserved for positive confirmations, deals, and success states, reinforcing the brand's commitment to value and security. Tertiary (#A7183C) is a deep burgundy used sparingly for notifications, warnings, and saved items, creating visual distinction for important user actions. The neutral foundation consists of surface whites (#FFFFFF for primary surfaces, #F3F3F5 for subtle containers), on-surface text in deep na

Typography

Vrbo's type system combines two complementary typefaces to balance personality and legibility: Albra Sans (a geometric, modern sans-serif) anchors headlines and display text with confident weight and distinctive letterforms, while Centra No2 (a humanist sans-serif) handles body, labels, and UI text with warmth and accessibility. Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections and major announcements; Headline-lg (40px, 600 weight, -0.02em) structures page sections and card titles; Headline-md (28px, 600 weight, -0.01em) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) is reserved for introductory paragraphs and prominent descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default for all body copy, fo

Layout

Vrbo employs a fluid 12-column grid system with a maximum container width of 1280px, allowing responsive scaling from mobile (single column, 24px gutter) through tablet (6-8 columns, 24px gutter) to desktop (12 columns, 24px gutter). The page rhythm follows a 'content-first' philosophy: hero sections occupy full viewport height with photography as the dominant visual, search forms overlay the hero at 60% opacity to maintain focus, and content sections below use lg spacing (40px) for vertical separation between major sections and md spacing (24px) for subsection breaks. Cards and property listings use a consistent 24px padding (md spacing) internally, with 12px (sm spacing) gaps between card elements. The container max-width of 1280px ensures readability on ultra-wide displays while maintai

Elevation & Depth

Vrbo's elevation system conveys hierarchy through subtle, naturalistic shadows rather than dramatic depth. Level 1 (Base/No Elevation): flat surfaces with no shadow, used for the page background, input fields at rest, and secondary buttons. Level 2 (Standard Elevation): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, modals, and interactive elements on hover—this creates a gentle lift that signals interactivity without visual heaviness. Level 3 (High Elevation): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) reserved for floating action buttons, dropdown menus, and full-screen modals—

Shapes

Vrbo's shape philosophy is 'Approachable Precision'—rounded corners signal friendliness and accessibility while maintaining a modern, trustworthy aesthetic. Buttons and interactive elements use full radius (2.5rem / 40px border-radius) to create pill-shaped affordances that feel inviting and clickable; this extreme rounding is the brand's signature and appears on all primary CTAs, input fields, and toggle controls. Cards and containers use lg radius (1rem / 16px) for a softer, more approachable feel than sharp corners, balancing modern minimalism with warmth. Secondary containers and badges us

Components

Action Elements Buttons are the primary interaction pattern and use consistent sizing: 48px height with 12px vertical and 24px horizontal padding, full radius (2.5rem), and label-md typography (14px, 600 weight). Primary buttons (#0F51EC background, white text) are used for main CTAs ('Buscar', 'Fazer login'); they transition to #0E47CC on hover with a 200ms ease-out timing and maintain a 0 3px 8px shadow. Secondary buttons use transparent background with a 1px #DFE0E4 border and #0F51EC text; on hover, they fill with #E5F0FF background while maintaining the border. Tertiary buttons are text-only with no background or border, using #191E3B text that shifts to #0F51EC on hover. All buttons include a 200ms transition on background-color and box-shadow properties to provide tactile feedba

Do's and Don'ts

**Do**

• Do use primary blue (#0F51EC) exclusively on CTAs and interactive states—it's the brand's signature accent and should never appear on passive elements.
• Do apply full radius (2.5rem) to all buttons and input fields to maintain the approachable, inviting aesthetic that defines Vrbo's interaction model.
• Do maintain 24px (md spacing) as the default padding and gap value across all components—consistency in whitespace is critical to the clean, organized feel.
• Do use Albra Sans for all headlines and display text (28px and above) and Centra No2 for body and labels to maintain the warm-yet-modern personality.
• Do apply 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and interactive elements on hover—this subtle lift signals interactivity without visual heaviness.
• Do use 1.5x line-height multipliers (28px for 18px text, 24px for 16px) to ensure comfortable reading and accessibility across all screen sizes.

**Don't**

• Don't use primary blue on non-interactive elements like backgrounds, borders, or passive text—it dilutes the signal and confuses user intent.
• Don't apply sharp corners (0px radius) to buttons or input fields—the full-radius pill shape is a core brand signature and must be consistent.
• Don't exceed 1280px container width on desktop or use asymmetric padding—the grid system is rigid by design to maintain visual order.
• Don't mix typefaces within a single text block; use Albra Sans for headlines only and Centra No2 for all body and UI text to avoid visual chaos.
• Don't use shadows heavier than 0 16px 40px or lighter than 0 1px 2px—the elevation system is calibrated for subtle, naturalistic depth.
• Don't apply text-shadow to dark text on light backgrounds or reduce line-height below 1.5x multiplier—legibility and accessibility are non-negotiable.