Diff

Corsair vs Twitch

79 token-level differences between these two design systems.

Role tokens

Background

#000000 → #0e0e10

Text

#ffffff → #efeff1

Brand

#ffff00 → #9146ff

Border

#262626 → #3a3a3d

Display font

Inter → Inter

Body size

16px → 14px

colors 76 changed

~ bg #000000 → #0e0e10

~ bg-deep #0a0a0a → #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 #ffff00 → #bf94ff

~ brand #ffff00 → #9146ff

~ brand-deep #cccc00 → #5c16c5

~ on-brand #000000 → #ffffff

~ border #262626 → #3a3a3d

~ border-soft #1a1a1a → #26262c

~ border-strong #ffff00 → #53535f

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

~ success #00cc66 → #00f593

~ warning #ff8800 → #ffd84a

~ danger #ff3030 → #eb0400

~ info #0066ff → #4d8eff

+ bg-alt #18181b

+ surface-card #1f1f23

+ surface-chat #1f1f23

+ surface-chat-hover #26262c

+ text-base #efeff1

+ text-alt #adadb8

+ text-muted #898997

+ brand-hover #a970ff

+ brand-active #772ce8

+ 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 #0a0a0a

− surface-input #1a1a1a

− text-soft #b3b3b3

− text-faint #7a7a7a

− brand-bright #ffff66

− brand-darkest #999900

− brand-glow rgba(255,255,0,0.4)

− brand-gradient linear-gradient(135deg, #ffff66 0%, #ffff00 50%, #cccc00 100%)

− cta-primary #ffff00

− cta-primary-hover #ffff66

− link-default #ffff00

− link-visited #ffff00

− link-hover #ffffff

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

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

− shadow-corsair-glow rgba(255,255,0,0.4)

− rgb-spectrum linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0066ff, #aa00ff, #ff0088)

− badge-new #ffff00

− badge-pre-order transparent

− badge-icue #0066ff

− badge-cl-hydro #00bfff

− badge-out-of-stock #7a7a7a

− price #ffffff

− price-discount #ffff00

− rating-star #ffff00

typography 2 changed

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

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

radius 1 changed

~ button 4px → 6px

spacing identical

No differences.

↻ Swap direction · Twitch → Corsair