Diff

ElevenLabs vs Synthesia

79 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#0a0a0a → #333b52

Brand

#9fe870 → #3e57da

Border

#0000001a → #e2e5ee

Display font

InterDisplay → Basier Square

Body size

16px → 16px

colors 68 changed

~ text #0a0a0a → #333b52

~ text-strong #000000 → #0d0f2c

~ text-muted #525252 → #6b7280

~ text-soft #737373 → #9aa1b1

~ brand #9fe870 → #3e57da

~ brand-hover #8ad65e → #3349c0

~ brand-active #76c349 → #2c3ea6

~ brand-soft #d4f0c2 → #eef1fd

~ link #0a0a0a → #3e57da

~ border #0000001a → #e2e5ee

~ border-strong #00000033 → #cdd2e0

~ on-brand #0a0a0a → #ffffff

~ success #16a34a → #1f9d6b

~ success-bg #dcfce7 → #e8f7f0

~ warning #d97706 → #c77d12

~ warning-bg #fef3c7 → #fbf3e2

~ danger #dc2626 → #d64545

~ danger-bg #fee2e2 → #fbeaea

~ info #0a0a0a → #3e57da

~ info-bg #f5f5f4 → #eef1fd

+ bg-alt #f7f8fb

+ bg-navy #0d0f2c

+ accent-pink #e585d7

+ pink-100 #fef6fb

+ pink-200 #ffebfc

+ pink-300 #ffd7f9

+ pink-400 #f6b2ec

+ pink-500 #e585d7

+ pink-600 #a73b98

+ pink-700 #751b68

+ pink-800 #26042f

+ link-hover #2c3ea6

+ link-visited #5a4bc4

+ selected #eef1fd

+ disabled #c7ccdb

+ neutral-50 #f7f8fb

+ neutral-100 #eef0f5

+ neutral-200 #e2e5ee

+ neutral-300 #cdd2e0

+ neutral-400 #9aa1b1

+ neutral-500 #6b7280

+ neutral-600 #4c5468

+ neutral-700 #333b52

+ neutral-800 #1e2438

+ neutral-900 #0d0f2c

+ surface-alt #f7f8fb

+ surface-navy #0d0f2c

+ surface-pink #fef6fb

+ border-subtle #eef0f5

+ border-brand #3e57da

+ shadow-ambient rgba(13,15,44,0.06)

+ shadow-standard rgba(13,15,44,0.10)

+ shadow-elevated rgba(13,15,44,0.16)

+ success-text #0f5a3c

+ warning-text #7a4d06

+ danger-text #8a2424

+ info-text #2c3ea6

− bg-soft #fafafa

− bg-band #f5f5f4

− surface-soft #fafafa

− surface-hover #f5f5f4

− text-display #0a0a0a

− text-faint #a3a3a3

− text-on-brand #0a0a0a

− brand-faint #e2f6d5

− accent #0e0f0c

− accent-warm #f5f5f4

− border-soft #0000000d

typography 5 changed

~ display {"family":"InterDisplay","size":128} → {"family":"Basier Square","size":88}

~ h1 {"family":"InterDisplay","size":64} → {"family":"Basier Square","size":88}

~ h2 {"family":"InterDisplay","size":48} → {"family":"Basier Square","size":56}

~ body {"family":"Inter","size":16} → {"family":"Basier Square","size":16}

~ label {"family":"JetBrains Mono","size":13} → {"family":"SFMono-Regular","size":13}

radius 1 changed

~ card 16px → 12px

spacing 5 changed

~ xs 1px → 0px

~ sm 2px → 4px

~ md 6px → 12px

~ lg 16px → 32px

~ xl 24px → 64px

↻ Swap direction · Synthesia → ElevenLabs