Diff

Are.na vs Uniqlo

60 token-level differences between these two design systems.

Role tokens
Background
#fafafa #ffffff
Text
#000000 #000000
Brand
#ff6600 #ff0000
Border
#dddddd #dddddd
Display font
Inter Inter
Body size
14px 14px
colors 48 changed
~ bg #fafafa #ffffff
~ surface #f1f1f1 #ffffff
~ text-muted #666666 #767676
~ brand #ff6600 #ff0000
~ brand-hover #e85a00 #cc0000
~ brand-active #cc4f00 #990000
~ link #ff6600 #000000
~ border-strong #999999 #000000
~ success #2d6a4f #0a8a3f
~ warning #7a5300 #cc6600
~ danger #8b1a1a #cc0000
~ info #666666 #0064d2
+ bg-page #ffffff
+ surface-soft #f7f7f7
+ surface-strong #eeeeee
+ surface-grey #f4f4f4
+ bg-inverse #000000
+ brand-pale #ffe0e0
+ brand-deep #990000
+ text-on-red #ffffff
+ text-on-black #ffffff
+ link-hover #000000
+ border-input #999999
+ outline-focus #000000
+ scrim rgba(0,0,0,0.5)
+ shadow-card rgba(0,0,0,0.08)
+ shadow-modal rgba(0,0,0,0.16)
+ warning-soft #fff4e5
+ rating-fill #ff0000
+ rating-empty #dddddd
+ sale-red #ff0000
+ member-red #ff0000
bg-alt #ffffff
bg-warm #f6f5f3
surface-hover #e8e8e8
surface-deep #e0e0e0
surface-block #ffffff
text-display #000000
text-faint #bbbbbb
text-on-brand #ffffff
brand-soft #fff1e6
brand-faint #fff8f1
link-visited #cc4f00
on-brand #ffffff
success-bg #e8f0eb
warning-bg #f5ebd6
danger-bg #f3e0e0
info-bg #f1f1f1
typography 4 changed
~ display {"family":"Inter","size":40} {"family":"Inter","size":72}
~ h1 {"family":"Inter","size":32} {"family":"Inter","size":40}
~ h2 {"family":"Inter","size":24} {"family":"Inter","size":32}
~ label {"family":"JetBrains Mono","size":12} {"family":"Monaco","size":11}
radius 3 changed
~ button 0px 4px
~ card 0px 8px
~ pill 0px 9999px
spacing 5 changed
~ xs 1px 4px
~ sm 2px 8px
~ md 6px 16px
~ lg 12px 32px
~ xl 20px 48px
↻ Swap direction · Uniqlo → Are.na