Diff

Mailchimp vs ClassPass

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fffaf6
Text
#241c15 #1a1a1a
Brand
#ffe01b #ec5e8a
Border
#241c15 #e8d8c8
Display font
Cooper Light GT America
Body size
17px 16px
colors 52 changed
~ bg #ffffff #fffaf6
~ surface #f6f6f4 #ffffff
~ surface-soft #fbfbf8 #fdf8f2
~ text #241c15 #1a1a1a
~ text-strong #0d0a05 #000000
~ text-muted #6e655a #5a5a5a
~ text-soft #9b9388 #8a8a8a
~ text-faint #bfb8ac #bcbcbc
~ text-on-brand #241c15 #ffffff
~ brand #ffe01b #ec5e8a
~ brand-deep #ffd60a #982a48
~ brand-pressed #e6c800 #b8385d
~ border #241c15 #e8d8c8
~ border-soft #e0ddd4 #f0e6d8
~ success #1c8c4a #3da568
~ warning #d97706 #cc8800
~ danger #c1272d #c4313a
~ info #2563eb #ec5e8a
~ on-brand #241c15 #ffffff
+ bg-soft #fef4eb
+ bg-warm #fdebdb
+ surface-cream #fbf2e7
+ brand-hover #d44872
+ brand-tint #fde0ea
+ brand-soft #f8c4d1
+ link #ec5e8a
+ link-hover #b8385d
+ selected-bg #fde0ea
+ border-strong #c8b6a4
+ border-brand #ec5e8a
+ yoga-purple #9b6dd4
+ pilates-mint #5dd4b8
+ hiit-orange #ff7e3f
bg-yellow #ffe01b
bg-cream #fbf8f0
bg-dark #241c15
surface-2 #eeede9
surface-3 #e3e1db
surface-yellow-soft #fff5b8
surface-yellow-deep #ffd60a
text-on-yellow #241c15
text-on-dark #fbf8f0
text-on-dark-muted #bfb8ac
accent #241c15
accent-cream #f5f2eb
accent-cream-deep #e8e1d0
border-stronger #0d0a05
border-yellow-on-yellow #241c1533
success-bg #d6efe2
warning-bg #fef3c7
danger-bg #fde2e2
info-bg #dbeafe
typography 5 changed
~ display {"family":"Cooper Light","size":120} {"family":"GT America","size":72}
~ h1 {"family":"Cooper Light","size":60} {"family":"GT America","size":36}
~ h2 {"family":"Cooper Light","size":44} {"family":"GT America","size":28}
~ body {"family":"Graphik","size":17} {"family":"GT America","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 0px 12px
~ card 0px 16px
spacing identical
No differences.
↻ Swap direction · ClassPass → Mailchimp