Diff

Dell vs Twitch

87 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #0e0e10

Text

#0a0a0a → #efeff1

Brand

#007db8 → #9146ff

Border

#dde4eb → #3a3a3d

Display font

Inter → Inter

Body size

16px → 14px

colors 83 changed

~ bg #ffffff → #0e0e10

~ bg-deep #0a0a0a → #000000

~ surface #ffffff → #1f1f23

~ surface-soft #f9f9f9 → #18181b

~ surface-strong #dde4eb → #26262c

~ text #0a0a0a → #efeff1

~ text-strong #000000 → #ffffff

~ text-disabled #a8b0b8 → #53535f

~ text-link #007db8 → #bf94ff

~ brand #007db8 → #9146ff

~ brand-deep #005a8a → #5c16c5

~ brand-hover #005a8a → #a970ff

~ brand-active #003654 → #772ce8

~ border #dde4eb → #3a3a3d

~ border-soft #f0f3f5 → #26262c

~ border-strong #007db8 → #53535f

~ shadow-card rgba(0,80,120,0.1) → rgba(0,0,0,0.5)

~ shadow-modal rgba(0,0,0,0.3) → rgba(0,0,0,0.76)

~ success #0a8849 → #00f593

~ warning #ff9900 → #ffd84a

~ danger #cc0000 → #eb0400

~ info #007db8 → #4d8eff

+ bg-alt #18181b

+ surface-elevated #26262c

+ surface-card #1f1f23

+ surface-chat #1f1f23

+ surface-chat-hover #26262c

+ text-base #efeff1

+ text-alt #adadb8

+ text-muted #898997

+ 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%)

+ 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 #f9f9f9

− bg-cool #f0f3f5

− bg-alienware #000000

− surface-cool #f0f3f5

− surface-input #ffffff

− text-soft #444444

− text-faint #767676

− text-on-dark #ffffff

− brand-light #1399d6

− brand-darkest #003654

− brand-gradient linear-gradient(135deg, #007db8 0%, #005a8a 100%)

− brand-emc-purple #5d3fd3

− alienware-blue #00d6ff

− alienware-glow rgba(0,214,255,0.5)

− cta-primary #007db8

− cta-primary-hover #005a8a

− cta-customize #007db8

− link-default #007db8

− link-visited #007db8

− link-hover #005a8a

− scrim rgba(0,0,0,0.5)

− shadow-soft rgba(0,80,120,0.06)

− shadow-elev rgba(0,80,120,0.15)

− badge-new #007db8

− badge-sale #cc0000

− badge-deal #cc0000

− badge-rebate #0a8849

− badge-trade-in #5d3fd3

− badge-energy-star #1d4f9e

− price #0a0a0a

− price-strikethrough #767676

− price-discount #cc0000

− rating-star #ffaa00

typography 2 changed

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

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

radius 2 changed

~ button 8px → 6px

~ card 12px → 8px

spacing identical

No differences.

↻ Swap direction · Twitch → Dell