Diff

v0 vs Harvey

46 token-level differences between these two design systems.

Role tokens

Background

#fafafa → #0f0e0d

Text

#262626 → #ffffff

Brand

#000000 → #fafaf9

Border

rgba(0, 0, 0, 0.078) → rgba(255, 255, 255, 0.12)

Display font

GeistSans → HarveySerifFont

Body size

14px → 16px

colors 35 changed

~ bg #fafafa → #0f0e0d

~ surface #f2f2f2 → #1a1918

~ text #262626 → #ffffff

~ text-strong #000000 → #fafaf9

~ text-muted #7c7c7c → rgba(255, 255, 255, 0.56)

~ text-faint #cfcfcf → rgba(255, 255, 255, 0.40)

~ brand #000000 → #fafaf9

~ on-brand #ffffff → #0f0e0d

~ link #000000 → #fafaf9

~ link-hover #525252 → #ffffff

~ selected-bg #f2f2f2 → rgba(250, 250, 249, 0.08)

~ disabled #bababa → rgba(255, 255, 255, 0.32)

~ border rgba(0, 0, 0, 0.078) → rgba(255, 255, 255, 0.12)

~ border-strong rgba(0, 0, 0, 0.14) → rgba(255, 255, 255, 0.24)

~ border-subtle rgba(0, 0, 0, 0.05) → rgba(255, 255, 255, 0.06)

~ success-bg #f0f7f1 → rgba(122, 158, 122, 0.14)

~ success-text #1f6b3e → #a9c9a9

~ warning-bg #fef6e4 → rgba(201, 169, 110, 0.14)

~ warning-text #7a5a14 → #d8be93

~ danger-bg #fbebec → rgba(196, 110, 110, 0.14)

~ danger-text #9a2c34 → #e0a3a3

~ info-bg #f2f2f2 → rgba(255, 255, 255, 0.08)

~ info-text #262626 → #fafaf9

+ surface-raised #242220

+ overlay-backdrop rgba(0, 0, 0, 0.6)

+ text-secondary rgba(255, 255, 255, 0.72)

− bg-pure #ffffff

− surface-soft #f0f0f0

− surface-strong #e6e6e6

− text-medium #525252

− text-deep #969696

− text-soft #bababa

− brand-deep #000000

− brand-soft rgba(0, 0, 0, 0.08)

− border-focus #000000

typography 5 changed

~ display {"family":"GeistSans","size":48} → {"family":"HarveySerifFont","size":96}

~ h1 {"family":"GeistSans","size":32} → {"family":"HarveySerifFont","size":72}

~ h2 {"family":"GeistSans","size":24} → {"family":"HarveySerifFont","size":48}

~ body {"family":"GeistSans","size":14} → {"family":"HarveySansFont","size":16}

~ label {"family":"GeistMono","size":12} → {"family":"Söhne Mono","size":13}

radius 1 changed

~ button 6px → 8px

spacing 5 changed

~ xs 1px → 0px

~ sm 2px → 4px

~ md 6px → 12px

~ lg 12px → 32px

~ xl 20px → 64px

↻ Swap direction · Harvey → v0