Diff

Are.na vs Adidas

64 token-level differences between these two design systems.

Role tokens
Background
#fafafa #ffffff
Text
#000000 #000000
Brand
#ff6600 #000000
Border
#dddddd #cccccc
Display font
Inter adidasFG
Body size
14px 16px
colors 53 changed
~ bg #fafafa #ffffff
~ surface #f1f1f1 #ffffff
~ text-muted #666666 #767677
~ text-soft #999999 #a8a8a8
~ brand #ff6600 #000000
~ brand-hover #e85a00 #1d1d1d
~ brand-active #cc4f00 #3c3c3c
~ link #ff6600 #000000
~ border #dddddd #cccccc
~ border-soft #eeeeee #ececec
~ border-strong #999999 #000000
~ success #2d6a4f #1a8917
~ warning #7a5300 #bd5c00
~ danger #8b1a1a #c12121
~ info #666666 #0064d2
+ bg-page #ffffff
+ bg-inverse #000000
+ surface-soft #f5f5f5
+ surface-strong #ececec
+ surface-grey #767677
+ surface-dark #1d1d1d
+ brand-on-dark #ffffff
+ trefoil-red #e32b2b
+ sale-red #e32b2b
+ text-on-black #ffffff
+ text-on-cta #ffffff
+ link-hover #000000
+ link-underline currentColor
+ border-input #000000
+ border-divider #000000
+ outline-focus #000000
+ scrim rgba(0,0,0,0.7)
+ shadow-card rgba(0,0,0,0.06)
+ shadow-modal rgba(0,0,0,0.20)
+ warning-soft #fff4e5
+ rating-fill #000000
+ rating-empty #cccccc
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 5 changed
~ display {"family":"Inter","size":40} {"family":"adidasFG","size":72}
~ h1 {"family":"Inter","size":32} {"family":"adidasFG","size":40}
~ h2 {"family":"Inter","size":24} {"family":"adidasFG","size":32}
~ body {"family":"Inter","size":14} {"family":"AdihausDIN","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"Monaco","size":11}
radius 1 changed
~ pill 0px 9999px
spacing 5 changed
~ xs 1px 4px
~ sm 2px 8px
~ md 6px 16px
~ lg 12px 32px
~ xl 20px 48px
↻ Swap direction · Adidas → Are.na