Diff

Vapi vs ElevenLabs

51 token-level differences between these two design systems.

Role tokens

Background

#0e0e13 → #ffffff

Text

#fffaea → #0a0a0a

Brand

#7ccf00 → #9fe870

Border

rgba(255, 255, 255, 0.08) → #0000001a

Display font

avantt → InterDisplay

Body size

16px → 16px

colors 40 changed

~ bg #0e0e13 → #ffffff

~ bg-soft #16161c → #fafafa

~ bg-band #1f1f23 → #f5f5f4

~ surface #16161c → #ffffff

~ surface-soft #1f1f23 → #fafafa

~ surface-hover #28282f → #f5f5f4

~ text #fffaea → #0a0a0a

~ text-strong #ffffff → #000000

~ text-muted #b7b3a9 → #525252

~ text-soft #86847e → #737373

~ text-faint #56544f → #a3a3a3

~ brand #7ccf00 → #9fe870

~ brand-hover #8ee10f → #8ad65e

~ brand-active #6bb500 → #76c349

~ brand-soft rgba(124, 207, 0, 0.16) → #d4f0c2

~ brand-faint rgba(124, 207, 0, 0.08) → #e2f6d5

~ on-brand #0e0e13 → #0a0a0a

~ accent #7ccf00 → #0e0f0c

~ link #7ccf00 → #0a0a0a

~ border rgba(255, 255, 255, 0.08) → #0000001a

~ border-soft rgba(255, 255, 255, 0.04) → #0000000d

~ border-strong rgba(255, 255, 255, 0.16) → #00000033

~ success #7ccf00 → #16a34a

~ success-bg rgba(124, 207, 0, 0.16) → #dcfce7

~ warning #fdc700 → #d97706

~ warning-bg rgba(253, 199, 0, 0.16) → #fef3c7

~ danger #fb2c36 → #dc2626

~ danger-bg rgba(251, 44, 54, 0.16) → #fee2e2

~ info #fffaea → #0a0a0a

~ info-bg #1f1f23 → #f5f5f4

+ text-display #0a0a0a

+ text-on-brand #0a0a0a

+ accent-warm #f5f5f4

− accent-red #fb2c36

− accent-amber #fdc700

− accent-orange #ff6900

− cta-dark-bg #000000

− cta-dark-text #fafafa

− cta-light-bg #ffffff

− cta-light-text #000000

typography 5 changed

~ display {"family":"avantt","size":96} → {"family":"InterDisplay","size":128}

~ h1 {"family":"avantt","size":80} → {"family":"InterDisplay","size":64}

~ h2 {"family":"avantt","size":58} → {"family":"InterDisplay","size":48}

~ body {"family":"seasonSans","size":16} → {"family":"Inter","size":16}

~ label {"family":"SFMono-Regular","size":13} → {"family":"JetBrains Mono","size":13}

radius 1 changed

~ card 12px → 16px

spacing 5 changed

~ xs 0px → 1px

~ sm 4px → 2px

~ md 12px → 6px

~ lg 32px → 16px

~ xl 64px → 24px

↻ Swap direction · ElevenLabs → Vapi