Diff

Caraway vs CVS Health

52 token-level differences between these two design systems.

Role tokens
Background
#fcfcf9 #ffffff
Text
#1f3438 #000000
Brand
#1f3438 #cc0000
Border
#e4e2da #000000
Display font
Suisse Works CVS Sans Regular
Body size
16px 16px
colors 47 changed
~ bg #fcfcf9 #ffffff
~ bg-soft #f7f7f4 #f7f7f7
~ surface-soft #f7f7f4 #f7f7f7
~ brand #1f3438 #cc0000
~ brand-soft #33524f #e34a4a
~ text #1f3438 #000000
~ text-strong #16282b #000000
~ text-muted #5b6f72 #5b5b5b
~ link #1f3438 #cc0000
~ link-hover #33524f #a30000
~ border #e4e2da #000000
~ border-strong #1f3438 #000000
~ border-soft #efeee7 #d7d7d7
~ success #3a7a52 #1f7a3d
~ warning #c8861a #9a6700
~ danger #b04a3a #cc0000
~ info #33524f #005a9c
+ surface-muted #efefef
+ surface-red-tint #fdeaea
+ text-soft #767676
+ text-on-dark #ffffff
+ brand-hover #a30000
+ brand-active #8a0000
+ link-visited #7a1f5c
+ border-input #767676
+ focus-ring #cc0000
+ scrim rgba(0,0,0,0.55)
+ shadow-card rgba(0,0,0,0.08)
+ shadow-elev rgba(0,0,0,0.16)
+ success-soft #e7f3ec
+ warning-soft #fbf3e0
+ danger-soft #fdeaea
+ info-soft #e6f0f8
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-faint #8a999b
typography 4 changed
~ display {"family":"Suisse Works","size":64} {"family":"CVS Sans Regular","size":80}
~ h1 {"family":"Suisse Works","size":48} {"family":"CVS Sans Regular","size":32}
~ h2 {"family":"Suisse Works","size":20} {"family":"CVS Sans Regular","size":28}
~ body {"family":"Moderat","size":16} {"family":"CVS Sans Regular","size":16}
radius 1 changed
~ pill 40px 9999px
spacing identical
No differences.
↻ Swap direction · CVS Health → Caraway