Diff

Hilton vs LottieFiles

39 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #09090b
Brand
#005091 #019d91
Border
#dcdfe4 #e4e4e7
Display font
Söhne DM Sans
Body size
16px 16px
colors 34 changed
~ brand #005091 #019d91
~ brand-hover #003d75 #017a71
~ on-brand #ffffff #fafafa
~ text #1a1a1a #09090b
~ text-muted #5a5a5a #71717a
~ text-soft #8a8a8a #a1a1aa
~ border #dcdfe4 #e4e4e7
~ border-strong #bcc0c8 #d4d4d8
~ success #1a8757 #16a34a
~ warning #cc8800 #f59e0b
~ danger #c4313a #dc2626
~ info #005091 #019d91
+ bg-subtle #fafafa
+ surface-muted #f4f4f5
+ brand-secondary #00c1a2
+ accent #f4f4f5
+ accent-foreground #18181b
bg-soft #f4f6f9
bg-warm #faf9f6
surface-soft #fafbfc
surface-strong #f4f6f9
brand-pressed #002a52
brand-deep #001b38
brand-tint #e0ebf6
brand-soft #cee0f0
text-strong #000000
text-faint #bcbcbc
text-on-brand #ffffff
link #005091
link-hover #003d75
selected-bg #e0ebf6
border-soft #eef0f4
border-brand #005091
honors-purple #67266c
typography 5 changed
~ display {"family":"Söhne","size":80} {"family":"DM Sans","size":96}
~ h1 {"family":"Söhne","size":36} {"family":"DM Sans","size":48}
~ h2 {"family":"Söhne","size":28} {"family":"DM Sans","size":36}
~ body {"family":"Söhne","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"SFMono-Regular","size":14}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · LottieFiles → Hilton