On vs Gymshark
38 token-level differences between these two design systems.
Background
#ffffff → #ffffff Text
#000000 → #000000 Brand
#000000 → #000000 Border
rgba(0,0,0,0.08) → #000000 Display font
On → Montserrat Body size
16px → 16px colors 33 changed
~
surface-soft #f5f5f5 → #f4f4f4 ~
text-muted #525252 → #53565a ~
text-soft #767676 → #6b6e72 ~
link-hover #525252 → #53565a ~
disabled-bg #e5e5e5 → #e2e2e2 ~
disabled-text #9a9a9a → #9a9da1 ~
sale #e63312 → #d12b2b ~
warning #a35316 → #b46a00 ~
danger #d11507 → #d12b2b ~
info #1151ff → #1457d6 +
steel #53565a +
steel-hover #42454a +
steel-active #383b3f +
on-steel #ffffff +
border #000000 +
border-soft #e2e2e2 +
border-muted #cfcfcf +
sale-deep #9e1f1f −
bg-dark #000000 −
ink-soft #0a0a0a −
charcoal #333333 −
mute #525252 −
mute-soft #767676 −
stone #9a9a9a −
hairline #d4d4d4 −
hairline-soft #e5e5e5 −
text-on-ink #ffffff −
pill-light #ffffff −
pill-light-text #000000 −
visited #000000 −
accent-coral #e63312 −
accent-coral-deep #b3260d −
success-bright #34c873 typography 4 changed
~
display {"family":"On","size":80} → {"family":"Montserrat","size":80} ~
h1 {"family":"On","size":48} → {"family":"Montserrat","size":40} ~
h2 {"family":"On","size":32} → {"family":"Montserrat","size":32} ~
body {"family":"On","size":16} → {"family":"Montserrat","size":16} radius 1 changed
~
pill 9999px → 56px spacing identical
No differences.