Diff

Everlane vs CodeSandbox

47 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e0e0e
Text
#000000 #f0f0f0
Brand
#121212 #eaff96
Border
#000000 rgba(240,240,240,0.10)
Display font
Maison Neue Book TWK Everett
Body size
16px 16px
colors 40 changed
~ bg #ffffff #0e0e0e
~ surface #f7f7f5 #1d1d1d
~ text #000000 #f0f0f0
~ text-muted #767676 #a0a0a0
~ text-soft #9b9b9b #8a8a8a
~ brand #121212 #eaff96
~ on-brand #ffffff #343434
~ link #000000 #e3ff73
~ border #000000 rgba(240,240,240,0.10)
~ border-soft #e4e4e2 rgba(240,240,240,0.06)
~ success #1f7a3d #7ee787
~ warning #9a6b00 #f0b429
~ danger #b3261e #ff6b6b
+ bg-deep #080808
+ bg-elevated #1d1d1d
+ surface-high #262626
+ surface-low #141414
+ text-strong #ffffff
+ 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-hover #edff9a
+ border-strong rgba(240,240,240,0.18)
+ border-brand rgba(234,255,150,0.45)
+ success-bg rgba(126,231,135,0.14)
+ warning-bg rgba(240,180,41,0.14)
+ 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)
surface-soft #fafaf9
text-display #121212
border-input #bdbdbd
scrim rgba(0,0,0,0.45)
sale #b3261e
typography 4 changed
~ display {"family":"Maison Neue Book","size":56} {"family":"TWK Everett","size":120}
~ h1 {"family":"Maison Neue Book","size":32} {"family":"TWK Everett","size":56}
~ h2 {"family":"Maison Neue Book","size":26} {"family":"TWK Everett","size":40}
~ body {"family":"Maison Neue Book","size":16} {"family":"Inter","size":16}
radius 3 changed
~ button 0px 8px
~ card 0px 12px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · CodeSandbox → Everlane