Diff

Optimism vs OpenSea

52 token-level differences between these two design systems.

Role tokens
Background
#ffffff #04111d
Text
#000000 #ffffff
Brand
#ff0420 #2081e2
Border
#e0e0e0 #1f2937
Display font
Optimism Display Inter
Body size
16px 14px
colors 46 changed
~ bg #ffffff #04111d
~ surface-card #ffffff #0d1721
~ text #000000 #ffffff
~ text-body #1a1a1a #c5cdd6
~ text-muted #5a5a5a #8a939b
~ text-subtle #8a8a8a #707a83
~ brand #ff0420 #2081e2
~ brand-hover #cc0319 #1868b7
~ brand-active #a30214 #1259a0
~ brand-soft #ff04201a #2081e21a
~ brand-glow rgba(255,4,32,0.40) rgba(32,129,226,0.40)
~ border #e0e0e0 #1f2937
~ border-soft #ebebeb #151b25
~ border-strong #c0c0c0 #2c3a4d
~ semantic-up #10b981 #34c77b
~ semantic-down #ef4444 #eb5757
~ semantic-warning #f59e0b #f5a623
~ semantic-info #ff0420 #2081e2
~ focus-ring rgba(255,4,32,0.45) rgba(32,129,226,0.40)
~ scrim rgba(0,0,0,0.65) rgba(4,17,29,0.70)
~ link #ff0420 #2081e2
~ link-hover #cc0319 #5fa3eb
+ bg-elev-1 #0d1721
+ bg-elev-2 #1b2730
+ bg-elev-3 #252f3e
+ surface-card-hover #1b2730
+ text-on-light #04111d
+ semantic-up-soft #34c77b1a
+ semantic-down-soft #eb57571a
+ verified-blue #2081e2
+ category-art #bf60d5
+ category-gaming #34c77b
+ category-music #f5a623
+ rare-gold #fbbf24
bg-soft #f5f5f5
bg-strong #e6e6e6
bg-dark #000000
bg-dark-elev #1a1a1a
bg-dark-deep #0a0a0a
surface-card-soft #f5f5f5
text-on-dark #ffffff
text-on-dark-soft #a8a8a8
brand-deep #7d020f
brand-bright #ff3344
gradient-hero linear-gradient(135deg, #000000 0%, #1a1a1a 60%, #7d020f 100%)
gradient-red linear-gradient(135deg, #ff0420 0%, #cc0319 100%)
typography 4 changed
~ display {"family":"Optimism Display","size":72} {"family":"Inter","size":72}
~ h1 {"family":"Optimism Display","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Optimism Display","size":32} {"family":"Inter","size":32}
~ body {"family":"Inter","size":16} {"family":"Inter","size":14}
radius 2 changed
~ button 12px 8px
~ card 12px 10px
spacing identical
No differences.
↻ Swap direction · OpenSea → Optimism