Diff

Bun vs Booking.com

89 token-level differences between these two design systems.

Role tokens
Background
#fbf0df #ffffff
Text
#15151b #1a1a1a
Brand
#f472b6 #003580
Border
#15151b1a #e7e7e7
Display font
CoFo Sans Bookin Sans
Body size
17px 14px
colors 83 changed
~ bg #fbf0df #ffffff
~ surface-strong #fdfaf2 #ebebeb
~ text #15151b #1a1a1a
~ text-muted #6b6b6b #595959
~ brand #f472b6 #003580
~ link #db2777 #0071c2
~ link-hover #9d174d #005999
~ border #15151b1a #e7e7e7
~ border-strong #15151b33 #bdbdbd
~ divider #15151b14 #e0e0e0
+ bg-alt #f5f5f5
+ surface-soft #f2f2f2
+ surface-blue #ebf3ff
+ surface-yellow #fff8e1
+ surface-genius #003b95
+ surface-deal #fff0d7
+ text-body #262626
+ text-soft #737373
+ text-on-brand #ffffff
+ text-on-yellow #1a1a1a
+ brand-hover #002a66
+ brand-active #001f4d
+ brand-mid #0071c2
+ brand-mid-hover #005999
+ brand-light #ebf3ff
+ yellow #feba02
+ yellow-hover #e0a702
+ yellow-active #c89500
+ yellow-deep #946d00
+ star-rating #feba02
+ link-visited #5e2dad
+ border-soft #f1f1f1
+ border-input-focus #003580
+ scrim rgba(0,0,0,0.5)
+ shadow-card rgba(26,26,26,0.08)
+ shadow-elev rgba(26,26,26,0.16)
+ shadow-deep rgba(0,53,128,0.16)
+ success #008009
+ success-soft #e7f3e7
+ success-deep #005f06
+ warning #bc4949
+ warning-soft #fff5f5
+ danger #cc0000
+ danger-soft #fff0f0
+ info #0071c2
+ info-soft #ebf3ff
+ loyalty-genius #003b95
+ reward-yellow #feba02
+ rare-find #cc0000
+ high-rating-bg #003580
+ high-rating-text #ffffff
bg-soft #fff7e8
bg-strong #f5e8d0
text-faint #9a9a9a
brand-strong #db2777
brand-soft #fce7f3
brand-faint #fdf2f8
accent #fbbf24
accent-strong #f59e0b
accent-soft #fef3c7
selected #fce7f3
disabled-bg #f5e8d0
disabled-text #9a9a9a
border-subtle #15151b0d
inverse-bg #15151b
inverse-text #fbf0df
inverse-text-muted #a1a1aa
shadow-warm rgba(21, 21, 27, 0.08)
shadow-pink rgba(244, 114, 182, 0.18)
success-bg #dcfce7
success-text #166534
success-border #86efac
warning-bg #fef3c7
warning-text #854d0e
warning-border #fbbf24
danger-bg #fee2e2
danger-text #991b1b
danger-border #fca5a5
info-bg #fce7f3
info-text #9d174d
info-border #f9a8d4
on-brand #15151b
on-accent #15151b
typography 5 changed
~ display {"family":"CoFo Sans","size":96} {"family":"Bookin Sans","size":72}
~ h1 {"family":"CoFo Sans","size":52} {"family":"Bookin Sans","size":40}
~ h2 {"family":"CoFo Sans","size":40} {"family":"Bookin Sans","size":32}
~ body {"family":"Inter","size":17} {"family":"Bookin Sans","size":14}
~ label {"family":"Berkeley Mono","size":11} {"family":"SFMono-Regular","size":11}
radius 1 changed
~ button 6px 8px
spacing identical
No differences.
↻ Swap direction · Booking.com → Bun