Back to designs

DESIGN.md · explainx registry

Myntra

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 System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
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

  1. Editorial Elegance: Uses high-contrast typography and sharp edges to mimic fashion broadsheets.
  2. Visual Discovery: Large, high-quality imagery is the primary navigation tool.
  3. Personalized Style: The UI adapts to different fashion personas, using diverse color accents and layout patterns.
  4. 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.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Myntra on explainx.ai?
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. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →