Diff

Wayfair vs Magic

61 token-level differences between these two design systems.

Role tokens
Background
#fafbfc #ffffff
Text
#0a0a0a #1c2024
Brand
#0a0a0a #0090ff
Border
#000000 #e8e8ec
Display font
Mier B Aeonik
Body size
16px 16px
colors 53 changed
~ bg #fafbfc #ffffff
~ surface #fafbfc #ffffff
~ surface-soft #f4f5f7 #fcfcfd
~ surface-muted #f7f8fa #f9f9fb
~ brand #0a0a0a #0090ff
~ brand-hover #000000 #0586f0
~ text #0a0a0a #1c2024
~ text-strong #000000 #1c2024
~ text-muted #555555 #60646c
~ link #0a0a0a #0d74ce
~ link-hover #000000 #0090ff
~ border #000000 #e8e8ec
~ border-soft #e6e8eb #f0f0f3
~ border-strong #0a0a0a #d9d9e0
~ success #1a7f3c #2c8849
~ warning #a05a00 #bb6a00
~ danger #c81e1e #c62a44
~ info #0a0a0a #0090ff
+ text-body #2c2d2f
+ text-faint #80838d
+ text-disabled #8b8d98
+ brand-strong #0d74ce
+ brand-ink #113264
+ on-brand #ffffff
+ border-translucent rgba(0, 8, 48, 0.094)
+ diff-insert-bg #ecfdee
+ diff-delete-bg #feeced
+ diff-delete-surface #fcf7f8
+ shadow-tint rgba(0, 5, 9, 0.06)
bg-page #ffffff
surface-strong #eceef1
brand-active #222222
brand-pale #e6e6e6
text-soft #777777
text-on-brand #ffffff
text-on-dark #ffffff
heritage-purple #7B189F
border-input #c8ccd0
border-soft-hover #0a0a0a
rating-fill #0a0a0a
rating-empty #e6e8eb
save-heart #cc1c1c
save-heart-empty #0a0a0a
promo-yellow #f5d342
promo-yellow-text #0a0a0a
scrim rgba(0,0,0,0.5)
shadow-card rgba(15,17,21,0.06)
shadow-elev rgba(15,17,21,0.12)
shadow-hover rgba(15,17,21,0.10)
success-soft #e8f5ec
warning-soft #fdf3e2
danger-soft #fbe9e9
free-shipping #1a7f3c
typography 4 changed
~ display {"family":"Mier B","size":80} {"family":"Aeonik","size":64}
~ h1 {"family":"Mier B","size":40} {"family":"Aeonik","size":46}
~ h2 {"family":"Mier B","size":32} {"family":"Aeonik","size":34}
~ body {"family":"Mier B","size":16} {"family":"Suisse Intl","size":16}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing 2 changed
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Magic → Wayfair