Diff

Zoom vs Cartesia

63 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0a0a0a
Brand
#0b5cff #2563eb
Border
#d6d8df #e5e5e5
Display font
Almaden Sans Inter
Body size
16px 15px
colors 52 changed
~ bg-soft #f8f9fa #fafafa
~ surface #ffffff #f5f5f5
~ text #000000 #0a0a0a
~ text-medium #232333 #262626
~ text-soft #3d3d50 #737373
~ text-muted #67677e #525252
~ text-faint #9595a8 #a3a3a3
~ brand #0b5cff #2563eb
~ brand-deep #0846cc #1e40af
~ brand-soft #eef4ff #dbeafe
~ link #0b5cff #2563eb
~ link-hover #0846cc #1d4fd7
~ selected-bg #eef4ff #eff6ff
~ border #d6d8df #e5e5e5
~ border-strong #a8acb8 #d4d4d4
~ success-bg #e3f6ed #dcfce7
~ success-text #16794e #15803d
~ warning-bg #fff4e0 #fef3c7
~ warning-text #7a5400 #a16207
~ danger-bg #fde6ea #fee2e2
~ danger-text #a51c30 #b91c1c
~ info-bg #eef4ff #dbeafe
~ info-text #0846cc #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-soft #f0f0f0
+ border-focus #2563eb
+ shadow-rgb 0, 0, 0
+ shadow-blue 37, 99, 235
bg-blue-soft #eef4ff
bg-blue-deep #0b1739
surface-elev #fafbfc
text-disabled #c4c4cf
text-on-deep #ffffff
brand-bright #2872ff
brand-tint #b3ccff
accent-violet #7b61ff
accent-violet-soft #f0ecff
accent-cyan #00b6f0
accent-cyan-soft #e0f6fd
accent-orange #ff7a59
accent-orange-soft #fff0eb
accent-green #3ec78f
disabled #c4c4cf
border-subtle #eceef2
border-brand rgba(11, 92, 255, 0.30)
typography 5 changed
~ display {"family":"Almaden Sans","size":80} {"family":"Inter","size":96}
~ h1 {"family":"Almaden Sans","size":40} {"family":"Inter","size":72}
~ h2 {"family":"Almaden Sans","size":32} {"family":"Inter","size":48}
~ body {"family":"Almaden Sans","size":16} {"family":"Inter","size":15}
~ label {"family":"SFMono-Regular","size":13} {"family":"IBM Plex Mono","size":13}
radius 1 changed
~ button 8px 6px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 32px 12px
~ xl 64px 20px
↻ Swap direction · Cartesia → Zoom