Diff

Udio vs HeyGen

46 token-level differences between these two design systems.

Role tokens

Background

#000000 → #ffffff

Text

#f9f9f9 → #171717

Brand

#e30b5d → #00c3ff

Border

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

Display font

InnovatorFont → ABC Solar Display

Body size

16px → 16px

colors 42 changed

~ bg #000000 → #ffffff

~ surface #0a0a0a → #ffffff

~ text #f9f9f9 → #171717

~ text-muted #c2c2c2 → #a1a1aa

~ text-soft #8a8a8a → #52525b

~ text-faint #737373 → #71717a

~ brand #e30b5d → #00c3ff

~ brand-soft rgba(227, 11, 93, 0.15) → #cdf2ff

~ on-brand #ffffff → #000000

~ link #f9f9f9 → #0094c2

~ link-hover #e30b5d → #007ba3

~ selected-bg rgba(227, 11, 93, 0.15) → #e6f9ff

~ disabled #737373 → #a1a1aa

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

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

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

~ success-bg rgba(34, 197, 94, 0.12) → #dcfce7

~ success-text #86efac → #166534

~ warning-bg rgba(245, 166, 35, 0.12) → #fef3c7

~ warning-text #fcd34d → #92400e

~ danger-bg rgba(239, 68, 68, 0.12) → #fee2e2

~ danger-text #fca5a5 → #b91c1c

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

~ info-text #c2c2c2 → #0094c2

+ 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)

− bg-alt #08080a

− surface-soft rgba(255, 255, 255, 0.05)

− surface-strong rgba(255, 255, 255, 0.08)

− text-strong #ffffff

− brand-deep #c2094f

− border-pink rgba(227, 11, 93, 0.40)

typography 4 changed

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

~ h1 {"family":"InnovatorFont","size":60} → {"family":"ABC Solar Display","size":80}

~ h2 {"family":"InnovatorFont","size":40} → {"family":"ABC Solar Display","size":56}

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

radius identical

No differences.

spacing identical

No differences.

↻ Swap direction · HeyGen → Udio