Diff

Expedia vs KAYAK

73 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#191e3b #1e2026
Brand
#00255d #ff690f
Border
#dcdee5 #dadde0
Display font
Expedia Sans Open Sans
Body size
16px 14px
colors 67 changed
~ bg-alt #f7f7f7 #f8f8f8
~ surface-soft #f1f2f3 #f4f4f4
~ surface-strong #e8e9eb #e8e8e8
~ surface-deal #fff8eb #fff2e8
~ text #191e3b #1e2026
~ text-strong #0d1023 #0a0c10
~ text-body #26293f #2c2f36
~ text-muted #4f5375 #5e6470
~ text-soft #797d96 #8a909d
~ brand #00255d #ff690f
~ brand-hover #001b47 #e85a07
~ brand-active #001436 #c54a00
~ brand-light #e8eef5 #fff2e8
~ link #1668e3 #0066cc
~ link-hover #1153b8 #004a99
~ border #dcdee5 #dadde0
~ border-soft #eaecf0 #eaecef
~ border-strong #9da1b3 #a4a9b4
~ border-input-focus #00255d #ff690f
~ divider #dcdee5 #dadde0
~ scrim rgba(13,16,35,0.6) rgba(0,0,0,0.5)
~ shadow-card rgba(13,16,35,0.08) rgba(0,0,0,0.06)
~ shadow-elev rgba(13,16,35,0.16) rgba(0,0,0,0.14)
~ shadow-deep rgba(0,37,93,0.16) rgba(255,105,15,0.18)
~ success #0c8a4a #0a8c3e
~ success-soft #e7f6ed #e8f6ee
~ success-deep #075f33 #0a6b32
~ warning-soft #fff8eb #fff7e6
~ danger #c81e34 #cc2935
~ danger-soft #fde8eb #fdeaec
~ info #1668e3 #0066cc
~ info-soft #e8eef5 #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-navy-soft #e8eef5
surface-yellow #fff4d6
surface-onekey #152e54
surface-onekey-deep #0a1f3f
text-on-yellow #191e3b
text-onekey #ffc72c
brand-mid #1668e3
brand-mid-hover #1153b8
yellow #ffc72c
yellow-hover #e6b427
yellow-active #cc9f23
yellow-deep #7f6116
onekey-gold #ffc72c
onekey-platinum #dfdfe2
onekey-blue #00255d
star-rating #191e3b
best-deal #c81e34
member-price #0c8a4a
high-rating #0c5e3a
typography 4 changed
~ display {"family":"Expedia Sans","size":72} {"family":"Open Sans","size":72}
~ h1 {"family":"Expedia Sans","size":40} {"family":"Open Sans","size":40}
~ h2 {"family":"Expedia Sans","size":32} {"family":"Open Sans","size":32}
~ body {"family":"Expedia Sans","size":16} {"family":"Open Sans","size":14}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · KAYAK → Expedia