W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Booking.com
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/booking/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/booking/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Booking.com
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Booking.com
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Booking.com
A clear hierarchy in Booking.com's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Booking.com
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ booking-yellow #FEBB02 accent-hover
→ booking-yellow #FEBB02 background-dark
→ booking-ink #1A1A1A background-light
→ booking-white #FFFFFF border-light
→ booking-mist #E6E6E6 error
→ booking-error #C0392B identity
→ booking-blue #003580 mark
→ booking-blue #003580 on-identity
→ booking-white #FFFFFF primary
→ booking-blue #003580 primary-hover
→ booking-blue-deep #002A66 success
→ booking-success #008009 surface-dark
→ booking-charcoal #333333 surface-light
→ booking-fog #F5F5F5 text-primary-dark
→ booking-white #FFFFFF text-primary-light
→ booking-ink #1A1A1A text-secondary-light
→ booking-charcoal #333333 text-tertiary-light
→ booking-graphite #6B6B6B warning
→ booking-yellow #FEBB02 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from booking)
Light mode (14 roles)
accent
→ booking-yellow accent-hover
→ booking-yellow background
→ booking-white border
→ booking-mist error
→ booking-error primary
→ booking-blue primary-hover
→ booking-blue-deep success
→ booking-success surface
→ booking-fog surface-elevated
→ booking-white text-primary
→ booking-ink text-secondary
→ booking-charcoal text-tertiary
→ booking-graphite warning
→ booking-yellow Dark mode (14 roles)
accent
→ booking-yellow accent-hover
→ booking-yellow background
→ booking-ink border
→ booking-charcoal error
→ booking-error primary
→ booking-blue-bright primary-hover
→ booking-blue success
→ booking-success surface
→ booking-charcoal surface-elevated
→ booking-graphite text-primary
→ booking-white text-secondary
→ booking-mist text-tertiary
→ booking-graphite warning
→ booking-yellow Rules (8 typed constraints)
error · 6 rules
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 rule
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 rule
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.