--- version: alpha name: Flipkart-design-analysis description: "An e-commerce marketplace in Flipkart blue (#2874f0) with a spark of yellow (#ffe51f), set in Inter on white and cool gray, with green rating chips and discounts (#388e3c), purple deal labels, small 2 to 4px corners on listings and rounder 16px cards on the new home page." status: Draft appVersion: "measured in a browser, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#2874f0" on-primary: "#ffffff" yellow: "#ffe51f" link: "#2874f0" ink: "#212121" ink-black: "#000000" ink-body: "#333333" ink-muted: "#878787" canvas: "#ffffff" page: "#f1f3f6" page-alt: "#f0f2f5" border: "#e0e0e0" border-mid: "#c2c2c2" rating: "#388e3c" offer-green: "#26a541" deal-purple: "#5209db" deal-wash: "#f4f2ff" footer: "#172337" disabled: "#c2c2c2" star: "#fbbc05" typography: page-title: fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 20px body: fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 19.6px input: fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px label: fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 21px small: fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16.8px tab: fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 16px rounded: xs: 2px sm: 3px md: 4px lg: 8px xl: 16px pill: 40px spacing: xs: 4px sm: 8px md: 12px base: 16px lg: 40px components: login-button: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.page-title}" rounded: "{rounded.xs}" height: 31px padding: 5px 40px button-disabled: backgroundColor: "{colors.disabled}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.xs}" height: 40px padding: 10px rating-chip: backgroundColor: "{colors.rating}" textColor: "{colors.on-primary}" typography: "{typography.small}" rounded: "{rounded.sm}" height: 19px search-field: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-black}" typography: "{typography.input}" rounded: "{rounded.xs}" height: 36px padding: 0 16px deal-label: backgroundColor: "{colors.deal-wash}" textColor: "{colors.deal-purple}" typography: "{typography.small}" login-panel: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.page-title}" footer: backgroundColor: "{colors.footer}" textColor: "{colors.on-primary}" typography: "{typography.small}" --- ## Overview Flipkart is one of India's largest online marketplaces, for phones, electronics, fashion, groceries and more. Its site runs on Flipkart blue with a touch of yellow, Inter for all text, white product cards on a cool gray page, and small, functional color for ratings, discounts and deal labels. The redesigned home page uses rounder 16px cards, while search listings keep the older small 2 to 4px corners. [Observed] What defines the look: 1. **Flipkart blue.** `#2874f0` is the declared header and link color, fills the log in panel and active tab underlines, and sets the Login button text. [Measured] 2. **A spark of yellow.** `#ffe51f` appears in small brand marks next to the blue. [Measured] 3. **Functional green and purple.** Ratings sit in 19 high green `#388e3c` chips with white text, discounts are green text, and deal labels ("Top Discount of the Sale") are purple `#5209db`. [Measured] 4. **Two corner sizes.** Listings use 2 to 4px corners, while the new home page uses 16 for cards and 8 for tiles. [Measured] 5. **Inter everywhere.** Served under file names such as inter_regular and inter_bold, at 400 to 800. [Measured] Source for this file: the home page, a search for headphones 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 handful of color variables the site declares on its root element. Flipkart does not publish its design system. The cart and checkout sit behind an account. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Flipkart blue | `#2874f0` | Header and link variables, log in panel, active tabs, Login text [Measured] | | Yellow | `#ffe51f` | Brand marks [Measured] | | Text | `#212121`, `#000000`, `#333333` | Titles, prices, links [Measured] | | Muted text | `#878787` | Reviewer names, secondary lines [Measured] | | Canvas | `#ffffff` | Cards [Measured] | | Page | `#f1f3f6`, `#f0f2f5` | Page background [Measured] | | Borders | `#e0e0e0`, `#c2c2c2`, `#dbdbdb` | Cards and fields [Measured] | | Rating green | `#388e3c` | Rating chips and discounts [Measured] | | Offer green | `#26a541` | Offer lines [Measured] | | Deal purple | `#5209db`, wash `#f4f2ff` | Deal labels [Measured] | | Star yellow | `#fbbc05` | Full rating stars (variable) [Measured] | | Footer | `#172337` | Footer [Measured] | ### Typography Inter at 400, 500, 600, 700 and 800. Some mobile listing text falls back to Roboto. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Login button and page title | 16 on 20, 0.1px | 16 | 500 [Measured] | | Customer comment title | 14 on 19.6 | not measured | 500 [Measured] | | Field text | 14 to 16 on 20 to 21 | same | 400 [Measured] | | Button | 13 on 21 | same | 500 [Measured] | | Small and labels | 12 on 16.8 to 18 | same | 400 to 500 [Measured] | | Home tab | 14 on 16 | 11 on 14 | bold cut [Measured] | ### Shape and spacing Listings and forms use 2, 3 and 4px corners. The home page uses 16 for cards, 8 and 12 for tiles and 40 for the round search button. [Measured] The Login button carries 5 by 40 padding. [Measured] ### Iconography and motion A spinner in `#03a9f4` and rating colors are declared as variables. [Measured] Icons and motion were not measured. [Inferred] ### Themes Light only. The dark color scheme pass changed only images. [Measured] ## Platform: iOS How the Flipkart iOS app looks and behaves was not captured. Flipkart does not publish a design system, so every item below is inferred from the web design and platform conventions. 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, the account and the cart is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. Add to cart and buy now buttons on a product screen. [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 blue, the green rating chips and Inter-like type with the web. [Inferred] ## Platform: Android How the Flipkart Android app looks and behaves was not captured. Flipkart does not publish a design system, so every item below is inferred from the web design and platform conventions. 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, the account and the cart is expected. [Inferred] ### Main action Expected on Android: Floating action button. Add to cart and buy now buttons on a product screen. [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 blue, the green rating chips and Inter-like type with the web. [Inferred] ## Platform: Web The home page, a search listing and the 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. Home page: a white header with the location chooser, a round search and Login, and category tabs with a 3px blue underline on the active one. Listings: a header with a 36 high search field with a 2px corner and a white Login button with blue text and a `#dbdbdb` border. [Measured] ### Main action Expected on Web: Page-level button. On listings, the product card. On log in, a Continue button that stays gray `#c2c2c2` until a number is entered, 40 high with a 2px corner. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. On first visit the home page opens a log in dialog over black at 60 percent. [Measured] ### Controls Expected on Web: Native or custom. The log in field is a 56 high underlined input with a +91 country prefix. Rating chips are 19 high with a 3px corner. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values, mostly 12 to 16. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons are 31 to 48 high, fields 36 to 56, and rating chips 19. [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. Log in uses a phone number or email with a one-time code. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. The site is mid-redesign: the home page has rounder cards and a white header, while listings keep small corners and the older header. [Measured] ## Cross-platform consistency Consistent across platforms: Flipkart blue and yellow, green ratings and Inter. [Measured for web, Inferred for the apps] Intentionally different: on the web the redesigned home page and older listings use different corner sizes. [Measured] ## Do's and Don'ts ### Do - Use Flipkart blue for links, active states and brand panels. - Show ratings as small green chips and discounts as green text. - Set everything in Inter at 12 to 16 on listings. - Keep listing corners small (2 to 4px). ### Don't - Don't use yellow for text or large areas. - Don't use green for anything but ratings, discounts and offers. - Don't mix rounded 16px cards into listing pages. ## Known Gaps - Product detail, the cart and checkout were not measured. The cart and orders need an account. - The iOS and Android apps were not captured, and Flipkart publishes no design system, so every mobile topic is inferred. - The orange buy button known from product pages was not seen on the pages measured, so it is not described. - Icons and motion were not measured. - Contrast below 4.5 to 1 on shipped pairs: blue on white for the Login button and white on blue for the log in panel (4.33 to 1), white on the green rating chip (4.12 to 1) and the disabled Continue button (1.78 to 1, normal for a disabled state). The values were kept. - Account deletion and store policy rules were not verified.