Diff

Aave vs Best Buy

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#211d1d #1d252c
Brand
#978fff #0046be
Border
#e8e6ec #d8d8d8
Display font
Aave Repro Human BBY Web
Body size
16px 16px
colors 54 changed
~ surface-soft #faf9ff #f4f4f4
~ surface-strong #f1eeff #e6e6e6
~ brand #978fff #0046be
~ brand-hover #857cf5 #003795
~ text #211d1d #1d252c
~ text-muted #5c5658 #54646c
~ text-soft #8a8488 #737d83
~ link #5b4fee #0046be
~ link-hover #5448d6 #003795
~ border #e8e6ec #d8d8d8
~ border-strong #d5d2dd #bcbcbc
~ border-soft #f2f1f6 #ececec
~ success #1bbf8a #118738
~ warning #f5b948 #b35900
~ danger #f0506e #c91432
~ info #5b4fee #0046be
+ bg-page #f7f7f7
+ surface-blue-soft #e5edf9
+ surface-yellow-soft #fffbcc
+ brand-active #002a73
+ brand-pale #cdd9ee
+ brand-yellow #fff000
+ brand-yellow-hover #ffe600
+ text-on-yellow #1d252c
+ text-on-dark #ffffff
+ link-visited #5c2e91
+ border-input #9e9e9e
+ rating-yellow #ffd200
+ rating-empty #d8d8d8
+ geek-squad-black #000000
+ geek-squad-orange #ff6c00
+ member-platinum #5c4ca2
+ totaltech-blue #003795
+ scrim rgba(0,0,0,0.5)
+ shadow-card rgba(0,0,0,0.08)
+ shadow-elev rgba(0,0,0,0.16)
+ success-soft #e6f4ea
+ warning-soft #fff4e5
+ danger-soft #fbe8ec
bg-soft #f7f6ff
bg-lavender #f1eeff
brand-pressed #6f63ff
brand-deep #5b4fee
brand-strong #5448d6
brand-tint #ece9ff
brand-soft #c9c3ff
on-brand #ffffff
text-faint #c4c0c2
selected-bg #ece9ff
border-brand #978fff
gradient-pink #ffb8e6
gradient-peach #ffd6b8
gradient-mint #b8f0d6
gradient-sky #b8d6ff
typography 4 changed
~ display {"family":"Aave Repro","size":88} {"family":"Human BBY Web","size":80}
~ h1 {"family":"Aave Repro","size":72} {"family":"Human BBY Web","size":40}
~ h2 {"family":"Aave Repro","size":48} {"family":"Human BBY Web","size":32}
~ body {"family":"Aave Repro","size":16} {"family":"Human BBY Web","size":16}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Best Buy → Aave