Home /work/
Luxe Noir — Quiet Luxury Commerce
DESIGNEDAug 2026

Luxe Noir — Quiet Luxury Commerce

A responsive commerce system for a fictional London capsule wardrobe — editorial enough to feel distinctive, structured enough to make every decision clear. 67 routes designed as one coherent system, from landing page to ownership. A design concept, not a built store. Designed by me with Claude Code and Codex.

Scope
DESIGNED
Timeline
Concept project — 2026
Role
UI · UX Designer — with Claude Code & Codex
Platforms
Web — Desktop 1440pxWeb — Mobile 390px
Tools
FigmaClaude CodeCodex

67

Routes · desktop + mobile

321

Design tokens

Luxe Noir — Quiet Luxury Commerce

Overview

The project

Luxe Noir is a fictional London label built around a permanent capsule wardrobe, and the brief was narrower than it sounds: build trust without adding noise. Luxury retail tends to look beautiful right up to the moment somebody tries to buy, at which point the editorial mood hands over to a generic checkout — so the work was never about adding more visual luxury, it was about making confidence feel luxurious. Three principles carried every screen: remove competing choices until the product story leads, reveal the mill and the fibre and the fabric weight before anyone has to ask, and keep delivery, returns and repair beside the purchase rather than buried under it. The visual language is deliberately small — ink, paper, charcoal and one electric accent, bound as 321 variables so a change lands everywhere at once — and repetition is what turns that restraint into recognition across 67 routes. Mobile was designed as its own rhythm rather than a narrower desktop, changing information order and action placement while keeping the same voice. The system was designed to the point where it could be handed to a build — 16 UX state screens, a cart that holds its contents across the journey, filtering, search, a checkout with no payment field anywhere, and a journal, all specified as screens. It is a design concept: none of it was built. Designed by me in collaboration with Claude Code and Codex.

How it was made

Design process

01

Positioning

Audit of luxury retail journeys; a capsule-wardrobe brand defined around restraint rather than volume

02

Architecture

67 routes grouped into four branches — discover, evaluate, purchase, own — sharing one persistent page spine

03

Design system

Ink, paper, charcoal and a single electric accent, bound as 321 variables across colour, type and spacing

04

Hi-fi + components

134 production frames at two breakpoints, driven by 11 component families and 1,250 instances

05

UX states

16 state screens — empty, loading, error and confirmation — so the system covers the journey, not just the happy path

What I learned

Research insights

Beauty stops at the buy button

Luxury sites hold their editorial mood right up to the moment someone tries to purchase, then hand over to a generic checkout. The mood had to survive the whole journey, so the same grammar carries the cart and the confirmation.

Premium claims need evidence

"Quality" means nothing when fibre, mill and fabric weight are hidden. Every product names its cloth and its mill above the fold, so the price has something to stand on before the ask.

The considered buyer returns

This shopper reads, compares and comes back days later. Saving a piece never interrupts browsing, and the cart survives navigation — the journey assumes a second visit rather than a single session.

Mobile is a different rhythm

A scaled-down desktop grid makes comparison and checkout harder. Mobile changes information order, gallery depth and action placement while keeping the same voice.

Why it looks like this

Key design decisions

Remove, reveal, reassure

One principle behind every screen: cut competing choices, name the material facts, and keep delivery and returns beside the action

Trust sits next to the decision

Mill, fibre, fit, availability, delivery and returns ladder up to the primary action rather than hiding in a tab below it

One accent, doing one job

Playfair carries the voice, Inter carries the information, and the yellow signal marks action and progress — never decoration

Add to cart is gated on size

The button stays inert until a size exists, so nobody orders the wrong size by accident — the notice clears as the action lights

One card anatomy, everywhere

11 component families and 1,250 instances mean image, badge, name, price and cloth repeat identically across all 67 routes

Motion with a job to do

One easing curve, 200–700ms, nothing that moves for its own sake — and every transition removed under reduced-motion

The screens

Gallery

What I used

Tools

Figma

UI design, component library & 134 production frames

Figma Variables

321 tokens — colour, type, spacing and radius

Claude Code

Design collaboration & assembling the Figma file

Codex

Design collaboration

What came out of it

Results

67

Routes designed

134

Production frames

321

Design tokens

11

Component families

1,250

Instances in use

16

UX state screens

Other work