--- version: alpha name: Instacart-design-analysis description: "A grocery delivery storefront drawn from its own token set: kale green (#108910) for every action, a deep green hero band, cool grays from 00 to 99, Instacart Sans, rounded 40 high pill-like buttons and 8px store cards." status: Draft appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#108910" primary-dark: "#0d720d" primary-extra-dark: "#0a610a" primary-light: "#e9fbe9" on-primary: "#ffffff" secondary: "#003d29" secondary-light: "#edf7f4" tertiary-light: "#f7f5f0" mint: "#b1e5d5" plus: "#750046" max-yellow: "#ffdc23" ink: "#242529" ink-body: "#343538" ink-muted: "#72767e" gray-40: "#8f939b" gray-30: "#c7c8cd" gray-20: "#e8e9eb" gray-10: "#f6f7f8" canvas: "#ffffff" alert: "#ffa500" danger: "#de3534" danger-light: "#fef0f0" typography: # Font note: "Instacart Sans" is a private font and is not available in open fonts. Closest open alternative: "Sora". display: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 32px fontWeight: 700 headline: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 26px fontWeight: 600 lineHeight: 33px title: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 25px subtitle: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 17px fontWeight: 600 lineHeight: 20px body: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px label: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 20px caption: fontFamily: "'Instacart Sans', Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px rounded: xs: 4px sm: 8px md: 12px lg: 20px xl: 28px pill: 999px spacing: xs: 4px sm: 8px md: 12px base: 16px lg: 24px xl: 32px xxl: 48px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.lg}" height: 40px padding: 0 16px button-primary-large: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.xl}" height: 56px padding: 0 16px button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" height: 40px padding: 0 16px button-tonal: backgroundColor: "{colors.gray-20}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" height: 40px padding: 0 16px filter-chip-selected: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label}" rounded: "{rounded.pill}" height: 32px padding: 0 16px filter-chip: backgroundColor: "{colors.gray-20}" textColor: "{colors.ink}" typography: "{typography.label}" rounded: "{rounded.pill}" height: 32px padding: 0 16px hero-band: backgroundColor: "{colors.secondary}" textColor: "{colors.canvas}" typography: "{typography.headline}" padding: 48px --- ## Overview Instacart delivers groceries from local stores. Its public storefront is drawn from the Instacart design system, whose tokens ship with the live site: one kale green for every action, a deep green hero band, a cool gray scale from 00 to 99 and Instacart Sans for all text. [Measured] What defines the look: 1. **Kale green for actions.** `#108910` fills Sign up, Continue and the main calls to action, with darker steps `#0d720d` and `#0a610a` in the token set. The same green is the success color. [Measured] 2. **A deep green band.** The hero sits on `#003d29` with white text, and a mint band `#b1e5d5` sells the app. [Measured] 3. **Cool grays by number.** Grays run from `#ffffff` (00) through `#f6f7f8`, `#e8e9eb`, `#c7c8cd`, `#8f939b`, `#72767e`, `#56595e`, `#343538`, `#242529`, `#191a1c` to `#0b0c0d` (99). [Measured] 4. **Rounded buttons, round chips.** Buttons are 40 high with a 20px corner, or 56 high with 28, so they read as pills. Filter chips are full pills, 32 high. [Measured] 5. **8px cards.** Store and product cards use an 8px corner on white. [Measured] Source for this file: the home page, the categories page and the log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the design tokens the live site declares on its root element (brand, gray, feedback, space and radius scales). The design system's documentation is not public. Store and cart pages that need an address were not measured. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Primary green | `#108910`, dark `#0d720d`, extra dark `#0a610a` | brand primary regular, dark, extra dark [Measured] | | Primary wash | `#e9fbe9`, `#f6fdf6` | brand primary light, extra light [Measured] | | Deep green | `#003d29`, darker `#003121`, `#001810` | brand secondary [Measured] | | Secondary wash | `#edf7f4` | brand secondary light [Measured] | | Cream | `#f7f5f0`, `#faf1e5`, `#efe9e1` | brand tertiary [Measured] | | Plus magenta | `#750046`, light `#b00074`, wash `#ffd7e8` | brand plus, for the membership tier [Measured] | | Yellow | `#ffdc23` | brand max light [Measured] | | Text | `#242529`, `#343538` | grayscale 80 and 70 [Measured] | | Muted text | `#72767e` | grayscale 50 [Measured] | | Borders | `#c7c8cd`, and black at 12 percent | grayscale 30, border opacity [Measured] | | Fills | `#e8e9eb`, `#f6f7f8` | grayscale 20 and 10 [Measured] | | Alert | `#ffa500`, `#ffbe1d` | feedback alert [Measured] | | Error | `#de3534`, dark `#bb1c1b`, wash `#fef0f0` | feedback detrimental [Measured] | The token set also defines opacity steps of 0.08, 0.12, 0.16 and 0.24 for washes, borders and scrims. The scrim behind the mobile menu is `#343538` at 24 percent. [Measured] ### Typography Instacart Sans is the only text face, loaded as a variable font from 400 to 800. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Page title | 32 | 18 on 22 | 700 and 600 [Measured] | | Hero headline | 26 on 33 | 24 on 28 | 600 [Measured] | | Section title | 20 on 25 | 18 on 22 | 600 [Measured] | | Card title | 17 on 20 | 14 on 20 | 600 [Measured] | | Body | 16 on 24 | 16 | 400 [Measured] | | Label and chip | 14 on 20 | 12 on 18 | 600 [Measured] | | Caption | 12 on 18 | same | 400 [Measured] | ### Shape and spacing The token radius scale is 0, 4, 8, 12 and 24. In use, cards take 8, panels 12 and 16, buttons 20 (40 high) or 28 (56 high), and chips 999. [Measured] The space scale is 4, 8, 12, 16, 24, 32, 40 and 48, and button side padding is 16. [Measured] ### Iconography and motion The token set defines three easing curves: smooth `cubic-bezier(0, 0, 0, 1)`, elevated `cubic-bezier(0, 1.25, 0.6, 1)` and bounce `cubic-bezier(0, 1.7, 0.4, 0.9)`. [Measured] Icons were not measured. [Inferred] ### Themes Light only on the web. The dark color scheme pass changed only a seasonal promotion. [Measured] ## Platform: iOS How the Instacart iOS app looks and behaves was not captured. The design system's tokens ship on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for home, browsing, orders and the account is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A green add or checkout button. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The app is expected to share the green, the gray scale and Instacart Sans with the web. [Inferred] ## Platform: Android How the Instacart Android app looks and behaves was not captured. The design system's tokens ship on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for home, browsing, orders and the account is expected. [Inferred] ### Main action Expected on Android: Floating action button. A green add or checkout button. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The app is expected to share the green, the gray scale and Instacart Sans with the web. [Inferred] ## Platform: Web The home page, categories page and log in page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. Desktop: a white header with the logo, a 56 high rounded search field, and Log in and Sign up buttons. A cream `#f7f5f0` bar of popular searches sits under the hero. Mobile: the header becomes a "Get the app" pill and a Log in link over the deep green hero, and search moves into a 40 high field. [Measured] ### Main action Expected on Web: Page-level button. A green `#108910` button with white text, 40 high with a 20px corner in the header and 56 high with 28 on forms ("Continue", "Sign up to get $0 delivery fee"). [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. The mobile menu opens over a `#343538` scrim at 24 percent. [Measured] Toasts and modals were not measured. [Inferred] ### Controls Expected on Web: Native or custom. Search is a 56 high field with a 28px corner and a 1px `#c7c8cd` border. Log in fields are 48 high with an 8px corner. Store filter chips are 32 high pills: the selected one `#242529` with white text, the rest `#e8e9eb`. Sign-in options (Google, Facebook, Phone) are `#e8e9eb` tonal buttons, 40 high. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down at the mobile width. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons are 40 and 56 high, fields 48 and 56, chips 32. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. The log in page offers Google, Facebook and phone next to email, as equal tonal buttons. [Measured] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. A conventional responsive storefront: the header simplifies on mobile, type steps down, and the green, grays and rounded shapes stay the same. [Measured] ## Cross-platform consistency Consistent across platforms: the green action color, the gray scale and Instacart Sans. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Use kale green for the one main action, and the deep green for big brand bands. - Name grays by step (10, 20, 30 and on) and keep them cool. - Round buttons to half their height and chips fully. - Keep cards at 8px on white. ### Don't - Don't use the Plus magenta outside the membership tier. - Don't mix warm grays into the cool scale. Cream is a brand tint, not a gray. - Don't use square buttons. ## Known Gaps - Store pages, product detail, the cart and checkout need an address or an account and were not measured. - The iOS and Android apps were not captured. The token set ships on the web, but its documentation is not public, so the mobile topics stay inferred. - Icons and toasts were not measured. - Instacart Sans is private. Sora was chosen by comparing the same headline side by side: it matches the wide, open letter shapes and runs about 2 percent narrower. Be Vietnam Pro was the second choice. - Account deletion and store policy rules were not verified.