Diff

Perplexity vs Are.na

59 token-level differences between these two design systems.

Role tokens
Background
#fbf9f5 #fafafa
Text
#272520 #000000
Brand
#20808d #ff6600
Border
rgba(39, 26, 0, 0.12) #dddddd
Display font
pplxSans Inter
Body size
16px 14px
colors 51 changed
~ bg #fbf9f5 #fafafa
~ surface #ffffff #f1f1f1
~ text #272520 #000000
~ text-strong #1a1813 #000000
~ text-muted #5d574c #666666
~ text-soft #7a7367 #999999
~ text-faint #9a9388 #bbbbbb
~ brand #20808d #ff6600
~ brand-soft #d6ecef #fff1e6
~ link #20808d #ff6600
~ border rgba(39, 26, 0, 0.12) #dddddd
~ border-strong rgba(39, 26, 0, 0.20) #999999
~ border-soft rgba(39, 26, 0, 0.07) #eeeeee
~ success-bg #dceee0 #e8f0eb
~ warning-bg #f5e8c5 #f5ebd6
~ danger-bg #f4dada #f3e0e0
~ info-bg #d6ecef #f1f1f1
+ bg-alt #ffffff
+ bg-warm #f6f5f3
+ surface-hover #e8e8e8
+ surface-deep #e0e0e0
+ surface-block #ffffff
+ text-display #000000
+ text-on-brand #ffffff
+ brand-hover #e85a00
+ brand-active #cc4f00
+ brand-faint #fff8f1
+ link-visited #cc4f00
+ success #2d6a4f
+ warning #7a5300
+ danger #8b1a1a
+ info #666666
bg-soft #f5f1ea
bg-deep #efeae0
surface-warm rgba(39, 26, 0, 0.07)
text-medium #3f3a31
brand-strong #176874
brand-deep #0f4f5a
brand-wash rgba(32, 128, 141, 0.08)
cta-bg #272520
cta-text #fdfbfa
cta-hover-bg #3a342b
cta-active-bg #1a1813
link-hover #176874
selected-bg rgba(32, 128, 141, 0.10)
disabled #b8b1a4
border-brand rgba(32, 128, 141, 0.30)
success-text #2f5d3f
warning-text #7a5e1f
danger-text #8a3a3a
info-text #0f4f5a
typography 5 changed
~ display {"family":"pplxSans","size":72} {"family":"Inter","size":40}
~ h1 {"family":"pplxSans","size":48} {"family":"Inter","size":32}
~ h2 {"family":"pplxSans","size":36} {"family":"Inter","size":24}
~ body {"family":"pplxSans","size":16} {"family":"Inter","size":14}
~ label {"family":"pplxMono","size":12} {"family":"JetBrains Mono","size":12}
radius 3 changed
~ button 8px 0px
~ card 12px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Are.na → Perplexity