Diff

Mailchimp vs Gemini (Google)

68 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#241c15 #1f1f1f
Brand
#ffe01b #1a73e8
Border
#241c15 #dadce0
Display font
Cooper Light Google Sans Display
Body size
17px 16px
colors 61 changed
~ surface #f6f6f4 #eef2f7
~ text #241c15 #1f1f1f
~ text-strong #0d0a05 #0f0f0f
~ text-muted #6e655a #5f6368
~ text-soft #9b9388 #80868b
~ brand #ffe01b #1a73e8
~ brand-deep #ffd60a #185abc
~ border #241c15 #dadce0
~ border-soft #e0ddd4 #e8eaed
~ success #1c8c4a #188038
~ success-bg #d6efe2 #e6f4ea
~ warning #d97706 #f29900
~ warning-bg #fef3c7 #fef7e0
~ danger #c1272d #d93025
~ danger-bg #fde2e2 #fce8e6
~ info #2563eb #1a73e8
~ info-bg #dbeafe #e8f0fe
~ on-brand #241c15 #ffffff
+ bg-soft #f8fafd
+ surface-high #dde3ea
+ surface-highest #cdd2da
+ surface-tinted #e7eef9
+ surface-violet-tinted #f3eafa
+ text-disabled #bdc1c6
+ text-on-tinted #0b57d0
+ brand-hover #1967d2
+ brand-press #185abc
+ brand-soft #e8f0fe
+ gradient-from #4285f4
+ gradient-via #9b72cb
+ gradient-to #d96570
+ gradient-via-2 #9168c0
+ accent-violet #9168c0
+ accent-coral #d96570
+ accent-soft-blue #e8f0fe
+ accent-soft-violet #f3eafa
+ border-strong #bdc1c6
+ border-focus #1a73e8
+ on-tonal #0b57d0
+ on-surface-tonal #1f1f1f
+ scrim rgba(32,33,36,0.4)
+ ring-focus rgba(26,115,232,0.32)
bg-yellow #ffe01b
bg-cream #fbf8f0
bg-dark #241c15
surface-2 #eeede9
surface-3 #e3e1db
surface-soft #fbfbf8
surface-yellow-soft #fff5b8
surface-yellow-deep #ffd60a
text-faint #bfb8ac
text-on-yellow #241c15
text-on-dark #fbf8f0
text-on-dark-muted #bfb8ac
text-on-brand #241c15
brand-pressed #e6c800
accent #241c15
accent-cream #f5f2eb
accent-cream-deep #e8e1d0
border-stronger #0d0a05
border-yellow-on-yellow #241c1533
typography 5 changed
~ display {"family":"Cooper Light","size":120} {"family":"Google Sans Display","size":64}
~ h1 {"family":"Cooper Light","size":60} {"family":"Google Sans Display","size":48}
~ h2 {"family":"Cooper Light","size":44} {"family":"Google Sans Display","size":36}
~ body {"family":"Graphik","size":17} {"family":"Google Sans Text","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"Google Sans Mono","size":13}
radius 2 changed
~ button 0px 8px
~ card 0px 24px
spacing identical
No differences.
↻ Swap direction · Gemini (Google) → Mailchimp