Diff

Postmark vs Mintlify

67 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1c1d1f #08090a
Brand
#ffde00 #0c8c5e
Border
#e5e5e2 rgba(8, 9, 10, 0.07)
Display font
Inter Inter
Body size
17px 16px
colors 59 changed
~ surface #fff8d4 #ffffff
~ text #1c1d1f #08090a
~ text-muted #5c5e63 rgba(8, 9, 10, 0.3)
~ text-soft #8a8d93 rgba(8, 9, 10, 0.6)
~ text-faint #b3b6bc rgba(8, 9, 10, 0.45)
~ brand #ffde00 #0c8c5e
~ brand-soft #fff8d4 #e6f4ed
~ brand-deep #b39600 #085f3f
~ link #1c4eb8 #0c8c5e
~ link-hover #1a3f99 #085f3f
~ on-brand #1c1d1f #ffffff
~ border #e5e5e2 rgba(8, 9, 10, 0.07)
~ border-strong #cdcdc8 rgba(8, 9, 10, 0.14)
+ bg-secondary #f9f8f7
+ bg-tertiary #f4f2ef
+ surface-elev #fafaf9
+ text-medium #3a3b3c
+ brand-bright #10a370
+ brand-tint #c5e6d5
+ cta-bg #08090a
+ cta-text #ffffff
+ selected-bg #f9f8f7
+ disabled rgba(8, 9, 10, 0.3)
+ border-subtle rgba(8, 9, 10, 0.04)
+ border-brand rgba(12, 140, 94, 0.30)
+ success-bg #e6f4ed
+ success-text #085f3f
+ warning-bg #fef4e6
+ warning-text #7a4a00
+ danger-bg #fdeeee
+ danger-text #a82020
+ info-bg #eef4fd
+ info-text #1a3a7a
bg-soft #fafaf7
bg-cream #fdfaf0
surface-neutral #f5f5f2
surface-2 #f0f0ed
bg-dark #1c1d1f
bg-dark-2 #26272a
text-on-dark #ffffff
text-on-dark-soft #c9ccd1
brand-hover #f0d000
brand-active #e6c500
accent-blue #1c4eb8
accent-blue-soft #e6edff
accent-green #22c55e
accent-green-soft #dcfce7
accent-red #dc2626
accent-red-soft #fee2e2
accent-amber #f59e0b
border-soft #f0f0ed
border-dark #3a3b3e
shadow-soft rgba(28,29,31,0.06)
shadow-medium rgba(28,29,31,0.10)
shadow-strong rgba(28,29,31,0.18)
semantic-success #22c55e
semantic-warning #f59e0b
semantic-danger #dc2626
semantic-info #1c4eb8
typography 3 changed
~ display {"family":"Inter","size":72} {"family":"Inter","size":64}
~ body {"family":"Inter","size":17} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing 5 changed
~ xs 4px 1px
~ sm 8px 2px
~ md 16px 6px
~ lg 32px 16px
~ xl 48px 24px
↻ Swap direction · Mintlify → Postmark