Diff

Mux vs Etsy

61 token-level differences between these two design systems.

Role tokens
Background
#e2e4dd #ffffff
Text
#000000 #222222
Brand
#ff5d00 #f1641e
Border
#000000 #e6e6e6
Display font
Rotonto Graphik Web
Body size
16px 16px
colors 51 changed
~ bg #e2e4dd #ffffff
~ surface #d4d6cf #ffffff
~ surface-soft #ecebe7 #f6f6f6
~ surface-strong #c8caBF #eeeeee
~ text #000000 #222222
~ text-strong #000000 #111111
~ text-muted #5a5a5a #595959
~ brand #ff5d00 #f1641e
~ brand-hover #e54e00 #d9591a
~ brand-active #c54100 #b94816
~ border #000000 #e6e6e6
~ border-soft #a0a29a #f0f0f0
~ link #000000 #222222
~ link-hover #ff5d00 #f1641e
~ success #00b364 #067f5b
~ warning #ff8c00 #a35316
~ danger #e6483d #a61b1b
~ info #0066ff #1e4dc4
+ bg-page #fff8f0
+ surface-warm #fff8f0
+ surface-orange #fff1ea
+ brand-pale #ffd7c2
+ brand-deep #7d4521
+ text-soft #757575
+ text-on-orange #ffffff
+ border-strong #cccccc
+ border-input #999999
+ star-orange #f1641e
+ star-empty #dddddd
+ free-shipping-green #067f5b
+ bestseller-tag #fff1ea
+ bestseller-text #7d4521
+ star-seller-bg #fff1ea
+ star-seller-text #7d4521
+ scrim rgba(0,0,0,0.5)
+ shadow-card rgba(0,0,0,0.08)
+ shadow-elev rgba(0,0,0,0.16)
+ warning-soft #fff7e6
bg-paper #ffffff
bg-dark #000000
bg-dark-soft #1a1a1a
surface-on-dark #1a1a1a
text-body #1a1a1a
text-faint #8a8a8a
text-on-dark #e2e4dd
brand-soft #ffe5d4
on-brand #000000
accent-blue #0066ff
accent-green #00b364
border-on-dark #2a2a2a
ring #ff5d00
typography 5 changed
~ display {"family":"Rotonto","size":72} {"family":"Graphik Web","size":72}
~ h1 {"family":"Rotonto","size":40} {"family":"Graphik Web","size":40}
~ h2 {"family":"Rotonto","size":32} {"family":"Graphik Web","size":32}
~ body {"family":"Aeonik","size":16} {"family":"Graphik Web","size":16}
~ label {"family":"JetBrainsMono","size":11} {"family":"Monaco","size":11}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing 3 changed
~ md 24px 16px
~ lg 64px 32px
~ xl 128px 48px
↻ Swap direction · Etsy → Mux