Booking.com Design System Deep Dive

1. Brand Overview

Booking.com’s interface is exactly what you’d expect from a global travel giant: functional, familiar, and tuned for conversion. This is not a brand chasing aesthetic experimentation — it’s about clarity, speed, and trust. Their design language is utilitarian with splashes of brand blue that anchor the experience. It’s built for a diverse audience: solo travelers, business bookers, families browsing on mobile in an airport lounge. Every pixel is there to make the booking process faster and more confident.

The vibe: corporate clarity meets friendly accessibility. The typography is clean and modern (Avenir Next for branding, system-ui for UI practicality). Colors are minimal: deep blues for brand, white for space, neutral grays for structure. There’s no elaborate gradient work or ornamental illustration — the design’s job is to get you to your destination, not win a design award.

The philosophy is clearly “reduce friction.” You’ll notice small border radiuses on inputs and cards (4px, 8px), but pill-shaped CTAs get the dramatic 9999px rounding. Shadows are subtle (rgba(26,26,26,0.16)), just enough to separate layered elements without feeling heavy. Spacing is systematic — an 8px grid with occasional odd values like 11px padding for buttons.

For a brand serving nearly every market in the world, accessibility is critical. High contrast blues against white backgrounds are consistent. Link colors shift on hover to neutral grays — a bit unusual, as many brands keep link colors on hover for recognition. This choice makes hovered links feel more “clickable” by changing state visibly.

This system is not about visual delight — it’s about scale and performance. Every design decision supports a massive, multilingual, mobile-first product. It’s a design system that says: “We know you’re here to book. Let’s make that happen fast.”

2. Color System

2.1 Primary Colors

The primary brand color here is a deep navy blue #003b95 (rgb(0,59,149)) paired with a brighter accent blue #006ce4 (rgb(0,108,228)). The deep blue communicates trust, stability, and authority — essential psychological cues in travel booking. The bright blue is used for CTAs, links, and interactive states. This dual-blue approach keeps the interface cohesive while allowing emphasis where needed.

Competitor comparison: Expedia leans more toward golden yellows, Airbnb goes soft and warm with coral. Booking.com’s blues feel more corporate and globally neutral — they don’t risk alienating any demographic.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid: dark text #1a1a1a on white easily passes WCAG AAA for normal text. Bright blue #006ce4 on white also passes AAA for large text and AA for normal text — fine for link visibility. The hover state for links shifts to #565656 (rgb(86,86,86)), which lowers contrast but still passes AA against white backgrounds.

No evidence of dark mode here — all colors assume a light background.

2.4 Usage Guide

• Works well: Bright blue links on white, deep blue headers on light backgrounds.
• Avoid: Bright blue on deep blue — insufficient contrast.
• Pairing: White text on deep blue for CTA clarity. Neutral gray for secondary actions.
• Hover states: Generally shift from brand blue to gray — maintain recognition by ensuring context around the link is clear.

3. Typography

3.1 Font Families

Two main families:

• Avenir Next — used for headings and brand typography. Fallbacks: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial.
• system-ui — used for UI text, buttons, captions. Same fallback stack.

No Google Fonts or Adobe Fonts involved — likely self-hosted or OS-native. No variable fonts.

3.2 Type Scale

3.3 Hierarchy

Clear hierarchy: massive 48px for hero headings, stepping down to 24px for secondary headings. Buttons are comfortably large — 20px for major actions, 14px for small pills. Line heights are tight for headings, looser for body and captions. Readability is high, but the mix of Avenir Next and system-ui means headings feel branded while body text feels OS-native.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.
Values: 1px, 2px, 4px, 8px, 11px, 12px, 16px, 24px, 32px, 64px, 78px, 212px, 267.5px, 272px.

Odd ones: 11px padding on pill buttons — a practical fit for text height. Large jumps like 212px are probably hero section heights.

4.2 Layout

Breakpoints:

• 400px, 426px — small mobile devices.
• 530px, 550px — small tablets.
• 600px — mid-size tablet.
• 896px — desktop threshold.

