Diff

Emirates vs LottieFiles

28 token-level differences between these two design systems.

Role tokens

Background

#f6f6f6 → #ffffff

Text

#000000 → #09090b

Brand

#d71921 → #019d91

Border

#000000 → #e4e4e7

Display font

EmiratesSB-Bold → DM Sans

Body size

16px → 16px

colors 19 changed

~ bg #f6f6f6 → #ffffff

~ surface #f6f6f6 → #ffffff

~ text #000000 → #09090b

~ brand #d71921 → #019d91

~ on-brand #ffffff → #fafafa

~ border #000000 → #e4e4e7

+ bg-subtle #fafafa

+ surface-muted #f4f4f5

+ text-muted #71717a

+ text-soft #a1a1aa

+ brand-hover #017a71

+ brand-secondary #00c1a2

+ accent #f4f4f5

+ accent-foreground #18181b

+ border-strong #d4d4d8

+ success #16a34a

+ warning #f59e0b

+ danger #dc2626

+ info #019d91

typography 5 changed

~ display {"family":"EmiratesSB-Bold","size":64} → {"family":"DM Sans","size":96}

~ h1 {"family":"EmiratesSB-Bold","size":36} → {"family":"DM Sans","size":48}

~ h2 {"family":"EmiratesSB-Bold","size":28} → {"family":"DM Sans","size":36}

~ body {"family":"HelveticaNeue","size":16} → {"family":"Inter","size":16}

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

radius 2 changed

~ button 8px → 6px

~ card 12px → 8px

spacing 2 changed

~ lg 32px → 24px

~ xl 64px → 40px