Diff

OpenSea vs Blur

45 token-level differences between these two design systems.

Role tokens
Background
#04111d #000000
Text
#ffffff #ffffff
Brand
#2081e2 #ff8700
Border
#1f2937 #262626
Display font
Inter JetBrains Mono
Body size
14px 13px
colors 38 changed
~ bg #04111d #000000
~ bg-elev-1 #0d1721 #0d0d0d
~ bg-elev-2 #1b2730 #1a1a1a
~ bg-elev-3 #252f3e #252525
~ surface-card #0d1721 #0d0d0d
~ text-body #c5cdd6 #cccccc
~ text-muted #8a939b #878787
~ text-subtle #707a83 #5a5a5a
~ brand #2081e2 #ff8700
~ brand-hover #1868b7 #cc6c00
~ brand-active #1259a0 #a35700
~ brand-soft #2081e21a #ff87001a
~ brand-glow rgba(32,129,226,0.40) rgba(255,135,0,0.40)
~ on-brand #ffffff #000000
~ border #1f2937 #262626
~ border-soft #151b25 #1a1a1a
~ border-strong #2c3a4d #3d3d3d
~ semantic-up #34c77b #22c55e
~ semantic-up-soft #34c77b1a #22c55e1a
~ semantic-down #eb5757 #ef4444
~ semantic-down-soft #eb57571a #ef44441a
~ semantic-warning #f5a623 #fbbf24
~ semantic-info #2081e2 #3b82f6
~ focus-ring rgba(32,129,226,0.40) rgba(255,135,0,0.50)
~ scrim rgba(4,17,29,0.70) rgba(0,0,0,0.80)
~ link #2081e2 #ff8700
~ link-hover #5fa3eb #ffa84d
+ surface-row-hover #1a1a1a
+ border-brand #ff8700
+ bid-pool-orange #ff8700
+ rare-trait #ff8700
surface-card-hover #1b2730
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":"JetBrains Mono","size":72}
~ h1 {"family":"Inter","size":40} {"family":"JetBrains Mono","size":40}
~ h2 {"family":"Inter","size":32} {"family":"JetBrains Mono","size":32}
~ body {"family":"Inter","size":14} {"family":"JetBrains Mono","size":13}
radius 3 changed
~ button 8px 0px
~ card 10px 0px
~ pill 999px 0px
spacing identical
No differences.
↻ Swap direction · Blur → OpenSea