Responsive approach: likely fluid grids with fixed breakpoints for major layout shifts. No max container width listed — probably full-width with content constraints.

5. Visual Elements

Border Radius

Values:

• 4px — small buttons, inputs.
• 4.36px (slightly odd) — specific div styling, maybe image masking.
• 8px — cards, larger buttons.
• 9999px — pill buttons, avatars.
• 50% — perfect circles for navigation arrows.

Shadows

Single shadow: rgba(26, 26, 26, 0.16) 0px 2px 8px 0px — subtle, functional.

Borders

Mostly 1px solid lines:

• Green (rgb(0,130,52)) — probably success states.
• Light gray (rgb(231,231,231)) — separators.
• White — on dark backgrounds.
• Occasional blue (rgb(0,108,228)) — focus states.

6. Components

6.1 Buttons

Primary pill button (9999px radius):

• Default: transparent background, white text, 11px 16px padding, white border.
• Hover: white background, white text (odd — likely text changes via JS).
• Active: dark green background, white text.
• Focus: bright blue background (rgb(30,174,219)), black border.

Secondary rectangular button (4px radius):

• Default: white background, dark text, 4px 8px padding.
• Hover: bright blue background, white text.
• Focus: same as hover but with black outline.

6.2 Links

Five styles:

• Bright blue (#006ce4) → hover gray.
• Standard blue (rgb(0,0,238)) → hover gray.
• White links → hover gray.
• Neutral gray links → hover gray.
• Dark text links → hover gray.

No underlines — recognition depends on color.

6.3 Forms

Text inputs:

• Default: transparent background, dark text, 4px radius.
• Focus: bright blue background, white text, black border.

Checkboxes:

• Default: transparent, no border.
• Focus: same blue background change.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-dark: #595959;
  --color-white: #ffffff;
  --color-deep-blue: #003b95;
  --color-bright-blue: #006ce4;
  --color-text-primary: #1a1a1a;
  --color-transparent: transparent;
  --color-hover-gray: #565656;
  --color-success-green: #008234;
  --color-light-gray: #e7e7e7;
  --color-link-blue: #0000ee;
  --color-focus-blue: #1eaedb;

  /* Typography */
  --font-heading: "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  --font-size-h1: 48px;
  --font-size-h2: 24px;
  --font-size-button-lg: 20px;
  --font-size-button-sm: 14px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-78: 78px;
  --space-212: 212px;
  --space-267-5: 267.5px;
  --space-272: 272px;

  /* Radius */
  --radius-sm: 4px;
  --radius-sm-odd: 4.36px;
  --radius-md: 8px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-md: rgba(26, 26, 26, 0.16) 0px 2px 8px 0px;
}

8. AI Coding Assistant Prompt

# Booking.com Design System Specification

You are a Booking.com design expert. Build UIs matching their visual language exactly.

## Brand Context
Booking.com prioritizes clarity, speed, and trust. The design is utilitarian and conversion-focused, with minimal ornamentation. Brand blue anchors the experience, supported by neutral grays and white space.

## Color Palette
- Neutral Dark: #595959 — secondary text, icons
- White: #ffffff — backgrounds, text on dark
- Deep Blue: #003b95 — brand primary accents
- Bright Blue: #006ce4 — links, primary actions
- Text Primary: #1a1a1a — main body text
- Transparent: transparent — neutral UI backgrounds
- Hover Gray: #565656 — link hover state
- Success Green: #008234 — success borders
- Light Gray: #e7e7e7 — separators
- Link Blue: #0000ee — alternate link color
- Focus Blue: #1eaedb — focus backgrounds

## Typography
- Headings: "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial
- UI Text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial

