Back to designs

DESIGN.md · explainx registry

Nykaa

Nykaa's design system is "Fearless, Feminine, and Functional." It is a clean, beauty-first environment that uses its signature pink to create a sense of excitement and empowerment.

Design System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
name
Nykaa
colors
background: "#ffffff" foreground: "#000000" brand: "#ff1774" # Nykaa Pink muted: "#757575" border: "#e5e5e5" card: "#ffffff" accent: "#ff1774" secondary: "#9e1547" # Deep Berry dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#262626" card: "#121212" accent: "#ff1774"
typography
fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "13px" # Compact for beauty details lineHeight: "1.5" heading: fontWeight: "600" letterSpacing: "-0.01em"
rounded
default: "4px" md: "8px" full: "9999px"

Design System: Nykaa

Overview

Nykaa's design system is "Fearless, Feminine, and Functional." It is a clean, beauty-first environment that uses its signature pink to create a sense of excitement and empowerment.

Design Philosophy

  1. The Beauty Counter: The UI is designed to mimic the clarity and organization of a premium beauty counter.
  2. Confident Pink: The Nykaa Pink (#FF1774) is used as a beacon for "Add to Bag" and key interactive states.
  3. Editorial Minimalism: Relies on high-contrast black-on-white text and generous spacing to feel like a modern beauty blog.
  4. Information Transparency: Prioritizes ingredient lists, reviews, and high-resolution swatch photography.

Colors

  • Nykaa Pink (#FF1774): A vibrant, high-energy pink that represents the brand's bold and playful spirit.
  • Deep Berry (#9E1547): Used for logo accents and premium sections (Nykaa Luxe) to add a layer of sophistication.
  • Pure Canvas: Primarily uses absolute White and Black to ensure colors of makeup products are represented accurately.

Typography

  • Inter: A neutral, clean sans-serif that ensures information density doesn't become visual clutter.
  • Hierarchy: Uses bold pink headers sparingly to draw attention to special categories and offers.

Components

  • Swatch Tiles: Small, circular or square tiles that show product shades with high color accuracy.
  • The "Bag" Drawer: A sleek, right-aligned overlay that provides a quick summary of the shopping cart.
  • Product Badges: Small, rounded badges for "New," "Best Seller," or "Conscious Beauty" using a muted secondary palette.

Visual Effects

  • Clean Grids: Organizes thousands of products into a highly structured, easy-to-browse grid.
  • Soft Hover States: Uses subtle background shifts or pink outlines to indicate interactivity.
  • High-Resolution Galleries: Prioritizes image loading to ensure beauty details are visible instantly.

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 Nykaa on explainx.ai?
Nykaa's design system is "Fearless, Feminine, and Functional." It is a clean, beauty-first environment that uses its signature pink to create a sense of excitement and empowerment. 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 →