--- 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 | Role | Value | Where | |------|-------|-------| | Header navy | `#003b95` | Top band, header pill tabs | | Action blue | `#006ce4` | Links, secondary buttons, main action | | Accent yellow | `#ffb700` | Frame around the search fields | | Text | `#1a1a1a` | Titles, body, result names | | Secondary text | `#595959` | Meta lines | | Page | `#ffffff` | Cards and the main surface | | Panel | `#f5f5f5` | Section bands | | Border | `#e7e7e7` | Card and row rules | | Positive | `#008234` | Scores and confirmations | | Negative | `#d4111e` | Alerts and urgency labels | | Tint | `#f0f6ff` | Pale 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.