A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
2radius steps
3pxspacing base
Expedia, in one page
Expedia's iOS app is a deal-forward travel marketplace wrapped in a confident, trip-blue identity. The light canvas is a clean near-white (#FFFFFF / #F5F7FA) and the app's emotional center of gravity is the moment you see a *better price*: bundle savings, member prices, and One Key rewards are surfaced everywhere, almost always in the brand's signature Expedia Yellow (#FFC94D). The app is dense but not cluttered — it leans on full-bleed property and destination photography, big legible price typography, and a yellow "savings" accent that punches against the otherwise blue-and-grey chrome. Where Airbnb whispers and Notion disappears, Expedia *sells*: every card has a reason-to-believe (a strikethrough price, a "−24% Bundle" flag, a "Member price" tag, an "Earn 2,040 One Key cash" line).
The structural anchor is the search-and-results loop. Open the app and you land on a search surface with a segmented mode switch — Stays / Flights / Cars / Packages (Bundle) — sitting above a single tappable search pill ("San Diego, CA · Oct 12–17 · 2 travelers · 1 room"). Tap search and you drop into a vertically scrolling results list of property cards: a 16:10 hero photo with a deal flag top-left and a save-heart top-right, then title, neighborhood, a navy review-score badge ("9.2 Wonderful · 1,847 reviews"), a price block (strikethrough → discounted → "/ night"), and a gold One Key earn line. This card is the workhorse of the entire app and its anatomy is repeated for flights (fare cards) and cars.
Color is purposeful and role-bound. Expedia Yellow #FFC94D is the *savings/deal/loyalty highlight* — bundle tags, member-price flags, the One Key chip, primary "Bundle & save" CTAs. Action Blue #1668E3 is the *interactive* color — links, secondary CTAs, the reserve button, selected states. Expedia Navy #00355F is the *brand/trust* color — the logomark field, review-score badge backgrounds, dark headers. One Key gold #F5C518 is a tightly-scoped *rewards-only* color — One Key cash balances and "earn" lines, never used for generic UI. There is a clear hierarchy: navy says "trusted travel brand," blue says "tap me," yellow says "you're saving money," gold says "this is your loyalty currency."
Typography is Expedia Sans (the company's proprietary geometric humanist family, designed by Pentagram for the 2017+ rebrand), which falls back gracefully to Inter / SF Pro on iOS when the bundled face is unavailable. The hierarchy is product-UI rhythm (display → screen title → section → card title → body → meta → badge), not editorial. Prices are the loudest non-display element: an 18pt 800-weight number with a strikethrough antecedent and a quiet "/ night" suffix. Weights concentrate at 400 (body), 600 (subtitles, badges), 700 (card titles, sections), 800 (display, prices).
Key Characteristics:
- Light near-white canvas (
#FFFFFF/#F5F7FA) light / navy-tinted charcoal (#0E1116) dark — content-forward, deal-forward - Search-and-results loop — segmented Stays/Flights/Cars/Bundle switch → single search pill → vertical results list
- Property/fare result card — 16:10 hero, deal flag (top-left), save heart (top-right), title, location, review-score badge, price block, One Key earn line
- Expedia Yellow (
#FFC94D) = savings/deal/loyalty highlight; never generic chrome - Action Blue (
#1668E3) = interactive (links, CTAs, selection) - Expedia Navy (
#00355F) = brand/trust (logomark, review badge, headers) - One Key gold (
#F5C518) = rewards-only (balances, earn lines, One Key chip) - Navy review-score badge ("9.2 Wonderful · 1,847 reviews") — Expedia's signature trust signal
- Bundle + Save — packaging stay+flight+car for a discounted "Bundle" price (the core monetization gesture)
- Strikethrough → discounted price pattern on nearly every card
- Trips tab — itinerary timeline grouping flights, stays, cars under a single trip
- Bottom tab bar: Search / Saved / Trips / Support / Account
Do's and don'ts
Do
- Use Expedia Yellow (
#FFC94D) strictly for savings/deal/loyalty highlights — bundle tags, member prices, One Key chip, the "Bundle & save" CTA - Put navy
#00355Ftext on yellow, white on Action Blue#1668E3 - Lead every result card with a 16:10 photo; deal flag top-left, save heart top-right
- Show the review-score badge with score + word + count ("9.2 Wonderful · 1,847 reviews")
- Use the strikethrough → discounted price pattern when there is a real saving
- Reserve One Key gold (
#F5C518) exclusively for rewards balances and earn lines - Use Action Blue (
#1668E3) for the primary "Reserve" CTA and all links - Give cards a 16pt gap and a soft
0 4px 12pxshadow so each is a discrete decision - Carry the search-and-results loop: segmented mode switch → search pill → vertical list
- Use a navy-biased dark canvas (
#0E1116), NOT pure black - Animate a brief yellow price flash when a price drops
Don't
- Don't use Expedia Yellow for generic chrome, body text, or non-savings UI — it dilutes the savings signal
- Don't put white text on yellow or yellow text on blue (contrast + brand violation)
- Don't use One Key gold for anything other than rewards (no generic icons, no body accents)
- Don't show a strikethrough price when there is no real discount
- Don't bury the review-score badge — it's the primary trust signal and must front the card
- Don't use pure black (
#000000) for the dark canvas —#0E1116carries the navy bias - Don't make the bundle/savings CTA blue — the highest-intent action is yellow
- Don't over-shadow flat elements (deal flags, badges, One Key chip stay flat)
- Don't crowd the One Key earn line with other copy — it has its own lane
- Don't animate aggressively — motion is functional, 180–320ms ease-out
- Don't replace the segmented mode switch with a dropdown — Stays/Flights/Cars/Bundle is a glanceable, always-visible switch
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Expedia design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Expedia Yellow: #ffc94d
- Action Blue: #1668e3
- Expedia Navy: #00355f
- One Key gold: #f5c518
- Yellow Deep: #ffb31a
- Action Blue Pressed: #0f4fb0
- Navy Soft: #14416b
- Canvas White: #ffffff
- Surface Gray: #f5f7fa
- Surface Pressed: #eceff4
Type:
- families: Expedia Sans, Fallback Stack, Inter, Numerals
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 22
- weights: 400, 600, 700, 800
Shape:
- radius: 8, 14
- elevation: Shadow: `0 4px 12px rgba(0,0,0,0.08)` / `rgba(0,0,0,0.4)` | Pill, 12pt radius, drop shadow `0 2px 6px rgba(0,0,0,0.4)` | Don't over-shadow flat elements (deal flags, badges, One Key chip stay flat)
Spacing: 3, 12, 14, 16
Rules:
- Use Expedia Yellow (`#FFC94D`) strictly for savings/deal/loyalty highlights — bundle tags, member prices, One Key chip, the "Bundle & save" CTA
- Put navy `#00355F` text on yellow, white on Action Blue `#1668E3`
- Lead every result card with a 16:10 photo; deal flag top-left, save heart top-right
- Show the review-score badge with score + word + count ("9.2 Wonderful · 1,847 reviews")
- Use the strikethrough → discounted price pattern when there is a real saving
- Reserve One Key gold (`#F5C518`) exclusively for rewards balances and earn lines
Avoid:
- Don't use Expedia Yellow for generic chrome, body text, or non-savings UI — it dilutes the savings signal
- Don't put white text on yellow or yellow text on blue (contrast + brand violation)
- Don't use One Key gold for anything other than rewards (no generic icons, no body accents)
- Don't show a strikethrough price when there is no real discount
- Don't bury the review-score badge — it's the primary trust signal and must front the card
- Don't use pure black (`#000000`) for the dark canvas — `#0E1116` carries the navy bias
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Brand & Interactive)
- Expedia Yellow (
#FFC94D): Savings/deal/loyalty highlight — bundle tags, member-price flags, One Key chip, "Bundle & save" primary CTA fill (text on it is navy#00355F). - Yellow Deep (
#FFB31A): Pressed state for yellow CTAs and tags. - Action Blue (
#1668E3): Primary interactive — "Reserve" CTA, links, secondary CTAs, selected segment underline, in-card actions. - Action Blue Pressed (
#0F4FB0): Pressed state for blue CTAs. - Expedia Navy (
#00355F): Brand/trust — logomark field, review-score badge background, dark hero overlays, top app bar on detail screens. - Navy Soft (
#14416B): Lighter navy for secondary badges and chips on dark. - One Key Gold (
#F5C518): Rewards-only — One Key cash balance, "Earn X One Key cash" lines, One Key membership chip. Never used for generic UI.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas, card backgrounds. - Surface Gray (
#F5F7FA): App background behind cards, grouped sections. - Surface Pressed (
#ECEFF4): Pressed rows, selected list items. - Divider (
#E3E7ED): Hairline dividers between rows, card borders. - Scrim (
#00000066): 40% black overlay on hero photos for text legibility.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#0E1116): Primary dark canvas — carries a subtle navy bias (NOT pure black) echoing Expedia Navy. - Dark Surface 1 (
#161B22): Card backgrounds, elevated surfaces. - Dark Surface 2 (
#1F2630): Chips, segmented controls, secondary fills. - Dark Divider (
#2A323E): Hairline dividers and card borders. - Dark Scrim (
#00000080): 50% black overlay on hero photos.
Text
- Text Primary Light (
#1A1F26): Primary body and titles on light. - Text Secondary Light (
#5A6573): Metadata, neighborhoods, captions. - Text Tertiary Light (
#8A95A3): Strikethrough prices, disabled. - Text Primary Dark (
#E8EBEF): Primary text on dark. - Text Secondary Dark (
#9AA4B2): Metadata on dark. - Text Tertiary Dark (
#6A7585): Strikethrough prices, disabled on dark.
Semantic
- Success Green (
#1A8B4B): "Free cancellation", high review scores (9.0+ badge), confirmed booking. - Error Red (
#D93A3A): Form errors, "Only 2 rooms left at this price" urgency, cancellation warnings. - Warning Amber (
#E8830C): Price-change alerts, "Prices may rise" banners. - Star Gold (
#FFC94D): Star ratings on properties (shares Expedia Yellow). - Member Price Tint (
#FFC94D1F): 12% yellow background behind member-price callouts.
Review-Score Badge Color Ramp
The navy/blue/green badge that fronts every property — color shifts with score band.
| Score Band | Badge Background | Label Text |
|---|---|---|
| 9.0–10 (Wonderful) | #1A8B4B | Wonderful |
| 8.0–8.9 (Excellent) | #1668E3 | Excellent |
| 7.0–7.9 (Very Good / Good) | #14416B | Good |
| 6.0–6.9 (Pleasant) | #5A6573 | Pleasant |
| < 6.0 | #8A95A3 | — |
Type scaleRead the full spec
Font Family
- Primary:
Expedia Sans(proprietary, by Pentagram for Expedia Group, 2017+ rebrand) — geometric humanist sans tuned for travel commerce: legible price figures, generous x-height, confident bold weights. - Fallback Stack:
'Expedia Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Closest free substitute:
Inter(by Rasmus Andersson, SIL OFL) — matched x-height, geometric construction, excellent tabular figures for prices. - Numerals: Tabular/lining figures for all prices and review scores (so columns of prices align).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Expedia Sans | 32pt | 800 | 1.15 | -0.6pt | Home hero ("Find your next trip") |
| Screen Title | Expedia Sans | 26pt | 800 | 1.2 | -0.4pt | Destination / results header |
| Section | Expedia Sans | 22pt | 700 | 1.25 | -0.2pt | "Bundle + Save deals" |
| Card Title | Expedia Sans | 18pt | 700 | 1.3 | -0.2pt | Property / fare name |
| Price (Now) | Expedia Sans | 18pt | 800 | 1.2 | -0.2pt | Discounted price figure |
| Body | Expedia Sans | 16pt | 400 | 1.5 | 0pt | Descriptions, policy text |
| Card Subtitle | Expedia Sans | 15pt | 600 | 1.35 | 0pt | Neighborhood, "0.4 mi from center" |
| Review Score | Expedia Sans | 15pt | 800 | 1.0 | 0pt | "9.2" inside navy badge |
| Meta | Expedia Sans | 14pt | 400 | 1.4 | 0pt | "1,847 reviews · Free cancellation" |
| Price (Strike) | Expedia Sans | 13pt | 400 | 1.0 | 0pt | Strikethrough antecedent price |
| Badge / Tag | Expedia Sans | 12pt | 600 | 1.0 | 0.2pt | "−24% Bundle", "Member price" |
| One Key Line | Expedia Sans | 11pt | 700 | 1.2 | 0.1pt | "Earn 2,040 One Key cash" |
| Button | Expedia Sans | 16pt | 700 | 1.0 | 0pt | Primary/secondary CTAs |
| Tab Label | Expedia Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
Principles
- Price is the loudest content element: discounted price at 18pt 800, strikethrough at 13pt 400 tertiary, "/ night" suffix at 12pt secondary — the eye lands on savings.
- Tabular figures everywhere prices appear: prices, review scores, point balances must align in vertical lists.
- Weight concentrated at 400 / 600 / 700 / 800: body regular, subtitles/badges semibold, titles/sections bold, display/prices extra-bold. No thin, no black.
- Navy on yellow, white on blue: text on Expedia Yellow is always navy
#00355F; text on Action Blue is always white#FFFFFF. - Dynamic Type first-class: display, titles, body, prices scale; tab labels, badges, One Key lines stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button (Reserve / Continue)
- Shape: Rounded rectangle, 8pt corner radius
- Background:
#1668E3(Action Blue) - Text:
#FFFFFF, Expedia Sans 16pt weight 700 - Padding: 14pt vertical, 28pt horizontal
- Full-width on detail/checkout screens (leading + trailing 16pt insets)
- Pressed: background
#0F4FB0+ scale 0.98 - Disabled:
#1668E3at 38% opacity
Savings / Bundle Button (Bundle & save)
- Shape: Rounded rectangle, 8pt corner radius
- Background:
#FFC94D(Expedia Yellow) - Text:
#00355F(Expedia Navy), Expedia Sans 16pt weight 700 - Padding: 14pt vertical, 28pt horizontal
- Pressed: background
#FFB31A+ scale 0.98 - Used for the package/bundle conversion CTA — the highest-intent action
Secondary / Outline Button (Add a flight)
- Background: transparent
- Text:
#1668E3(Action Blue) - Border: 1pt
#1668E3 - Padding: 12pt vertical, 20pt horizontal
- Corner radius: 8pt
- Pressed: background
#1668E31A(10% blue)
Text Button (See all 38 deals)
- Font: Expedia Sans 14pt weight 600
- Color:
#1668E3 - No underline; chevron trailing optional
- Pressed: 60% opacity
Icon Button (Save heart)
- Size: 20pt glyph in 30pt circular hit area
- On hero photo: filled-black-40% circle behind for contrast
- Unsaved: hollow heart,
#FFFFFFstroke 1.8pt,rgba(0,0,0,0.4)fill - Saved: filled
#1668E3with#FFFFFF1.6pt stroke - Toggle: scale-bounce 1.0 → 1.2 → 1.0 in 220ms + soft haptic
Core Atoms
Property / Result Card
- Container:
#FFFFFFlight /#161B22dark, 16pt corner radius, 0.5pt#E3E7ED/#2A323Eborder, subtle shadow0 4px 12px rgba(0,0,0,0.08)light /0 4px 12px rgba(0,0,0,0.4)dark - Hero photo: full-width, 16:10 aspect ratio, square top corners (clipped to card radius)
- Deal flag (top-left, 12pt inset):
#FFC94Dbackground,#00355Ftext, Expedia Sans 12pt w800, 6pt corner radius, 4pt vertical / 9pt horizontal padding ("−24% Bundle", "Member price") - Save heart (top-right, 10pt inset): see Icon Button
- Body padding: 12pt top, 14pt horizontal, 14pt bottom
- Title: Expedia Sans 18pt w700
- Subtitle (location): Expedia Sans 15pt w600 secondary, 3pt below title
- Review-score row (8pt below subtitle): navy badge (
#14416B/#1A8B4B/#1668E3per band) with white 15pt w800 score + 6pt gap + word ("Wonderful") in 12pt w700 + " · 1,847 reviews" in 12pt secondary - Price row (10pt below): optional strikethrough
#8A95A313pt + discounted#1A1F2618pt w800 + "/ night" 12pt secondary - One Key earn line (7pt below): gold dot/coin + "Earn 2,040 One Key cash" Expedia Sans 11pt w700
#F5C518
Flight / Fare Card (variant of result card)
- Top row: airline logo (24pt) + airline name + cabin
- Center: depart time → duration arc with stops dots → arrive time (times Expedia Sans 18pt w700, airport codes 13pt secondary)
- Bottom: price block (right-aligned, 18pt w800) + "Round trip" 12pt secondary + One Key earn line
- "Hacker fare" / "Self-transfer" badge: amber
#E8830Cchip when mixed-carrier
Review-Score Badge
- Rounded rectangle, 6pt corner radius
- Background per score band (see §2 ramp)
- Text: white, Expedia Sans 15pt w800
- Padding: 3pt vertical, 7pt horizontal
- Always paired with a word label and review count to its right
Price Block
- Strikethrough antecedent: Expedia Sans 13pt w400
#8A95A3,line-through - Discounted/now: Expedia Sans 18pt w800
#1A1F26(or#E8EBEFdark) - Period suffix: Expedia Sans 12pt w400 secondary, baseline-aligned
- "Member price" / "Bundle price" label: 12pt w600, color = green
#1A8B4Bfor member, navy#00355Fon yellow tag for bundle
One Key Chip / Pill
- Pill, 500pt corner radius
- Background:
#1F2630dark /#FFC94D1Flight - Leading 7pt gold dot or coin glyph
- Text: Expedia Sans 11pt w700
#F5C518 - Content: "12,480 One Key" or "$124.80 One Key cash"
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
#FFFFFF/#0E1116with 0.5pt top divider#E3E7ED/#2A323E - Tabs (5): Search, Saved, Trips, Support, Account
- Icon size: 22pt
- Active:
#1668E3(Action Blue), filled glyph - Inactive:
#8A95A3/#6A7585, outline glyph - Labels: Expedia Sans 10pt w600, always shown
- No pill indicator — color + fill change only
Top App Bar (Detail / Results)
- Height: 44pt + safe area
- On photo hero: transparent → solidifies to
#FFFFFF/#0E1116on scroll - Leading: back chevron (white over photo, primary text once solid)
- Trailing: share + save heart
- Title: appears centered on scroll past hero
Segmented Mode Switch (Stays / Flights / Cars / Bundle)
- 4 equal segments, each a 10pt-radius pill, 9pt vertical padding
- Inactive:
#F5F7FA/#1F2630background,#5A6573/#9AA4B2text, 0.5pt divider border - Active:
#FFC94Dbackground,#00355Ftext, no border - Transition: 200ms ease-out background + text color crossfade
Input Fields
Search Pill (the entry point)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Single column; hero photo 16:10; segmented switch labels may abbreviate |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; sticky CTA respects safe area |
| iPhone 15/16 Pro Max | 430pt | Larger hero photos; 2-line meta has more room |
| iPad (portrait) | 768pt | 2-column results grid; detail in split view (list + detail) |
| iPad (landscape) | 1024pt+ | Results list + persistent map pane side-by-side |
Dynamic Type
- Display, screen title, section, card title, body, prices: full scale
- Tab labels, deal flags/badges, One Key lines, review-score number: FIXED (layout-sensitive)
- Prices keep tabular figures at every scale
Orientation
- iPhone: portrait-primary; landscape supported on detail/photo gallery
- iPad: full rotation; landscape unlocks side-by-side list + map
Touch Targets
- Save heart: 30pt circle hit (20pt glyph)
- Tab bar icons: 22pt glyph, 44pt hit
- Segmented switch segment: full segment height (≥ 36pt)
- Search pill: full 52pt height tappable
- Primary CTA: ≥ 48pt tall
Safe Area Handling
- Top app bar respects safe area + Dynamic Island
- Sticky CTA bar and bottom tab respect home indicator
- Map result carousel floats above bottom safe area
- Keyboard: search form scrolls above keyboard; date picker is a sheet above it
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-expedia {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #986900;
--link-hover-color: #654600;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #ffc94d;
--button-text-color: #000000;
--button-hover-bg: #ffba1a;
--button-border: none;
--button-border-radius: 14px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 14px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/travel/expedia/DESIGN.md· 26.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.