Shopping / iOS / Android / Web

Instacart

Instacart is a calm white shelf with one kale green that means go, framed by a deep green brand band and a cool gray scale named by number.

Download
  • #108910
  • #003D29
  • #242529
  • #E8E9EB
  • #F7F5F0
  • #B1E5D5

Color

Every color token in the file, grouped by role.

Brand

  • primary#108910
  • primary dark#0D720D
  • primary extra dark#0A610A
  • primary light#E9FBE9
  • on primary#FFFFFF
  • secondary#003D29
  • secondary light#EDF7F4
  • tertiary light#F7F5F0

Surfaces

  • canvas#FFFFFF

Text

  • ink#242529
  • ink body#343538
  • ink muted#72767E

Status

  • alert#FFA500
  • danger#DE3534
  • danger light#FEF0F0

More

  • mint#B1E5D5
  • plus#750046
  • max yellow#FFDC23
  • gray 40#8F939B
  • gray 30#C7C8CD
  • gray 20#E8E9EB
  • gray 10#F6F7F8

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Instacart SansInstacart Sans is private and not available in open fonts. Shown in Sora, the closest open match.
  • display32px / 700 / 1.35

    Instacart

  • headline26px / 600 / 33px

    Pack my box with five dozen liquor jugs

  • title20px / 600 / 25px

    Pack my box with five dozen liquor jugs

  • subtitle17px / 600 / 20px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • label14px / 600 / 20px

    Continue to checkout

  • caption12px / 400 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg20px
  • xl28px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px
  • xxl48px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary large
    button-primary-large
  • button secondary
    button-secondary
  • button tonal
    button-tonal
  • filter chip selected
    filter-chip-selected
  • filter chip
    filter-chip
  • hero band
    hero-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 135 lines
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

RoleValueToken name in the shipped set
Primary green#108910, dark #0d720d, extra dark #0a610abrand primary regular, dark, extra dark [Measured]
Primary wash#e9fbe9, #f6fdf6brand primary light, extra light [Measured]
Deep green#003d29, darker #003121, #001810brand secondary [Measured]
Secondary wash#edf7f4brand secondary light [Measured]
Cream#f7f5f0, #faf1e5, #efe9e1brand tertiary [Measured]
Plus magenta#750046, light #b00074, wash #ffd7e8brand plus, for the membership tier [Measured]
Yellow#ffdc23brand max light [Measured]
Text#242529, #343538grayscale 80 and 70 [Measured]
Muted text#72767egrayscale 50 [Measured]
Borders#c7c8cd, and black at 12 percentgrayscale 30, border opacity [Measured]
Fills#e8e9eb, #f6f7f8grayscale 20 and 10 [Measured]
Alert#ffa500, #ffbe1dfeedback alert [Measured]
Error#de3534, dark #bb1c1b, wash #fef0f0feedback 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]

RoleDesktopMobileWeight
Page title3218 on 22700 and 600 [Measured]
Hero headline26 on 3324 on 28600 [Measured]
Section title20 on 2518 on 22600 [Measured]
Card title17 on 2014 on 20600 [Measured]
Body16 on 2416400 [Measured]
Label and chip14 on 2012 on 18600 [Measured]
Caption12 on 18same400 [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.