Diff

Lego vs Rare Beauty

51 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fdf6f0
Text
#1a1a1a #1a1a1a
Brand
#ffd500 #9b6dd4
Border
#e0e0e0 #e8dccd
Display font
Lego Sans Recoleta
Body size
15px 16px
colors 45 changed
~ bg #ffffff #fdf6f0
~ bg-soft #f5f5f5 #faf0e6
~ bg-warm #fffaf0 #fdf3e8
~ surface-soft #fafafa #fdf8f0
~ brand #ffd500 #9b6dd4
~ brand-hover #e6c000 #8557c0
~ brand-pressed #cca900 #6e44a8
~ brand-deep #a89200 #583590
~ brand-tint #fff8d0 #e8dbf5
~ brand-soft #ffec8a #d2bfe8
~ on-brand #1a1a1a #ffffff
~ text-on-brand #1a1a1a #ffffff
~ link #0055bf #9b6dd4
~ link-hover #003e8e #6e44a8
~ selected-bg #fff8d0 #e8dbf5
~ border #e0e0e0 #e8dccd
~ border-strong #cccccc #cdb89c
~ border-soft #f0f0f0 #f0e6d8
~ border-brand #ffd500 #9b6dd4
~ success #179a35 #3d8b62
~ warning #ffd500 #cb9c45
~ danger #d62027 #a85353
~ info #0055bf #9b6dd4
+ bg-deeper #f5e8d8
+ surface-cream #f9efe0
+ blush #e8a8a8
+ rose #d4847a
+ amber #cb9c45
surface-strong #f0f0f0
red #d62027
red-deep #a8161c
red-soft #ffd5d8
blue #0055bf
blue-deep #003e8e
blue-soft #cee0f5
green #179a35
green-deep #0c7826
green-soft #cdf0d4
text-on-red #ffffff
text-on-blue #ffffff
text-on-green #ffffff
age-0plus #179a35
age-6plus #0055bf
age-12plus #d62027
age-adult #1a1a1a
typography 4 changed
~ display {"family":"Lego Sans","size":56} {"family":"Recoleta","size":72}
~ h1 {"family":"Lego Sans","size":32} {"family":"Recoleta","size":36}
~ h2 {"family":"Lego Sans","size":24} {"family":"Recoleta","size":28}
~ body {"family":"Lego Sans","size":15} {"family":"Inter","size":16}
radius 2 changed
~ button 12px 6px
~ card 16px 8px
spacing identical
No differences.
↻ Swap direction · Rare Beauty → Lego