Diff

Anthropic vs v0

51 token-level differences between these two design systems.

Role tokens
Background
#faf9f5 #fafafa
Text
#141413 #262626
Brand
#cc785c #000000
Border
rgba(20, 20, 19, 0.10) rgba(0, 0, 0, 0.078)
Display font
Anthropic Sans GeistSans
Body size
20px 14px
colors 45 changed
~ bg #faf9f5 #fafafa
~ surface #ffffff #f2f2f2
~ text #141413 #262626
~ text-medium #3d3d3a #525252
~ text-soft #5e5d59 #bababa
~ text-faint #87867f #cfcfcf
~ text-muted #b0aea5 #7c7c7c
~ brand #cc785c #000000
~ brand-deep #a04a2c #000000
~ on-brand #faf9f5 #ffffff
~ link #141413 #000000
~ link-hover #cc785c #525252
~ selected-bg #f0eee6 #f2f2f2
~ disabled #b0aea5 #bababa
~ border rgba(20, 20, 19, 0.10) rgba(0, 0, 0, 0.078)
~ border-strong rgba(20, 20, 19, 0.20) rgba(0, 0, 0, 0.14)
~ border-subtle rgba(20, 20, 19, 0.05) rgba(0, 0, 0, 0.05)
~ success-bg #bcd1ca #f0f7f1
~ success-text #3d5a47 #1f6b3e
~ warning-bg #ebdbbc #fef6e4
~ warning-text #7a5e1f #7a5a14
~ danger-bg #ebcece #fbebec
~ danger-text #8a3a3a #9a2c34
~ info-bg #cbcadb #f2f2f2
~ info-text #3a3a6a #262626
+ bg-pure #ffffff
+ surface-soft #f0f0f0
+ surface-strong #e6e6e6
+ text-deep #969696
+ brand-soft rgba(0, 0, 0, 0.08)
+ border-focus #000000
bg-secondary #f0eee6
bg-secondary-hover #e8e6dc
brand-warm #d97757
swatch-clay #d97757
swatch-kraft #d4a27f
swatch-manilla #ebdbbc
swatch-oat #e3dacc
swatch-coral #ebcece
swatch-fig #c46686
swatch-heather #cbcadb
swatch-cactus #bcd1ca
swatch-olive #788c5d
swatch-sky #6a9bcc
border-clay rgba(204, 120, 92, 0.30)
typography 5 changed
~ display {"family":"Anthropic Sans","size":96} {"family":"GeistSans","size":48}
~ h1 {"family":"Anthropic Sans","size":64} {"family":"GeistSans","size":32}
~ h2 {"family":"Anthropic Sans","size":48} {"family":"GeistSans","size":24}
~ body {"family":"Anthropic Serif","size":20} {"family":"GeistSans","size":14}
~ label {"family":"Anthropic Mono","size":13} {"family":"GeistMono","size":12}
radius 1 changed
~ button 8px 6px
spacing identical
No differences.
↻ Swap direction · v0 → Anthropic