Diff

Pinterest vs LottieFiles

36 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #09090b
Brand
#e60023 #019d91
Border
#e5e5e0 #e4e4e7
Display font
Pin Sans DM Sans
Body size
16px 16px
colors 27 changed
~ text #000000 #09090b
~ text-muted #62625b #71717a
~ brand #e60023 #019d91
~ brand-hover #cc001f #017a71
~ on-brand #ffffff #fafafa
~ border #e5e5e0 #e4e4e7
~ border-strong #c8c8c1 #d4d4d8
~ success #097239 #16a34a
~ warning #b24700 #f59e0b
~ danger #b60c0c #dc2626
~ info #62625b #019d91
+ bg-subtle #fafafa
+ surface-muted #f4f4f5
+ text-soft #a1a1aa
+ brand-secondary #00c1a2
+ accent #f4f4f5
+ accent-foreground #18181b
surface-elevated #fbfbf9
surface-wash #f6f6f3
text-subtle #62625b
text-faint #91918c
brand-pressed #b2001b
border-soft #f6f6f3
success-bg #e3f7ec
warning-bg #ffede0
danger-bg #ffebeb
info-bg #f6f6f3
typography 5 changed
~ display {"family":"Pin Sans","size":72} {"family":"DM Sans","size":96}
~ h1 {"family":"Pin Sans","size":36} {"family":"DM Sans","size":48}
~ h2 {"family":"Pin Sans","size":28} {"family":"DM Sans","size":36}
~ body {"family":"Pin Sans","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"SFMono-Regular","size":14}
radius 3 changed
~ button 8px 6px
~ card 12px 8px
~ pill 999px 9999px
spacing 1 changed
~ xl 32px 40px
↻ Swap direction · LottieFiles → Pinterest