Diff

HeyGen vs v0

55 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #fafafa

Text

#171717 → #262626

Brand

#00c3ff → #000000

Border

#0000001a → rgba(0, 0, 0, 0.078)

Display font

ABC Solar Display → GeistSans

Body size

16px → 14px

colors 44 changed

~ bg #ffffff → #fafafa

~ surface #ffffff → #f2f2f2

~ text #171717 → #262626

~ text-soft #52525b → #bababa

~ text-faint #71717a → #cfcfcf

~ text-muted #a1a1aa → #7c7c7c

~ brand #00c3ff → #000000

~ brand-soft #cdf2ff → rgba(0, 0, 0, 0.08)

~ on-brand #000000 → #ffffff

~ link #0094c2 → #000000

~ link-hover #007ba3 → #525252

~ selected-bg #e6f9ff → #f2f2f2

~ disabled #a1a1aa → #bababa

~ border #0000001a → rgba(0, 0, 0, 0.078)

~ border-strong #00000026 → rgba(0, 0, 0, 0.14)

~ border-subtle #00000010 → rgba(0, 0, 0, 0.05)

~ success-bg #dcfce7 → #f0f7f1

~ success-text #166534 → #1f6b3e

~ warning-bg #fef3c7 → #fef6e4

~ warning-text #92400e → #7a5a14

~ danger-bg #fee2e2 → #fbebec

~ danger-text #b91c1c → #9a2c34

~ info-bg #e6f9ff → #f2f2f2

~ info-text #0094c2 → #262626

+ bg-pure #ffffff

+ surface-soft #f0f0f0

+ surface-strong #e6e6e6

+ text-strong #000000

+ text-medium #525252

+ text-deep #969696

+ brand-deep #000000

+ border-focus #000000

− bg-soft #fafafa

− bg-tertiary #f4f4f5

− surface-tint #f0fbff

− text-display #333333

− text-secondary #3f3f46

− brand-hover #00abe0

− brand-active #0094c2

− brand-tint #e6f9ff

− accent-black #000000

− on-accent-black #ffffff

− accent-cyan-deep #0094c2

− border-brand rgba(0, 195, 255, 0.40)

typography 5 changed

~ display {"family":"ABC Solar Display","size":80} → {"family":"GeistSans","size":48}

~ h1 {"family":"ABC Solar Display","size":80} → {"family":"GeistSans","size":32}

~ h2 {"family":"ABC Solar Display","size":56} → {"family":"GeistSans","size":24}

~ body {"family":"TT Norms Pro","size":16} → {"family":"GeistSans","size":14}

~ label {"family":"SFMono-Regular","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 → HeyGen