Diff

Quizlet vs Booking.com

42 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#282d49 #262626
Brand
#4257b2 #003580
Border
#e1e3ee #e0e0e0
Display font
Hurmes Geometric Inter
Body size
16px 14px
colors 35 changed
~ bg-soft #f6f7fb #f5f5f5
~ bg-warm #fff8f0 #fefdf6
~ surface-soft #fafbfd #fafafa
~ surface-strong #f0f2f9 #f0f2f5
~ brand #4257b2 #003580
~ brand-hover #374a99 #0066cc
~ brand-pressed #2a3a78 #002566
~ brand-deep #0a3370 #001a4d
~ brand-tint #e8ebf7 #e8f0fa
~ brand-soft #cdd4ed #cee0f0
~ yellow #ffcc00 #febb02
~ yellow-soft #fff7d6 #fff4d4
~ text #282d49 #262626
~ text-strong #0a3370 #000000
~ text-muted #5a6075 #595959
~ text-soft #8b8fa3 #8a8a8a
~ text-faint #bcbfc9 #bcbcbc
~ link #4257b2 #0066cc
~ link-hover #2a3a78 #003580
~ selected-bg #e8ebf7 #e8f0fa
~ border #e1e3ee #e0e0e0
~ border-strong #c4c8d9 #bdbdbd
~ border-soft #eef0f5 #eeeeee
~ border-brand #4257b2 #003580
~ success #3da568 #008009
~ warning #f0a020 #d68500
~ danger #e0394f #d63333
~ info #4257b2 #0066cc
+ yellow-deep #cc9700
+ text-on-yellow #262626
+ rating-good #008009
+ rating-superb #003580
+ urgency #d63333
+ urgency-soft #fff0f0
+ genius-purple #562155
typography 5 changed
~ display {"family":"Hurmes Geometric","size":64} {"family":"Inter","size":48}
~ h1 {"family":"Hurmes Geometric","size":36} {"family":"Inter","size":24}
~ h2 {"family":"Hurmes Geometric","size":28} {"family":"Inter","size":20}
~ body {"family":"Hurmes Geometric","size":16} {"family":"Inter","size":14}
~ label {"family":"SFMono-Regular","size":13} {"family":"SFMono-Regular","size":12}
radius 2 changed
~ button 12px 6px
~ card 16px 8px
spacing identical
No differences.
↻ Swap direction · Booking.com → Quizlet