Nykaa

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

• The Beauty Counter: The UI is designed to mimic the clarity and organization of a premium beauty counter.

• Confident Pink: The Nykaa Pink (#FF1774) is used as a beacon for "Add to Bag" and key interactive states.

• Editorial Minimalism: Relies on high-contrast black-on-white text and generous spacing to feel like a modern beauty blog.

• 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.