Diff

Booking.com vs WorkOS

86 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #29363d
Brand
#003580 #6363f1
Border
#e7e7e7 #e5e5e7
Display font
Bookin Sans Untitled Sans
Body size
14px 16px
colors 75 changed
~ surface-soft #f2f2f2 #fafafa
~ surface-strong #ebebeb #f0f0f2
~ text #1a1a1a #29363d
~ text-strong #000000 #0a0a0a
~ text-muted #595959 #6c7780
~ text-soft #737373 #8b9296
~ brand #003580 #6363f1
~ brand-light #ebf3ff #8181f5
~ border #e7e7e7 #e5e5e7
~ border-soft #f1f1f1 #efeff1
~ border-strong #bdbdbd #cdcdd0
~ scrim rgba(0,0,0,0.5) rgba(10,10,10,0.48)
~ shadow-card rgba(26,26,26,0.08) rgba(15,15,15,0.04)
~ shadow-elev rgba(26,26,26,0.16) rgba(15,15,15,0.08)
~ success #008009 #168346
~ warning #bc4949 #a35316
~ danger #cc0000 #c62a2a
~ info #0071c2 #1d4ed8
+ bg-soft #fafafa
+ bg-section #f5f5f5
+ bg-dark #0a0a0a
+ bg-violet-tint #f5f5fb
+ surface-violet #eeeefe
+ surface-dark #1a1a1f
+ text-faint #aab1b5
+ text-on-dark #ffffff
+ text-on-violet #ffffff
+ brand-deep #4848d6
+ brand-soft #eeeefe
+ brand-pale #dadafe
+ brand-deeper #3535b8
+ black-cta #0a0a0a
+ ink-active #000000
+ border-input #d1d1d4
+ border-violet #6363f1
+ on-brand #ffffff
+ on-dark #ffffff
+ on-light #29363d
+ shadow-modal rgba(15,15,15,0.16)
+ success-bg #e7f6ec
+ warning-bg #fef0e6
+ danger-bg #fdebeb
bg-alt #f5f5f5
surface-blue #ebf3ff
surface-yellow #fff8e1
surface-genius #003b95
surface-deal #fff0d7
text-body #262626
text-on-brand #ffffff
text-on-yellow #1a1a1a
brand-hover #002a66
brand-active #001f4d
brand-mid #0071c2
brand-mid-hover #005999
yellow #feba02
yellow-hover #e0a702
yellow-active #c89500
yellow-deep #946d00
star-rating #feba02
link #0071c2
link-hover #005999
link-visited #5e2dad
border-input-focus #003580
divider #e0e0e0
shadow-deep rgba(0,53,128,0.16)
success-soft #e7f3e7
success-deep #005f06
warning-soft #fff5f5
danger-soft #fff0f0
info-soft #ebf3ff
loyalty-genius #003b95
reward-yellow #feba02
rare-find #cc0000
high-rating-bg #003580
high-rating-text #ffffff
typography 5 changed
~ display {"family":"Bookin Sans","size":72} {"family":"Untitled Sans","size":72}
~ h1 {"family":"Bookin Sans","size":40} {"family":"Untitled Sans","size":64}
~ h2 {"family":"Bookin Sans","size":32} {"family":"Untitled Sans","size":28}
~ body {"family":"Bookin Sans","size":14} {"family":"Untitled Sans","size":16}
~ label {"family":"SFMono-Regular","size":11} {"family":"IBM Plex Mono","size":11}
radius 1 changed
~ button 8px 4px
spacing 5 changed
~ xs 2px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 32px
~ xl 40px 48px
↻ Swap direction · WorkOS → Booking.com