Diff

HeyGen vs Harvey

44 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #0f0e0d

Text

#171717 → #ffffff

Brand

#00c3ff → #fafaf9

Border

#0000001a → rgba(255, 255, 255, 0.12)

Display font

ABC Solar Display → HarveySerifFont

Body size

16px → 16px

colors 39 changed

~ bg #ffffff → #0f0e0d

~ surface #ffffff → #1a1918

~ text #171717 → #ffffff

~ text-secondary #3f3f46 → rgba(255, 255, 255, 0.72)

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

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

~ brand #00c3ff → #fafaf9

~ on-brand #000000 → #0f0e0d

~ link #0094c2 → #fafaf9

~ link-hover #007ba3 → #ffffff

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

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

~ border #0000001a → rgba(255, 255, 255, 0.12)

~ border-strong #00000026 → rgba(255, 255, 255, 0.24)

~ border-subtle #00000010 → rgba(255, 255, 255, 0.06)

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

~ success-text #166534 → #a9c9a9

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

~ warning-text #92400e → #d8be93

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

~ danger-text #b91c1c → #e0a3a3

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

~ info-text #0094c2 → #fafaf9

+ surface-raised #242220

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

+ text-strong #fafaf9

− bg-soft #fafafa

− bg-tertiary #f4f4f5

− surface-tint #f0fbff

− text-display #333333

− text-soft #52525b

− brand-hover #00abe0

− brand-active #0094c2

− brand-soft #cdf2ff

− 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":"HarveySerifFont","size":96}

~ h1 {"family":"ABC Solar Display","size":80} → {"family":"HarveySerifFont","size":72}

~ h2 {"family":"ABC Solar Display","size":56} → {"family":"HarveySerifFont","size":48}

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

~ label {"family":"SFMono-Regular","size":13} → {"family":"Söhne Mono","size":13}

radius identical

No differences.

spacing identical

No differences.

↻ Swap direction · Harvey → HeyGen