Diff

Everlane vs Bear

54 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #444444
Brand
#121212 #c6f432
Border
#000000 #0000001a
Display font
Maison Neue Book bearsansheadline
Body size
16px 17px
colors 42 changed
~ surface #f7f7f5 #f4f1ec
~ text #000000 #444444
~ text-muted #767676 #7a7a7a
~ text-soft #9b9b9b #999999
~ border #000000 #0000001a
~ border-soft #e4e4e2 #00000010
~ scrim rgba(0,0,0,0.45) rgba(20,18,15,0.50)
~ success #1f7a3d #3a7b3a
~ warning #9a6b00 #a35e0a
~ danger #b3261e #dd4c4f
+ bg-soft #fafaf8
+ surface-elev #ebe5dc
+ surface-paper #fdfbf5
+ text-strong #222222
+ text-deepest #111111
+ text-body #5a5a5a
+ accent-red #dd4c4f
+ accent-red-hover #c43a3d
+ accent-red-soft #fce5e5
+ accent-teal #456aa3
+ accent-teal-soft #cbdaee
+ accent-teal-hover #34588f
+ accent-teal-deep #2c466f
+ cta-bg #1a1a1f
+ cta-bg-hover #2a2a2f
+ cta-text #ffffff
+ border-strong #00000028
+ shadow-card rgba(34,30,15,0.04)
+ shadow-screenshot rgba(0,0,0,0.10)
+ shadow-elev rgba(34,30,15,0.08)
+ success-soft #eaf3ea
+ warning-soft #fbf1de
+ danger-soft #fce5e5
+ info #456aa3
+ info-soft #cbdaee
surface-soft #fafaf9
text-display #121212
brand #121212
on-brand #ffffff
link #000000
border-input #bdbdbd
sale #b3261e
typography 4 changed
~ display {"family":"Maison Neue Book","size":56} {"family":"bearsansheadline","size":51}
~ h1 {"family":"Maison Neue Book","size":32} {"family":"bearsansheadline","size":40}
~ h2 {"family":"Maison Neue Book","size":26} {"family":"bearsansheadline","size":32}
~ body {"family":"Maison Neue Book","size":16} {"family":"bearsans","size":17}
radius 3 changed
~ button 0px 12px
~ card 0px 16px
~ pill 0px 9999px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 32px 48px
~ xl 64px 96px
↻ Swap direction · Bear → Everlane