Diff

Rare Beauty vs Krea

57 token-level differences between these two design systems.

Role tokens
Background
#fdf6f0 #000000
Text
#1a1a1a #ffffff
Brand
#9b6dd4 #3b82f6
Border
#e8dccd rgba(255, 255, 255, 0.08)
Display font
Recoleta Suisse Intl
Body size
16px 18px
colors 46 changed
~ bg #fdf6f0 #000000
~ surface #ffffff #171717
~ surface-soft #fdf8f0 #262626
~ brand #9b6dd4 #3b82f6
~ brand-deep #583590 #2563eb
~ brand-soft #d2bfe8 rgba(59, 130, 246, 0.15)
~ text #1a1a1a #ffffff
~ text-strong #000000 #ffffff
~ text-muted #5a5a5a #a3a3a3
~ text-soft #8a8a8a #737373
~ text-faint #bcbcbc #525252
~ link #9b6dd4 #ffffff
~ link-hover #6e44a8 #3b82f6
~ selected-bg #e8dbf5 rgba(255, 255, 255, 0.08)
~ border #e8dccd rgba(255, 255, 255, 0.08)
~ border-strong #cdb89c rgba(255, 255, 255, 0.16)
+ bg-alt #0b0f15
+ surface-elevated #2a2a2a
+ disabled #525252
+ border-subtle rgba(255, 255, 255, 0.04)
+ border-cobalt rgba(59, 130, 246, 0.40)
+ success-bg rgba(34, 197, 94, 0.12)
+ success-text #86efac
+ warning-bg rgba(234, 179, 8, 0.12)
+ warning-text #fde047
+ danger-bg rgba(239, 68, 68, 0.12)
+ danger-text #fca5a5
+ info-bg rgba(59, 130, 246, 0.12)
+ info-text #93c5fd
bg-soft #faf0e6
bg-deeper #f5e8d8
bg-warm #fdf3e8
surface-cream #f9efe0
brand-hover #8557c0
brand-pressed #6e44a8
brand-tint #e8dbf5
text-on-brand #ffffff
border-soft #f0e6d8
border-brand #9b6dd4
blush #e8a8a8
rose #d4847a
amber #cb9c45
success #3d8b62
warning #cb9c45
danger #a85353
info #9b6dd4
typography 4 changed
~ display {"family":"Recoleta","size":72} {"family":"Suisse Intl","size":80}
~ h1 {"family":"Recoleta","size":36} {"family":"Suisse Intl","size":48}
~ h2 {"family":"Recoleta","size":28} {"family":"Suisse Intl","size":36}
~ body {"family":"Inter","size":16} {"family":"Suisse Intl","size":18}
radius 2 changed
~ button 6px 8px
~ card 8px 16px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 24px 12px
~ xl 40px 20px
↻ Swap direction · Krea → Rare Beauty