Diff

OpenSea vs Magic Eden

51 token-level differences between these two design systems.

Role tokens
Background
#04111d #fdfaf3
Text
#ffffff #0c0c0c
Brand
#2081e2 #e42575
Border
#1f2937 #e8dfc7
Display font
Inter Foundry Display
Body size
14px 15px
colors 45 changed
~ bg #04111d #fdfaf3
~ surface-card #0d1721 #ffffff
~ surface-card-hover #1b2730 #fff8eb
~ text #ffffff #0c0c0c
~ text-body #c5cdd6 #3a3a3a
~ text-muted #8a939b #6b6b6b
~ text-subtle #707a83 #9a9a9a
~ brand #2081e2 #e42575
~ brand-hover #1868b7 #c01b62
~ brand-active #1259a0 #a01753
~ brand-soft #2081e21a #e425751a
~ brand-glow rgba(32,129,226,0.40) rgba(228,37,117,0.35)
~ border #1f2937 #e8dfc7
~ border-soft #151b25 #f0e8d4
~ border-strong #2c3a4d #cdbf99
~ semantic-up #34c77b #3eb489
~ semantic-up-soft #34c77b1a #3eb4891a
~ semantic-down #eb5757 #d63b3b
~ semantic-down-soft #eb57571a #d63b3b1a
~ semantic-warning #f5a623 #f4b942
~ semantic-info #2081e2 #7a5af8
~ focus-ring rgba(32,129,226,0.40) rgba(228,37,117,0.35)
~ scrim rgba(4,17,29,0.70) rgba(12,12,12,0.55)
~ link #2081e2 #e42575
~ link-hover #5fa3eb #c01b62
+ bg-strong #fff8eb
+ bg-deep #f4ead4
+ bg-dark #0c0c0c
+ bg-dark-elev #1a1a1a
+ text-on-dark #fdfaf3
+ text-on-dark-soft #9a9a9a
+ accent-mint #3eb489
+ accent-mint-soft #3eb4891a
+ accent-violet #7a5af8
+ accent-yellow #f4b942
+ verified-mint #3eb489
bg-elev-1 #0d1721
bg-elev-2 #1b2730
bg-elev-3 #252f3e
text-on-light #04111d
verified-blue #2081e2
category-art #bf60d5
category-gaming #34c77b
category-music #f5a623
rare-gold #fbbf24
typography 4 changed
~ display {"family":"Inter","size":72} {"family":"Foundry Display","size":72}
~ h1 {"family":"Inter","size":40} {"family":"Foundry Display","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Foundry Display","size":32}
~ body {"family":"Inter","size":14} {"family":"Inter","size":15}
radius 2 changed
~ button 8px 12px
~ card 10px 16px
spacing identical
No differences.
↻ Swap direction · Magic Eden → OpenSea