Diff

Binance vs Capacities

61 token-level differences between these two design systems.

Role tokens
Background
#0b0e11 #ffffff
Text
#eaecef #1a1a1f
Brand
#fcd535 #c6f432
Border
#2b3139 #0000001a
Display font
BinanceNova Inter
Body size
14px 17px
colors 54 changed
~ bg #0b0e11 #ffffff
~ surface #1e2329 #faf3df
~ text #eaecef #1a1a1f
~ text-strong #ffffff #0e0f12
~ text-muted #707a8a #6b6770
~ on-brand #181a20 #1a1a1f
~ border #2b3139 #0000001a
~ border-strong #cdd1d6 #00000033
~ info #3b82f6 #5a8eb5
~ focus-ring rgba(59,130,246,0.50) #1a1a1f
+ bg-cream #fff4d6
+ bg-cream-soft #fff9e8
+ bg-soft #fef9e8
+ bg-tinted #fdf6e3
+ surface-raised #f5edd0
+ surface-overlay #ffffff
+ text-soft #9a969f
+ text-faint #c4c0c8
+ text-on-cta #ffffff
+ text-on-yellow #1a1a1f
+ brand-yellow #f5c842
+ brand-yellow-deep #e6b430
+ brand-yellow-soft #fce98c
+ brand-yellow-pale #fef4c2
+ cta-bg #1a1a1f
+ cta-text #ffffff
+ cta-hover #0e0f12
+ cta-active #000000
+ link #1a1a1f
+ link-hover #0e0f12
+ link-underline #f5c842
+ border-soft #00000010
+ border-cream #e8dfb8
+ selection-bg #fce98c
+ selection-text #1a1a1f
+ shadow rgba(0,0,0,0.06)
+ shadow-warm rgba(180,140,40,0.10)
+ success #5b9a4f
+ warning #e6b430
+ danger #c4554d
bg-light #ffffff
surface-elevated #2b3139
surface-soft-light #fafafa
surface-strong-light #f5f5f5
text-on-light #181a20
text-muted-strong #929aa5
brand #fcd535
brand-active #f0b90b
brand-disabled #3a3a1f
border-light #eaecef
trading-up #0ecb81
trading-down #f6465d
accent-turquoise #2dbdb6
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":64}
~ h2 {"family":"BinanceNova","size":32} {"family":"Inter","size":48}
~ body {"family":"BinanceNova","size":14} {"family":"Inter","size":17}
~ label {"family":"BinancePlex","size":11} {"family":"JetBrains Mono","size":13}
radius 2 changed
~ button 6px 8px
~ card 8px 24px
spacing identical
No differences.
↻ Swap direction · Capacities → Binance