Travel / iOS / Android / Web

Booking.com

Booking.com designs for density before beauty: a navy header, one action blue, a yellow frame on the search, and the platform system font at 14px so more results fit on a screen.

Download
  • #003B95
  • #006CE4
  • #FFB700
  • #1A1A1A
  • #595959
  • #F5F5F5
  • #008234
  • #D4111E

Color

Every color token in the file, grouped by role.

Brand

  • primary#006CE4
  • on primary#FFFFFF
  • accent#FFB700
  • on accent#1A1A1A

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F5F5F5

Text

  • ink#1A1A1A
  • ink muted#595959

Lines

  • border#E7E7E7
  • scrim#1A1A1A99 (60%)

Status

  • positive#008234
  • negative#D4111E

More

  • header#003B95
  • tint#F0F6FF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Avenir NextAvenir Next is private and not available in open fonts. Shown in Montserrat, the closest open match.
  • Blue SansBlue Sans is private and not available in open fonts. Shown in Inter, the closest open match.
  • BlinkMacSystemFontNot served by an open font library, so it falls back through the file's own stack.
  • display24px / 700 / 32px

    Pack my box with five dozen liquor jugs

  • heading20px / 700 / 28px

    Pack my box with five dozen liquor jugs

  • subheading16px / 700 / 24px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 20px

    Continue to checkout

  • button16px / 500 / 24px

    Continue to checkout

Shape

Corner radius tokens.

  • none0
  • sm4px
  • md8px
  • lg16px
  • circle50%
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs2px
  • sm4px
  • base8px
  • md11px
  • lg12px
  • xl16px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • search field
    search-field
  • tab pill
    tab-pill
  • result title
    result-title
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 111 lines
version: alpha
name: Booking.com-design-analysis
description: "A travel booking site built for density: a deep navy header, one strong action blue (#006ce4), a yellow search frame, 14px system-font rows, and 4px corners on almost every control."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#006ce4"
  on-primary: "#ffffff"
  header: "#003b95"
  accent: "#ffb700"
  on-accent: "#1a1a1a"
  ink: "#1a1a1a"
  ink-muted: "#595959"
  canvas: "#ffffff"
  canvas-subtle: "#f5f5f5"
  border: "#e7e7e7"
  positive: "#008234"
  negative: "#d4111e"
  tint: "#f0f6ff"
  scrim: "#1a1a1a99"

typography:
  # Font note: "Blue Sans" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  # Font note: "Avenir Next" is a private font and is not available in open fonts. Closest open alternative: "Montserrat".
  display:
    fontFamily: "'Avenir Next', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
  heading:
    fontFamily: "'Blue Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 28px
  subheading:
    fontFamily: "BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  body:
    fontFamily: "BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label:
    fontFamily: "BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  button:
    fontFamily: "BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px

rounded:
  none: 0
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px
  circle: 50%

spacing:
  xs: 2px
  sm: 4px
  base: 8px
  md: 11px
  lg: 12px
  xl: 16px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 8px 12px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 36px
    padding: 8px 12px
  search-field:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 58px
    padding: 4px 8px
  tab-pill:
    backgroundColor: "{colors.header}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 11px 16px
  result-title:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.subheading}"
    rounded: "{rounded.none}"
    height: 20px
    padding: 0

Overview

Booking.com is a travel booking site. The design is built for density: a deep navy header, one strong blue for every action, a yellow frame around the search bar, and small 4px corners on nearly every control so more rows fit on screen. [Observed]

What defines the look:

  1. A deep navy header over a white page. #003b95 fills the top band and the pill tabs inside it, and the content below sits on white with #f5f5f5 panels. [Measured]
  2. One strong action blue. #006ce4 carries links, the secondary buttons and the main search action, and it is the only blue used for interaction. [Measured]
  3. Yellow frames the search. #ffb700 wraps the date and guest fields, which is the one saturated warm color on the page. [Measured]
  4. The system font, on purpose. Body, buttons, fields and result titles all render in the platform UI font at 14 on 20. Only the big headings call a brand face. [Measured]
  5. 4px corners almost everywhere. 134 controls on the results page use a 4px corner. 8 appears on cards, and a full pill is reserved for the header tabs. [Measured]

Source for this file: the Booking.com home page and an Amsterdam search results page measured in a browser at 1440 and 390 wide, read on 2026-10-06, with a Paris results page used for the type comparison. The site publishes no design system tokens in the page, so the role names below are ours. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Header navy#003b95Top band, header pill tabs
Action blue#006ce4Links, secondary buttons, main action
Accent yellow#ffb700Frame around the search fields
Text#1a1a1aTitles, body, result names
Secondary text#595959Meta lines
Page#ffffffCards and the main surface
Panel#f5f5f5Section bands
Border#e7e7e7Card and row rules
Positive#008234Scores and confirmations
Negative#d4111eAlerts and urgency labels
Tint#f0f6ffPale blue notice panels

Typography

