Diff

Cohere vs Cartesia

66 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#212121 #0a0a0a
Brand
#17171c #2563eb
Border
#d9d9dd #e5e5e5
Display font
CohereText Inter
Body size
16px 15px
colors 53 changed
~ surface #ffffff #f5f5f5
~ text #212121 #0a0a0a
~ text-muted #616161 #525252
~ text-soft #75758a #737373
~ text-faint #93939f #a3a3a3
~ brand #17171c #2563eb
~ accent #1863dc #0a0a0a
~ border #d9d9dd #e5e5e5
+ bg-soft #fafafa
+ surface-strong #e5e5e5
+ surface-hover #f0f0f0
+ text-medium #262626
+ on-cta #ffffff
+ brand-hover #1d4fd7
+ brand-deep #1e40af
+ brand-soft #dbeafe
+ brand-faint #eff6ff
+ link #2563eb
+ link-hover #1d4fd7
+ selected-bg #eff6ff
+ disabled-bg #f5f5f5
+ disabled-text #a3a3a3
+ border-strong #d4d4d4
+ border-soft #f0f0f0
+ border-focus #2563eb
+ success-bg #dcfce7
+ success-text #15803d
+ warning-bg #fef3c7
+ warning-text #a16207
+ danger-bg #fee2e2
+ danger-text #b91c1c
+ info-bg #dbeafe
+ info-text #1e40af
+ shadow-rgb 0, 0, 0
+ shadow-blue 37, 99, 235
bg-soft-stone #eeece7
bg-pale-green #edfce9
bg-pale-blue #f1f5ff
bg-deep-green #003c33
bg-dark-navy #071829
bg-cohere-black #000000
surface-card #ffffff
surface-card-soft #f2f2f2
brand-anchor #000000
brand-deep-green #003c33
brand-coral #ff7759
brand-coral-soft #ffad9b
accent-focus #4c6ee6
accent-form-focus #9b60aa
border-light #e5e7eb
border-card #f2f2f2
on-dark #ffffff
semantic-error #b30000
typography 5 changed
~ display {"family":"CohereText","size":72} {"family":"Inter","size":96}
~ h1 {"family":"CohereText","size":40} {"family":"Inter","size":72}
~ h2 {"family":"CohereText","size":32} {"family":"Inter","size":48}
~ body {"family":"Unica77 Cohere Web","size":16} {"family":"Inter","size":15}
~ label {"family":"CohereMono","size":11} {"family":"IBM Plex Mono","size":13}
radius 3 changed
~ button 16px 6px
~ card 22px 12px
~ pill 32px 9999px
spacing 5 changed
~ xs 6px 1px
~ sm 8px 2px
~ md 12px 6px
~ lg 16px 12px
~ xl 24px 20px
↻ Swap direction · Cartesia → Cohere