Diff

Instacart vs LlamaIndex

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0e1116
Brand
#0aad0a #1b9aff
Border
#e0e0e0 #d0d7de
Display font
Instacart Sans Inter
Body size
16px 16px
colors 52 changed
~ surface #f6f6f6 #ffffff
~ text #000000 #0e1116
~ text-strong #000000 #1c2128
~ text-body #1a1a1a #3d4148
~ text-muted #666666 #656d76
~ text-faint #999999 #8b949e
~ brand #0aad0a #1b9aff
~ brand-hover #089408 #0c87e6
~ brand-active #067a06 #0066c2
~ brand-soft #e3f5e3 #eaf5ff
~ brand-deep #003d2a #0a4d80
~ border #e0e0e0 #d0d7de
~ border-soft #ededed #eaeef2
~ border-strong #999999 #afb8c1
~ link #0aad0a #1b9aff
~ link-hover #067a06 #0c87e6
~ success #0aad0a #1f883d
~ warning #ff7a00 #bf8700
~ danger #e6483d #cf222e
~ info #3b82f6 #1b9aff
+ bg-soft #fafbfc
+ bg-deep #0e1116
+ surface-soft #f6f8fa
+ surface-elevated #ffffff
+ surface-blue #eaf5ff
+ surface-dark #0e1116
+ text-on-dark-muted #c9d1d9
+ on-light #0e1116
+ link-visited #5b6cdb
+ border-blue #1b9aff
+ shadow-color rgba(31, 35, 40, 0.04)
+ shadow-color-md rgba(31, 35, 40, 0.08)
+ shadow-color-lg rgba(31, 35, 40, 0.12)
+ accent-llama #f59e0b
+ accent-emerald #1f883d
+ accent-rose #cf222e
+ accent-violet #8250df
+ code-keyword #cf222e
+ code-string #0a3069
+ code-comment #6e7781
+ code-symbol #953800
bg-elevated #fafafa
bg-promo #003d2a
bg-cream #f7f4ee
surface-hover #ededed
surface-strong #e4e4e4
surface-on-promo #005a3e
accent-orange #ff7a00
accent-yellow #ffce5e
accent-red #e6483d
ring #0aad0a
rating-gold #fcb53b
typography 4 changed
~ display {"family":"Instacart Sans","size":72} {"family":"Inter","size":72}
~ 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":16}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing 2 changed
~ lg 32px 48px
~ xl 48px 96px
↻ Swap direction · LlamaIndex → Instacart