Diff

Harvey vs v0

46 token-level differences between these two design systems.

Role tokens

Background

#0f0e0d → #fafafa

Text

#ffffff → #262626

Brand

#fafaf9 → #000000

Border

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

Display font

HarveySerifFont → GeistSans

Body size

16px → 14px

colors 35 changed

~ bg #0f0e0d → #fafafa

~ text #ffffff → #262626

~ brand #fafaf9 → #000000

~ on-brand #0f0e0d → #ffffff

~ surface #1a1918 → #f2f2f2

~ text-strong #fafaf9 → #000000

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

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

~ link #fafaf9 → #000000

~ link-hover #ffffff → #525252

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

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

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

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

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

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

~ success-text #a9c9a9 → #1f6b3e

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

~ warning-text #d8be93 → #7a5a14

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

~ danger-text #e0a3a3 → #9a2c34

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

~ info-text #fafaf9 → #262626

+ 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

− surface-raised #242220

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

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

typography 5 changed

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

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

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

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

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

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 · v0 → Harvey