Diff

Graphite vs DoorDash

80 token-level differences between these two design systems.

Role tokens
Background
#070707 #ffffff
Text
#fafafa #191919
Brand
#3b82f6 #ff3008
Border
#1f1f1f #e8e8e8
Display font
matterFont DoorDash Sans Display
Body size
16px 16px
colors 71 changed
~ bg #070707 #ffffff
~ surface #0f0f0f #ffffff
~ surface-strong #171717 #e8e8e8
~ text #fafafa #191919
~ text-strong #ffffff #0d0d0d
~ text-disabled #525252 #a8a8a8
~ brand #3b82f6 #ff3008
~ brand-hover #60a5fa #e02c08
~ link #60a5fa #ff3008
~ link-hover #93c5fd #bf2306
~ border #1f1f1f #e8e8e8
~ border-strong #2e2e2e #cdcdcd
~ success #22c55e #00854c
~ warning #f59e0b #a35316
~ danger #ef4444 #cc1212
~ info #3b82f6 #0a47bf
+ bg-page #fafafa
+ surface-soft #f5f5f5
+ surface-warm #fff7f5
+ surface-cream #faf5e8
+ brand-active #bf2306
+ brand-pale #ffd2c8
+ brand-deep #8a1d05
+ brand-light #fff0ec
+ text-muted #5d5d5d
+ text-soft #767676
+ text-on-brand #ffffff
+ border-soft #f0f0f0
+ border-input #919191
+ border-card #ebebeb
+ 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-card rgba(0,0,0,0.08)
+ 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
bg-level-1 #0f0f0f
bg-level-2 #171717
bg-level-3 #1f1f1f
bg-overlay rgba(7,7,7,0.72)
surface-tinted-brand rgba(59,130,246,0.08)
text-secondary #d4d4d4
text-tertiary #a3a3a3
text-quaternary #737373
brand-press #2f6fed
brand-soft rgba(59,130,246,0.16)
accent #60a5fa
border-subtle rgba(255,255,255,0.06)
border-brand #3b82f6
cta-fill #262626
cta-fill-hover #2e2e2e
cta-fill-press #1f1f1f
cta-text #fafafa
success-bg rgba(34,197,94,0.12)
warning-bg rgba(245,158,11,0.12)
danger-bg rgba(239,68,68,0.12)
info-bg rgba(59,130,246,0.12)
on-brand #ffffff
typography 5 changed
~ display {"family":"matterFont","size":72} {"family":"DoorDash Sans Display","size":72}
~ h1 {"family":"matterFont","size":60} {"family":"DoorDash Sans Display","size":40}
~ h2 {"family":"matterFont","size":40} {"family":"DoorDash Sans Display","size":32}
~ body {"family":"matterFont","size":16} {"family":"DoorDash Sans","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Monaco","size":11}
radius identical
No differences.
spacing 4 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ xl 64px 48px
↻ Swap direction · DoorDash → Graphite