Booking.com host and partner discovery · Apify

Design Specification — Booking.com host and partner discovery · Apify

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#1F2123), a vivid accent (#0043CA). All type is set in Inter,sans-serif. Detected font weights: 100, 400, 500, 600, 650, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://apify.com/img/apify-logo/wordmark-white.svg · https://apify.com/img/apify-logo/logomark-32x32.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• radial-gradient(circle, transparent 0%, #ffffff 100%),url(/img/pattern/dash.svg)
• radial-gradient(circle, transparent 0%, #ffffff 100%),url(/img/pattern/particles.svg)

Typography

Primary typeface: Inter — stack: Inter,sans-serif

Font stacks (most used first)

• Inter,sans-serif
• 'GT-Walsheim-Regular',sans-serif
• Inter
• 'IBM Plex Mono',Consolas,'Liberation Mono',Menlo,monospace
• 'ellipsis-font'
• 'GT-Walsheim-Regular'
• Inter Fallback
• Inter,Inter Fallback

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600, 650, 700

Line heights (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 2px #e4e5e6
• inset 0 0 0 2px #246dff
• 0 0 0 2px #d2d3d6

Layout

Container max-width: 1594px

Grid columns (largest detected grid): 40

Breakpoints

• 768px
• 1024px
• 1200px
• 1440px

Animation & Motion

Transitions

• all 0.12s ease-out
• margin 0.3s ease-out
• transform 0.3s ease-out,margin 0.3s ease-out,color 0.3s ease-out
• color 0.12s ease-in-out
• opacity 0.12s ease-out
• 0.4s
• top 0.3s ease-in,transform 0.12s ease-in
• transform 0.3s
• padding 0.3s ease-in
• background-color 0.3s ease-in
• opacity 0.3s ease-in,transform 0.3s ease-in
• transform 0.12s ease-in

Keyframes

@keyframes swiper-preloader-spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }

Animations

• scrolling 72s linear infinite
• none

CTA labels found on page

• Skip to content

Source Design Tokens (CSS custom properties)

:root {
  --color-neutral-text: #1f2123;
  --color-neutral-text-muted: #3d3f43;
  --color-neutral-text-subtle: #6d7178;
  --color-neutral-text-disabled: #c9cbcf;
  --color-neutral-text-on-primary: #ffffff;
  --color-neutral-icon-on-primary: #ffffff;
  --color-neutral-background: #ffffff;
  --color-neutral-background-muted: #f9f9fa;
  --color-neutral-background-subtle: #f4f4f5;
  --color-neutral-background-white: #ffffff;
  --color-neutral-card-background: #ffffff;
  --color-neutral-card-background-hover: #ffffff;
  --color-neutral-border: #d2d3d6;
  --color-neutral-separator-subtle: #e4e5e6;
  --color-neutral-hover: #edeeef;
  --color-neutral-on-surface: rgba(109, 113, 120, 0.12);
  --color-neutral-disabled: #f4f4f5;
  --color-neutral-overflow: #e4e5e6;
  --color-neutral-icon: #4f5257;
  --color-neutral-icon-subtle: #9ea2a8;
  --color-neutral-icon-disabled: #bfc1c5;
  --color-neutral-field-border: #c9cbcf;
  --color-neutral-action-secondary: #d2d3d6;
  --color-neutral-action-secondary-hover: #e4e5e6;
  --color-neutral-action-secondary-active: #d2d3d6;
  --color-neutral-chip-background: #e4e5e6;
  --color-neutral-chip-background-hover: #d2d3d6;
  --color-neutral-chip-background-active: #c9cbcf;
  --color-neutral-chip-background-disabled: #d2d3d6;
  --color-neutral-large-tooltip-background: #ffffff;
  --color-neutral-large-tooltip-border: #e4e5e6;
  --color-neutral-small-tooltip-text: #ffffff;
  --color-neutral-small-tooltip-background: #161718;
  --color-neutral-small-tooltip-border: #1f2123;
  --color-neutral-overlay: #191b22;
  --color-neutral-field-background: #f9f9fa;
  --color-neutral-text-placeholder: #a9acb1;
  --color-primary-text: #246dff;
  --color-primary-text-interactive: #246dff;
  --color-primary-icon: #246dff;
  --color-primary-action: #246dff;
  --color-primary-action-hover: #4788ff;
  --color-primary-action-active: #0043ca;
  --color-primary-field-border-active: #246dff;
  --color-primary-border-subtle: #c2d7ff;
  --color-primary-background: #e0ebff;
  --color-primary-background-subtle: #f0f5ff;
  --color-primary-background-hover: #e0ebff;
  --color-primary-chip-background: #e0ebff;
  --color-primary-chip-background-subtle: #f0f5ff;
  --color-primary-chip-background-hover: #e0ebff;
  --color-primary-chip-text: #0043ca;
  --color-primary-shadow-active: #c2d7ff;
  --color-primary-black-action: #242528;
  --color-primary-black-action-hover: #292b2e;
  --color-primary-black-action-active: #0a0a0b;
  --color-primary-black-background: #1b1c1d;
  --color-primary-black-background-hover: #3d3f43;
  --color-primary-black-chip-text: #f9f9fa;
  --color-success-text: #008a27;
}

Do's and Don'ts

Do

• Do reserve the accent #0043CA for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 400, 500, 600, 650, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-text-primary: #1F2123;
  --color-primary: #246DFF;
  --color-accent: #0043CA;
  --color-surface: #F4F4F5;
  --color-secondary: #08080A;
  --color-text-secondary: #3F475D;
  --color-border: #6D7178;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F9F9FA;
  --color-surface-container: #F4F4F5;
  --color-surface-container-high: #EDEEEF;
  --color-surface-container-highest: #E4E5E6;
  --font-sans: Inter,sans-serif;
  --font-size-display: 115.2px;
  --font-size-headline-lg: 41.6px;
  --font-size-headline-md: 28.8px;
  --font-size-title-lg: 22.4px;
  --font-size-label-sm: 10px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 2px #e4e5e6;
  --shadow-md: 0 0 0 2px #d2d3d6;
  --space-xs: 3.2px;
  --space-sm: 12.8px;
  --space-md: 16px;
  --space-lg: 38.4px;
  --space-xl: 64px;
  --container-max: 1594px;
}