Diff

DoorDash vs Alibaba

82 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#191919 #222222
Brand
#ff3008 #ff6a00
Border
#e8e8e8 #e5e5e5
Display font
DoorDash Sans Display PingFang SC
Body size
16px 14px
colors 75 changed
~ surface-soft #f5f5f5 #fafafa
~ brand #ff3008 #ff6a00
~ brand-hover #e02c08 #e85f00
~ brand-active #bf2306 #cc5400
~ brand-pale #ffd2c8 #ffe5cc
~ brand-deep #8a1d05 #a64200
~ brand-light #fff0ec #ff8533
~ text #191919 #222222
~ text-strong #0d0d0d #000000
~ text-muted #5d5d5d #666666
~ text-soft #767676 #999999
~ border #e8e8e8 #e5e5e5
~ border-strong #cdcdcd #cccccc
~ border-card #ebebeb #dddddd
~ success #00854c #1ca44e
~ warning #a35316 #f7ba2a
~ danger #cc1212 #d62828
~ info #0a47bf #1976d2
+ bg-soft #f5f5f5
+ bg-warm #fff8f0
+ surface-card #ffffff
+ surface-overlay rgba(0,0,0,0.6)
+ bg-dark #1d1d1d
+ text-body #222222
+ text-faint #cccccc
+ text-inverse #ffffff
+ text-link #1976d2
+ text-link-hover #1565c0
+ brand-glow rgba(255,106,0,0.15)
+ on-brand #ffffff
+ 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
+ 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
bg-page #fafafa
surface-warm #fff7f5
surface-cream #faf5e8
text-on-brand #ffffff
text-disabled #a8a8a8
link #ff3008
link-hover #bf2306
border-input #919191
star-fill #ff3008
star-empty #dcdcdc
dashpass-yellow #ffd400
dashpass-bg #191919
dashpass-text #ffffff
free-delivery-green #00854c
pickup-blue #0a47bf
bestseller-bg #fff0ec
bestseller-text #8a1d05
trending-bg #fff8e6
trending-text #7a5400
scrim rgba(0,0,0,0.5)
shadow-elev rgba(0,0,0,0.16)
shadow-deep rgba(0,0,0,0.24)
success-soft #e6f3ec
warning-soft #fff7e6
danger-soft #fdeaea
info-soft #e8efff
typography 5 changed
~ display {"family":"DoorDash Sans Display","size":72} {"family":"PingFang SC","size":72}
~ h1 {"family":"DoorDash Sans Display","size":40} {"family":"PingFang SC","size":40}
~ h2 {"family":"DoorDash Sans Display","size":32} {"family":"PingFang SC","size":32}
~ body {"family":"DoorDash Sans","size":16} {"family":"PingFang SC","size":14}
~ label {"family":"Monaco","size":11} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 6px
spacing identical
No differences.
↻ Swap direction · Alibaba → DoorDash