Diff

Razer vs SteelSeries

56 token-level differences between these two design systems.

Role tokens
Background
#000000 #0a0a0a
Text
#ffffff #ffffff
Brand
#44d62c #ff6900
Border
#262626 #2e2e2e
Display font
Inter Inter
Body size
16px 16px
colors 53 changed
~ bg #000000 #0a0a0a
~ bg-deep #0d0d0d #141414
~ surface #111111 #1a1a1a
~ surface-soft #1a1a1a #222222
~ surface-strong #262626 #2e2e2e
~ surface-product-band #080808 #141414
~ surface-input #1a1a1a #222222
~ text-soft #b3b3b3 #a8a8a8
~ text-faint #7a7a7a #6e6e6e
~ text-link #44d62c #ff6900
~ brand #44d62c #ff6900
~ brand-deep #1f8a0f #cc5500
~ brand-glow rgba(68,214,44,0.4) rgba(255,105,0,0.4)
~ on-brand #000000 #ffffff
~ link-default #44d62c #ff6900
~ link-visited #44d62c #ff6900
~ border #262626 #2e2e2e
~ border-soft #1a1a1a #222222
~ border-strong #44d62c #ff6900
~ badge-new #44d62c #ff6900
~ badge-out-of-stock #7a7a7a #6e6e6e
~ price-discount #44d62c #ff6900
~ rating-star #44d62c #ff6900
~ success #44d62c #00cc66
~ info #44d62c #0099ff
+ bg-pure #000000
+ brand-bright #ff8533
+ brand-darkest #993f00
+ brand-gradient linear-gradient(135deg, #ff8533 0%, #ff6900 50%, #cc5500 100%)
+ cta-primary #ff6900
+ cta-primary-hover #ff8533
+ shadow-steelseries-glow rgba(255,105,0,0.4)
+ badge-pro-series transparent
+ badge-prime #ff6900
+ badge-arctis #ff6900
bg-darkest #000000
brand-hover #5fe849
brand-active #2db516
cta-buy #44d62c
cta-buy-hover #5fe849
cta-secondary transparent
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-pre-order #44d62c
badge-exclusive #ffaa00
price-strikethrough #7a7a7a
typography 1 changed
~ label {"family":"Roboto Mono","size":11} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 4px 8px
~ card 8px 12px
spacing identical
No differences.
↻ Swap direction · SteelSeries → Razer