UI Skillbook
2

Expedia DESIGN.md

Brands

Travel booking with royal-blue trust signals, search-led layouts, and marketplace clarity. Expedia's public site uses strong blue framing, white cards, rounded search modules, and broad travel category browsing.

Raw DESIGN.md

At a glance

Group
Brands
Main color
#1668e3Blue design systems
Fonts
InterSF Mono

Colors in this file

  • #dce5f5

    Unnamed

  • #1668e3

    Unnamed

  • #1f2937

    Unnamed

  • #003e9a

    Unnamed

  • #ffffff

    Unnamed

  • #f5f8ff

    Unnamed

  • #6b7280

    Unnamed

Travel booking with royal-blue trust signals, search-led layouts, and marketplace clarity. Expedia's public site uses strong blue framing, white cards, rounded search modules, and broad travel category browsing.

1. Visual Theme & Atmosphere

Overall Aesthetic

Expedia feels like travel planning organized into a high-trust booking marketplace.

Mood & Feeling

  • Travel-ready
  • Mainstream
  • Helpful
  • Search-first
  • Trustworthy

Design Density

Medium density. Many travel products and offers are present, but the search-led frame organizes them.

Visual Character

  • Royal blue trust anchors
  • White cards and search surfaces
  • Rounded trip-planning modules
  • Large destination imagery

2. Color Palette & Roles

TokenHexRole
--expedia-blue#1668E3Primary action
--expedia-blue-deep#003E9AStrong support blue
--expedia-white#FFFFFFMain surface
--expedia-surface#F5F8FFBackground
--expedia-ink#1F2937Text
--expedia-muted#6B7280Secondary text
--expedia-border#DCE5F5Borders

3. Typography Rules

Font Stack

css--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 54/700, H1 38/700, H2 28/700, Body 16/400, Small 14/400

Typography Philosophy

Use highly readable booking-marketplace typography with strong search and conversion hierarchy.

4. Component Stylings

css.button-primary { background:#1668e3; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#1f2937; border:1px solid #dce5f5; border-radius:999px; min-height:44px; padding:0 18px; }
.card { background:#fff; border:1px solid #dce5f5; border-radius:20px; }
.search-shell { background:#fff; border:1px solid #dce5f5; border-radius:20px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

  • Lead with trip search and travel category selection
  • Keep recommendation and promo cards clearly segmented
  • Use destination imagery to add aspiration without losing utility

6. Depth & Elevation

Expedia uses search-card elevation with clean rounded booking modules.

7. Do's and Don'ts

Do

  • Keep travel search central
  • Use blue as a trust anchor
  • Preserve marketplace scanability

Don't

  • Don’t overdo luxury editorial styling
  • Don’t hide booking actions under decorative imagery

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack booking inputs and recommendation cards
  • Keep search CTA visible at all times

9. Agent Prompt Guide

textDesign this like Expedia: blue-led travel-booking marketplace UI with white rounded search cards, practical trip-planning hierarchy, destination imagery, and high-trust mainstream booking design.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/expedia.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "expedia" })

Related Design.md files

Selectstar

Brands · Inter

Selectstar (셀렉트스타) is a Korean AI-evaluation and data company whose homepage reads like a serious research-grade product rather than a flashy startup pitch. The atmosphere is calm, institutional, and blue — a light…

Shiftee

Brands · Inter

Shiftee (시프티) is a Korean workforce-management company, 주식회사 시프티, based in Gangnam, Seoul. Its company page tells the product's arc in three facts: the service launched in 2017 as an attendance-management (근태관리) tool…

Atlassian

Brands · Charlie Display

Work coordination software with sharp enterprise clarity and bright blue structure. Atlassian's public site uses Charlie Display and Charlie Text, with white surfaces, pale blue support backgrounds, deep navy text,…

Canny

Brands · Inter

Customer feedback management platform with a clean, upvote-centric aesthetic — white surfaces, blue brand accents, and feedback-board-first UI patterns.

Deel

Brands · Inter

Global HR and payroll design with bold blue identity, compliance-forward surfaces, clean data tables, and multi-currency clarity.

Wix

Brands · Wix Madefor

Friendly no-code web-design platform with bright utility color and high customization energy. Wix combines the custom Madefor typeface, bold brand colors, theme-driven site styling, and flexible visual tooling to…

All Design.md filesBrowse by font