Instacart Design System

Instacart's home page is the rare consumer marketplace where the brand voltage barely fills any pixels. The green that the logo screams — Instacart Green ("#108910") — appears 30 times across the captured surface, but 28 of those are borders or text strokes; only 2 are background fills. That inversion is the whole design move. Where DoorDash floods red across CTAs and Uber Eats stamps a black pill on every conversion target, Instacart treats green as a structural outline color — it draws the search-bar focus ring, the in-stock pill outline, the chevron link, the chevron icon — and leaves the page's actual surface work to a six-rung grayscale ladder and the warm beige tertiary "#f7f5f0".

This DESIGN.md packages the system into one machine-readable file following the Google Labs spec. Inside: 18 color tokens grouped into brand, surface, ink, and membership roles; 11 typography tokens running on Instacart Sans at weights 400 / 600 / 700 with sizes spanning 10px micro-labels up to a 28px hero label; a radii scale of four values where the 28px capsule is reserved for the search bar and primary CTA; a 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48px spacing scale; and 32 components covering the retailer grid card, the in-stock chip, the Instacart+ membership band, the search capsule, the FAQ accordion row, and the dense footer column.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Instacart's restraint — green as a hairline color rather than a fill, retailer cards as 8px rectangles, Instacart Sans at weight 600 rather than 700 across nav and titles, and Yellow locked to Instacart+ surfaces. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted string that drops into Tailwind config or CSS variables. The system is worth studying because it proves a delivery marketplace can scale to 1,500 retailers and 85,000 stores without ever raising its voice — the green is everywhere, almost none of it shouts.