Diff

Walmart vs Twitch

91 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e0e10
Text
#2a2a2a #efeff1
Brand
#0071ce #9146ff
Border
#d6dbdf #3a3a3d
Display font
Antonio Inter
Body size
14px 14px
colors 79 changed
~ bg #ffffff #0e0e10
~ surface #ffffff #1f1f23
~ surface-soft #f2f2f2 #18181b
~ surface-strong #dde2e6 #26262c
~ brand #0071ce #9146ff
~ brand-deep #004f9a #5c16c5
~ text #2a2a2a #efeff1
~ text-strong #000000 #ffffff
~ text-muted #5e6166 #898997
~ border #d6dbdf #3a3a3d
~ border-soft #e6e9ec #26262c
~ border-strong #74767c #53535f
~ shadow-card rgba(0,0,0,0.08) rgba(0,0,0,0.5)
~ success #3a8b00 #00f593
~ warning #cc6700 #ffd84a
~ danger #cc0d20 #eb0400
~ info #0071ce #4d8eff
+ bg-alt #18181b
+ bg-deep #000000
+ surface-elevated #26262c
+ surface-card #1f1f23
+ surface-chat #1f1f23
+ surface-chat-hover #26262c
+ text-base #efeff1
+ text-alt #adadb8
+ text-link #bf94ff
+ text-disabled #53535f
+ brand-hover #a970ff
+ brand-active #772ce8
+ brand-2024 #9146ff
+ brand-classic #6441a4
+ on-brand #ffffff
+ accent-magenta #fab4ff
+ accent-cheer-red #ff4248
+ accent-cheer-orange #f5b53a
+ accent-cheer-blue #4d8eff
+ accent-cheer-green #00d6cc
+ accent-cheer-purple #9c3eff
+ scrim-card linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%)
+ shadow-modal rgba(0,0,0,0.76)
+ danger-text #ff4d4d
+ live-indicator #eb0400
+ live-pill-bg #eb0400
+ follow-purple #9146ff
+ subscribe-tier-1 #9146ff
+ subscribe-tier-2 #3ea6f5
+ subscribe-tier-3 #f5b53a
+ highlight-mod #00ad03
+ highlight-vip #e005b9
+ highlight-broadcaster #eb0400
+ highlight-prime #3ea6f5
bg-page #f2f8fd
surface-yellow #fff5d6
surface-blue-light #e3f1fc
masthead #0071ce
masthead-deep #004f9a
masthead-active #003b76
brand-darkest #001e60
spark #ffc220
spark-hover #fdbb1f
spark-deep #f7a304
text-soft #74767c
text-on-dark #ffffff
text-on-yellow #2a2a2a
text-on-blue #ffffff
link #004f9a
link-hover #0071ce
border-input #a6a6a6
rollback #cc0d20
rollback-deep #a8081a
clearance #cc0d20
great-value #0071ce
freshness-green #76b82a
walmart-plus-pink #ed1c79
rating-yellow #ffc220
rating-empty #d6dbdf
scrim rgba(0,0,0,0.6)
shadow-elev rgba(0,0,0,0.16)
warning-soft #fff7e6
typography 5 changed
~ display {"family":"Antonio","size":72} {"family":"Inter","size":72}
~ h1 {"family":"Antonio","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Antonio","size":32} {"family":"Inter","size":32}
~ body {"family":"Bogle","size":14} {"family":"Inter","size":14}
~ label {"family":"Monaco","size":11} {"family":"Roboto Mono","size":11}
radius 2 changed
~ button 8px 6px
~ card 16px 8px
spacing 5 changed
~ xs 2px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 32px
~ xl 40px 48px
↻ Swap direction · Twitch → Walmart