Diff

Reddit vs Best Buy

75 token-level differences between these two design systems.

Role tokens
Background
#dae0e6 #ffffff
Text
#1a1a1b #1d252c
Brand
#ff4500 #0046be
Border
#edeff1 #d8d8d8
Display font
IBM Plex Sans Human BBY Web
Body size
14px 16px
colors 65 changed
~ bg #dae0e6 #ffffff
~ text #1a1a1b #1d252c
~ text-strong #030303 #000000
~ text-muted #7c7c7c #54646c
~ text-soft #878a8c #737d83
~ brand #ff4500 #0046be
~ brand-hover #e63e00 #003795
~ brand-active #cc3700 #002a73
~ link #0079d3 #0046be
~ link-hover #0061a8 #003795
~ link-visited #7c4dff #5c2e91
~ border #edeff1 #d8d8d8
~ border-strong #ccc #bcbcbc
~ success #46d160 #118738
~ warning #ffb000 #b35900
~ danger #ea0027 #c91432
~ info #0079d3 #0046be
+ bg-page #f7f7f7
+ surface-soft #f4f4f4
+ surface-strong #e6e6e6
+ surface-blue-soft #e5edf9
+ surface-yellow-soft #fffbcc
+ brand-pale #cdd9ee
+ brand-yellow #fff000
+ brand-yellow-hover #ffe600
+ text-on-yellow #1d252c
+ text-on-dark #ffffff
+ border-soft #ececec
+ 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 #f6f7f8
bg-deep #030303
surface-hover #f6f7f8
surface-elevated #ffffff
surface-deep #1a1a1b
text-body #1c1c1c
text-faint #9b9b9b
brand-soft #ffe4d6
brand-deep #a83100
upvote #ff4500
downvote #7193ff
border-subtle #f6f7f8
border-card #ccc
on-brand #ffffff
on-bg #1a1a1b
shadow-color rgba(28,28,28,0.08)
shadow-elevated rgba(28,28,28,0.16)
award-gold #ffb000
award-silver #c8c9d0
award-platinum #39d8ff
flair-blue #46d160
flair-pink #ff66ac
flair-green #46d160
community-blue #0079d3
typography 5 changed
~ display {"family":"IBM Plex Sans","size":56} {"family":"Human BBY Web","size":80}
~ h1 {"family":"IBM Plex Sans","size":40} {"family":"Human BBY Web","size":40}
~ h2 {"family":"IBM Plex Sans","size":32} {"family":"Human BBY Web","size":32}
~ body {"family":"IBM Plex Sans","size":14} {"family":"Human BBY Web","size":16}
~ label {"family":"IBM Plex Mono","size":12} {"family":"SFMono-Regular","size":13}
radius identical
No differences.
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · Best Buy → Reddit