Diff

Binance vs Coinbase

45 token-level differences between these two design systems.

Role tokens
Background
#0b0e11 #ffffff
Text
#eaecef #0a0b0d
Brand
#fcd535 #0052ff
Border
#2b3139 #dee1e6
Display font
BinanceNova Coinbase Display
Body size
14px 16px
colors 37 changed
~ bg #0b0e11 #ffffff
~ text #eaecef #0a0b0d
~ text-muted #707a8a #7c828a
~ brand #fcd535 #0052ff
~ brand-active #f0b90b #003ecc
~ brand-disabled #3a3a1f #a8b8cc
~ on-brand #181a20 #ffffff
~ border #2b3139 #dee1e6
~ focus-ring rgba(59,130,246,0.50) rgba(0,82,255,0.30)
+ bg-dark #0a0b0d
+ surface-soft #f7f7f7
+ surface-strong #eef0f3
+ surface-card #ffffff
+ surface-dark-elevated #16181c
+ text-body #5b616e
+ text-subtle #a8acb3
+ on-dark #ffffff
+ on-dark-soft #a8acb3
+ border-soft #eef0f3
+ semantic-up #05b169
+ semantic-down #cf202f
+ accent-yellow #f4b000
bg-light #ffffff
surface #1e2329
surface-elevated #2b3139
surface-soft-light #fafafa
surface-strong-light #f5f5f5
text-strong #ffffff
text-on-light #181a20
text-muted-strong #929aa5
border-light #eaecef
border-strong #cdd1d6
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":"Coinbase Display","size":72}
~ h1 {"family":"BinanceNova","size":40} {"family":"Coinbase Display","size":40}
~ h2 {"family":"BinanceNova","size":32} {"family":"Coinbase Display","size":32}
~ body {"family":"BinanceNova","size":14} {"family":"Coinbase Sans","size":16}
~ label {"family":"BinancePlex","size":11} {"family":"Coinbase Mono","size":11}
radius 3 changed
~ button 6px 12px
~ card 8px 16px
~ pill 9999px 100px
spacing identical
No differences.
↻ Swap direction · Coinbase → Binance