Diff

MyFitnessPal vs Patagonia

41 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f6efe1
Text
#1a1a1a #1c1c1c
Brand
#0066ee #cd0000
Border
#dcdfe4 #d8d0bc
Display font
Inter Futura PT
Body size
14px 16px
colors 34 changed
~ bg #ffffff #f6efe1
~ bg-soft #f4f6f8 #fdf9ed
~ bg-warm #fafbfc #f9f3e3
~ surface-soft #fafbfc #fbf8ed
~ brand #0066ee #cd0000
~ brand-hover #0052cc #a80000
~ brand-pressed #003d99 #820000
~ brand-deep #002966 #5a0000
~ brand-tint #e0eeff #fde0e0
~ text #1a1a1a #1c1c1c
~ link #0066ee #cd0000
~ link-hover #0052cc #820000
~ selected-bg #e0eeff #fde0e0
~ border #dcdfe4 #d8d0bc
~ border-strong #bcc0c8 #bcb09a
~ border-soft #eef0f4 #e8e0c8
~ border-brand #0066ee #cd0000
~ success #1a8757 #3d4a2e
~ warning #cc8800 #cb9c45
~ danger #c4313a #a80000
~ info #0066ee #3d4a2e
+ bg-deeper #ebe3d0
+ surface-deeper #ede5d0
+ forest #3d4a2e
+ forest-deep #293421
+ forest-soft #dde3d4
+ amber #cb9c45
surface-strong #f0f2f5
premium-teal #00aaaa
premium-teal-deep #008888
premium-teal-soft #cceaea
protein #ec5e8a
carbs #f0a020
fat #a05ec5
typography 5 changed
~ display {"family":"Inter","size":56} {"family":"Futura PT","size":80}
~ h1 {"family":"Inter","size":32} {"family":"Futura PT","size":36}
~ h2 {"family":"Inter","size":24} {"family":"Futura PT","size":28}
~ body {"family":"Inter","size":14} {"family":"Futura PT","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"SFMono-Regular","size":12}
radius 2 changed
~ button 8px 4px
~ card 12px 14px
spacing identical
No differences.
↻ Swap direction · Patagonia → MyFitnessPal