Diff

WHOOP vs Razer

66 token-level differences between these two design systems.

Role tokens
Background
#000000 #000000
Text
#ffffff #ffffff
Brand
#a0d10b #44d62c
Border
#1f1f1f #262626
Display font
Inter Inter
Body size
16px 16px
colors 63 changed
~ surface #0a0a0a #111111
~ surface-soft #141414 #1a1a1a
~ surface-strong #1f1f1f #262626
~ brand #a0d10b #44d62c
~ brand-hover #88b609 #5fe849
~ brand-active #739707 #2db516
~ brand-deep #476005 #1f8a0f
~ text-soft #8a8a8a #b3b3b3
~ text-faint #5e5e5e #7a7a7a
~ link-hover #a0d10b #ffffff
~ border #1f1f1f #262626
~ border-soft #141414 #1a1a1a
~ border-strong #2e2e2e #44d62c
~ success #16ec06 #44d62c
~ warning #ffde00 #ffaa00
~ danger #ff0026 #ff3030
~ info #0093e7 #44d62c
+ bg-deep #0d0d0d
+ bg-darkest #000000
+ surface-elevated #1f1f1f
+ surface-product-band #080808
+ surface-input #1a1a1a
+ text-disabled #4a4a4a
+ text-link #44d62c
+ brand-glow rgba(68,214,44,0.4)
+ on-brand #000000
+ cta-buy #44d62c
+ cta-buy-hover #5fe849
+ cta-secondary transparent
+ link-default #44d62c
+ link-visited #44d62c
+ 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
bg-elev #0a0a0a
bg-elev-strong #141414
bg-light #ffffff
brand-pale #e8f3c6
brand-soft #0c1102
text-muted #b5b5b5
text-on-brand #000000
link #ffffff
border-input #3d3d3d
recovery-green #16ec06
recovery-yellow #ffde00
recovery-red #ff0026
strain-blue #0093e7
sleep-blue #7eb8d9
hrv-purple #9c7ed9
typography 1 changed
~ label {"family":"Inter","size":11} {"family":"Roboto Mono","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Razer → WHOOP