Diff

Uniqlo vs SAP

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #1d2d3e
Brand
#ff0000 #0070f2
Border
#dddddd #d8dee5
Display font
Inter 72
Body size
14px 16px
colors 55 changed
~ surface-soft #f7f7f7 #f5f6f7
~ brand #ff0000 #0070f2
~ brand-hover #cc0000 #0040b0
~ brand-active #990000 #002a77
~ text #000000 #1d2d3e
~ text-strong #000000 #0a2540
~ text-soft #999999 #556270
~ link #000000 #0070f2
~ link-hover #000000 #0040b0
~ border #dddddd #d8dee5
~ border-soft #eeeeee #eaecee
~ border-strong #000000 #a8b1bd
~ scrim rgba(0,0,0,0.5) rgba(29,45,62,0.55)
~ shadow-card rgba(0,0,0,0.08) rgba(29,45,62,0.10)
~ success #0a8a3f #36a41d
~ warning #cc6600 #e76500
~ warning-soft #fff4e5 #fff3e0
~ danger #cc0000 #d20a0a
~ info #0064d2 #0070f2
+ bg-soft #f5f6f7
+ bg-section #eaecee
+ bg-feature #1d2d3e
+ bg-footer #1d2d3e
+ bg-cool #ebf8ff
+ surface-elev #ffffff
+ brand-subtle #d1efff
+ brand-soft #ebf8ff
+ navy #1d2d3e
+ navy-deep #0a2540
+ text-faint #8b95a3
+ text-on-dark #ffffff
+ text-on-dark-soft rgba(255,255,255,0.78)
+ on-brand #ffffff
+ link-visited #5d36ff
+ success-soft #e9f8ec
+ danger-soft #fde1e1
+ info-soft #ebf8ff
+ shadow-elev rgba(29,45,62,0.18)
+ shadow-deep rgba(0,0,0,0.20)
bg-page #ffffff
surface-strong #eeeeee
surface-grey #f4f4f4
bg-inverse #000000
brand-pale #ffe0e0
brand-deep #990000
text-muted #767676
text-on-red #ffffff
text-on-black #ffffff
border-input #999999
outline-focus #000000
shadow-modal rgba(0,0,0,0.16)
rating-fill #ff0000
rating-empty #dddddd
sale-red #ff0000
member-red #ff0000
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"72","size":72}
~ h1 {"family":"Inter","size":40} {"family":"72","size":44}
~ h2 {"family":"Inter","size":32} {"family":"72","size":36}
~ body {"family":"Inter","size":14} {"family":"72","size":16}
~ label {"family":"Monaco","size":11} {"family":"72 Mono","size":14}
radius 1 changed
~ button 4px 6px
spacing identical
No differences.
↻ Swap direction · SAP → Uniqlo