Diff

Everlane vs Tailwind CSS

65 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0f172a
Brand
#121212 #06b6d4
Border
#000000 #e2e8f0
Display font
Maison Neue Book Inter Variable
Body size
16px 16px
colors 53 changed
~ surface #f7f7f5 #ffffff
~ text #000000 #0f172a
~ text-muted #767676 #64748b
~ text-soft #9b9b9b #475569
~ brand #121212 #06b6d4
~ link #000000 #0891b2
~ border #000000 #e2e8f0
~ border-soft #e4e4e2 #f1f5f9
+ bg-quiet #f8fafc
+ bg-elev #f1f5f9
+ bg-elev-2 #e2e8f0
+ bg-tint #ecfeff
+ bg-tint-2 #cffafe
+ surface-2 #f8fafc
+ text-faint #94a3b8
+ text-quiet #cbd5e1
+ brand-hover #0891b2
+ brand-active #0e7490
+ brand-soft #cffafe
+ brand-soft-2 #ecfeff
+ brand-deep #155e75
+ brand-bright #22d3ee
+ accent-sky #0ea5e9
+ accent-sky-soft #e0f2fe
+ accent-blue #3b82f6
+ accent-violet #8b5cf6
+ accent-pink #ec4899
+ accent-emerald #10b981
+ accent-amber #f59e0b
+ accent-rose #f43f5e
+ border-strong #cbd5e1
+ border-brand #06b6d4
+ link-hover #0e7490
+ code-bg #0f172a
+ code-bg-light #1e293b
+ code-text #e2e8f0
+ code-keyword #22d3ee
+ code-string #86efac
+ code-attribute #fbbf24
+ code-comment #64748b
+ code-tag #f87171
+ shadow-soft rgba(15,23,42,0.04)
+ shadow-medium rgba(15,23,42,0.08)
+ shadow-strong rgba(15,23,42,0.16)
+ shadow-deep rgba(15,23,42,0.24)
surface-soft #fafaf9
text-display #121212
border-input #bdbdbd
scrim rgba(0,0,0,0.45)
success #1f7a3d
warning #9a6b00
danger #b3261e
sale #b3261e
typography 5 changed
~ display {"family":"Maison Neue Book","size":56} {"family":"Inter Variable","size":96}
~ h1 {"family":"Maison Neue Book","size":32} {"family":"Inter Variable","size":56}
~ h2 {"family":"Maison Neue Book","size":26} {"family":"Inter Variable","size":36}
~ body {"family":"Maison Neue Book","size":16} {"family":"Inter Variable","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Fira Code Variable","size":12}
radius 3 changed
~ button 0px 8px
~ card 0px 12px
~ pill 0px 9999px
spacing 4 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ xl 64px 48px
↻ Swap direction · Tailwind CSS → Everlane