Diff

Casper vs Best Buy

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1e306e #1d252c
Brand
#1e306e #0046be
Border
#dde0e9 #d8d8d8
Display font
New Kansas Human BBY Web
Body size
16px 16px
colors 55 changed
~ brand #1e306e #0046be
~ brand-hover #011a54 #003795
~ text #1e306e #1d252c
~ text-strong #012169 #000000
~ text-muted #5a6488 #54646c
~ link #1e306e #0046be
~ link-hover #012169 #003795
~ border #dde0e9 #d8d8d8
~ border-strong #1e306e #bcbcbc
~ border-soft #edeef3 #ececec
~ success #1f7a4d #118738
~ warning #9a6212 #b35900
~ danger #b3261e #c91432
~ info #1e306e #0046be
+ bg-page #f7f7f7
+ surface-soft #f4f4f4
+ surface-strong #e6e6e6
+ surface-blue-soft #e5edf9
+ surface-yellow-soft #fffbcc
+ brand-active #002a73
+ brand-pale #cdd9ee
+ brand-yellow #fff000
+ brand-yellow-hover #ffe600
+ text-soft #737d83
+ 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 #f6f7fa
bg-subtle #edeef3
surface-tint #f6f7fa
surface-inverse #1e306e
on-surface-inverse #ffffff
brand-deep #012169
on-brand #ffffff
accent-tint #e8eaf0
accent-tint-strong #dde0e9
text-faint #8b93ac
focus-ring #012169
success-bg #e8f3ed
warning-bg #f7efe1
danger-bg #f8e8e6
info-bg #edeef3
typography 4 changed
~ display {"family":"New Kansas","size":80} {"family":"Human BBY Web","size":80}
~ h1 {"family":"New Kansas","size":40} {"family":"Human BBY Web","size":40}
~ h2 {"family":"New Kansas","size":32} {"family":"Human BBY Web","size":32}
~ body {"family":"Calibre","size":16} {"family":"Human BBY Web","size":16}
radius identical
No differences.
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Best Buy → Casper