Design and buildFashion / E-commerce · 2026

Aplomb

A fictional couture label built the whole way: name, tagline, cloth weights, thirty two routes and a Figma system behind every one of them. Made to answer what an award level fashion site actually takes.

See it live ↗
The Aplomb home page on a laptop, the display serif reading Made to fall beside a black and white campaign frame

Services

  • Brand Identity
  • Web Design
  • Design System
  • Web Development

Stack

  • React 19
  • Vite
  • Tailwind CSS v4
  • Motion
  • Lenis

Outcome

  • 32 Routes, each designed at desktop and phone
  • 34 Component masters behind every screen
  • 11 Semantic colour tokens, two modes, no dark variants

Why invent a brand

Because the interesting parts of a fashion site are the parts a real client brief never reaches. What the cloth weighs. Whether a collection has an argument or just a name. What the checkout says when it has nothing to sell.

Aplomb is ours. The name is the couture term for how a garment hangs in balance, à plomb, on the plumb line. The line underneath is “cut for the walk, not the mirror”, and the home page opens on two words that set the whole thing: made to fall.

That is not decoration. It is the constraint everything else answers to.

The Aplomb home page open on a laptop resting in a tan leather chair, the display serif reading Made to fall
Two words carry the site. Everything after them answers to how cloth falls, which is why the first screen spends itself on a statement and one campaign frame instead of a grid of product.

Everything hangs

The signature is structural. Every section opens on a one pixel rail with a monospace ticket sitting on it, and images are hung from the top at different heights rather than aligned to a baseline. Scrolling the page feels like walking past a rail of clothes, because that is literally what the layout is doing.

Collection 04, Stride, has eight pieces and every one carries a real cloth weight in grams per square metre. A coat at 560 and a shirt at 130 are different objects, and a site that treats them as two images at the same size is telling you nothing. The weights are on the page because they are the part a buyer of this kind of clothing actually reads.

The Aplomb shop on a tablet lying on dark wood, headed Eight pieces, hung by weight
The shop orders itself by how heavy the cloth is rather than by price or by what arrived last, because on a rail that is the order your hand finds them in.
A product page held in two hands on a tablet, showing the Weighted Overcoat beside a specification table
The specification table is the part a buyer of this kind of clothing actually reads. A coat at 560 gsm is a different object from a shirt at 130, and the page says so in words rather than leaving it to the photograph.

The system underneath

Three free typefaces, chosen rather than defaulted: Erode Light for display, Switzer for text, Fragment Mono for the tickets. Paper, ink, wool, and a single accent blue used in doses small enough that most visitors will not consciously register it.

The Figma file is not a pretty export of the site. It is a working system: eleven semantic colour tokens with Paper and Wool modes, so no component needs a light and dark variant at all. A dark section switches the mode and everything inside it flips. Thirty four component masters carry every screen, and all forty three screens, desktop and phone, are drawn from them.

Which makes the interesting claim the boring one: design and code did not drift, because they were the same decisions written twice.

The Aplomb navigation overlay in its dark Wool mode on a phone lying among grey stones
Wool mode. Nothing here is a dark variant: the section switches the colour mode and the same eleven tokens resolve to new values, so one set of components carries both.
The Aplomb home page on a phone resting on the arm of a rust sofa, the same Made to fall statement over the campaign image
Every route was drawn twice, at 1440 and at 390. The phone is not the desktop reflowed: the statement breaks differently, the rail loses its right arm, and the tickets move under the image rather than beside it.

What shipped

Thirty two routes. Product pages, a shop with composition and list views, four collections with lookbooks, five editorial stories, an atelier with an appointment form, a cloth library, a bag that survives a refresh, and a checkout that validates inline and then admits, honestly, that it is a prototype.

The footer is its own piece of work: the wordmark letter spaced across the full width, with a trail of campaign frames that spawn under the letters as the pointer moves and lift away behind them.

It is live at aplomb-psi.vercel.app, and it exists to answer a question we would otherwise have to answer with adjectives.

The atelier page on a tablet set on a rust armchair, headed Rua das Flores 21, first floor, beside a photograph of a clothes rail
The atelier books a fitting at a real address on a real floor. Invented, but specific, because a fashion house that cannot tell you where to stand is a mood board.
Two phones side by side showing the Aplomb bag and the first step of checkout
The bag survives a refresh, and it keeps carrying the weight and the cloth alongside the size, because those are what you are about to spend twelve hundred dollars on.
A phone caught mid air above an open hand, showing the Aplomb checkout contact and delivery form
Three steps, each validating as you type. The end of it is honest about having nothing to ship, which is the only ending a prototype can give you without lying.

The best case study is the site itself.

Browse Aplomb live ↗
Next projectFlowMail

Next project

Have an ideaworth raising?

or write to hello@beconfidency.agency