Diff

Booking.com vs KAYAK

71 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #1e2026
Brand
#003580 #ff690f
Border
#e7e7e7 #dadde0
Display font
Bookin Sans Open Sans
Body size
14px 14px
colors 65 changed
~ bg-alt #f5f5f5 #f8f8f8
~ surface-soft #f2f2f2 #f4f4f4
~ surface-strong #ebebeb #e8e8e8
~ surface-deal #fff0d7 #fff2e8
~ text #1a1a1a #1e2026
~ text-strong #000000 #0a0c10
~ text-body #262626 #2c2f36
~ text-muted #595959 #5e6470
~ text-soft #737373 #8a909d
~ brand #003580 #ff690f
~ brand-hover #002a66 #e85a07
~ brand-active #001f4d #c54a00
~ brand-light #ebf3ff #fff2e8
~ link #0071c2 #0066cc
~ link-hover #005999 #004a99
~ link-visited #5e2dad #5a4392
~ border #e7e7e7 #dadde0
~ border-soft #f1f1f1 #eaecef
~ border-strong #bdbdbd #a4a9b4
~ border-input-focus #003580 #ff690f
~ divider #e0e0e0 #dadde0
~ shadow-card rgba(26,26,26,0.08) rgba(0,0,0,0.06)
~ shadow-elev rgba(26,26,26,0.16) rgba(0,0,0,0.14)
~ shadow-deep rgba(0,53,128,0.16) rgba(255,105,15,0.18)
~ success #008009 #0a8c3e
~ success-soft #e7f3e7 #e8f6ee
~ success-deep #005f06 #0a6b32
~ warning #bc4949 #d97706
~ warning-soft #fff5f5 #fff7e6
~ danger #cc0000 #cc2935
~ danger-soft #fff0f0 #fdeaec
~ info #0071c2 #0066cc
~ info-soft #ebf3ff #e8f0f8
+ bg-data #f0f3f5
+ surface-orange-soft #fff2e8
+ surface-graph #fdf3eb
+ text-on-orange #ffffff
+ brand-deep #7a3300
+ brand-graph #ff690f
+ brand-graph-fill #fdf3eb
+ best-flag #0a8c3e
+ cheapest-flag #0a8c3e
+ fastest-flag #9333ea
+ short-stop-flag #0066cc
+ hacker-fare #ff690f
+ pricegraph-stroke #ff690f
+ pricegraph-fill #fdf3eb
+ pricegraph-low #0a8c3e
+ pricegraph-high #cc2935
surface-blue #ebf3ff
surface-yellow #fff8e1
surface-genius #003b95
text-on-yellow #1a1a1a
brand-mid #0071c2
brand-mid-hover #005999
yellow #feba02
yellow-hover #e0a702
yellow-active #c89500
yellow-deep #946d00
star-rating #feba02
loyalty-genius #003b95
reward-yellow #feba02
rare-find #cc0000
high-rating-bg #003580
high-rating-text #ffffff
typography 4 changed
~ display {"family":"Bookin Sans","size":72} {"family":"Open Sans","size":72}
~ h1 {"family":"Bookin Sans","size":40} {"family":"Open Sans","size":40}
~ h2 {"family":"Bookin Sans","size":32} {"family":"Open Sans","size":32}
~ body {"family":"Bookin Sans","size":14} {"family":"Open Sans","size":14}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · KAYAK → Booking.com