Diff

Chase vs Gymshark

48 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#101820 #000000
Brand
#0060f0 #000000
Border
#d4d9e0 #000000
Display font
Open Sans Montserrat
Body size
16px 16px
colors 43 changed
~ surface-soft #f5f7fa #f4f4f4
~ text #101820 #000000
~ text-muted #5a6470 #53565a
~ brand #0060f0 #000000
~ brand-hover #0048bf #1a1a1a
~ link #0060f0 #000000
~ link-hover #0048bf #53565a
~ border #d4d9e0 #000000
~ scrim rgba(16,24,32,0.55) rgba(0,0,0,0.55)
~ success #128842 #1f8a4c
~ warning #9a5b00 #b46a00
~ danger #c4001a #d12b2b
~ info #0060f0 #1457d6
+ surface-warm #fafafa
+ ink #000000
+ text-strong #000000
+ text-soft #6b6e72
+ brand-active #000000
+ steel #53565a
+ steel-hover #42454a
+ steel-active #383b3f
+ on-steel #ffffff
+ border-soft #e2e2e2
+ border-muted #cfcfcf
+ selected #000000
+ disabled-bg #e2e2e2
+ disabled-text #9a9da1
+ sale #d12b2b
+ sale-deep #9e1f1f
+ ring #000000
+ ring-on-dark #ffffff
surface-tint #eef4ff
text-faint #6b7280
text-on-brand #ffffff
text-on-green #ffffff
brand-deep #003594
secondary #128842
secondary-hover #0e6e35
border-strong #9aa3af
border-on-dark rgba(255,255,255,0.24)
shadow-soft rgba(16,24,32,0.06)
shadow-medium rgba(16,24,32,0.12)
shadow-deep rgba(16,24,32,0.20)
typography 4 changed
~ display {"family":"Open Sans","size":80} {"family":"Montserrat","size":80}
~ h1 {"family":"Open Sans","size":40} {"family":"Montserrat","size":40}
~ h2 {"family":"Open Sans","size":32} {"family":"Montserrat","size":32}
~ body {"family":"Open Sans","size":16} {"family":"Montserrat","size":16}
radius 1 changed
~ pill 9999px 56px
spacing identical
No differences.
↻ Swap direction · Gymshark → Chase