Diff

Instacart vs Craft

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fcf9f7
Text
#000000 #030302
Brand
#0aad0a #030302
Border
#e0e0e0 rgba(3, 3, 2, 0.09)
Display font
Instacart Sans Untitled Serif
Body size
16px 16px
colors 47 changed
~ bg #ffffff #fcf9f7
~ surface #f6f6f6 #ffffff
~ text #000000 #030302
~ text-strong #000000 #030302
~ text-body #1a1a1a #3a3835
~ text-muted #666666 #8a8782
~ brand #0aad0a #030302
~ brand-hover #089408 #1c1b19
~ border #e0e0e0 rgba(3, 3, 2, 0.09)
~ border-soft #ededed rgba(3, 3, 2, 0.05)
~ border-strong #999999 rgba(3, 3, 2, 0.16)
~ success #0aad0a #2f7d4f
~ warning #ff7a00 #9a6212
~ danger #e6483d #c0382e
~ info #3b82f6 #2563eb
+ bg-soft #f7f2ee
+ surface-elev #fbf7f4
+ text-secondary #5c5a57
+ accent-blue #2563eb
+ accent-blue-hover #1d4ed8
+ accent-blue-soft #e8effe
+ accent-blue-deep #1e40af
+ shadow-card rgba(36, 30, 24, 0.05)
+ shadow-elev rgba(36, 30, 24, 0.10)
+ scrim rgba(18, 16, 14, 0.45)
+ success-soft #e8f3ec
+ warning-soft #fbf0dc
+ danger-soft #f9e6e3
+ info-soft #e8effe
bg-elevated #fafafa
bg-promo #003d2a
bg-cream #f7f4ee
surface-hover #ededed
surface-strong #e4e4e4
surface-on-promo #005a3e
text-faint #999999
text-on-dark #ffffff
brand-active #067a06
brand-soft #e3f5e3
brand-deep #003d2a
accent-orange #ff7a00
accent-yellow #ffce5e
accent-red #e6483d
link #0aad0a
link-hover #067a06
ring #0aad0a
rating-gold #fcb53b
typography 5 changed
~ display {"family":"Instacart Sans","size":72} {"family":"Untitled Serif","size":80}
~ h1 {"family":"Instacart Sans","size":40} {"family":"Untitled Serif","size":66}
~ h2 {"family":"Instacart Sans","size":32} {"family":"Untitled Serif","size":54}
~ body {"family":"Instacart Sans","size":16} {"family":"Untitled Sans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"SFMono-Regular","size":12}
radius identical
No differences.
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Craft → Instacart