--- 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 | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Leaf green | `#318616` | base green, avacado 500, green 700 [Measured] | | Green wash | `#f7fff9` | green 050: ADD button fill [Measured] | | Location green | `#0c831f` | grg1: Detect my location [Measured] | | Yellow | `#f8cb46` | base yellow, corn 700: app banners [Measured] | | Ink | `#1f1f1f`, `#000000` | base black, black [Measured] | | Grays | `#666666`, `#828282`, `#999999`, `#cccccc`, `#e8e8e8`, `#f8f8f8` | grc2 to grc4, grey 600, 200, 100 [Measured] | | App base | `#f5f8fa` | base appbase [Measured] | | Tile washes | `#e5f3f3`, `#f4f6fc` | teal 100, a blue wash [Measured] | | Red and blue | `#e03546`, `#256fef` | red 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] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Page title | 24 on 32 | not shown | 600 [Measured] | | Delivery promise | 18 on 20.7 | same | 800 [Measured] | | Section title | 18 on 18 to 20.7 | same | 700 [Measured] | | Body and inputs | 14 on 20 | same | 400 [Measured] | | ADD label | 13 on 14.95 | same | 600 [Measured] | | Tile labels and descriptions | 12 on 13.8 to 18 | same | 400 [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.