Diff

Deliveroo vs Hilton

31 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#1a1a1a → #1a1a1a

Brand

#00ccbc → #005091

Border

#e5e5e5 → #dcdfe4

Display font

Roo Sans → Söhne

Body size

15px → 16px

colors 24 changed

~ bg-soft #f5f5f5 → #f4f6f9

~ bg-warm #fffaf3 → #faf9f6

~ surface-soft #fafafa → #fafbfc

~ surface-strong #f0f0f0 → #f4f6f9

~ brand #00ccbc → #005091

~ brand-hover #00b8aa → #003d75

~ brand-pressed #00a399 → #002a52

~ brand-deep #007a72 → #001b38

~ brand-tint #cef4f0 → #e0ebf6

~ brand-soft #9eebde → #cee0f0

~ link #00b8aa → #005091

~ link-hover #007a72 → #003d75

~ selected-bg #cef4f0 → #e0ebf6

~ border #e5e5e5 → #dcdfe4

~ border-strong #cccccc → #bcc0c8

~ border-soft #f0f0f0 → #eef0f4

~ border-brand #00ccbc → #005091

~ danger #e63946 → #c4313a

~ info #00ccbc → #005091

+ honors-purple #67266c

− text-on-teal #1a1a1a

− rating-yellow #ffc833

− urgency-red #e63946

− plus-purple #7a3dd6

typography 5 changed

~ display {"family":"Roo Sans","size":56} → {"family":"Söhne","size":80}

~ h1 {"family":"Roo Sans","size":32} → {"family":"Söhne","size":36}

~ h2 {"family":"Roo Sans","size":24} → {"family":"Söhne","size":28}

~ body {"family":"Roo Sans","size":15} → {"family":"Söhne","size":16}

~ label {"family":"SFMono-Regular","size":12} → {"family":"SFMono-Regular","size":13}

radius 2 changed

~ button 12px → 6px

~ card 16px → 8px

spacing identical

No differences.

↻ Swap direction · Hilton → Deliveroo