NOIRE

Overview

A luxury artisan home fragrance e-commerce site for NOIRE, a brand that captures the scents of the world's most captivating places. The site features 14 products across candles, diffusers, and room sprays — each with structured scent profiles, origin stories, and atmospheric product photography. Built with a dark, warm palette that differentiates from the cream-dominant candle industry.

The Ideation Process

We conducted deep research into the top luxury candle and fragrance brands — Diptyque, Le Labo, Byredo, Cire Trudon, Boy Smells, P.F. Candle Co., Voluspa, Jo Malone, Apotheke, and DS & Durga. The key insight: nearly every competitor uses a light cream palette. Only Cire Trudon occupies the dark aesthetic space. We leaned into this gap, creating a dark, moody atmosphere that immediately signals exclusivity. The color palette was built around warm gold (#C8956C) on near-black (#111010), with Cormorant Garamond providing editorial serif elegance and Inter for clean UI text. The homepage flow was modeled after the highest-converting patterns: announcement bar with free shipping threshold, hero with single CTA, bestsellers grid, brand philosophy, category cards, testimonials, and newsletter signup.

Design & Development

The site architecture follows proven luxury e-commerce patterns distilled from 10 brand analyses. The homepage uses a parallax hero with GSAP split-text character animation, creating an immersive entrance. Product cards use portrait 3:4 aspect ratios — deliberately chosen because they mirror the shape of candle vessels and create a premium gallery feel. The product detail page uses an accordion system for scent profiles (top/heart/base notes), product details, origin stories, and shipping info — reducing visual clutter while keeping all information accessible. The cart drawer includes a free shipping progress bar (a pattern used by every top-converting candle brand) and upsell suggestions. Category filtering on the shop page uses animated transitions with sort options. Every section uses generous whitespace and restrained typography hierarchy — the hallmark of true luxury design.

What Makes It Unique

Technical Highlights

• Next.js 16 with React 19 — static generation for product pages with dynamic cart state
• Zustand with persist middleware for cart state that survives page refreshes
• GSAP ScrollTrigger + Framer Motion hybrid animation system
• Tailwind CSS v4 with CSS custom properties for a complete dark design token system
• Suspense boundaries for search params in shop page filtering
• Responsive 3-column product grid with category filtering and multi-sort options

The Result

NOIRE demonstrates our ability to build a complete, production-ready e-commerce experience — not just a landing page. The site handles 14 SKUs across 3 product categories with full cart functionality, structured product data, and a premium aesthetic that rivals brands like Byredo and Cire Trudon. The dark palette, editorial typography, and research-driven UX patterns create a site that converts browsers into buyers. This project showcases our range: from casual restaurant sites to luxury e-commerce — same attention to craft, completely different brand voice.