Diff

Rare Beauty vs Marriott

40 token-level differences between these two design systems.

Role tokens
Background
#fdf6f0 #f9f6f0
Text
#1a1a1a #2a2a2a
Brand
#9b6dd4 #a4793f
Border
#e8dccd #e0d9c8
Display font
Recoleta Caudex
Body size
16px 16px
colors 34 changed
~ bg #fdf6f0 #f9f6f0
~ bg-soft #faf0e6 #f5efe5
~ bg-warm #fdf3e8 #fdf9f2
~ surface-soft #fdf8f0 #fdfcf8
~ brand #9b6dd4 #a4793f
~ brand-hover #8557c0 #8d6232
~ brand-pressed #6e44a8 #6e4d27
~ brand-deep #583590 #553c1e
~ brand-tint #e8dbf5 #f5e9d4
~ text #1a1a1a #2a2a2a
~ text-strong #000000 #1f2a44
~ text-muted #5a5a5a #6a6a6a
~ text-soft #8a8a8a #8c8c8c
~ text-faint #bcbcbc #b8b8b8
~ link #9b6dd4 #a4793f
~ link-hover #6e44a8 #1f2a44
~ selected-bg #e8dbf5 #f5e9d4
~ border #e8dccd #e0d9c8
~ border-strong #cdb89c #c8bea8
~ border-soft #f0e6d8 #f0eadd
~ border-brand #9b6dd4 #a4793f
~ warning #cb9c45 #c5832e
~ danger #a85353 #a93535
~ info #9b6dd4 #1f2a44
+ surface-strong #f5efe5
+ navy #1f2a44
+ navy-deep #141d33
+ navy-soft rgba(31, 42, 68, 0.06)
bg-deeper #f5e8d8
surface-cream #f9efe0
brand-soft #d2bfe8
blush #e8a8a8
rose #d4847a
amber #cb9c45
typography 4 changed
~ display {"family":"Recoleta","size":72} {"family":"Caudex","size":80}
~ h1 {"family":"Recoleta","size":36} {"family":"Caudex","size":36}
~ h2 {"family":"Recoleta","size":28} {"family":"Caudex","size":28}
~ body {"family":"Inter","size":16} {"family":"Avenir Next","size":16}
radius 2 changed
~ button 6px 4px
~ card 8px 6px
spacing identical
No differences.
↻ Swap direction · Marriott → Rare Beauty