Diff

Uniqlo vs Walmart

64 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #2a2a2a
Brand
#ff0000 #0071ce
Border
#dddddd #d6dbdf
Display font
Inter Antonio
Body size
14px 14px
colors 53 changed
~ bg-page #ffffff #f2f8fd
~ surface-soft #f7f7f7 #f2f2f2
~ surface-strong #eeeeee #dde2e6
~ brand #ff0000 #0071ce
~ brand-deep #990000 #004f9a
~ text #000000 #2a2a2a
~ text-muted #767676 #5e6166
~ text-soft #999999 #74767c
~ link #000000 #004f9a
~ link-hover #000000 #0071ce
~ border #dddddd #d6dbdf
~ border-soft #eeeeee #e6e9ec
~ border-strong #000000 #74767c
~ border-input #999999 #a6a6a6
~ scrim rgba(0,0,0,0.5) rgba(0,0,0,0.6)
~ success #0a8a3f #3a8b00
~ warning #cc6600 #cc6700
~ warning-soft #fff4e5 #fff7e6
~ danger #cc0000 #cc0d20
~ info #0064d2 #0071ce
~ rating-empty #dddddd #d6dbdf
+ 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-on-dark #ffffff
+ text-on-yellow #2a2a2a
+ text-on-blue #ffffff
+ rollback #cc0d20
+ rollback-deep #a8081a
+ clearance #cc0d20
+ great-value #0071ce
+ freshness-green #76b82a
+ walmart-plus-pink #ed1c79
+ rating-yellow #ffc220
+ shadow-elev rgba(0,0,0,0.16)
surface-grey #f4f4f4
bg-inverse #000000
brand-hover #cc0000
brand-active #990000
brand-pale #ffe0e0
text-on-red #ffffff
text-on-black #ffffff
outline-focus #000000
shadow-modal rgba(0,0,0,0.16)
rating-fill #ff0000
sale-red #ff0000
member-red #ff0000
typography 4 changed
~ display {"family":"Inter","size":72} {"family":"Antonio","size":72}
~ h1 {"family":"Inter","size":40} {"family":"Antonio","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Antonio","size":32}
~ body {"family":"Inter","size":14} {"family":"Bogle","size":14}
radius 2 changed
~ button 4px 8px
~ card 8px 16px
spacing 5 changed
~ xs 4px 2px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · Walmart → Uniqlo