Diff

SteelSeries vs Corsair

45 token-level differences between these two design systems.

Role tokens
Background
#0a0a0a #000000
Text
#ffffff #ffffff
Brand
#ff6900 #ffff00
Border
#2e2e2e #262626
Display font
Inter Inter
Body size
16px 16px
colors 41 changed
~ bg #0a0a0a #000000
~ bg-deep #141414 #0a0a0a
~ surface #1a1a1a #111111
~ surface-soft #222222 #1a1a1a
~ surface-strong #2e2e2e #262626
~ surface-product-band #141414 #0a0a0a
~ surface-input #222222 #1a1a1a
~ text-soft #a8a8a8 #b3b3b3
~ text-faint #6e6e6e #7a7a7a
~ text-link #ff6900 #ffff00
~ brand #ff6900 #ffff00
~ brand-bright #ff8533 #ffff66
~ brand-deep #cc5500 #cccc00
~ brand-darkest #993f00 #999900
~ brand-glow rgba(255,105,0,0.4) rgba(255,255,0,0.4)
~ brand-gradient linear-gradient(135deg, #ff8533 0%, #ff6900 50%, #cc5500 100%) linear-gradient(135deg, #ffff66 0%, #ffff00 50%, #cccc00 100%)
~ on-brand #ffffff #000000
~ cta-primary #ff6900 #ffff00
~ cta-primary-hover #ff8533 #ffff66
~ link-default #ff6900 #ffff00
~ link-visited #ff6900 #ffff00
~ border #2e2e2e #262626
~ border-soft #222222 #1a1a1a
~ border-strong #ff6900 #ffff00
~ badge-new #ff6900 #ffff00
~ badge-out-of-stock #6e6e6e #7a7a7a
~ price-discount #ff6900 #ffff00
~ rating-star #ff6900 #ffff00
~ warning #ffaa00 #ff8800
~ info #0099ff #0066ff
+ bg-darkest #000000
+ shadow-corsair-glow rgba(255,255,0,0.4)
+ rgb-spectrum linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0066ff, #aa00ff, #ff0088)
+ badge-pre-order transparent
+ badge-icue #0066ff
+ badge-cl-hydro #00bfff
bg-pure #000000
shadow-steelseries-glow rgba(255,105,0,0.4)
badge-pro-series transparent
badge-prime #ff6900
badge-arctis #ff6900
typography 2 changed
~ display {"family":"Inter","size":72} {"family":"Inter","size":80}
~ label {"family":"JetBrains Mono","size":11} {"family":"Roboto Mono","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Corsair → SteelSeries