Diff

Emirates vs Audi

51 token-level differences between these two design systems.

Role tokens
Background
#f6f6f6 #ffffff
Text
#000000 #333333
Brand
#d71921 #000000
Border
#000000 #d6d6d6
Display font
EmiratesSB-Bold AudiType
Body size
16px 16px
colors 41 changed
~ bg #f6f6f6 #ffffff
~ surface #f6f6f6 #ffffff
~ text #000000 #333333
~ brand #d71921 #000000
~ border #000000 #d6d6d6
+ bg-soft #f2f2f2
+ bg-card #ffffff
+ bg-strong #e6e6e6
+ bg-dark #000000
+ bg-dark-elev #1a1a1a
+ bg-dark-card #262626
+ surface-soft #f2f2f2
+ surface-card #ffffff
+ surface-table #fafafa
+ text-strong #000000
+ text-ink #000000
+ text-muted #666666
+ text-faint #999999
+ brand-on-light #000000
+ brand-deep #000000
+ brand-disabled #cccccc
+ on-dark #ffffff
+ on-dark-soft #bcbcbc
+ on-dark-faint #808080
+ accent-red #bb0a30
+ accent-red-deep #8d0623
+ accent-progress-blue #0062c0
+ border-strong #a6a6a6
+ border-soft #e6e6e6
+ border-on-dark rgba(255,255,255,0.16)
+ border-on-dark-strong rgba(255,255,255,0.32)
+ link #000000
+ link-hover #bb0a30
+ ring #000000
+ shadow-soft rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.14)
+ shadow-deep rgba(0,0,0,0.36)
+ success #1f8b46
+ warning #f0a020
+ danger #bb0a30
+ info #0062c0
typography 5 changed
~ display {"family":"EmiratesSB-Bold","size":64} {"family":"AudiType","size":80}
~ h1 {"family":"EmiratesSB-Bold","size":36} {"family":"AudiType","size":40}
~ h2 {"family":"EmiratesSB-Bold","size":28} {"family":"AudiType","size":32}
~ body {"family":"HelveticaNeue","size":16} {"family":"AudiType","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 32px 48px
~ xl 64px 96px
↻ Swap direction · Audi → Emirates