Diff

Mailchimp vs Rare Beauty

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fdf6f0
Text
#241c15 #1a1a1a
Brand
#ffe01b #9b6dd4
Border
#241c15 #e8dccd
Display font
Cooper Light Recoleta
Body size
17px 16px
colors 53 changed
~ bg #ffffff #fdf6f0
~ surface #f6f6f4 #ffffff
~ surface-soft #fbfbf8 #fdf8f0
~ 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 #9b6dd4
~ brand-deep #ffd60a #583590
~ brand-pressed #e6c800 #6e44a8
~ border #241c15 #e8dccd
~ border-soft #e0ddd4 #f0e6d8
~ success #1c8c4a #3d8b62
~ warning #d97706 #cb9c45
~ danger #c1272d #a85353
~ info #2563eb #9b6dd4
~ on-brand #241c15 #ffffff
+ bg-soft #faf0e6
+ bg-deeper #f5e8d8
+ bg-warm #fdf3e8
+ surface-cream #f9efe0
+ brand-hover #8557c0
+ brand-tint #e8dbf5
+ brand-soft #d2bfe8
+ link #9b6dd4
+ link-hover #6e44a8
+ selected-bg #e8dbf5
+ border-strong #cdb89c
+ border-brand #9b6dd4
+ blush #e8a8a8
+ rose #d4847a
+ amber #cb9c45
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":"Recoleta","size":72}
~ h1 {"family":"Cooper Light","size":60} {"family":"Recoleta","size":36}
~ h2 {"family":"Cooper Light","size":44} {"family":"Recoleta","size":28}
~ body {"family":"Graphik","size":17} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"SFMono-Regular","size":12}
radius 2 changed
~ button 0px 6px
~ card 0px 8px
spacing identical
No differences.
↻ Swap direction · Rare Beauty → Mailchimp