Diff

Perplexity vs Cartesia

53 token-level differences between these two design systems.

Role tokens
Background
#fbf9f5 #ffffff
Text
#272520 #0a0a0a
Brand
#20808d #2563eb
Border
rgba(39, 26, 0, 0.12) #e5e5e5
Display font
pplxSans Inter
Body size
16px 15px
colors 47 changed
~ bg #fbf9f5 #ffffff
~ bg-soft #f5f1ea #fafafa
~ surface #ffffff #f5f5f5
~ text #272520 #0a0a0a
~ text-strong #1a1813 #000000
~ text-medium #3f3a31 #262626
~ text-muted #5d574c #525252
~ text-soft #7a7367 #737373
~ text-faint #9a9388 #a3a3a3
~ brand #20808d #2563eb
~ brand-deep #0f4f5a #1e40af
~ brand-soft #d6ecef #dbeafe
~ link #20808d #2563eb
~ link-hover #176874 #1d4fd7
~ selected-bg rgba(32, 128, 141, 0.10) #eff6ff
~ border rgba(39, 26, 0, 0.12) #e5e5e5
~ border-strong rgba(39, 26, 0, 0.20) #d4d4d4
~ border-soft rgba(39, 26, 0, 0.07) #f0f0f0
~ success-bg #dceee0 #dcfce7
~ success-text #2f5d3f #15803d
~ warning-bg #f5e8c5 #fef3c7
~ warning-text #7a5e1f #a16207
~ danger-bg #f4dada #fee2e2
~ danger-text #8a3a3a #b91c1c
~ info-bg #d6ecef #dbeafe
~ info-text #0f4f5a #1e40af
+ surface-strong #e5e5e5
+ surface-hover #f0f0f0
+ on-cta #ffffff
+ brand-hover #1d4fd7
+ brand-faint #eff6ff
+ accent #0a0a0a
+ disabled-bg #f5f5f5
+ disabled-text #a3a3a3
+ border-focus #2563eb
+ shadow-rgb 0, 0, 0
+ shadow-blue 37, 99, 235
bg-deep #efeae0
surface-warm rgba(39, 26, 0, 0.07)
brand-strong #176874
brand-wash rgba(32, 128, 141, 0.08)
cta-bg #272520
cta-text #fdfbfa
cta-hover-bg #3a342b
cta-active-bg #1a1813
disabled #b8b1a4
border-brand rgba(32, 128, 141, 0.30)
typography 5 changed
~ display {"family":"pplxSans","size":72} {"family":"Inter","size":96}
~ h1 {"family":"pplxSans","size":48} {"family":"Inter","size":72}
~ h2 {"family":"pplxSans","size":36} {"family":"Inter","size":48}
~ body {"family":"pplxSans","size":16} {"family":"Inter","size":15}
~ label {"family":"pplxMono","size":12} {"family":"IBM Plex Mono","size":13}
radius 1 changed
~ button 8px 6px
spacing identical
No differences.
↻ Swap direction · Cartesia → Perplexity