--- version: alpha name: "Vrbo" website: "https://www.vrbo.com" description: >- An Expedia-owned vacation-rental marketplace whose marketing site uses deep navy-indigo (#191e3b) as the dominant structural color — appearing 2,547 times across text and borders — and a single electric cobalt-blue (#0f51ec, wired as --color__brand__1) as the brand voltage for CTAs, focus rings, and link interactions. Type runs Source Sans Pro across a dense utility hierarchy, with a white canvas and photography-led property cards communicating warmth while the token system underneath is an enterprise-scale design system with 20+ declared color roles. seo: title: "Vrbo Design System for React — navy-indigo canvas, cobalt brand voltage, 18 components" metaDescription: "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. Tokens for React and AI coding tools." highlights: - "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 photography — the page surface is pure white, with vacation-rental property photos supplying all warmth and aspirational tone" - "Enterprise-grade token depth — the 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" tags: - "Travel & Hospitality" - "Marketplaces" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.vrbo.com" title: "Vrbo — official site" description: "Vrbo's public marketing and search site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Vrbo's brand color, and how does it differ from Airbnb's?" answer: "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." - id: "typography" title: "What font does Vrbo use and what substitutes work?" answer: "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." - id: "canvas-color" title: "Why does Vrbo use white instead of a navy or dark canvas?" answer: "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." - id: "component-complexity" title: "Why does Vrbo's token system have 200+ CSS variables?" answer: "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." - id: "green-usage" title: "When does Vrbo use green vs. cobalt blue?" answer: "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." mockups: - "marketing-hero" - "checkout-flow" colors: primary: "#0f51ec" ink: "#191e3b" ink-muted: "#676a7d" ink-faint: "#999ca8" canvas: "#ffffff" surface-1: "#f6f3ee" hairline: "#dfe0e4" hairline-mid: "#818494" positive: "#127d3b" primary-tint: "#e5f0ff" primary-active: "#14398f" shadow: "#0c0e1c" teal: "#08728c" typography: display-md: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 32px letterSpacing: 0 heading-lg: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 28px letterSpacing: 0 heading-md: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 24px letterSpacing: 0 heading-sm: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 22px letterSpacing: 0 body-lg: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 body-sm: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 label-md: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: 0 caption: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 price-display: fontFamily: "\"Source Sans Pro\", system-ui, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 24px letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "8px" lg: "16px" xl: "24px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 24px" height: "48px" button-primary-hover: backgroundColor: "{colors.primary-active}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 24px" height: "48px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 24px" height: "48px" borderColor: "{colors.primary}" button-tertiary: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "12px 16px" height: "48px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 24px" height: "64px" borderColor: "{colors.hairline}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" padding: "0px" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "16px" borderColor: "{colors.hairline}" card-warm: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 16px" height: "48px" borderColor: "{colors.hairline-mid}" text-input-focus: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 16px" height: "48px" borderColor: "{colors.primary}" search-form: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "8px 16px" borderColor: "{colors.hairline}" badge-brand: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: "2px 8px" badge-deal: backgroundColor: "{colors.positive}" textColor: "{colors.canvas}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: "2px 8px" price-lockup: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.price-display}" padding: "0px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## 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 | Token | Size | Weight | Use | |---|---|---|---| | `{typography.display-md}` | 24px | 700 | Page section headers, marketing headlines | | `{typography.heading-lg}` | 20px | 700 | Sub-section titles | | `{typography.heading-md}` | 18px | 700 | Card headings, property names | | `{typography.heading-sm}` | 16px | 600 | Category labels, tab text | | `{typography.body-lg}` | 16px | 400 | Primary running text, form labels | | `{typography.body-md}` | 14px | 400 | Secondary body, card metadata | | `{typography.body-sm}` | 12px | 400 | Tertiary labels, fine print | | `{typography.label-md}` | 14px | 600 | Strong labels, badge text | | `{typography.caption}` | 12px | 400 | Metadata, dates | | `{typography.button-md}` | 16px | 700 | All button labels | | `{typography.nav-link}` | 14px | 400 | Navigation items | | `{typography.price-display}` | 18px | 700 | Property price lockups | ### 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.