A maison storefront from campaign image to order number

MAISON ÉLAN is our answer to a problem every fashion house knows: the brand is uncompromising on the campaign image — and from the category page onwards the shop system takes over. Filters, bag and checkout then look like they do everywhere else.

So we built the whole flow ourselves: from the campaign through catalogue and product page to the order confirmation, with no shop template behind it. That is the only way to find out whether a luxury voice holds up where the forms, the error messages and the loading states are.

Typography is the brand: a classical Renaissance serif for every heading, a narrow grotesque at a 14-pixel base size for the text. Every large headline follows the same rule — first line in caps, second line in italic serif ("THE ART / of restraint"). The pattern repeats in the hero, the section titles, the 404 and the order confirmation.

Colour stays almost entirely ivory and ink. A single bordeaux takes on hover surfaces, focus rings and text selection — and reappears as a product colour, so the collection and the interface share one palette.

Motion needs no animation library: scroll reveals run on a bespoke IntersectionObserver, everything else on CSS transitions along one shared easing curve. That keeps the page light and the movement identical everywhere.

The catalogue filters across seven groups — category, size, colour, material, collection, availability and price — with a result count per facet, multiple selection, a counter on the filter button and real price-band logic. Plus sorting, a toggle between a three- and four-column grid, and a load-more that shows its progress and leaves skeleton cards standing while it works.

The product page builds six views out of two product images, held in a full-screen viewer with a counter and paging. Colour swatches and sizes are marked up as real selection groups; without a size the add-to-bag action is blocked and explains itself inline. Alongside it a size chart as a drawer, five expandable sections including traceability, and a fixed bag bar on mobile.

The checkout runs through contact, delivery, packaging and payment. Each step validates its own fields, the card number formats itself into groups of four as you type, every field carries the right autofill hints, express delivery shows up in the total immediately, the gift message counts its characters — and you can only jump back to steps already completed, never forward. At the end there is an order number to a fixed scheme and a confirmation page of its own.

The customer account, wishlist and order history complete the flow: sign-in, registration and password reset share one component with three modes, orders show a four-stage status timeline, and an appointment can be booked either in the boutique or by video.