Diff

Instacart vs Bluesky

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0c0c0c
Brand
#0aad0a #0085ff
Border
#e0e0e0 #dde1e7
Display font
Instacart Sans Inter
Body size
16px 15px
colors 55 changed
~ bg-promo #003d2a #e8f4ff
~ surface #f6f6f6 #ffffff
~ surface-hover #ededed #f1f3f5
~ surface-strong #e4e4e4 #e8eaee
~ text #000000 #0c0c0c
~ text-muted #666666 #5e6772
~ brand #0aad0a #0085ff
~ brand-hover #089408 #006cd9
~ brand-active #067a06 #0057b3
~ brand-soft #e3f5e3 #e8f4ff
~ brand-deep #003d2a #0057b3
~ accent-orange #ff7a00 #f9a13e
~ accent-yellow #ffce5e #f5c518
~ accent-red #e6483d #e84545
~ border #e0e0e0 #dde1e7
~ border-soft #ededed #eef0f3
~ border-strong #999999 #bcc1c9
~ success #0aad0a #2bb673
~ warning #ff7a00 #f9a13e
~ danger #e6483d #e84545
~ info #3b82f6 #0085ff
+ bg-warm #f8f9fa
+ bg-muted #f1f3f5
+ surface-elevated #ffffff
+ surface-soft #eef7ff
+ text-soft #7a838e
+ text-disabled #a8aebd
+ text-on-brand #ffffff
+ text-link #0085ff
+ text-link-hover #006cd9
+ accent-pink #fb44a3
+ accent-purple #9a75e9
+ accent-green #2bb673
+ border-focus #0085ff
+ reply-line #dde1e7
+ reaction-like #fb44a3
+ reaction-repost #9a75e9
+ reaction-reply #5e6772
+ shadow-card rgba(0,0,0,0.06)
+ shadow-modal rgba(0,0,0,0.20)
+ shadow-popover rgba(0,0,0,0.12)
+ success-soft #e0f6ec
+ warning-soft #fff3e0
+ danger-soft #fdebeb
+ info-soft #e8f4ff
bg-elevated #fafafa
bg-cream #f7f4ee
surface-on-promo #005a3e
text-body #1a1a1a
text-faint #999999
text-on-dark #ffffff
link #0aad0a
link-hover #067a06
ring #0aad0a
rating-gold #fcb53b
typography 5 changed
~ display {"family":"Instacart Sans","size":72} {"family":"Inter","size":56}
~ h1 {"family":"Instacart Sans","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Instacart Sans","size":32} {"family":"Inter","size":32}
~ body {"family":"Instacart Sans","size":16} {"family":"Inter","size":15}
~ label {"family":"JetBrains Mono","size":11} {"family":"Roboto Mono","size":11}
radius 2 changed
~ button 12px 6px
~ card 16px 8px
spacing identical
No differences.
↻ Swap direction · Bluesky → Instacart