Diff

Everlane vs Recraft

48 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#000000 #ffffff
Brand
#121212 #d2fc31
Border
#000000 rgba(255, 255, 255, 0.10)
Display font
Maison Neue Book ABC Gravity Condensed
Body size
16px 16px
colors 41 changed
~ bg #ffffff #000000
~ surface #f7f7f5 #141414
~ surface-soft #fafaf9 #1c1c1c
~ text #000000 #ffffff
~ text-muted #767676 #a3a3a3
~ text-soft #9b9b9b #737373
~ brand #121212 #d2fc31
~ on-brand #ffffff #0000ee
~ link #000000 #ffffff
~ border #000000 rgba(255, 255, 255, 0.10)
+ bg-alt #0a0a0a
+ surface-elevated #242424
+ text-strong #ffffff
+ text-faint #525252
+ brand-deep #bce815
+ brand-soft rgba(210, 252, 49, 0.14)
+ on-brand-ink #000000
+ link-hover #d2fc31
+ cta-secondary-bg rgba(255, 255, 255, 0.9)
+ cta-secondary-text #0000ee
+ selected-bg rgba(255, 255, 255, 0.08)
+ disabled #525252
+ border-strong rgba(255, 255, 255, 0.18)
+ border-subtle rgba(255, 255, 255, 0.05)
+ border-lime rgba(210, 252, 49, 0.45)
+ success-bg rgba(74, 222, 128, 0.12)
+ success-text #86efac
+ warning-bg rgba(250, 204, 21, 0.12)
+ warning-text #fde047
+ danger-bg rgba(248, 113, 113, 0.12)
+ danger-text #fca5a5
+ info-bg rgba(210, 252, 49, 0.10)
+ info-text #d2fc31
text-display #121212
border-soft #e4e4e2
border-input #bdbdbd
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":"ABC Gravity Condensed","size":80}
~ h1 {"family":"Maison Neue Book","size":32} {"family":"ABC Gravity Condensed","size":40}
~ h2 {"family":"Maison Neue Book","size":26} {"family":"ABC Gravity Condensed","size":32}
~ 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 · Recraft → Everlane