Myntra

name Myntra

colors background: "#ffffff" foreground: "#282c3f" brand: "#ff3f6c" # Myntra Pink/Red muted: "#94969f" border: "#eaeaec" card: "#ffffff" accent: "#ff3f6c" secondary: "#f5f5f6" dark: background: "#121212" foreground: "#eaeaec" muted: "#94969f" border: "#282c3f" card: "#1a1a1a" accent: "#ff3f6c"

typography fontFamily: sans: "Whitney, Inter, system-ui, sans-serif" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "700" letterSpacing: "0.02em"

rounded default: "0px" # Myntra marketing is very "Fashion Magazine" (sharp) md: "4px" lg: "8px"

Design System: Myntra (Appliqué)

Overview

Myntra's design system, Appliqué, is "Fashion-Forward Infrastructure." It combines the editorial aesthetic of a high-end fashion magazine with the performance of a modern e-commerce platform.

Design Philosophy

• Editorial Elegance: Uses high-contrast typography and sharp edges to mimic fashion broadsheets.

• Visual Discovery: Large, high-quality imagery is the primary navigation tool.

• Personalized Style: The UI adapts to different fashion personas, using diverse color accents and layout patterns.

• Seamless Transition: Designed to provide a smooth flow from discovery (Feed) to inspiration (Studio) to purchase.

Colors

• Myntra Pink (#FF3F6C): The signature brand "pop" color. It is vibrant, fashionable, and used for all primary actions.

• The "Neutral" Palette: Uses a range of cool greys and off-whites to create a clean, minimalist canvas that lets the clothes stand out.

• Accent Palette: Uses vibrant oranges and purples derived from the logo for specific marketing events.

Typography

• Whitney: A sophisticated, humanist sans-serif that provides a clean, premium voice.

• Letter-Spaced Headings: Uses uppercase and tracked-out headlines to create a "luxury brand" feel.

Components

• Fashion Cards: Large, vertical cards with minimal padding and integrated "Wishlist" hearts.

• The "Insider" Dashboard: A premium, dark-themed area for loyalty members, using gold and dark grey accents.

• Brand Filters: Clean, text-based filters that prioritize brand logos and categories.

Visual Effects

• Masonry Grids: Uses dynamic, staggered grids in the "Studio" section to create a more organic, browsing feel.

• High-Contrast Overlays: Uses black-and-white text overlays on fashion photography for a "Magazine Cover" look.

• Smooth Image Zooms: Interactive image galleries that allow for deep-zoom inspection of fabric and detail.