Diff

ElevenLabs vs Twitch

79 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #0e0e10

Text

#0a0a0a → #efeff1

Brand

#9fe870 → #9146ff

Border

#0000001a → #3a3a3d

Display font

InterDisplay → Inter

Body size

16px → 14px

colors 67 changed

~ bg #ffffff → #0e0e10

~ surface #ffffff → #1f1f23

~ surface-soft #fafafa → #18181b

~ text #0a0a0a → #efeff1

~ text-strong #000000 → #ffffff

~ text-muted #525252 → #898997

~ brand #9fe870 → #9146ff

~ brand-hover #8ad65e → #a970ff

~ brand-active #76c349 → #772ce8

~ border #0000001a → #3a3a3d

~ border-soft #0000000d → #26262c

~ border-strong #00000033 → #53535f

~ on-brand #0a0a0a → #ffffff

~ success #16a34a → #00f593

~ warning #d97706 → #ffd84a

~ danger #dc2626 → #eb0400

~ info #0a0a0a → #4d8eff

+ bg-alt #18181b

+ bg-deep #000000

+ surface-strong #26262c

+ surface-elevated #26262c

+ surface-card #1f1f23

+ surface-chat #1f1f23

+ surface-chat-hover #26262c

+ text-base #efeff1

+ text-alt #adadb8

+ text-link #bf94ff

+ text-disabled #53535f

+ brand-deep #5c16c5

+ brand-2024 #9146ff

+ brand-classic #6441a4

+ accent-magenta #fab4ff

+ accent-cheer-red #ff4248

+ accent-cheer-orange #f5b53a

+ accent-cheer-blue #4d8eff

+ accent-cheer-green #00d6cc

+ accent-cheer-purple #9c3eff

+ scrim-card linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%)

+ shadow-card rgba(0,0,0,0.5)

+ shadow-modal rgba(0,0,0,0.76)

+ danger-text #ff4d4d

+ live-indicator #eb0400

+ live-pill-bg #eb0400

+ follow-purple #9146ff

+ subscribe-tier-1 #9146ff

+ subscribe-tier-2 #3ea6f5

+ subscribe-tier-3 #f5b53a

+ highlight-mod #00ad03

+ highlight-vip #e005b9

+ highlight-broadcaster #eb0400

+ highlight-prime #3ea6f5

− bg-soft #fafafa

− bg-band #f5f5f4

− surface-hover #f5f5f4

− text-display #0a0a0a

− text-soft #737373

− text-faint #a3a3a3

− text-on-brand #0a0a0a

− brand-soft #d4f0c2

− brand-faint #e2f6d5

− link #0a0a0a

− accent #0e0f0c

− accent-warm #f5f5f4

− success-bg #dcfce7

− warning-bg #fef3c7

− danger-bg #fee2e2

− info-bg #f5f5f4

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 8px → 6px

~ card 16px → 8px

spacing 5 changed

~ xs 1px → 4px

~ sm 2px → 8px

~ md 6px → 16px

~ lg 16px → 32px

~ xl 24px → 48px

↻ Swap direction · Twitch → ElevenLabs