Diff

WHOOP vs Etsy

55 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffff
Text
#ffffff #222222
Brand
#a0d10b #f1641e
Border
#1f1f1f #e6e6e6
Display font
Inter Graphik Web
Body size
16px 16px
colors 50 changed
~ bg #000000 #ffffff
~ surface #0a0a0a #ffffff
~ surface-soft #141414 #f6f6f6
~ surface-strong #1f1f1f #eeeeee
~ brand #a0d10b #f1641e
~ brand-hover #88b609 #d9591a
~ brand-active #739707 #b94816
~ brand-pale #e8f3c6 #ffd7c2
~ brand-deep #476005 #7d4521
~ text #ffffff #222222
~ text-strong #ffffff #111111
~ text-muted #b5b5b5 #595959
~ text-soft #8a8a8a #757575
~ link #ffffff #222222
~ link-hover #a0d10b #f1641e
~ border #1f1f1f #e6e6e6
~ border-soft #141414 #f0f0f0
~ border-strong #2e2e2e #cccccc
~ border-input #3d3d3d #999999
~ scrim rgba(0,0,0,0.85) rgba(0,0,0,0.5)
~ shadow-card rgba(0,0,0,0.6) rgba(0,0,0,0.08)
~ shadow-elev rgba(0,0,0,0.8) rgba(0,0,0,0.16)
~ success #16ec06 #067f5b
~ warning #ffde00 #a35316
~ danger #ff0026 #a61b1b
~ info #0093e7 #1e4dc4
+ bg-page #fff8f0
+ surface-warm #fff8f0
+ surface-orange #fff1ea
+ text-on-orange #ffffff
+ star-orange #f1641e
+ star-empty #dddddd
+ free-shipping-green #067f5b
+ bestseller-tag #fff1ea
+ bestseller-text #7d4521
+ star-seller-bg #fff1ea
+ star-seller-text #7d4521
+ warning-soft #fff7e6
bg-elev #0a0a0a
bg-elev-strong #141414
bg-light #ffffff
brand-soft #0c1102
text-faint #5e5e5e
text-on-brand #000000
recovery-green #16ec06
recovery-yellow #ffde00
recovery-red #ff0026
strain-blue #0093e7
sleep-blue #7eb8d9
hrv-purple #9c7ed9
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"Graphik Web","size":72}
~ h1 {"family":"Inter","size":40} {"family":"Graphik Web","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Graphik Web","size":32}
~ body {"family":"Inter","size":16} {"family":"Graphik Web","size":16}
~ label {"family":"Inter","size":11} {"family":"Monaco","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Etsy → WHOOP