Diff

Cartesia vs Perplexity

53 token-level differences between these two design systems.

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