Diff

Alibaba vs Cloudinary

81 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#222222 #0d152e
Brand
#ff6a00 #3448c5
Border
#e5e5e5 #dbe0eb
Display font
PingFang SC Inter Display
Body size
14px 16px
colors 74 changed
~ bg-soft #f5f5f5 #f5f7fb
~ surface #ffffff #f5f7fb
~ bg-dark #1d1d1d #0d152e
~ text #222222 #0d152e
~ text-body #222222 #2c3354
~ text-muted #666666 #5a6080
~ text-faint #cccccc #8c91a8
~ brand #ff6a00 #3448c5
~ brand-hover #e85f00 #2b3da8
~ brand-active #cc5400 #23328e
~ brand-deep #a64200 #1a266b
~ border #e5e5e5 #dbe0eb
~ border-soft #f0f0f0 #e9ecf3
~ border-strong #cccccc #a8b0c4
~ success #1ca44e #3fc998
~ warning #f7ba2a #f5b324
~ danger #d62828 #ff5e58
~ info #1976d2 #3448c5
+ bg-elev #ffffff
+ bg-strong #e9ecf3
+ bg-dark-elev #162042
+ brand-soft #e1e5f7
+ on-dark #ffffff
+ link #3448c5
+ link-hover #2b3da8
+ accent-coral #ff5e58
+ accent-coral-soft #fde0de
+ accent-amber #f5b324
+ accent-amber-soft #fdedc6
+ accent-mint #3fc998
+ accent-mint-soft #d6f3e7
+ shadow-tint rgba(13, 21, 46, 0.06)
+ shadow-deep rgba(13, 21, 46, 0.18)
+ code-bg #0d152e
+ code-text #d9e0f5
+ code-keyword #7eb6ff
+ code-string #ffb074
+ code-comment #8c91a8
+ selection rgba(52, 72, 197, 0.18)
+ ring rgba(52, 72, 197, 0.45)
bg-warm #fff8f0
surface-strong #e8e8e8
surface-soft #fafafa
surface-card #ffffff
surface-overlay rgba(0,0,0,0.6)
text-strong #000000
text-soft #999999
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 #1976d2
accent-blue-deep #0d47a1
accent-red #d62828
accent-red-deep #a91b1b
accent-green #1ca44e
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
typography 5 changed
~ display {"family":"PingFang SC","size":72} {"family":"Inter Display","size":76}
~ h1 {"family":"PingFang SC","size":40} {"family":"Inter Display","size":40}
~ h2 {"family":"PingFang SC","size":32} {"family":"Inter Display","size":32}
~ body {"family":"PingFang SC","size":14} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":16}
radius 2 changed
~ button 4px 8px
~ card 6px 12px
spacing identical
No differences.
↻ Swap direction · Cloudinary → Alibaba