Diff

Razer vs Twitch

83 token-level differences between these two design systems.

Role tokens

Background

#000000 → #0e0e10

Text

#ffffff → #efeff1

Brand

#44d62c → #9146ff

Border

#262626 → #3a3a3d

Display font

Inter → Inter

Body size

16px → 14px

colors 81 changed

~ bg #000000 → #0e0e10

~ bg-deep #0d0d0d → #000000

~ surface #111111 → #1f1f23

~ surface-soft #1a1a1a → #18181b

~ surface-strong #262626 → #26262c

~ surface-elevated #1f1f1f → #26262c

~ text #ffffff → #efeff1

~ text-disabled #4a4a4a → #53535f

~ text-link #44d62c → #bf94ff

~ brand #44d62c → #9146ff

~ brand-hover #5fe849 → #a970ff

~ brand-active #2db516 → #772ce8

~ brand-deep #1f8a0f → #5c16c5

~ on-brand #000000 → #ffffff

~ border #262626 → #3a3a3d

~ border-soft #1a1a1a → #26262c

~ border-strong #44d62c → #53535f

~ shadow-card rgba(0,0,0,0.6) → rgba(0,0,0,0.5)

~ success #44d62c → #00f593

~ warning #ffaa00 → #ffd84a

~ danger #ff3030 → #eb0400

~ info #44d62c → #4d8eff

+ bg-alt #18181b

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

+ 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-darkest #000000

− surface-product-band #080808

− surface-input #1a1a1a

− text-soft #b3b3b3

− text-faint #7a7a7a

− brand-glow rgba(68,214,44,0.4)

− cta-buy #44d62c

− cta-buy-hover #5fe849

− cta-secondary transparent

− link-default #44d62c

− link-visited #44d62c

− link-hover #ffffff

− scrim rgba(0,0,0,0.85)

− shadow-elev rgba(0,0,0,0.8)

− shadow-glow rgba(68,214,44,0.3)

− chroma-red #ff0000

− chroma-orange #ff8800

− chroma-yellow #ffee00

− chroma-cyan #00ffff

− chroma-blue #0099ff

− chroma-purple #aa00ff

− chroma-pink #ff0088

− rgb-gradient linear-gradient(90deg, #ff0000, #ff8800, #ffee00, #44d62c, #00ffff, #0099ff, #aa00ff, #ff0088)

− badge-new #44d62c

− badge-pre-order #44d62c

− badge-out-of-stock #7a7a7a

− badge-exclusive #ffaa00

− price #ffffff

− price-strikethrough #7a7a7a

− price-discount #44d62c

− rating-star #44d62c

typography 1 changed

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

radius 1 changed

~ button 4px → 6px

spacing identical

No differences.

↻ Swap direction · Twitch → Razer