Diff

Everlane vs Loom

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #292a2e
Brand
#121212 #1868db
Border
#000000 #e4e2e7
Display font
Maison Neue Book Charlie Display
Body size
16px 16px
colors 53 changed
~ surface #f7f7f5 #ffffff
~ text #000000 #292a2e
~ text-muted #767676 #8c8f97
~ brand #121212 #1868db
~ link #000000 #1868db
~ border #000000 #e4e2e7
~ border-soft #e4e4e2 #f1f0f3
~ border-input #bdbdbd #b7b9be
+ bg-soft #f8f8f8
+ bg-muted #f0f1f2
+ surface-blue #e9f2fe
+ surface-violet #f8eefe
+ text-heading #101214
+ text-strong #1e1f21
+ text-secondary #505258
+ text-tertiary #6c6f77
+ text-faint #b7b9be
+ brand-hover #1558bc
+ brand-active #123263
+ brand-soft #e9f2fe
+ brand-tint #cfe1fd
+ brand-mid #4d8ced
+ brand-outline #a3c3f1
+ accent-violet #d8a0f7
+ accent-violet-soft #f8eefe
+ accent-violet-mid #bf63f3
+ accent-violet-deep #964ac0
+ accent-record #ff613d
+ accent-record-soft #ff613d20
+ link-hover #1558bc
+ selected-bg #e9f2fe
+ disabled #b7b9be
+ border-strong #dddee1
+ border-brand #1868db
+ success-bg #efffd6
+ success-text #4c6b1f
+ success-solid #94c748
+ warning-bg #fff5d4
+ warning-text #8a5700
+ warning-solid #ffc716
+ danger-bg #ff613d20
+ danger-text #c77b00
+ danger-solid #ff613d
+ info-bg #e9f2fe
+ info-text #1558bc
surface-soft #fafaf9
text-display #121212
text-soft #9b9b9b
scrim rgba(0,0,0,0.45)
success #1f7a3d
warning #9a6b00
danger #b3261e
sale #b3261e
typography 4 changed
~ display {"family":"Maison Neue Book","size":56} {"family":"Charlie Display","size":80}
~ h1 {"family":"Maison Neue Book","size":32} {"family":"Charlie Display","size":44}
~ h2 {"family":"Maison Neue Book","size":26} {"family":"Charlie Display","size":32}
~ body {"family":"Maison Neue Book","size":16} {"family":"Charlie Text","size":16}
radius 3 changed
~ button 0px 8px
~ card 0px 12px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Loom → Everlane