Diff

Composio vs Binance

47 token-level differences between these two design systems.

Role tokens
Background
#0f0f0f #0b0e11
Text
#ffffff #eaecef
Brand
#0007cd #fcd535
Border
#222222 #2b3139
Display font
abcDiatype BinanceNova
Body size
16px 14px
colors 40 changed
~ bg #0f0f0f #0b0e11
~ surface #181818 #1e2329
~ surface-elevated #222222 #2b3139
~ text #ffffff #eaecef
~ text-muted #888888 #707a8a
~ brand #0007cd #fcd535
~ brand-active #0005a3 #f0b90b
~ on-brand #ffffff #181a20
~ border #222222 #2b3139
~ border-strong #333333 #cdd1d6
~ info #1a26ff #3b82f6
+ bg-light #ffffff
+ surface-soft-light #fafafa
+ surface-strong-light #f5f5f5
+ text-on-light #181a20
+ text-muted-strong #929aa5
+ brand-disabled #3a3a1f
+ border-light #eaecef
+ trading-up #0ecb81
+ trading-down #f6465d
+ accent-turquoise #2dbdb6
+ shadow-soft rgba(0,0,0,0.20)
+ focus-ring rgba(59,130,246,0.50)
bg-deep #000000
surface-strong #2a2a2a
text-body #a8a8a8
text-faint #666666
brand-glow #1a26ff
on-dark #ffffff
link #1a26ff
link-hover #0007cd
border-soft #1a1a1a
border-brand rgba(0,7,205,0.4)
shadow-color rgba(0,0,0,0.6)
shadow-glow-blue rgba(26,38,255,0.25)
accent-cyan #00d4ff
accent-violet #7b3aed
success #33d17a
warning #f59e0b
danger #ff4d4d
typography 5 changed
~ display {"family":"abcDiatype","size":72} {"family":"BinanceNova","size":72}
~ h1 {"family":"abcDiatype","size":40} {"family":"BinanceNova","size":40}
~ h2 {"family":"abcDiatype","size":32} {"family":"BinanceNova","size":32}
~ body {"family":"abcDiatype","size":16} {"family":"BinanceNova","size":14}
~ label {"family":"JetBrains Mono","size":11} {"family":"BinancePlex","size":11}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Binance → Composio