Food Delivery / iOS / Android / Web

Blinkit

Blinkit packs a supermarket into small soft tiles, with yellow for the brand and one leaf green that means add it now.

Download
  • #F8CB46
  • #318616
  • #F7FFF9
  • #1F1F1F
  • #E5F3F3
  • #F5F8FA

Color

Every color token in the file, grouped by role.

Brand

  • primary#318616
  • on primary#FFFFFF
  • primary wash#F7FFF9

Surfaces

  • canvas#FFFFFF

Text

  • ink#1F1F1F
  • ink strong#000000
  • ink body#666666
  • ink muted#828282
  • ink faint#999999

Lines

  • border#CCCCCC

More

  • yellow#F8CB46
  • location green#0C831F
  • appbase#F5F8FA
  • tile blue#F4F6FC
  • tile teal#E5F3F3
  • grey 100#F8F8F8
  • grey 200#E8E8E8
  • red#E03546
  • blue#256FEF

Typography

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

  • OkraOkra is private and not available in open fonts. Shown in Be Vietnam Pro, the closest open match.
  • headline24px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • title18px / 800 / 20.7px

    The quick brown fox jumps over the lazy dog

  • subtitle18px / 700 / 20.7px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • button13px / 600 / 14.95px

    Continue to checkout

  • small12px / 400 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md10px
  • base12px
  • lg16px

Components

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

  • add button
    add-button
  • location button
    location-button
  • search bar
    search-bar
  • category tile
    category-tile
  • input
    input
  • app banner
    app-banner
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 115 lines
version: alpha
name: Blinkit-design-analysis
description: "A quick-commerce grocery app in Blinkit yellow (#f8cb46) and leaf green (#318616), with Okra at regular to extra bold, dense 12px product tiles on white and pale gray, green outlined ADD buttons and a full named palette shipped with the site."
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: "#318616"
  on-primary: "#ffffff"
  primary-wash: "#f7fff9"
  yellow: "#f8cb46"
  location-green: "#0c831f"
  ink: "#1f1f1f"
  ink-strong: "#000000"
  ink-body: "#666666"
  ink-muted: "#828282"
  ink-faint: "#999999"
  canvas: "#ffffff"
  appbase: "#f5f8fa"
  tile-blue: "#f4f6fc"
  tile-teal: "#e5f3f3"
  grey-100: "#f8f8f8"
  grey-200: "#e8e8e8"
  border: "#cccccc"
  red: "#e03546"
  blue: "#256fef"

typography:
  # Font note: "Okra" is a private font and is not available in open fonts. Closest open alternative: "Be Vietnam Pro".
  headline:
    fontFamily: "Okra, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
  title:
    fontFamily: "Okra, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 800
    lineHeight: 20.7px
  subtitle:
    fontFamily: "Okra, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 20.7px
  body:
    fontFamily: "Okra, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  button:
    fontFamily: "Okra, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 14.95px
  small:
    fontFamily: "Okra, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  base: 12px
  lg: 16px

components:
  add-button:
    backgroundColor: "{colors.primary-wash}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 32px
  location-button:
    backgroundColor: "{colors.location-green}"
    textColor: "{colors.on-primary}"
    typography: "{typography.small}"
    rounded: "{rounded.xs}"
    height: 36px
  search-bar:
    backgroundColor: "{colors.grey-100}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.small}"
    rounded: "{rounded.lg}"
    height: 48px
    padding: 0 12px
  category-tile:
    backgroundColor: "{colors.tile-teal}"
    textColor: "{colors.ink-body}"
    typography: "{typography.small}"
    rounded: "{rounded.lg}"
    height: 90px
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    height: 41px
    padding: 10px
  app-banner:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.title}"
    rounded: "{rounded.xl}"

Overview

Blinkit delivers groceries and household goods in minutes across Indian cities. Its site is a dense white and pale gray grid of small product and category tiles, set in Okra, with the brand's yellow for app banners and a leaf green for adding to the cart. A full named palette ships with the live site. [Measured]

What defines the look:

  1. Yellow and leaf green. The base palette names yellow #f8cb46 and green #318616. Yellow fills app banners, and green sets every ADD button, quantity and "see all" link. [Measured]
  2. Outlined ADD buttons. The add control is a 66 by 32 tile with a pale green fill #f7fff9, a 1px green border, a 6px corner and green 13px semibold text. [Measured]
  3. Small, dense type. Okra at 12 to 14 for most text, with 18px extra bold section titles. [Measured]
  4. 12px tiles in soft tints. Category tiles are 88 by 90 at a 12px corner on teal #e5f3f3 and blue #f4f6fc washes. [Measured]
  5. Gray text by number. Grays come from a numbered scale: #666666, #828282, #999999 and #cccccc for borders. [Measured]

