Diff

Vapi vs Anytype

56 token-level differences between these two design systems.

Role tokens
Background
#0e0e13 #000000
Text
#fffaea #ffffff
Brand
#7ccf00 #3cd9b3
Border
rgba(255, 255, 255, 0.08) #262626
Display font
avantt Riccione
Body size
16px 16px
colors 52 changed
~ bg #0e0e13 #000000
~ surface #16161c #0d0d0d
~ surface-hover #28282f #242424
~ text #fffaea #ffffff
~ text-muted #b7b3a9 #8a8a8a
~ text-faint #56544f #5c5c5c
~ brand #7ccf00 #3cd9b3
~ brand-hover #8ee10f #2fc4a0
~ brand-active #6bb500 #27a98a
~ brand-soft rgba(124, 207, 0, 0.16) #0e2b25
~ on-brand #0e0e13 #000000
~ border rgba(255, 255, 255, 0.08) #262626
~ border-soft rgba(255, 255, 255, 0.04) #1a1a1a
~ border-strong rgba(255, 255, 255, 0.16) #3a3a3a
~ success #7ccf00 #4cad00
~ warning #fdc700 #ffb522
~ danger #fb2c36 #ff6a7b
~ info #fffaea #18a3f1
+ bg-deep #000000
+ surface-elev #1a1a1a
+ text-secondary #b8b8b8
+ brand-text #3cd9b3
+ any-teal #3cd9b3
+ any-blue #18a3f1
+ any-green #4cad00
+ any-amber #ffb522
+ border-brand #3cd9b3
+ shadow-ambient rgba(0,0,0,0.50)
+ shadow-card rgba(0,0,0,0.65)
+ shadow-modal rgba(0,0,0,0.80)
+ scrim rgba(0,0,0,0.70)
+ success-soft #0f2200
+ warning-soft #2a1d00
+ danger-soft #2e1115
bg-soft #16161c
bg-band #1f1f23
surface-soft #1f1f23
text-soft #86847e
brand-faint rgba(124, 207, 0, 0.08)
accent-red #fb2c36
accent-amber #fdc700
accent-orange #ff6900
accent #7ccf00
link #7ccf00
cta-dark-bg #000000
cta-dark-text #fafafa
cta-light-bg #ffffff
cta-light-text #000000
success-bg rgba(124, 207, 0, 0.16)
warning-bg rgba(253, 199, 0, 0.16)
danger-bg rgba(251, 44, 54, 0.16)
info-bg #1f1f23
typography 4 changed
~ display {"family":"avantt","size":96} {"family":"Riccione","size":88}
~ h1 {"family":"avantt","size":80} {"family":"Riccione","size":48}
~ h2 {"family":"avantt","size":58} {"family":"Riccione","size":36}
~ body {"family":"seasonSans","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Anytype → Vapi