Shopping / iOS / Android / Web

Flipkart

Flipkart is a dense, practical shelf: blue for the brand and links, small green chips for trust, and plain Inter at 12 to 16 for everything else.

Download
  • #2874F0
  • #FFE51F
  • #212121
  • #388E3C
  • #5209DB
  • #F1F3F6

Color

Every color token in the file, grouped by role.

Brand

  • primary#2874F0
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • link#2874F0
  • ink#212121
  • ink black#000000
  • ink body#333333
  • ink muted#878787
  • disabled#C2C2C2

Lines

  • border#E0E0E0
  • border mid#C2C2C2

More

  • yellow#FFE51F
  • page#F1F3F6
  • page alt#F0F2F5
  • rating#388E3C
  • offer green#26A541
  • deal purple#5209DB
  • deal wash#F4F2FF
  • footer#172337
  • star#FBBC05

Typography

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

  • InterOpen font, shown as published.
  • page title16px / 500 / 20px

    The quick brown fox jumps over the lazy dog

  • body14px / 500 / 19.6px

    The quick brown fox jumps over the lazy dog

  • input14px / 400 / 21px

    The quick brown fox jumps over the lazy dog

  • label13px / 500 / 21px

    Continue to checkout

  • small12px / 500 / 16.8px

    The quick brown fox jumps over the lazy dog

  • tab14px / 700 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • sm3px
  • md4px
  • lg8px
  • xl16px
  • pill40px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg40px

Components

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

  • login button
    login-button
  • button disabled
    button-disabled
  • rating chip
    rating-chip
  • search field
    search-field
  • deal label
    deal-label
  • login panel
    login-panel
  • footer
    footer
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 118 lines
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

RoleValueWhere
Flipkart blue#2874f0Header and link variables, log in panel, active tabs, Login text [Measured]
Yellow#ffe51fBrand marks [Measured]
Text#212121, #000000, #333333Titles, prices, links [Measured]
Muted text#878787Reviewer names, secondary lines [Measured]
Canvas#ffffffCards [Measured]
Page#f1f3f6, #f0f2f5Page background [Measured]
Borders#e0e0e0, #c2c2c2, #dbdbdbCards and fields [Measured]
Rating green#388e3cRating chips and discounts [Measured]
Offer green#26a541Offer lines [Measured]
Deal purple#5209db, wash #f4f2ffDeal labels [Measured]
Star yellow#fbbc05Full rating stars (variable) [Measured]
Footer#172337Footer [Measured]

Typography

Inter at 400, 500, 600, 700 and 800. Some mobile listing text falls back to Roboto. [Measured]

RoleDesktopMobileWeight
Login button and page title16 on 20, 0.1px16500 [Measured]
Customer comment title14 on 19.6not measured500 [Measured]
Field text14 to 16 on 20 to 21same400 [Measured]
Button13 on 21same500 [Measured]
Small and labels12 on 16.8 to 18same400 to 500 [Measured]
Home tab14 on 1611 on 14bold 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.