Book now, pay at the property
FREE cancellation on most rooms
Why Booking.com?
01 / Colors
Semantic roles extracted from the live homepage.
brandBlue
#003B95
Header/Hero
#003B95
Header/Hero
accent
#006CE4
CTA/links
#006CE4
CTA/links
searchYellow
#FFB700
Search shell
#FFB700
Search shell
ink
#1A1A1A
Main text
#1A1A1A
Main text
muted
#595959
Metadata
#595959
Metadata
background
#F5F5F5
Alt panels
#F5F5F5
Alt panels
border
#E7E7E7
Cards
#E7E7E7
Cards
error
#D4111E
System warning
#D4111E
System warning
02 / Typography
Find deals
Display 48/52 800
Trending destinations
Section H2 24/32 700
Quality Inn Panguitch
Card title 16/24 700
Panguitch, United States
Body/meta 14/20
03 / Buttons and controls
Real button variants and booking-specific controls.
Domestic citiesUSDGenius
04 / Cards
Earn 6% in Travel Credits on stays
Promotion cards are white, bordered, compact and CTA-driven.
Genius Rewards Visa
Travel Credits
Guesthouse
Quality Inn Panguitch near Bryce Canyon
Panguitch, United States
Starting from $95
Hotel
Ashland Hills Hotel & Suites
Ashland, United States
Starting from $145
Guesthouse
Cambria Pines Lodge
Cambria, United States
Starting from $179
Resort
Paris Las Vegas Hotel & Casino
Las Vegas, United States
Starting from $154
05 / Destination discovery
Photo tiles use image color, a dark top overlay and white destination names.
Las Vegas 🇺🇸
Orlando 🇺🇸
New York 🇺🇸
Tokyo 🇯🇵
Atlanta 🇺🇸
06 / Brand-specific product patterns
Search shell
Yellow booking panel
4 px yellow frame, white segments, one dominant blue CTA. This is the main conversion primitive.
Trust score
Rating grammar
Score badge on brand blue, text quality, review count. Built for fast comparison.
Loyalty
Genius layer
Blue Genius labels, save-money modal and sign-in promo link account creation to discounts.
Marketplace
Data-dense cards
Type, name, location, badge, reviews and price stay in a stable order across carousels.
Discovery
Travel taxonomy
Footer and link grids expose countries, regions, cities, property types and places of interest.
Controls
Floating circles
Heart and carousel arrows are circular white overlays with subtle shadow.
07 / Forms, popovers and dropdowns
Datepicker popover
Calendar/Flexible tabs, month heading, dense 7-column grid.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Occupancy popover
Adults2
Children0
Rooms1
Error state: Please enter a destination.
08 / Spacing
09 / Radius and elevation
4
8
12
pill
circle
Border-only card
Search shadow
Popover shadow
10 / Loyalty and conversion band
Travel more, spend less. Save 10% or more at participating properties - just look for the blue Genius label.
11 / Footer and link taxonomy
12 / Extracted component tokens
header.height: 56px header.background: #003B95 productNav.item.padding: 11px 16px productNav.active.border: 1px solid #FFFFFF searchShell.background: #FFB700 searchShell.gap: 4px searchShell.radius: 8px searchSegment.background: #FFFFFF searchSegment.minHeight: 58px searchButton.background: #006CE4 button.radius: 4px button.hover: #0057B8 card.border: 1px solid #E7E7E7 card.radius: 8px propertyCard.width: 230-260px propertyPhoto.height: 138px favoriteButton.size: 36px ratingBadge.background: #003B95 ratingBadge.radius: 4px 4px 4px 0 popover.shadow: 0 8px 24px rgba(26,26,26,.18) container.maxWidth: 1128px