Atelier — Haute Couture Editorial Experience
A couture house site that sells the way the house sells
Atelier is a haute couture maison — numbered editions, private salons, garments made entirely by hand. The site had to behave like a boutique rather than a storefront: no cart, no prices, no urgency. The conversion event is a request for an appointment, and everything on the page is arranged to make that request feel like the natural next step.
- Type
- Luxury fashion house site
- Role
- UI/UX design & front-end build
- Core stack
- React · Vite · Tailwind CSS · Clerk · Airtable
- Focus
- Editorial layout & enquiry conversion
The problem
Luxury fashion sites fail in two directions. The first is treating couture like retail — a grid of product tiles, a price, a buy button — which reads as a catalogue and quietly tells the visitor this is a thing you purchase rather than a thing you commission. The second is the overcorrection: a full-bleed film, a logo, and almost no information, which looks expensive and leaves anyone seriously interested with nowhere to go.
Atelier sits in the gap. It has three looks, each numbered, each with real specification — silhouette, fabrics, construction details, styling. That content is the argument. A client deciding whether to book a private salon wants to read it, and a catalogue layout flattens it into captions while a cinematic layout hides it entirely.
The second constraint was the conversion event itself. There is no checkout to optimise. The only thing a visitor can do is ask for an appointment, which is a high-friction, high-commitment action taken by a small number of people. That makes the enquiry form load-bearing in a way a marketing site form usually is not: if it feels like a newsletter signup, the positioning collapses at the last step.
What I built
An editorial experience on React and Vite, with Tailwind holding the type and colour system, Clerk providing client accounts, and Airtable receiving every enquiry the page produces.
A numbered runway archive — three looks presented as editorial spreads rather than product cards, each carrying its own silhouette, fabric and styling notes, with an enquiry route attached to the specific piece.
A typographic identity doing the branding — a display face against an italic accent, set on cream with a single amber, so the page reads as a house rather than a template with photography dropped into it.
A craft marquee — a continuously scrolling band of the house’s positioning phrases, setting tone in the space where most sites put a logo wall.
The Pillars of Craft and Maison Ethos sections — the provenance story given its own pacing and its own numbers, because in this category the workroom *is* the product.
A private commission enquiry flow — a real form with per-field validation, an explicit consent step, a pending state and a confirmation, writing each submission into Airtable, with Clerk-backed accounts for returning clients.
The technical decisions, and why
Editorial layout over a product grid
A grid asks the visitor to compare; an editorial spread asks them to read. Couture is not bought by comparison, so each look gets a full asymmetric composition — image on one side, specification on the other, a large numeral anchoring it — and the layout alternates rather than repeating. The cost is a longer page that cannot be generated from a loop. That is the right trade when there are three pieces and each one has to carry a commission.
Type and colour carry the brand, so photography does not have to
The usual way to make a fashion site feel expensive is enormous imagery, which is also the usual way to make it slow. Here the weight sits in the type scale and a deliberately narrow palette — cream, ink, one amber — held in Tailwind as a fixed system rather than chosen per section. Images are then free to be fewer and smaller, because they support the composition instead of being it.
IntersectionObserver reveals instead of an animation library
Every section arrives with a short fade-and-rise as it enters the viewport, and the marquee runs on a CSS keyframe. Both are a handful of lines against a browser API and the stylesheet, which is the whole reason this site ships no GSAP, no Framer Motion and no scroll-hijacking library. Motion on an editorial page should confirm you are reading in the right order; anything more expensive than that is paying bundle weight to interrupt the reader. Reduced-motion preferences are honoured in CSS, so the page settles immediately for anyone who asked for that.
The enquiry form treated as the product surface
This form is where the site either earns the appointment or loses it, so it got the attention a checkout would get elsewhere: fields naming what the house actually needs — nature of enquiry, preferred salon city — validation that reports per field rather than rejecting the whole submission, aria-busy on the pending state, and a confirmation that offers to send another. Enquiring about a specific look carries that look through, so the visitor never retypes what the page already knew.
Airtable as the enquiry store, chosen for who reads it
Submissions land in Airtable rather than a database behind an admin panel I would have had to build. The people acting on an enquiry are the atelier’s own staff, and what they need is to filter by salon city, mark a request as contacted and leave a note — which is a spreadsheet with opinions, not an application. Picking the store by who reads the rows rather than by what the app writes removed an entire admin surface from the build, and it means the schema can change when the house changes how it works, without a deploy.
Clerk for accounts, rather than an auth layer of my own
Returning clients need sign-in, and a maison site is the wrong place to be maintaining session handling, password reset and MFA. Clerk makes that a provider and a few hooks. The decision that mattered was the boundary: browsing the collection and sending an enquiry stay entirely public, because gating the conversion event behind a signup is how a boutique loses the walk-in.
Where it landed
The site reads as a house with a point of view rather than a template in a luxury palette — the numbered looks are legible as editions, the craft story has room to work, and the specification is there for the reader who wants it without crowding the one who does not.
The transferable decision is the restraint. An editorial identity built from type, spacing and a three-colour palette, with motion from two browser primitives, produces a page that feels expensive and behaves cheaply — which leaves the budget available for the only interaction that actually matters here: asking for an appointment.