Diff

Mintlify vs Perplexity

48 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fbf9f5
Text
#08090a #272520
Brand
#0c8c5e #20808d
Border
rgba(8, 9, 10, 0.07) rgba(39, 26, 0, 0.12)
Display font
Inter pplxSans
Body size
16px 16px
colors 41 changed
~ bg #ffffff #fbf9f5
~ text #08090a #272520
~ text-strong #000000 #1a1813
~ text-medium #3a3b3c #3f3a31
~ text-soft rgba(8, 9, 10, 0.6) #7a7367
~ text-faint rgba(8, 9, 10, 0.45) #9a9388
~ text-muted rgba(8, 9, 10, 0.3) #5d574c
~ brand #0c8c5e #20808d
~ brand-deep #085f3f #0f4f5a
~ brand-soft #e6f4ed #d6ecef
~ cta-bg #08090a #272520
~ cta-text #ffffff #fdfbfa
~ link #0c8c5e #20808d
~ link-hover #085f3f #176874
~ selected-bg #f9f8f7 rgba(32, 128, 141, 0.10)
~ disabled rgba(8, 9, 10, 0.3) #b8b1a4
~ border rgba(8, 9, 10, 0.07) rgba(39, 26, 0, 0.12)
~ border-strong rgba(8, 9, 10, 0.14) rgba(39, 26, 0, 0.20)
~ border-brand rgba(12, 140, 94, 0.30) rgba(32, 128, 141, 0.30)
~ success-bg #e6f4ed #dceee0
~ success-text #085f3f #2f5d3f
~ warning-bg #fef4e6 #f5e8c5
~ warning-text #7a4a00 #7a5e1f
~ danger-bg #fdeeee #f4dada
~ danger-text #a82020 #8a3a3a
~ info-bg #eef4fd #d6ecef
~ info-text #1a3a7a #0f4f5a
+ bg-soft #f5f1ea
+ bg-deep #efeae0
+ surface-warm rgba(39, 26, 0, 0.07)
+ brand-strong #176874
+ brand-wash rgba(32, 128, 141, 0.08)
+ cta-hover-bg #3a342b
+ cta-active-bg #1a1813
+ border-soft rgba(39, 26, 0, 0.07)
bg-secondary #f9f8f7
bg-tertiary #f4f2ef
surface-elev #fafaf9
brand-bright #10a370
brand-tint #c5e6d5
border-subtle rgba(8, 9, 10, 0.04)
typography 5 changed
~ display {"family":"Inter","size":64} {"family":"pplxSans","size":72}
~ h1 {"family":"Inter","size":48} {"family":"pplxSans","size":48}
~ h2 {"family":"Inter","size":40} {"family":"pplxSans","size":36}
~ body {"family":"Inter","size":16} {"family":"pplxSans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"pplxMono","size":12}
radius identical
No differences.
spacing 2 changed
~ lg 16px 12px
~ xl 24px 20px
↻ Swap direction · Perplexity → Mintlify