Diff

Wikipedia vs Perplexity

63 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fbf9f5
Text
#202122 #272520
Brand
#3366cc #20808d
Border
#a2a9b1 rgba(39, 26, 0, 0.12)
Display font
Linux Libertine pplxSans
Body size
14px 16px
colors 51 changed
~ bg #ffffff #fbf9f5
~ bg-soft #f8f9fa #f5f1ea
~ brand #3366cc #20808d
~ brand-deep #162d56 #0f4f5a
~ text #202122 #272520
~ text-strong #101114 #1a1813
~ text-muted #54595d #5d574c
~ text-soft #72777d #7a7367
~ text-faint #a2a9b1 #9a9388
~ link #3366cc #20808d
~ link-hover #447ff5 #176874
~ selected-bg #dde6f0 rgba(32, 128, 141, 0.10)
~ border #a2a9b1 rgba(39, 26, 0, 0.12)
~ border-strong #54595d rgba(39, 26, 0, 0.20)
~ border-soft #eaecf0 rgba(39, 26, 0, 0.07)
~ border-brand #3366cc rgba(32, 128, 141, 0.30)
+ bg-deep #efeae0
+ surface-warm rgba(39, 26, 0, 0.07)
+ text-medium #3f3a31
+ brand-strong #176874
+ brand-soft #d6ecef
+ brand-wash rgba(32, 128, 141, 0.08)
+ cta-bg #272520
+ cta-text #fdfbfa
+ cta-hover-bg #3a342b
+ cta-active-bg #1a1813
+ disabled #b8b1a4
+ success-bg #dceee0
+ success-text #2f5d3f
+ warning-bg #f5e8c5
+ warning-text #7a5e1f
+ danger-bg #f4dada
+ danger-text #8a3a3a
+ info-bg #d6ecef
+ info-text #0f4f5a
bg-warm #fefefe
surface-soft #f8f9fa
surface-strong #eaecf0
brand-hover #2a4b91
brand-pressed #1f3870
brand-tint #dde6f0
text-on-brand #ffffff
link-visited #795cb2
link-red #dd3333
infobox-header #eaecf0
citation-needed-orange #cc6633
stub-template #cee0f5
success #14866d
warning #fc3
danger #dd3333
info #3366cc
typography 5 changed
~ display {"family":"Linux Libertine","size":48} {"family":"pplxSans","size":72}
~ h1 {"family":"Linux Libertine","size":28} {"family":"pplxSans","size":48}
~ h2 {"family":"Linux Libertine","size":22} {"family":"pplxSans","size":36}
~ body {"family":"Linux Libertine","size":14} {"family":"pplxSans","size":16}
~ label {"family":"Inconsolata","size":12} {"family":"pplxMono","size":12}
radius 2 changed
~ button 4px 8px
~ card 14px 12px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 24px 12px
~ xl 40px 20px
↻ Swap direction · Perplexity → Wikipedia