Diff

Render vs ElevenLabs

62 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#373145 → #0a0a0a

Brand

#8a05ff → #9fe870

Border

#0000001a → #0000001a

Display font

Inter → InterDisplay

Body size

16px → 16px

colors 52 changed

~ surface #fafafa → #ffffff

~ surface-soft #e6daff → #fafafa

~ brand #8a05ff → #9fe870

~ brand-hover #6e04cc → #8ad65e

~ on-brand #ffffff → #0a0a0a

~ accent #9d66ff → #0e0f0c

~ link #8a05ff → #0a0a0a

~ text #373145 → #0a0a0a

~ text-muted #5e5b6f → #525252

~ text-soft #9089a0 → #737373

~ text-faint #bcb6c8 → #a3a3a3

~ success #0a8754 → #16a34a

~ success-bg #dffaef → #dcfce7

~ warning #cc7400 → #d97706

~ warning-bg #fff4e0 → #fef3c7

~ danger #d72638 → #dc2626

~ danger-bg #ffe5e8 → #fee2e2

~ info #8a05ff → #0a0a0a

~ info-bg #e6daff → #f5f5f4

+ 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

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

typography 4 changed

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

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

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

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

radius 1 changed

~ card 24px → 16px

spacing 5 changed

~ xs 2px → 1px

~ sm 4px → 2px

~ md 12px → 6px

~ lg 24px → 16px

~ xl 40px → 24px

↻ Swap direction · ElevenLabs → Render