Diff

Mailchimp vs Glif

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fcfaf6
Text
#241c15 #0e0e10
Brand
#ffe01b #2e9e4f
Border
#241c15 #0000000f
Display font
Cooper Light Manrope
Body size
17px 16px
colors 50 changed
~ bg #ffffff #fcfaf6
~ surface #f6f6f4 #ffffff
~ surface-2 #eeede9 #f6f3ec
~ surface-3 #e3e1db #ebe6db
~ text #241c15 #0e0e10
~ text-strong #0d0a05 #000000
~ text-muted #6e655a #55555a
~ text-soft #9b9388 #86868c
~ text-faint #bfb8ac #b8b8be
~ brand #ffe01b #2e9e4f
~ border #241c15 #0000000f
~ success #1c8c4a #2e9e4f
~ success-bg #d6efe2 #e6f4ea
~ warning #d97706 #d98a00
~ warning-bg #fef3c7 #fdf2dc
~ danger #c1272d #d83a3a
~ danger-bg #fde2e2 #fbe7e7
~ info #2563eb #2e9e4f
~ info-bg #dbeafe #e6f4ea
~ on-brand #241c15 #fffaef
+ bg-soft #f6f3ec
+ bg-elev #f1ede4
+ brand-hover #28893f
+ brand-active #22742f
+ brand-soft #e6f4ea
+ accent-warm #fffbf6
+ accent-warm-deep #f3ece0
+ accent-lilac #efeaff
+ accent-sky #e6f1fb
+ border-strong #0000001f
+ border-subtle #00000008
+ border-focus #2e9e4f
bg-yellow #ffe01b
bg-cream #fbf8f0
bg-dark #241c15
surface-soft #fbfbf8
surface-yellow-soft #fff5b8
surface-yellow-deep #ffd60a
text-on-yellow #241c15
text-on-dark #fbf8f0
text-on-dark-muted #bfb8ac
text-on-brand #241c15
brand-deep #ffd60a
brand-pressed #e6c800
accent #241c15
accent-cream #f5f2eb
accent-cream-deep #e8e1d0
border-soft #e0ddd4
border-stronger #0d0a05
border-yellow-on-yellow #241c1533
typography 5 changed
~ display {"family":"Cooper Light","size":120} {"family":"Manrope","size":80}
~ h1 {"family":"Cooper Light","size":60} {"family":"Manrope","size":54}
~ h2 {"family":"Cooper Light","size":44} {"family":"Manrope","size":40}
~ body {"family":"Graphik","size":17} {"family":"Manrope","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 0px 8px
~ card 0px 12px
spacing 2 changed
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Glif → Mailchimp