Diff

Excalidraw vs Everlane

62 token-level differences between these two design systems.

Role tokens
Background
#fffefd #ffffff
Text
#1b1b1f #000000
Brand
#6965db #121212
Border
#1b1b1f1a #000000
Display font
Excalifont Maison Neue Book
Body size
16px 16px
colors 49 changed
~ bg #fffefd #ffffff
~ surface #ffffff #f7f7f5
~ surface-soft #fafafa #fafaf9
~ text #1b1b1f #000000
~ text-display #1b1b1f #121212
~ text-muted #5b5b5b #767676
~ text-soft #8a8a8a #9b9b9b
~ brand #6965db #121212
~ link #6965db #000000
~ border #1b1b1f1a #000000
~ border-soft #1b1b1f0d #e4e4e2
~ success #16a34a #1f7a3d
~ warning #d97706 #9a6b00
~ danger #dc2626 #b3261e
+ border-input #bdbdbd
+ scrim rgba(0,0,0,0.45)
+ sale #b3261e
bg-canvas #ffffff
bg-warm #fdf6e3
bg-paper #fafafa
surface-warm #f5f0e0
surface-hover #f5f5f5
surface-soft-warm #fdfaf2
text-strong #0f0f12
text-faint #bababa
text-on-brand #ffffff
text-on-pastel #1b1b1f
brand-hover #5651c5
brand-active #443fa3
brand-soft #e8e7fb
brand-faint #f3f2fd
accent-yellow #ffe066
accent-yellow-deep #fad434
accent-pink #ffadad
accent-pink-deep #ff8888
accent-green #9be7c4
accent-green-deep #6fd29f
accent-blue #bde0fe
accent-blue-deep #92c8fa
accent-orange #ffb997
accent-orange-deep #ff9970
accent-purple #d4c5f9
border-strong #1b1b1f33
border-hand #1b1b1f
success-bg #dcfce7
warning-bg #fef3c7
danger-bg #fee2e2
info #6965db
info-bg #e8e7fb
typography 5 changed
~ display {"family":"Excalifont","size":64} {"family":"Maison Neue Book","size":56}
~ h1 {"family":"Excalifont","size":40} {"family":"Maison Neue Book","size":32}
~ h2 {"family":"Excalifont","size":32} {"family":"Maison Neue Book","size":26}
~ body {"family":"Assistant","size":16} {"family":"Maison Neue Book","size":16}
~ label {"family":"Cascadia Code","size":12} {"family":"SFMono-Regular","size":13}
radius 3 changed
~ button 6px 0px
~ card 8px 0px
~ pill 9999px 0px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 12px 32px
~ xl 20px 64px
↻ Swap direction · Everlane → Excalidraw