Diff

Binance vs OpenSea

57 token-level differences between these two design systems.

Role tokens
Background
#0b0e11 #04111d
Text
#eaecef #ffffff
Brand
#fcd535 #2081e2
Border
#2b3139 #1f2937
Display font
BinanceNova Inter
Body size
14px 14px
colors 49 changed
~ bg #0b0e11 #04111d
~ text #eaecef #ffffff
~ text-on-light #181a20 #04111d
~ text-muted #707a8a #8a939b
~ brand #fcd535 #2081e2
~ brand-active #f0b90b #1259a0
~ on-brand #181a20 #ffffff
~ border #2b3139 #1f2937
~ border-strong #cdd1d6 #2c3a4d
~ focus-ring rgba(59,130,246,0.50) rgba(32,129,226,0.40)
+ bg-elev-1 #0d1721
+ bg-elev-2 #1b2730
+ bg-elev-3 #252f3e
+ surface-card #0d1721
+ surface-card-hover #1b2730
+ text-body #c5cdd6
+ text-subtle #707a83
+ brand-hover #1868b7
+ brand-soft #2081e21a
+ brand-glow rgba(32,129,226,0.40)
+ border-soft #151b25
+ semantic-up #34c77b
+ semantic-up-soft #34c77b1a
+ semantic-down #eb5757
+ semantic-down-soft #eb57571a
+ semantic-warning #f5a623
+ semantic-info #2081e2
+ verified-blue #2081e2
+ category-art #bf60d5
+ category-gaming #34c77b
+ category-music #f5a623
+ rare-gold #fbbf24
+ scrim rgba(4,17,29,0.70)
+ link #2081e2
+ link-hover #5fa3eb
bg-light #ffffff
surface #1e2329
surface-elevated #2b3139
surface-soft-light #fafafa
surface-strong-light #f5f5f5
text-strong #ffffff
text-muted-strong #929aa5
brand-disabled #3a3a1f
border-light #eaecef
trading-up #0ecb81
trading-down #f6465d
accent-turquoise #2dbdb6
info #3b82f6
shadow-soft rgba(0,0,0,0.20)
typography 5 changed
~ display {"family":"BinanceNova","size":72} {"family":"Inter","size":72}
~ h1 {"family":"BinanceNova","size":40} {"family":"Inter","size":40}
~ h2 {"family":"BinanceNova","size":32} {"family":"Inter","size":32}
~ body {"family":"BinanceNova","size":14} {"family":"Inter","size":14}
~ label {"family":"BinancePlex","size":11} {"family":"JetBrains Mono","size":11}
radius 3 changed
~ button 6px 8px
~ card 8px 10px
~ pill 9999px 999px
spacing identical
No differences.
↻ Swap direction · OpenSea → Binance