Diff

Perplexity vs Nintendo

59 token-level differences between these two design systems.

Role tokens
Background
#fbf9f5 #ffffff
Text
#272520 #1f1f1f
Brand
#20808d #e60012
Border
rgba(39, 26, 0, 0.12) #e5e5e5
Display font
pplxSans Nintendo Sans
Body size
16px 16px
colors 47 changed
~ bg #fbf9f5 #ffffff
~ bg-soft #f5f1ea #f5f5f5
~ text #272520 #1f1f1f
~ text-strong #1a1813 #000000
~ text-muted #5d574c #5a5a5a
~ text-soft #7a7367 #8a8a8a
~ text-faint #9a9388 #bcbcbc
~ brand #20808d #e60012
~ brand-deep #0f4f5a #8a000a
~ link #20808d #0066cc
~ link-hover #176874 #cc0010
~ selected-bg rgba(32, 128, 141, 0.10) #ffeeee
~ border rgba(39, 26, 0, 0.12) #e5e5e5
~ border-strong rgba(39, 26, 0, 0.20) #cccccc
~ border-soft rgba(39, 26, 0, 0.07) #f0f0f0
~ border-brand rgba(32, 128, 141, 0.30) #e60012
+ bg-warm #fff8f0
+ bg-tinted #ffeeee
+ surface-soft #fafafa
+ surface-strong #f5f5f5
+ brand-hover #cc0010
+ brand-active #a8000d
+ brand-tint #ffeeee
+ text-on-brand #ffffff
+ success #00a345
+ warning #ff8c00
+ danger #e60012
+ info #0066cc
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
typography 5 changed
~ display {"family":"pplxSans","size":72} {"family":"Nintendo Sans","size":80}
~ h1 {"family":"pplxSans","size":48} {"family":"Nintendo Sans","size":36}
~ h2 {"family":"pplxSans","size":36} {"family":"Nintendo Sans","size":28}
~ body {"family":"pplxSans","size":16} {"family":"Inter","size":16}
~ label {"family":"pplxMono","size":12} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 8px 12px
~ card 12px 16px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 12px 24px
~ xl 20px 40px
↻ Swap direction · Nintendo → Perplexity