# Booking.com

> `booking@1.0.0`

Booking.com is a global online travel agency — accommodations, flights, car rentals, attractions — founded in Amsterdam in 1996 and acquired by Priceline (now Booking Holdings) in 2005. The brand identity is utilitarian rather than expressive: the deep Booking Blue (#003580) wordmark and chrome carry the brand against dense, information-rich product surfaces. A secondary Booking Yellow is used historically for the "Genius" loyalty program and high-priority CTAs. The voice is direct, transactional, and trust-oriented; the brand chrome stays out of the way of the inventory.


**Tags:** `booking`, `travel`, `hospitality`, `ota`, `brand`, `navy`, `blue`, `light-first`

## Atoms

### Palette

**Booking.com** · `booking@1.0.0` · Proprietary — All Rights Reserved

> Booking.com's palette is built around the corporate Booking Blue (#003580) — a deep navy that has carried the wordmark and the primary chrome since the company's earliest digital identity. The blue reads against a white canvas, with a secondary yellow used historically for the "Genius" loyalty program and high- priority CTAs. Booking is a light-first, dense-information UI — the palette is utilitarian and ramp-oriented rather than expressive. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `booking-blue` | Booking Blue | `#003580` |
| `booking-blue-deep` | Booking Blue Deep | `#002A66` |
| `booking-blue-bright` | Booking Blue Bright | `#0071C2` |
| `booking-yellow` | Booking Yellow | `#FEBB02` |
| `booking-ink` | Booking Ink | `#1A1A1A` |
| `booking-charcoal` | Booking Charcoal | `#333333` |
| `booking-graphite` | Booking Graphite | `#6B6B6B` |
| `booking-mist` | Booking Mist | `#E6E6E6` |
| `booking-fog` | Booking Fog | `#F5F5F5` |
| `booking-white` | Booking White | `#FFFFFF` |
| `booking-success` | Booking Success | `#008009` |
| `booking-error` | Booking Error | `#C0392B` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `booking-white` | `#FFFFFF` |
| `surface` | `booking-fog` | `#F5F5F5` |
| `surface-elevated` | `booking-white` | `#FFFFFF` |
| `text-primary` | `booking-ink` | `#1A1A1A` |
| `text-secondary` | `booking-charcoal` | `#333333` |
| `text-tertiary` | `booking-graphite` | `#6B6B6B` |
| `primary` | `booking-blue` | `#003580` |
| `primary-hover` | `booking-blue-deep` | `#002A66` |
| `accent` | `booking-yellow` | `#FEBB02` |
| `accent-hover` | `booking-yellow` | `#FEBB02` |
| `success` | `booking-success` | `#008009` |
| `warning` | `booking-yellow` | `#FEBB02` |
| `error` | `booking-error` | `#C0392B` |
| `border` | `booking-mist` | `#E6E6E6` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `booking-ink` | `#1A1A1A` |
| `surface` | `booking-charcoal` | `#333333` |
| `surface-elevated` | `booking-graphite` | `#6B6B6B` |
| `text-primary` | `booking-white` | `#FFFFFF` |
| `text-secondary` | `booking-mist` | `#E6E6E6` |
| `text-tertiary` | `booking-graphite` | `#6B6B6B` |
| `primary` | `booking-blue-bright` | `#0071C2` |
| `primary-hover` | `booking-blue` | `#003580` |
| `accent` | `booking-yellow` | `#FEBB02` |
| `accent-hover` | `booking-yellow` | `#FEBB02` |
| `success` | `booking-success` | `#008009` |
| `warning` | `booking-yellow` | `#FEBB02` |
| `error` | `booking-error` | `#C0392B` |
| `border` | `booking-charcoal` | `#333333` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `booking-blue` | `#003580` |
| `on-identity` | `booking-white` | `#FFFFFF` |
| `primary` | `booking-blue` | `#003580` |
| `primary-hover` | `booking-blue-deep` | `#002A66` |
| `accent` | `booking-yellow` | `#FEBB02` |
| `accent-hover` | `booking-yellow` | `#FEBB02` |
| `mark` | `booking-blue` | `#003580` |
| `success` | `booking-success` | `#008009` |
| `warning` | `booking-yellow` | `#FEBB02` |
| `error` | `booking-error` | `#C0392B` |
| `background-light` | `booking-white` | `#FFFFFF` |
| `background-dark` | `booking-ink` | `#1A1A1A` |
| `surface-light` | `booking-fog` | `#F5F5F5` |
| `surface-dark` | `booking-charcoal` | `#333333` |
| `text-primary-light` | `booking-ink` | `#1A1A1A` |
| `text-primary-dark` | `booking-white` | `#FFFFFF` |
| `text-secondary-light` | `booking-charcoal` | `#333333` |
| `text-tertiary-light` | `booking-graphite` | `#6B6B6B` |
| `border-light` | `booking-mist` | `#E6E6E6` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.wordmark.fill`

- **allowed:** booking-blue, booking-white
- **forbidden:** booking-blue-bright, booking-blue-deep, booking-yellow, booking-error

> The Booking.com wordmark renders in Booking Blue on light surfaces or in white on dark surfaces. The brighter mid-blue and the deep blue are interactive-state and link variants on product surfaces — they are NOT wordmark fills. The secondary yellow is a CTA / Genius hue and never substitutes for the brand navy in the mark. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace

> Booking.com's wordmark is rendered flat in the signature navy with generous clearspace. Gradients, shadows, and recolorings compromise the deliberate, trust-anchoring monochrome wordmark, which is the brand's primary recognition asset across a dense, transactional product surface. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Booking Ink (#1A1A1A) on Booking White (#FFFFFF) gives ~17:1 — well above the WCAG AA 4.5:1 floor for body text. The rule encodes the floor for any new foreground/background pairing on booking.com surfaces, where body text density is already high and contrast headroom matters. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Booking Blue (#003580) on Booking White (#FFFFFF) gives ~12:1 — well above the WCAG AA 4.5:1 floor. Because Booking Blue carries the wordmark AND functions as the primary link/CTA color in dense product copy, it must clear the full body-text AA contrast (not just the AA-large floor). 

#### `contextRestriction` → `roles.colors.accent`

- **forbiddenContexts:** body-text, subtle-divider, error-state
- **allowedContexts:** call-to-action, loyalty-program, high-priority-promotion

> Booking Yellow is reserved for high-priority CTAs, the Genius loyalty program, and promotional moments. Using it inside body copy, as a subtle divider, or as a stand-in for error states conflicts with its established promotional / loyalty meaning on booking.com surfaces. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Booking.com is a transactional, information-dense product used globally on every device class; AA is the non-negotiable floor for any text on any Booking surface. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 700

> Booking.com's product typography on the live site uses Regular (400), Medium (500), and Bold (700) cuts of its system sans for headlines and surfaces. Lighter and heavier extremes are not part of the standard product chrome. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** booking-white, booking-fog, booking-yellow
- **doesNotPairWith:** booking-error, booking-success

> Booking Blue reads cleanest against white, the lightest fog neutral, or the brand yellow CTA. Pairing it adjacent to the functional error red or success green introduces a chromatic conflict and confuses the brand-navy with a status signal. 

## Provenance

- **Source:** <https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Booking.com B.V. — Booking.com, the Booking.com wordmark, and the Genius program marks are trademarks of Booking.com B.V. The signature navy (#003580) is verified via the simple-icons brand database (v13.0.0). Booking.com does not maintain a widely visible public design-system page; the homepage is the primary reference for product chrome. 
- **Imported:** `2026-05-19`
- **Notes:** Booking.com does not publish a public brand-guidelines or design-system surface that exposes its full token table. This atom captures the verified primary brand navy and authors a faithful set of supporting neutrals and functional swatches consistent with the booking.com product chrome; see the palette atom notes. Booking's product typography is a system sans on most surfaces — this atom references Inter@1 as the open-source rendering substitute. 

---

*Generated by the brand-atoms converter. Source: `booking@1.0.0` from the encyclopedia.*