Diff

tldraw vs ElevenLabs

45 token-level differences between these two design systems.

Role tokens

Background

#f8f9fa → #ffffff

Text

#1d1d1d → #0a0a0a

Brand

#3182ed → #9fe870

Border

#0000001a → #0000001a

Display font

Inter → InterDisplay

Body size

16px → 16px

colors 38 changed

~ bg #f8f9fa → #ffffff

~ bg-soft #ffffff → #fafafa

~ surface-soft #f1f3f5 → #fafafa

~ surface-hover #e9ecef → #f5f5f4

~ text #1d1d1d → #0a0a0a

~ text-strong #101010 → #000000

~ text-display #1d1d1d → #0a0a0a

~ text-muted #5c5c5c → #525252

~ text-soft #8b8b8b → #737373

~ text-faint #bababa → #a3a3a3

~ text-on-brand #ffffff → #0a0a0a

~ brand #3182ed → #9fe870

~ brand-hover #2870d6 → #8ad65e

~ brand-active #1f5db8 → #76c349

~ brand-soft #dbeafe → #d4f0c2

~ brand-faint #eff6ff → #e2f6d5

~ link #3182ed → #0a0a0a

~ on-brand #ffffff → #0a0a0a

~ info #3182ed → #0a0a0a

~ info-bg #dbeafe → #f5f5f4

+ bg-band #f5f5f4

+ accent #0e0f0c

+ accent-warm #f5f5f4

− bg-canvas #fdfdfd

− surface-selected #dee2e6

− text-on-pastel #1d1d1d

− accent-yellow #fde68a

− accent-yellow-deep #fcd34d

− accent-pink #fbcfe8

− accent-pink-deep #f9a8d4

− accent-green #bbf7d0

− accent-green-deep #86efac

− accent-blue #bfdbfe

− accent-blue-deep #93c5fd

− accent-purple #ddd6fe

− accent-orange #fed7aa

− grid-dot #0000001a

− grid-dot-soft #0000000d

typography 4 changed

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

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

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

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

radius 1 changed

~ button 10px → 8px

spacing 2 changed

~ lg 12px → 16px

~ xl 20px → 24px

↻ Swap direction · ElevenLabs → tldraw