Three layers. Avenir Next is named first for the large page headings, at 24 on 32 at 700 on the home page and 20 on 28 at 700 at 390. Blue Sans, the brand face, is loaded on the results page and sets the result count heading at 20 on 28 at 700. Everything else falls to the platform UI font: body and result names at 14 on 20, section labels at 16 on 24 at 700, and buttons at 16 on 24 at 500. [Measured]

Avenir Next and Blue Sans are both private. Avenir Next is not served as a web font at all, so it only renders for visitors whose device already has it and everyone else sees the system stack. [Measured]

Shape and spacing

The 4px corner dominates: 134 instances on the results page against 35 at 8px and 23 fully round. Search fields are 58 high with 4 of padding, primary buttons 48 high, secondary buttons and filter controls 36, and the header tabs 44 high pills with 11 by 16 padding. [Measured]

Iconography and motion

Booking ships an icon font, loaded on the results page alongside Blue Sans. Motion was not measured. [Measured for the icon font, Inferred for motion]

Themes

Light only on every page measured. No dark surface or theme toggle was found. [Observed]

Platform: iOS

The Booking.com iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar covering the booking types that the web header carries as pill tabs. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A blue search button, carried over from the web. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Date and guest pickers are expected as sheets, since the web shows them as dropdown panels. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. The web uses the platform UI font, so Dynamic Type would fit the design. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. The web search fields are 58 high and the primary button 48, both above the 44pt minimum. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. The navy header suggests a tinted status bar. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. The web uses a custom icon font rather than a platform set. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the navy, the action blue and the dense row rhythm with the web. [Inferred]

Platform: Android

The Booking.com Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar covering the booking types that the web header carries as pill tabs. [Inferred]

Main action

Expected on Android: Floating action button.

A blue search button. No floating action button was seen on the web, and none is assumed. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Date and guest pickers are expected as bottom sheets, since the web shows them as dropdown panels. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. The web uses the platform UI font, so the system font scale would fit the design. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. The web search fields are 58 high and the primary button 48, both above the 48dp minimum. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. The navy header suggests a tinted system bar. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. The web uses a custom icon font rather than a platform set. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Account deletion and data safety entries were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the navy, the action blue and the dense row rhythm with the web. [Inferred]

Platform: Web

The Booking.com home page and an Amsterdam search results page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. The results page keeps the search bar at the top so a search can be changed in place instead of going back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A navy header holding the mark, currency and language controls, List your property and the account buttons, with a row of fully round 44 high tabs for the booking types underneath. [Measured]

Main action

Expected on Web: Page-level button.

The search button: #006ce4 fill, white text at 16 on 24 at 500, 4px corner, 48 high. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Date and guest pickers open as dropdown panels anchored to their field. A scrim at #1a1a1a99 covers the page behind them. [Measured]

Controls

Expected on Web: Native or custom.

Search fields 58 high inside the yellow frame, filter and sort buttons 36 high with a 4px corner, checkbox filter rows in the left column, and white secondary buttons with blue text. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values. Body stays at 14 on 20 at both widths and the page heading drops from 24 to 20 between 1440 and 390. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Header tabs 44 high, primary buttons 48, search fields 58, secondary and filter buttons 36. A skip link comes first in the tab order. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

A custom icon font loaded with the page. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Register and Sign in sit in the header as white buttons with blue text. Search and results read without an account. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The page deliberately uses the platform UI font for the interface rather than a brand face, which keeps the dense result rows legible at 14px. The brand faces are reserved for headings. [Measured]

Cross-platform consistency

Consistent across the measured widths: the navy header, the action blue, the yellow search frame, the 14 on 20 body and the 4px corner. [Measured]

Intentionally different: at 390 the search fields stack and the header tabs scroll sideways. The apps were not measured. [Measured for web, Inferred for the apps]

Do's and Don'ts

Do

  • Keep the navy for the header band and the blue for actions. They are different roles.
  • Use the yellow only to frame the search, not as a general accent.
  • Set interface text in the platform UI font at 14 on 20.
  • Keep control corners at 4 and reserve the full pill for the header tabs.
  • Use #f5f5f5 bands to separate sections instead of heavy rules.

Don't

  • Don't set result rows in a brand face. The density depends on the system font.
  • Don't use the navy for buttons or the action blue for the header.
  • Don't round cards past 8.
  • Don't use the red for anything other than alerts and urgency.

Known Gaps

  • The booking flow, payment and the signed-in account area were not measured, since they need an account and real money.
  • Booking.com publishes no design system tokens in the page, so every role name above is ours, not theirs.
  • Avenir Next does not load as a web font. On the measuring machine the headings fell back to the system stack, so its rendered shapes were not seen and only the declared stack is recorded.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Motion, the spacing scale and the icon set were not measured.
  • Account deletion and store policy rules were not verified.
  • Blue Sans is private. Inter was chosen as the open alternative after rendering the real face next to candidates at 20px/700, where it matched the measured line width within 0.2 percent and shares the neutral grotesque structure. Libre Franklin matched within 0.0 percent, so this is a judgement call made on letter shape.
  • Avenir Next is private and could not be rendered for a side-by-side, so Montserrat was chosen from the published description of the face, as the closest open geometric sans with a double-storey a. This one is weaker evidence than the other font choices in this file.