Source for this file: the home page (which asks for a location first), the categories page and the milk listing page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the named palette the live site declares on its root element. Blinkit's design system documentation is not public. The cart and checkout need an address and an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Leaf green#318616base green, avacado 500, green 700 [Measured]
Green wash#f7fff9green 050: ADD button fill [Measured]
Location green#0c831fgrg1: Detect my location [Measured]
Yellow#f8cb46base yellow, corn 700: app banners [Measured]
Ink#1f1f1f, #000000base black, black [Measured]
Grays#666666, #828282, #999999, #cccccc, #e8e8e8, #f8f8f8grc2 to grc4, grey 600, 200, 100 [Measured]
App base#f5f8fabase appbase [Measured]
Tile washes#e5f3f3, #f4f6fcteal 100, a blue wash [Measured]
Red and blue#e03546, #256fefred 600, blue 500 [Measured]

The palette also names full 050 to 900 ramps for avocado, blue, corn, green, grey, red, indigo, teal, brown, cider, orange and purple. [Measured]

Typography

Okra at 400, 500, 600, 700 and 800. [Measured]

RoleDesktopMobileWeight
Page title24 on 32not shown600 [Measured]
Delivery promise18 on 20.7same800 [Measured]
Section title18 on 18 to 20.7same700 [Measured]
Body and inputs14 on 20same400 [Measured]
ADD label13 on 14.95same600 [Measured]
Tile labels and descriptions12 on 13.8 to 18same400 [Measured]

Shape and spacing

Tiles and the search bar use 12, product cards 8, ADD buttons 6, small buttons 4, and the app banner 16. [Measured] The search bar is 48 high with 12px side padding. [Measured] The site declares breakpoints at 1020 and 1260 and a 68 high mobile header. [Measured]

Iconography and motion

Icons come from icon fonts. [Measured] Motion was not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Blinkit iOS app looks and behaves was not captured. The palette ships 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, categories, reorder and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Green ADD buttons on every product and a green cart bar at the bottom. [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 yellow, the leaf green and the dense tiles with the web. [Inferred]

Platform: Android

How the Blinkit Android app looks and behaves was not captured. The palette ships 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, categories, reorder and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Green ADD buttons on every product and a green cart bar at the bottom. [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 yellow, the leaf green and the dense tiles with the web. [Inferred]

Platform: Web

The home page, the categories page and a product listing, 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.

A white header with the delivery promise ("Delivery in 20 minutes") and the address, a 48 high gray search bar with a 12px corner, and login and cart. The mobile header is 68 high. [Measured]

Main action

Expected on Web: Page-level button.

The green outlined ADD button on each product, 66 by 32 with a 6px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

On first visit a location dialog opens over a dark scrim, with a green "Detect my location" button (36 high, 4px corner) and an address field (41 high, 12px corner, #cccccc border). On mobile an app download sheet opens with a yellow top banner and a 16px corner. [Measured]

Controls

Expected on Web: Native or custom.

Listing pages have a left rail of subcategory tiles (65 to 90 high) and a product grid with 8px cards. [Measured]

Text sizing

Expected on Web: Browser zoom.

Most text is fixed at 12 to 14 at both widths. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

ADD buttons are 32 high and the location button 36, below 44. The search bar is 48. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Icon fonts for interface glyphs. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not checked on the pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A dense, app-like grid on the web, with an app download sheet pushed on mobile. [Measured]

Cross-platform consistency

Consistent across platforms: the yellow and leaf green, Okra and dense tiles. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use leaf green for adding and quantities, and yellow for brand banners.
  • Make the add control an outlined green tile with a pale green fill.
  • Keep tiles small, soft-tinted and rounded to 12.
  • Pick grays and tints from the numbered palette.

Don't

  • Don't fill ADD buttons solid green.
  • Don't use yellow for text.
  • Don't set long text larger than 14 in listings.

Known Gaps

  • The cart, checkout, the account and the delivery tracker need an address and an account and were not measured.
  • The iOS and Android apps were not captured. The palette ships on the web, but its documentation is not public, so every mobile topic is inferred.
  • Motion was not measured.
  • ADD buttons (32) and the location button (36) are below the 44 and 48 touch minimums. That is the shipped size.
  • Okra is private. Be Vietnam Pro was chosen by comparing the same 18px extra bold line side by side: within 1 percent of the width with similar round forms. Geist was a close second.
  • The search bar placeholder (#828282 on #f8f8f8) measures 3.62 to 1, below 4.5 to 1. That is the shipped pairing and was kept.
  • Account deletion and store policy rules were not verified.