Diff

Lego vs Booking.com

53 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #262626
Brand
#ffd500 #003580
Border
#e0e0e0 #e0e0e0
Display font
Lego Sans Inter
Body size
15px 14px
colors 47 changed
~ bg-warm #fffaf0 #fefdf6
~ surface-strong #f0f0f0 #f0f2f5
~ brand #ffd500 #003580
~ brand-hover #e6c000 #0066cc
~ brand-pressed #cca900 #002566
~ brand-deep #a89200 #001a4d
~ brand-tint #fff8d0 #e8f0fa
~ brand-soft #ffec8a #cee0f0
~ on-brand #1a1a1a #ffffff
~ text #1a1a1a #262626
~ text-muted #5a5a5a #595959
~ text-on-brand #1a1a1a #ffffff
~ link #0055bf #0066cc
~ link-hover #003e8e #003580
~ selected-bg #fff8d0 #e8f0fa
~ border-strong #cccccc #bdbdbd
~ border-soft #f0f0f0 #eeeeee
~ border-brand #ffd500 #003580
~ success #179a35 #008009
~ warning #ffd500 #d68500
~ danger #d62027 #d63333
~ info #0055bf #0066cc
+ yellow #febb02
+ yellow-deep #cc9700
+ yellow-soft #fff4d4
+ text-on-yellow #262626
+ rating-good #008009
+ rating-superb #003580
+ urgency #d63333
+ urgency-soft #fff0f0
+ genius-purple #562155
red #d62027
red-deep #a8161c
red-soft #ffd5d8
blue #0055bf
blue-deep #003e8e
blue-soft #cee0f5
green #179a35
green-deep #0c7826
green-soft #cdf0d4
text-on-red #ffffff
text-on-blue #ffffff
text-on-green #ffffff
age-0plus #179a35
age-6plus #0055bf
age-12plus #d62027
age-adult #1a1a1a
typography 4 changed
~ display {"family":"Lego Sans","size":56} {"family":"Inter","size":48}
~ h1 {"family":"Lego Sans","size":32} {"family":"Inter","size":24}
~ h2 {"family":"Lego Sans","size":24} {"family":"Inter","size":20}
~ body {"family":"Lego Sans","size":15} {"family":"Inter","size":14}
radius 2 changed
~ button 12px 6px
~ card 16px 8px
spacing identical
No differences.
↻ Swap direction · Booking.com → Lego