Diff

Instacart vs Magic Eden

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fdfaf3
Text
#000000 #0c0c0c
Brand
#0aad0a #e42575
Border
#e0e0e0 #e8dfc7
Display font
Instacart Sans Foundry Display
Body size
16px 15px
colors 54 changed
~ bg #ffffff #fdfaf3
~ text #000000 #0c0c0c
~ text-body #1a1a1a #3a3a3a
~ text-muted #666666 #6b6b6b
~ text-on-dark #ffffff #fdfaf3
~ brand #0aad0a #e42575
~ brand-hover #089408 #c01b62
~ brand-active #067a06 #a01753
~ brand-soft #e3f5e3 #e425751a
~ accent-yellow #ffce5e #f4b942
~ border #e0e0e0 #e8dfc7
~ border-soft #ededed #f0e8d4
~ border-strong #999999 #cdbf99
~ link #0aad0a #e42575
~ link-hover #067a06 #c01b62
+ bg-strong #fff8eb
+ bg-deep #f4ead4
+ bg-dark #0c0c0c
+ bg-dark-elev #1a1a1a
+ surface-card #ffffff
+ surface-card-hover #fff8eb
+ text-subtle #9a9a9a
+ text-on-dark-soft #9a9a9a
+ brand-glow rgba(228,37,117,0.35)
+ accent-mint #3eb489
+ accent-mint-soft #3eb4891a
+ accent-violet #7a5af8
+ semantic-up #3eb489
+ semantic-up-soft #3eb4891a
+ semantic-down #d63b3b
+ semantic-down-soft #d63b3b1a
+ semantic-warning #f4b942
+ semantic-info #7a5af8
+ verified-mint #3eb489
+ focus-ring rgba(228,37,117,0.35)
+ scrim rgba(12,12,12,0.55)
bg-elevated #fafafa
bg-promo #003d2a
bg-cream #f7f4ee
surface #f6f6f6
surface-hover #ededed
surface-strong #e4e4e4
surface-on-promo #005a3e
text-strong #000000
text-faint #999999
brand-deep #003d2a
accent-orange #ff7a00
accent-red #e6483d
ring #0aad0a
success #0aad0a
warning #ff7a00
danger #e6483d
info #3b82f6
rating-gold #fcb53b
typography 4 changed
~ display {"family":"Instacart Sans","size":72} {"family":"Foundry Display","size":72}
~ h1 {"family":"Instacart Sans","size":40} {"family":"Foundry Display","size":40}
~ h2 {"family":"Instacart Sans","size":32} {"family":"Foundry Display","size":32}
~ body {"family":"Instacart Sans","size":16} {"family":"Inter","size":15}
radius 1 changed
~ pill 9999px 999px
spacing 1 changed
~ xl 48px 64px
↻ Swap direction · Magic Eden → Instacart