Diff

Mailchimp vs Graza

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f6e6d9
Text
#241c15 #3c422e
Brand
#ffe01b #d1e030
Border
#241c15 #3c422e
Display font
Cooper Light GT Alpina Typewriter
Body size
17px 16px
colors 51 changed
~ bg #ffffff #f6e6d9
~ surface #f6f6f4 #fff4ec
~ surface-soft #fbfbf8 #f6e6d9
~ text #241c15 #3c422e
~ text-muted #6e655a #6b6f5d
~ text-faint #bfb8ac #9a9b8a
~ brand #ffe01b #d1e030
~ border #241c15 #3c422e
~ border-soft #e0ddd4 #9fcd7a
~ success #1c8c4a #5a8a3c
~ warning #d97706 #fbd535
~ danger #c1272d #b3472d
~ info #2563eb #3c422e
~ on-brand #241c15 #3c422e
+ bg-soft #fff4ec
+ bg-deeper #e8d6c8
+ brand-ink #3c422e
+ accent-mint #9eef80
+ accent-yellow #fbd535
+ accent-stroke #9fcd7a
+ cta-bg #d1e030
+ cta-text #3c422e
+ cta-cart-bg #fff4ec
+ cta-cart-text #3c422e
+ link #3c422e
+ link-hover #d1e030
+ border-faint #e8d6c8
bg-yellow #ffe01b
bg-cream #fbf8f0
bg-dark #241c15
surface-2 #eeede9
surface-3 #e3e1db
surface-yellow-soft #fff5b8
surface-yellow-deep #ffd60a
text-strong #0d0a05
text-soft #9b9388
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-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 Alpina Typewriter","size":80}
~ h1 {"family":"Cooper Light","size":60} {"family":"GT Alpina Typewriter","size":40}
~ h2 {"family":"Cooper Light","size":44} {"family":"GT Alpina Typewriter","size":32}
~ body {"family":"Graphik","size":17} {"family":"GT Alpina Typewriter","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 0px 12px
~ card 0px 20px
spacing 2 changed
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Graza → Mailchimp