Diff

PostHog vs Everlane

57 token-level differences between these two design systems.

Role tokens
Background
#eeefe9 #ffffff
Text
#23251d #000000
Brand
#cd8407 #121212
Border
rgba(35,37,29,0.12) #000000
Display font
IBM Plex Sans Variable Maison Neue Book
Body size
16px 16px
colors 45 changed
~ bg #eeefe9 #ffffff
~ surface #ffffff #f7f7f5
~ text #23251d #000000
~ text-muted #4d4f46 #767676
~ text-soft #6e7065 #9b9b9b
~ brand #cd8407 #121212
~ border rgba(35,37,29,0.12) #000000
~ border-soft rgba(35,37,29,0.06) #e4e4e2
~ on-brand #23251d #ffffff
+ surface-soft #fafaf9
+ text-display #121212
+ link #000000
+ border-input #bdbdbd
+ scrim rgba(0,0,0,0.45)
+ success #1f7a3d
+ warning #9a6b00
+ danger #b3261e
+ sale #b3261e
bg-deep #e6e7df
bg-cooler #f5f6ef
surface-warm #faf9f3
surface-alt #d2d3cc
surface-dark #1d1f17
text-faint #a8aaa1
text-on-dark #eeefe9
text-on-brand #23251d
brand-hover #eb9d2a
brand-active #a36a05
brand-deep #7d5104
brand-warm #f35454
brand-warm-hover #ff7575
brand-warm-deep #c43838
brand-blue #1d4aff
brand-blue-hover #2754ff
brand-blue-deep #0d2ec4
accent-mint #76eaa3
accent-purple #9d4cf2
border-strong rgba(35,37,29,0.24)
border-dark rgba(255,255,255,0.10)
shadow-card rgba(35,37,29,0.06)
shadow-elev rgba(35,37,29,0.10)
semantic-success #76eaa3
semantic-warning #cd8407
semantic-danger #f35454
semantic-info #1d4aff
typography 5 changed
~ display {"family":"IBM Plex Sans Variable","size":88} {"family":"Maison Neue Book","size":56}
~ h1 {"family":"IBM Plex Sans Variable","size":60} {"family":"Maison Neue Book","size":32}
~ h2 {"family":"IBM Plex Sans Variable","size":44} {"family":"Maison Neue Book","size":26}
~ body {"family":"IBM Plex Sans Variable","size":16} {"family":"Maison Neue Book","size":16}
~ label {"family":"Source Code Pro","size":11} {"family":"SFMono-Regular","size":13}
radius 3 changed
~ button 8px 0px
~ card 12px 0px
~ pill 9999px 0px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Everlane → PostHog