Diff

Caraway vs Vapi

57 token-level differences between these two design systems.

Role tokens
Background
#fcfcf9 #0e0e13
Text
#1f3438 #fffaea
Brand
#1f3438 #7ccf00
Border
#e4e2da rgba(255, 255, 255, 0.08)
Display font
Suisse Works avantt
Body size
16px 16px
colors 52 changed
~ bg #fcfcf9 #0e0e13
~ bg-soft #f7f7f4 #16161c
~ surface #ffffff #16161c
~ surface-soft #f7f7f4 #1f1f23
~ brand #1f3438 #7ccf00
~ brand-soft #33524f rgba(124, 207, 0, 0.16)
~ on-brand #ffffff #0e0e13
~ text #1f3438 #fffaea
~ text-strong #16282b #ffffff
~ text-muted #5b6f72 #b7b3a9
~ text-faint #8a999b #56544f
~ link #1f3438 #7ccf00
~ border #e4e2da rgba(255, 255, 255, 0.08)
~ border-strong #1f3438 rgba(255, 255, 255, 0.16)
~ border-soft #efeee7 rgba(255, 255, 255, 0.04)
~ success #3a7a52 #7ccf00
~ warning #c8861a #fdc700
~ danger #b04a3a #fb2c36
~ info #33524f #fffaea
+ bg-band #1f1f23
+ surface-hover #28282f
+ text-soft #86847e
+ brand-hover #8ee10f
+ brand-active #6bb500
+ 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-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
bg-deeper #f0efe9
hero-plate #1f3438
colorway-cream #f3ead9
colorway-sage #b9c4ad
colorway-navy #2b3a52
colorway-terracotta #c97b58
colorway-marigold #e9b949
cta-bg #1f3438
cta-text #ffffff
cta-bg-hover #33524f
on-cta-hover #ffffff
cta-secondary-bg #f7f7f4
cta-secondary-text #1f3438
text-on-brand #ffffff
link-hover #33524f
typography 4 changed
~ display {"family":"Suisse Works","size":64} {"family":"avantt","size":96}
~ h1 {"family":"Suisse Works","size":48} {"family":"avantt","size":80}
~ h2 {"family":"Suisse Works","size":20} {"family":"avantt","size":58}
~ body {"family":"Moderat","size":16} {"family":"seasonSans","size":16}
radius 1 changed
~ pill 40px 9999px
spacing identical
No differences.
↻ Swap direction · Vapi → Caraway