Diff

Vapi vs dYdX

58 token-level differences between these two design systems.

Role tokens
Background
#0e0e13 #000000
Text
#fffaea #fafafd
Brand
#7ccf00 #7774ff
Border
rgba(255, 255, 255, 0.08) #1f1f24
Display font
avantt Satoshi
Body size
16px 16px
colors 54 changed
~ bg #0e0e13 #000000
~ surface #16161c #0a0a0a
~ text #fffaea #fafafd
~ text-muted #b7b3a9 #8a8a96
~ brand #7ccf00 #7774ff
~ brand-hover #8ee10f #8e8bff
~ brand-active #6bb500 #605df0
~ brand-soft rgba(124, 207, 0, 0.16) #7774ff1a
~ on-brand #0e0e13 #ffffff
~ link #7ccf00 #7774ff
~ border rgba(255, 255, 255, 0.08) #1f1f24
~ border-soft rgba(255, 255, 255, 0.04) #131316
~ border-strong rgba(255, 255, 255, 0.16) #33333c
+ bg-elev-1 #0a0a0a
+ bg-elev-2 #131316
+ bg-elev-3 #1c1c20
+ surface-strong #131316
+ text-body #c8c8d2
+ text-subtle #5a5a64
+ brand-glow rgba(119,116,255,0.40)
+ border-brand #7774ff
+ semantic-up #26c486
+ semantic-up-soft #26c4861a
+ semantic-down #ff5a5a
+ semantic-down-soft #ff5a5a1a
+ semantic-warning #f5b945
+ semantic-info #7774ff
+ focus-ring rgba(119,116,255,0.55)
+ scrim rgba(0,0,0,0.80)
+ link-hover #8e8bff
bg-soft #16161c
bg-band #1f1f23
surface-soft #1f1f23
surface-hover #28282f
text-strong #ffffff
text-soft #86847e
text-faint #56544f
brand-faint rgba(124, 207, 0, 0.08)
accent-red #fb2c36
accent-amber #fdc700
accent-orange #ff6900
accent #7ccf00
cta-dark-bg #000000
cta-dark-text #fafafa
cta-light-bg #ffffff
cta-light-text #000000
success #7ccf00
success-bg rgba(124, 207, 0, 0.16)
warning #fdc700
warning-bg rgba(253, 199, 0, 0.16)
danger #fb2c36
danger-bg rgba(251, 44, 54, 0.16)
info #fffaea
info-bg #1f1f23
typography 4 changed
~ display {"family":"avantt","size":96} {"family":"Satoshi","size":60}
~ h1 {"family":"avantt","size":80} {"family":"Satoshi","size":40}
~ h2 {"family":"avantt","size":58} {"family":"Satoshi","size":32}
~ body {"family":"seasonSans","size":16} {"family":"Satoshi","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · dYdX → Vapi