Diff

Emirates vs CodeSandbox

39 token-level differences between these two design systems.

Role tokens
Background
#f6f6f6 #0e0e0e
Text
#000000 #f0f0f0
Brand
#d71921 #eaff96
Border
#000000 rgba(240,240,240,0.10)
Display font
EmiratesSB-Bold TWK Everett
Body size
16px 16px
colors 35 changed
~ bg #f6f6f6 #0e0e0e
~ surface #f6f6f6 #1d1d1d
~ text #000000 #f0f0f0
~ brand #d71921 #eaff96
~ on-brand #ffffff #343434
~ border #000000 rgba(240,240,240,0.10)
+ bg-deep #080808
+ bg-elevated #1d1d1d
+ surface-high #262626
+ surface-low #141414
+ text-strong #ffffff
+ text-muted #a0a0a0
+ text-soft #8a8a8a
+ text-faint #5c5c5c
+ brand-hover #f1ffb0
+ brand-deep #d6f06a
+ brand-soft rgba(234,255,150,0.14)
+ brand-tint rgba(234,255,150,0.07)
+ lime-text #e3ff73
+ lime-text-hover #edff9a
+ link #e3ff73
+ link-hover #edff9a
+ border-strong rgba(240,240,240,0.18)
+ border-soft rgba(240,240,240,0.06)
+ border-brand rgba(234,255,150,0.45)
+ success #7ee787
+ success-bg rgba(126,231,135,0.14)
+ warning #f0b429
+ warning-bg rgba(240,180,41,0.14)
+ danger #ff6b6b
+ danger-bg rgba(255,107,107,0.14)
+ info #e3ff73
+ shadow-deep rgba(0,0,0,0.6)
+ shadow-soft rgba(0,0,0,0.4)
+ shadow-glow rgba(234,255,150,0.22)
typography 4 changed
~ display {"family":"EmiratesSB-Bold","size":64} {"family":"TWK Everett","size":120}
~ h1 {"family":"EmiratesSB-Bold","size":36} {"family":"TWK Everett","size":56}
~ h2 {"family":"EmiratesSB-Bold","size":28} {"family":"TWK Everett","size":40}
~ body {"family":"HelveticaNeue","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · CodeSandbox → Emirates