Switch between the rendered Visual preview and the Raw DESIGN.md.
Flipkart's design system embodies a bold, commerce-focused aesthetic that balances vibrant energy with functional clarity. The visual language is distinctly Indian e-commerce, featuring energetic blues, striking oranges, and clean typography that demands attention while maintaining accessibility. The system prioritizes conversions through color psychology—using electric blue as a trustworthy anchor and warm orange for calls-to-action—creating an engaging, approachable marketplace environment. Generous use of white space and consistent grid structures ensure products and deals stand out, while the overall mood is energetic, confident, and customer-centric.
Key Characteristics
#2874F0) establishes brand trust and platform dominance#FF5800) reserved for critical CTAs and conversion moments#2874F0): Dominant platform color; headers, primary navigation, brand elements, and core UI structure#03A9F4): Secondary brand accent for interactive states and secondary actions#2A55E5): Alternative primary for modal backgrounds and elevated surfaces#FF5800): Primary CTA buttons, "Request OTP", conversion-critical elements; highest visual priority#FBBC05): Campaign headers, sale badges, attention-grabbing promotional elements#FFA700): Alternative accent for deals and limited-time offers#4285F4): Third-party integration highlights and partner brand references#1F2939 / #172337): Dark modal overlays, high-contrast text areas, navigation panels#333333): Body copy, standard text content; highest frequency usage#000000): Strong emphasis text, icons, borders, shadows#FFFFFF): Primary background, card surfaces, text on dark backgrounds#F1F3F6): Subtle background tints, section dividers#F0F0F0): Alternative card backgrounds, disabled states#F5F8FE): Brand-aligned light background variant#F7FFF9): Alternative light surface for organic/eco content#CCCCCC): Input borders, divider lines, subtle visual separation#26A541): Order confirmed, positive feedback, checkmarks, validation states#FF4343): Form errors, payment failures, critical warnings#FFA700): Caution states, limited stock, pending actionsPrimary: Inter Regular (inter_regular), fallback: system-ui, -apple-system, sans-serif
Secondary/Bold: Inter Semi-Bold (inter_semi_bold), fallback: system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/H1 | Inter Semi-Bold | 28px | 700 | 32px | 0px | Large sale banners, hero headings |
| Heading/H2 | Inter Semi-Bold | 20px | 700 | 24px | 0px | Section titles, category headers |
| Heading/H3 | Inter Regular | 16px | 700 | 20px | 0px | Product names, subsection titles |
| Subheading/H4 | Inter Regular | 14px | 700 | 18px | 0px | Card titles, emphasis text |
| Body Large | Inter Regular | 14px | 400 | 20px | 0px | Primary content, descriptions |
| Body Standard | Inter Regular | 12px | 400 | 18px | 0px | Secondary content, metadata, labels |
| Caption | Inter Regular | 12px | 400 | 16px | 0px | Fine print, timestamps, disclaimers |
| Button | Inter Semi-Bold | 13px | 400 | normal | 0px | CTA text, form submissions |
| Link | Inter Regular | 12px | 400 | normal | 0px | Hyperlinks, navigation items |
| Code/Monospace | monospace | 12px | 400 | 16px | 0px | Promo codes, technical text |
#000000 for primary text on white, #333333 for secondary; ensure 4.5:1 WCAG AA minimum700 weight; smaller (12px) use 400 for readability400 (regular), 700 (semi-bold) to reduce font files#FF5800#FFFFFF13px, weight 40010px 20px2px48px335px (mobile full-width)rgba(0, 0, 0, 0.2) 0px 2px 4px 0px#E64A00 (darken by 10%)#CC4000 (darken by 20%)#FFCCB3 (lighten with 50% opacity text)#FFFFFF#00000013px, weight 4008px 12px1px solid #CCCCCC2px40pxrgba(0, 0, 0, 0.12) 0px 1px 4px 0px#F1F3F6#E0E0E0transparent#00000013px, weight 4008px 12px2px40pxrgba(40, 116, 240, 0.08)rgba(40, 116, 240, 0.16)#FFFFFF48px40px#333333rgba(0, 0, 0, 0.12) 0px 1px 4px 0px0px (icon centered)#F1F3F6, Shadow rgba(0, 0, 0, 0.2) 0px 2px 4px 0px#FFFFFF1px solid #CCCCCC2px12pxrgba(0, 0, 0, 0.08) 0px 1px 2px 0pxrgba(0, 0, 0, 0.16) 0px 2px 8px 0pxbox-shadow 200ms ease-in-out#FFF8DC for yellow campaigns)4px16px 20px20px, #2874F0 or #FF580014px, #333333#FFFFFF4px24pxrgba(0, 0, 0, 0.3) 0px 8px 16px 0pxrgba(0, 0, 0, 0.5) (semi-transparent black)500px (mobile) / 600px (desktop)#FFFFFF1px solid #CCCCCC (default) / 1px solid #2874F0 (focus)2px8px 12px40px16px, #33333320px#999999, opacity 0.6#2874F0, box-shadow 0 0 0 3px rgba(40, 116, 240, 0.1)#FF4343, box-shadow 0 0 0 3px rgba(255, 67, 67, 0.1)#F0F0F0, text #CCCCCC, cursor not-allowed#FFFFFF2px solid #2874F02px8px 16px40px16px, #333333100% (full container)#999999#FFFFFF1px solid #CCCCCC12px 0pxauto16px, #3333332px solid #2874F018px × 18px2px (checkbox) / 50% (radio)2px solid #CCCCCC#FFFFFF#2874F0#FFFFFF#2874F0#F0F0F0, Border #CCCCCC#FFFFFF56px1px solid #CCCCCC8px 16px18px, #2874F013px, #333333#2874F0#2874F0, border-bottom 3px solid #2874F0#FFFFFF48px0px 8px16px between categories24px × 24px, color #33333312px, #333333#2874F0, label color #2874F03px solid #2874F0 at bottom#F1F3F640px8px (horizontal margin between tabs)12px 20px13px, #3333332px 2px 0px 0px (for active tab indicator)#FFFFFF, bottom border 3px solid #2874F0#FFFFFF#E8F5E9 (light green)#26A54112px, weight 4004px 8px12px1px solid #26A541#FFEBEE (light red)#FF434312px, weight 4004px 8px12px1px solid #FF4343#FFF3E0 (light orange)#FFA70012px, weight 4004px 8px12px1px solid #FFA700#FBBC05 or #FFD700 (yellow)#00000012px, weight 7006px 10px2pxrgba(0, 0, 0, 0.2) 0px 2px 4px 0pxBase Unit: 4px
Spacing Scale:
4px — Micro spacing (icon gaps, tight component padding)8px — Minor spacing (button padding, input padding)12px — Small spacing (card padding, section gutters)16px — Standard spacing (major paddings, column gaps)20px — Medium spacing (section margins, larger component padding)32px — Large spacing (section separations, container margins)72px — Extra large spacing (hero sections, banner spacing)80px — Page-level spacing (top/bottom margins for major blocks)120px — Extra page spacing (full-screen section margins)132px — Maximum page spacing (reserved for hero/banner distances)Usage Context:
4px–8px: Button internals, icon spacing, tight layouts12px–16px: Card interiors, form fields, standard sections20px–32px: Between major content blocks, section breaks72px–132px: Hero banners, campaign sections, promotional spacingMax Width: 1440px (full desktop container)
Breakpoint Container Width:
100vw - 16px (full width with 8px side margins)100vw - 32px (full width with 16px side margins)1440px, centeredColumn Strategy:
Section Patterns:
72px–120px vertical padding16px gap between items1440px max-width container, 32px top/bottom margins#F1F3F6 background, 32px paddingFlipkart prioritizes breathing room to emphasize products and conversion pathways. Negative space is intentional—large margins around hero banners, generous padding inside cards, and deliberate separation between sections reduce cognitive load. Mobile-first spacing is more compact (12px–16px), scaling to 20px–32px on desktop to avoid overwhelming white space while maintaining focus on high-value CTAs and product imagery.
0px — Sharp edges (default for most inputs, buttons in minimal style)2px — Subtle rounding (buttons, cards, modals, form inputs)4px — Light rounding (container corners, badge backgrounds)8px — Moderate rounding (large cards, section containers)12px — Smooth rounding (badge pills, icon buttons)40px — Full rounding (floating action buttons, circular icon buttons)| Level | Treatment | Use |
|---|---|---|
| None (0) | No shadow | Flat backgrounds, disabled states, section dividers |
| Shallow (1) | rgba(0, 0, 0, 0.12) 0px 1px 4px 0px | Input fields, secondary buttons, subtle hover states |
| Medium (2) | rgba(0, 0, 0, 0.2) 0px 2px 4px 0px | Primary buttons, cards on hover, icon buttons |
| Deep (3) | rgba(0, 0, 0, 0.3) 0px 8px 16px 0px | Modals, dropdowns, floating elements, popovers |
Shadow Philosophy: Flipkart uses minimal, soft shadows to suggest interactivity without visual heaviness. Shadows scale subtly with interaction—inactive states have no shadow, hover adds shallow depth, and modals elevate with medium shadows. This creates a unified sense of hierarchy: elevated modals feel modal, floating buttons feel clickable, and flat sections feel structural. All shadows use black with controlled opacity rather than colored shadows, maintaining visual clarity across all product imagery and content.
#FF5800) for all primary CTAs—"Request OTP", "Add to Cart", "Buy Now"—to create conversion focus2px border radius consistently across buttons, inputs, and cards for a modern, approachable feel16px minimum padding inside cards to ensure content breathes and reduces visual fatigue#26A541 green, #FF4343 red) for order status, validation, and error messagingrgba(0, 0, 0, 0.5) overlay and ensure modals are max 500px wide on mobile for thumb-friendly interaction12px–16px spacing to create visual clusters that reduce input anxiety2px universally for UI, 40px only for icon buttons/avatars)#333333 or #000000 for body text—ensure sufficient contrast with 4.5:1 WCAG AA minimum1440px container width even on ultra-wide displays—peripheral content creates distraction48px × 48px on mobile| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | Single-column layout, full-width cards, 8px–12px padding, stacked modals, 13px body text |
| Tablet | 600px–999px | 2–3 column grids, flexible containers, 16px padding, slide-in modals, navigation drawer |
| Desktop | 1000px–1439px | 4 column product grids, sidebar navigation, 20px–32px padding, modal overlays, 14px body text |
| Large Desktop | 1440px+ | 5–6 column grids, fixed 1440px max-width container, centered layout, full modals with backdrop blur |
48px × 48px for all clickable elements on mobile40px (min) for secondary, 48px for primary CTAs48px diameter (circular) to accommodate thumb tap zones4px padding-bottom on hover to expand tap area40px height minimum to ensure comfortable text entry on mobile keyboards12px minimum to prevent mis-taps24px icon with 12px padding = 48px total clickable zoneMobile (320px–599px):
16px–20pxborder-radius: 12px 12px 0 0)18px, body at 13px for readabilityTablet (600px–999px):
12px gap between items80vw width, centeredDesktop (1000px+):
16px gaps600px width, backdrop blur14px body)#FF5800) — all "Buy", "Checkout", "Request OTP" buttons#2874F0) — headers, navigation, primary actions, brand elements#000000) — h1–h3 elements, strong emphasis#333333) — paragraph content, secondary information#FFFFFF) — default surface, cards, containers#F1F3F6) — section dividers, inactive states#26A541) — confirmations, validated fields#FF4343) — form errors, failed transactions#CCCCCC) — input borders, dividersrgba(0, 0, 0, 0.5)) — modal backdropsEvery button must be one of three types: Primary orange (#FF5800, 48px height, full CTA text), secondary white (#FFFFFF, 40px height, outline borders), or ghost transparent (hover #F1F3F6). Never add a fourth button variant.
All text inputs follow one rule: 40px height, 8px 12px padding, 1px solid #CCCCCC border (default) / 1px solid #2874F0 (focus), 2px border-radius, font 16px Inter Regular. Focus state adds 0 0 0 3px rgba(40, 116, 240, 0.1) shadow.
Cards and containers use base styling: White background, 1px solid #CCCCCC border (light-weight), 2px border-radius, 12px padding minimum. Hover state upgrades shadow to rgba(0, 0, 0, 0.16) 0px 2px 8px 0px.
Typography hierarchy is absolute: Use display (28px), heading (20px), subheading (16px), body (14px), caption (12px) only. Never create intermediate sizes; scale by 4px–6px steps only.
Spacing follows the 4px base unit rigorously: Padding/margins are always multiples of 4 (4px, 8px, 12px, 16px, 20px, 32px, 72px, 80px, 120px, 132px). Never use arbitrary values like 15px or 25px.
All shadows conform to three levels: None (box-shadow: none), shallow (rgba(0, 0, 0, 0.12) 0px 1px 4px 0px), medium (rgba(0, 0, 0, 0.2) 0px 2px 4px 0px), or deep (rgba(0, 0, 0, 0.3) 0px 8px 16px 0px). Never add custom shadows.
Mobile responsive design enforces single-column layout for screens <600px, 2–3 columns for 600px–999px, 4+ columns for 1000px+. All interactive elements scale to 48px touch targets on mobile.
Form validation uses semantic colors only: Success states = #26A541 (green text, light green background), error states = #FF4343 (red text, light red background), warnings = #FFA700 (amber). Never invent custom validation colors.
Modal and overlay behavior is consistent: Modals appear with rgba(0, 0, 0, 0.5) backdrop, content max-width 600px desktop / 500px mobile, 24px padding, 4px border-radius. Mobile modals use bottom-sheet style with border-radius: 12px 12px 0 0.
Every interactive state must include hover + active + disabled. Hover lightens/darkens color by 10%, active by 20%, disabled reduces opacity to 50% with cursor not-allowed. Transitions default to 200ms ease-in-out for all state changes.