| Level           | Size   | Weight | Line Height | Use For           |
|-----------------|--------|--------|-------------|-------------------|
| H1              | 48px   | 700    | 1.29        | Hero titles       |
| H2              | 24px   | 700    | 1.33        | Section headings  |
| H2 Light        | 24px   | 400    | 1.33        | Subheadings       |
| Button Large    | 20px   | 500    | 1.40        | Main CTAs         |
| Button Small    | 14px   | 500    | 1.43        | Secondary CTAs    |
| Body            | 16px   | 500    | 1.50        | Content text      |
| Caption         | 14px   | 400    | 1.71        | Descriptive text  |
| Caption Bold    | 14px   | 700    | 1.43        | Emphasized labels |
| Caption Small   | 12px   | 400    | 1.50        | Metadata          |

## Spacing & Grid
Base: 8px grid.  
Scale: 1px, 2px, 4px, 8px, 11px, 12px, 16px, 24px, 32px, 64px, 78px, 212px, 267.5px, 272px.  
Use multiples of 8px for layout spacing. Odd values reserved for component-specific padding.

## Border Radius
- sm: 4px — inputs, small buttons
- sm-odd: 4.36px — specific masked elements
- md: 8px — cards
- full: 9999px — pill buttons
- circle: 50% — avatars, round icons

## Shadows & Depth
- Shadow-md: rgba(26,26,26,0.16) 0px 2px 8px — subtle depth for elevated elements.

## Component Specifications

### Primary Button (Pill)
Default:  
```css
background: transparent;
color: #ffffff;
padding: 11px 16px;
border-radius: 9999px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 500;
```
Hover:  
```css
background: #ffffff;
color: #ffffff;
opacity: 0.9;
```
Active:  
```css
background: rgb(44, 100, 21);
border: 1px solid rgba(162,192,169,0.5);
color: #ffffff;
```
Focus:  
```css
background: #1eaedb;
border: 1px solid #000000;
color: #ffffff;
opacity: 0.9;
outline: 0;
```

### Secondary Button (Rectangular)
Default:  
```css
background: #ffffff;
color: #1a1a1a;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 500;
```
Hover/Focus:  
```css
background: #1eaedb;
color: #ffffff;
opacity: 0.9;
outline: 2px solid #000000;
```

### Navigation Links
Default: no underline, brand blue (#006ce4) or alternate blue (#0000ee).  
Hover: shift to #565656.

### Input Fields
Default: transparent background, dark text, 4px radius.  
Focus: background #1eaedb, white text, border 1px solid black.

## Layout & Responsive Rules
Breakpoints:  
- Mobile < 400px  
- Small tablet: 426px–530px  
- Medium tablet: 550px–600px  
- Desktop: > 896px

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes.
- Focus indicators: solid border or outline with brand/focus color.
- Hover changes both color and background for buttons.

## DO List
- Use only colors from palette.
- Maintain 8px spacing grid.
- Use Avenir Next for headings, system-ui for body.
- Apply full radius only to pill buttons.
- Keep shadows subtle — avoid heavy drop shadows.

## DON'T List
- Don't use non-palette colors.
- Don't mix sharp and fully rounded corners in the same component.
- Don't underline links unless accessibility requires.
- Don't change button font sizes outside set scale.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: transparent;
  color: #fff;
  padding: 11px 16px;
  border-radius: 9999px;
  border: 1px solid #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #fff; color: #fff; opacity: 0.9; }
.btn-primary:focus { background: #1eaedb; border: 1px solid #000; }
```

Secondary Button:
```css
.btn-secondary {
  background: #fff;
  color: #1a1a1a;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.btn-secondary:hover { background: #1eaedb; color: #fff; }
```

Input:
```css
.input {
  background: transparent;
  color: #1a1a1a;
  border-radius: 4px;
  padding: 4px 8px;
}
.input:focus {
  background: #1eaedb;
  color: #fff;
  border: 1px solid #000;
}
```

9. Summary

TL;DR — Booking.com’s design system is utilitarian: deep blues for trust, white space for clarity, OS-native typography for speed. An 8px grid keeps spacing consistent, with occasional odd paddings for fit. Buttons are either small rounded rectangles or massive pills, shadows are subtle, and link hover states shift to gray.

Brand Keywords: trust-first, conversion-focused, globally-neutral, utilitarian-clean