Diff

Marriott vs Patagonia

40 token-level differences between these two design systems.

Role tokens
Background
#f9f6f0 #f6efe1
Text
#2a2a2a #1c1c1c
Brand
#a4793f #cd0000
Border
#e0d9c8 #d8d0bc
Display font
Caudex Futura PT
Body size
16px 16px
colors 35 changed
~ bg #f9f6f0 #f6efe1
~ bg-soft #f5efe5 #fdf9ed
~ bg-warm #fdf9f2 #f9f3e3
~ surface-soft #fdfcf8 #fbf8ed
~ brand #a4793f #cd0000
~ brand-hover #8d6232 #a80000
~ brand-pressed #6e4d27 #820000
~ brand-deep #553c1e #5a0000
~ brand-tint #f5e9d4 #fde0e0
~ text #2a2a2a #1c1c1c
~ text-strong #1f2a44 #000000
~ text-muted #6a6a6a #5a5a5a
~ text-soft #8c8c8c #8a8a8a
~ text-faint #b8b8b8 #bcbcbc
~ link #a4793f #cd0000
~ link-hover #1f2a44 #820000
~ selected-bg #f5e9d4 #fde0e0
~ border #e0d9c8 #d8d0bc
~ border-strong #c8bea8 #bcb09a
~ border-soft #f0eadd #e8e0c8
~ border-brand #a4793f #cd0000
~ success #3d8b62 #3d4a2e
~ warning #c5832e #cb9c45
~ danger #a93535 #a80000
~ info #1f2a44 #3d4a2e
+ bg-deeper #ebe3d0
+ surface-deeper #ede5d0
+ forest #3d4a2e
+ forest-deep #293421
+ forest-soft #dde3d4
+ amber #cb9c45
surface-strong #f5efe5
navy #1f2a44
navy-deep #141d33
navy-soft rgba(31, 42, 68, 0.06)
typography 4 changed
~ display {"family":"Caudex","size":80} {"family":"Futura PT","size":80}
~ h1 {"family":"Caudex","size":36} {"family":"Futura PT","size":36}
~ h2 {"family":"Caudex","size":28} {"family":"Futura PT","size":28}
~ body {"family":"Avenir Next","size":16} {"family":"Futura PT","size":16}
radius 1 changed
~ card 6px 14px
spacing identical
No differences.
↻ Swap direction · Patagonia → Marriott