NOIRÉ

NOIRÉ is a self-initiated WEXILAR concept: an imagined contemporary fashion and lifestyle label built on refined essentials, strong silhouettes and modern editorial expression. It is not a real brand or shop — the twelve products, their prices and the journal are fictional, nothing is for sale, and no payments are taken.

The brief we set ourselves: most fashion sites feel like a template with products dropped in, and the campaign stops at the homepage. NOIRÉ carries one look — type, image and motion — from the first frame to the last step of checkout.

Concrete, daylight, shadow — and the clothes. The campaign avoids faces where it can and lets silhouette, light and material carry the story.

The photography is licensed Unsplash stock standing in for the shoot a real label would commission; none of it shows an actual NOIRÉ product. What makes it one campaign is the art direction: consistent crops, and a single grade applied to every image — desaturated, contrast lifted 7%, and tinted a warm bone. Forty-five images, one world.

The wordmark is NOIRÉ in Bodoni Moda capitals, tracked wide; the acute accent is its only ornament. The monogram lifts that accent over a single N. The palette is black, off-white, bone and stone — colour used so sparingly that the photographs carry it. Applications — a shopping bag, hang tag, garment label and tissue seal — are drawn as concept renders.

Typography is the main visual element. Bodoni Moda carries the voice — oversized hero lines, section titles and product names, with its italic kept for the one word that matters. Manrope does every interface job: navigation, prices, labels and forms, often in small capitals tracked wide.

Every product — tees, shirting, tailoring, outerwear, knitwear, bags and sneakers — uses the same card: a 4:5 image with an alternate view, type, name, price, colour swatches, a wishlist heart and quick add. On hover the alternate image fades in, both drift in scale and a quick-add panel rises with the sizes; on touch, quick add sits under the details so nothing depends on hover.

The shop filters by category, colour and search and sorts by featured, newest and price — with the state in the URL so filtered views can be shared. Search opens full screen with live product and category results and a proper no-results state. The bag drawer handles quantities, removal, a free-shipping meter, subtotal and estimated shipping. A wishlist and the bag persist in the browser. Checkout runs Contact → Shipping → Payment → Review with validation — and never takes payment: the card fields are read-only and labelled as a demo.

On first visit a curtain carries the wordmark, then lifts as the hero image unmasks and the headline rises line by line. Scrolling brings masked word reveals, image wipes that settle from a slight zoom, gentle parallax and a pinned three-scene campaign. Hover adds alternate product images, label swaps, drawn underlines, an image that follows the category list and a labelled cursor. Commerce moments get their own feedback: the bag drawer, a flash on the new line, and an add-to-bag button that confirms.

It is built with CSS transforms, one shared IntersectionObserver and a single passive scroll listener — no animation library — and prefers-reduced-motion turns all of it off.

A large gallery with thumbnails that crossfade the stage, arrow-key navigation and, on phones, a swipe carousel. Colour and size are real selections — try to add without a size and the page asks for one. A size guide, quantity, add to bag, wishlist, and accordions for details, materials, care and shipping, followed by related products. On mobile, a sticky add-to-bag bar appears once the main button scrolls away.

A full-screen menu set in the display serif, product rails you swipe, quick add under every card, a bag drawer that takes the whole screen, a swipeable gallery and a sticky add-to-bag bar. The header inverts over the hero so it stays legible on black and white alike, and touch targets never drop below 44 px. Every page was checked at 390, 768 and 1440 pixels.

The homepage campaign is a pinned sequence: three scenes, each a photograph that crossfades and slowly scales while its word slides in and a short line of copy changes beneath. Around it, the campaign grid mixes proportions — tall, wide and square — and reveals each frame as it arrives.

The NOIRÉ concept is live at wexilar.com/concepts/noire — the shop, product pages, bag, wishlist and checkout all work, with fictional products and no real orders.