Diff

Postmark vs Alibaba

80 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1c1d1f #222222
Brand
#ffde00 #ff6a00
Border
#e5e5e2 #e5e5e5
Display font
Inter PingFang SC
Body size
17px 14px
colors 73 changed
~ bg-soft #fafaf7 #f5f5f5
~ surface #fff8d4 #ffffff
~ bg-dark #1c1d1f #1d1d1d
~ text #1c1d1f #222222
~ text-muted #5c5e63 #666666
~ text-soft #8a8d93 #999999
~ text-faint #b3b6bc #cccccc
~ brand #ffde00 #ff6a00
~ brand-hover #f0d000 #e85f00
~ brand-active #e6c500 #cc5400
~ brand-deep #b39600 #a64200
~ on-brand #1c1d1f #ffffff
~ accent-blue #1c4eb8 #1976d2
~ accent-green #22c55e #1ca44e
~ accent-red #dc2626 #d62828
~ border #e5e5e2 #e5e5e5
~ border-soft #f0f0ed #f0f0f0
~ border-strong #cdcdc8 #cccccc
+ bg-warm #fff8f0
+ surface-strong #e8e8e8
+ surface-soft #fafafa
+ surface-card #ffffff
+ surface-overlay rgba(0,0,0,0.6)
+ text-body #222222
+ text-inverse #ffffff
+ text-link #1976d2
+ text-link-hover #1565c0
+ brand-light #ff8533
+ brand-pale #ffe5cc
+ brand-glow rgba(255,106,0,0.15)
+ accent-gold #f7ba2a
+ accent-gold-dark #c8860a
+ accent-blue-deep #0d47a1
+ accent-red-deep #a91b1b
+ accent-purple #6a3093
+ border-orange #ff6a00
+ border-card #dddddd
+ shadow-card rgba(0,0,0,0.08)
+ shadow-card-hover rgba(0,0,0,0.16)
+ shadow-modal rgba(0,0,0,0.25) 0 8px 24px
+ shadow-orange rgba(255,106,0,0.3)
+ flash-deal-bg linear-gradient(90deg, #ff6a00, #ff8533)
+ flash-deal-pulse rgba(255,106,0,0.6)
+ rfq-ribbon #ff6a00
+ trade-assurance #1976d2
+ verified-mark #1976d2
+ ready-to-ship #1ca44e
+ factory-tag #6a3093
+ success #1ca44e
+ warning #f7ba2a
+ danger #d62828
+ info #1976d2
bg-cream #fdfaf0
surface-neutral #f5f5f2
surface-2 #f0f0ed
bg-dark-2 #26272a
text-on-dark #ffffff
text-on-dark-soft #c9ccd1
brand-soft #fff8d4
link #1c4eb8
link-hover #1a3f99
accent-blue-soft #e6edff
accent-green-soft #dcfce7
accent-red-soft #fee2e2
accent-amber #f59e0b
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 5 changed
~ display {"family":"Inter","size":72} {"family":"PingFang SC","size":72}
~ h1 {"family":"Inter","size":48} {"family":"PingFang SC","size":40}
~ h2 {"family":"Inter","size":40} {"family":"PingFang SC","size":32}
~ body {"family":"Inter","size":17} {"family":"PingFang SC","size":14}
~ label {"family":"JetBrains Mono","size":12} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 6px
spacing identical
No differences.
↻ Swap direction · Alibaba → Postmark