Diff

ElevenLabs vs Render

62 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#0a0a0a → #373145

Brand

#9fe870 → #8a05ff

Border

#0000001a → #0000001a

Display font

InterDisplay → Inter

Body size

16px → 16px

colors 52 changed

~ surface #ffffff → #fafafa

~ surface-soft #fafafa → #e6daff

~ text #0a0a0a → #373145

~ text-muted #525252 → #5e5b6f

~ text-soft #737373 → #9089a0

~ text-faint #a3a3a3 → #bcb6c8

~ brand #9fe870 → #8a05ff

~ brand-hover #8ad65e → #6e04cc

~ link #0a0a0a → #8a05ff

~ accent #0e0f0c → #9d66ff

~ on-brand #0a0a0a → #ffffff

~ success #16a34a → #0a8754

~ success-bg #dcfce7 → #dffaef

~ warning #d97706 → #cc7400

~ warning-bg #fef3c7 → #fff4e0

~ danger #dc2626 → #d72638

~ danger-bg #fee2e2 → #ffe5e8

~ info #0a0a0a → #8a05ff

~ info-bg #f5f5f4 → #e6daff

+ bg-deep #fafafa

+ bg-elev-1 #f5f3fb

+ bg-elev-2 #ffffff

+ surface-glow #fbceff

+ surface-deep #f3eefe

+ brand-pressed #5a039f

+ brand-deep #3d0270

+ brand-glow #8a05ff1f

+ accent-hover #b08aff

+ accent-soft #e6daff

+ accent-glow #fbceff

+ link-hover #6e04cc

+ link-visited #6a04b8

+ selected #8a05ff14

+ disabled #e6e4ec

+ disabled-text #a8a4b4

+ text-heading #1f1a2e

+ text-disabled #a8a4b4

+ border-brand #8a05ff66

+ shadow-ambient rgba(55,49,69,0.06)

+ shadow-standard rgba(55,49,69,0.1)

+ shadow-elevated rgba(138,5,255,0.18)

+ shadow-glow rgba(251,206,255,0.5)

− bg-soft #fafafa

− bg-band #f5f5f4

− surface-hover #f5f5f4

− text-strong #000000

− text-display #0a0a0a

− text-on-brand #0a0a0a

− brand-active #76c349

− brand-soft #d4f0c2

− brand-faint #e2f6d5

− accent-warm #f5f5f4

typography 4 changed

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

~ h1 {"family":"InterDisplay","size":64} → {"family":"Inter","size":48}

~ h2 {"family":"InterDisplay","size":48} → {"family":"Inter","size":36}

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

radius 1 changed

~ card 16px → 24px

spacing 5 changed

~ xs 1px → 2px

~ sm 2px → 4px

~ md 6px → 12px

~ lg 16px → 24px

~ xl 24px → 40px

↻ Swap direction · Render → ElevenLabs