Diff

Mintlify vs Plain

39 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#08090a #000000
Brand
#0c8c5e #1ad379
Border
rgba(8, 9, 10, 0.07) rgba(0, 0, 0, 0.08)
Display font
Inter ABC Favorit
Body size
16px 16px
colors 31 changed
~ bg-secondary #f9f8f7 #f5f5f5
~ bg-tertiary #f4f2ef #fafafa
~ surface-elev #fafaf9 #fafafa
~ text #08090a #000000
~ text-medium #3a3b3c #1a1a1a
~ text-soft rgba(8, 9, 10, 0.6) #5b5b5b
~ text-faint rgba(8, 9, 10, 0.45) #8a8a8a
~ text-muted rgba(8, 9, 10, 0.3) #b8b8b8
~ brand #0c8c5e #1ad379
~ brand-deep #085f3f #0a8f4f
~ brand-soft #e6f4ed #e8faf0
~ brand-tint #c5e6d5 #b8f0d2
~ on-brand #ffffff #000000
~ cta-bg #08090a #1ad379
~ cta-text #ffffff #000000
~ link #0c8c5e #000000
~ link-hover #085f3f #1ad379
~ selected-bg #f9f8f7 #f5f5f5
~ disabled rgba(8, 9, 10, 0.3) #b8b8b8
~ border rgba(8, 9, 10, 0.07) rgba(0, 0, 0, 0.08)
~ border-strong rgba(8, 9, 10, 0.14) rgba(0, 0, 0, 0.16)
~ border-subtle rgba(8, 9, 10, 0.04) rgba(0, 0, 0, 0.04)
~ border-brand rgba(12, 140, 94, 0.30) rgba(26, 211, 121, 0.30)
~ success-bg #e6f4ed #e8faf0
~ success-text #085f3f #0a8f4f
~ warning-bg #fef4e6 #fff4e0
~ danger-bg #fdeeee #fde6e6
~ info-bg #eef4fd #eef2f7
~ info-text #1a3a7a #1a1a1a
+ brand-hover #0fb866
brand-bright #10a370
typography 5 changed
~ display {"family":"Inter","size":64} {"family":"ABC Favorit","size":96}
~ h1 {"family":"Inter","size":48} {"family":"ABC Favorit","size":64}
~ h2 {"family":"Inter","size":40} {"family":"ABC Favorit","size":48}
~ body {"family":"Inter","size":16} {"family":"ABC Favorit","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"ABC Favorit Mono","size":11}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing 1 changed
~ xl 24px 32px
↻ Swap direction · Plain → Mintlify