Diff

ElevenLabs vs beehiiv

41 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#0a0a0a → #000000

Brand

#9fe870 → #ffd60a

Border

#0000001a → #000000

Display font

InterDisplay → PP Neue Machina

Body size

16px → 16px

colors 36 changed

~ surface #ffffff → #fafafa

~ text #0a0a0a → #000000

~ text-display #0a0a0a → #000000

~ text-muted #525252 → #666666

~ text-soft #737373 → #999999

~ text-faint #a3a3a3 → #cccccc

~ brand #9fe870 → #ffd60a

~ brand-hover #8ad65e → #e6c000

~ brand-active #76c349 → #cca800

~ brand-soft #d4f0c2 → #fff7c2

~ accent #0e0f0c → #000000

~ border #0000001a → #000000

~ border-soft #0000000d → #e5e5e5

~ on-brand #0a0a0a → #000000

~ success #16a34a → #15803d

~ warning #d97706 → #a16207

~ danger #dc2626 → #b91c1c

~ info #0a0a0a → #000000

~ info-bg #f5f5f4 → #fafafa

+ bg-yellow #ffd60a

+ bg-yellow-soft #fff7c2

+ bg-yellow-deep #e6c000

+ surface-2 #f0f0f0

+ surface-3 #e5e5e5

+ text-on-yellow #000000

+ text-on-yellow-muted #000000a8

+ accent-soft #1a1a1a

− bg-soft #fafafa

− bg-band #f5f5f4

− surface-soft #fafafa

− surface-hover #f5f5f4

− text-on-brand #0a0a0a

− brand-faint #e2f6d5

− link #0a0a0a

− accent-warm #f5f5f4

− border-strong #00000033

typography 4 changed

~ display {"family":"InterDisplay","size":128} → {"family":"PP Neue Machina","size":112}

~ h1 {"family":"InterDisplay","size":64} → {"family":"PP Neue Machina","size":56}

~ h2 {"family":"InterDisplay","size":48} → {"family":"PP Neue Machina","size":40}

~ label {"family":"JetBrains Mono","size":13} → {"family":"JetBrains Mono","size":12}

radius 1 changed

~ card 16px → 12px

spacing identical

No differences.

↻ Swap direction · beehiiv → ElevenLabs