Diff

Everlane vs Walmart

58 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #2a2a2a
Brand
#121212 #0071ce
Border
#000000 #d6dbdf
Display font
Maison Neue Book Antonio
Body size
16px 14px
colors 47 changed
~ surface #f7f7f5 #ffffff
~ surface-soft #fafaf9 #f2f2f2
~ text #000000 #2a2a2a
~ text-muted #767676 #5e6166
~ text-soft #9b9b9b #74767c
~ brand #121212 #0071ce
~ link #000000 #004f9a
~ border #000000 #d6dbdf
~ border-soft #e4e4e2 #e6e9ec
~ border-input #bdbdbd #a6a6a6
~ scrim rgba(0,0,0,0.45) rgba(0,0,0,0.6)
~ success #1f7a3d #3a8b00
~ warning #9a6b00 #cc6700
~ danger #b3261e #cc0d20
+ bg-page #f2f8fd
+ surface-strong #dde2e6
+ surface-yellow #fff5d6
+ surface-blue-light #e3f1fc
+ masthead #0071ce
+ masthead-deep #004f9a
+ masthead-active #003b76
+ brand-deep #004f9a
+ brand-darkest #001e60
+ spark #ffc220
+ spark-hover #fdbb1f
+ spark-deep #f7a304
+ text-strong #000000
+ text-on-dark #ffffff
+ text-on-yellow #2a2a2a
+ text-on-blue #ffffff
+ link-hover #0071ce
+ border-strong #74767c
+ rollback #cc0d20
+ rollback-deep #a8081a
+ clearance #cc0d20
+ great-value #0071ce
+ freshness-green #76b82a
+ walmart-plus-pink #ed1c79
+ rating-yellow #ffc220
+ rating-empty #d6dbdf
+ shadow-card rgba(0,0,0,0.08)
+ shadow-elev rgba(0,0,0,0.16)
+ warning-soft #fff7e6
+ info #0071ce
text-display #121212
on-brand #ffffff
sale #b3261e
typography 5 changed
~ display {"family":"Maison Neue Book","size":56} {"family":"Antonio","size":72}
~ h1 {"family":"Maison Neue Book","size":32} {"family":"Antonio","size":40}
~ h2 {"family":"Maison Neue Book","size":26} {"family":"Antonio","size":32}
~ body {"family":"Maison Neue Book","size":16} {"family":"Bogle","size":14}
~ label {"family":"SFMono-Regular","size":13} {"family":"Monaco","size":11}
radius 3 changed
~ button 0px 8px
~ card 0px 16px
~ pill 0px 9999px
spacing 3 changed
~ xs 0px 2px
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Walmart → Everlane