Skip to content

Maison Studio · Case study

Margot V.

Fashion model · Paris and New York

House A · Serene Architectural

Margot V. is not a client and not a person. This is a build the studio made for itself, and the career on it is invented. The design decisions described below are real, and every one of them is in the code.

The brief we set ourselves was the ordinary one a model’s site has to answer. Somebody is standing in a corridor with a phone and about thirty seconds. They need the face, the measurements, the range of work and a way to reach the people who represent her, and they need to get there without deciding anything.

So the site is one scroll. There is no navigation, no menu and no anchor bar, and the only links on the page are two mailboxes at the end of it. Everything else is the argument for hiring her.

Open the site

Direction

The page opens on a portrait at ninety-two percent of the screen height, cropped at thirty percent from the top so the frame sits on her face rather than on the middle of the picture. The caption over it is set in difference blend mode, which inverts it against whatever is behind it. The usual solution is a dark scrim in the corner, and a scrim would have meant darkening part of the photograph to make room for eleven pixels of text.

Under the portrait, the measurements run as a single tracked line: height, bust, waist and hip, shoe, hair, eyes, cities. It is the museum-label register, and it is the same register used later for a campaign credit and for a press date. Nothing in the small type outranks anything else in the small type.

The grid

One column of prose, and as much as one hundred and ninety-two pixels of nothing between one section and the next on a wide screen. The air is the material, and there is a great deal of it.

The portfolio narrows as it goes. The first plate runs full bleed at three by two and touches both edges of the screen. The second is a pair at three by four inside the margin. The last is a single frame at four by five, five hundred and twenty pixels wide, with white either side of it. A book that stays at one size reads as a contact sheet.

In the editorial section the two columns deliberately do not start level: the list sits at the top and the picture is dropped four rems below it, so the eye reads the credits before it reaches the portrait. In the campaigns section the list runs into a full-bleed sixteen by nine whose caption is set in the same type as the row above it, so the caption continues the list rather than labeling the picture.

The frames

Seven frames carry the whole site: the environmental portrait that opens it, a direct studio gaze, a movement frame, a candid, a detail crop, a campaign still and one black and white. Two of them are asked to do something the other five are not. The detail crop is the only image on the page printed small on purpose, and the black and white is the only one that leaves the color world of the site.

Margot is not a person, so the pictures were made for the build. On a commission they would be directed and graded by the studio, and where an artist already has frames she likes, those are the ones we use. Nothing comes out of a stock library either way.

Typography

House A sets Zodiak for display and Satoshi for everything small. The biography breaks the usual arrangement: it is set in the serif at seventeen pixels, with a floated drop cap of three and a half rems on the opening paragraph only. Three paragraphs of serif at that size read as a magazine feature. The same three paragraphs in the sans read as an about box.

The italic is a per-artist decision made in one line. House A leaves its display face roman by default, so the shared primitives can serve an artist for whom italic would be wrong. Margot’s page sets a single custom property, and from that one declaration the family name in the masthead and every section heading below it run italic.

There is no pure black and no pure white anywhere. The ground is a warm paper and the ink is a near-black at hue twenty-eight, which is a brown. Small type is tracked at 0.18em, which is wide enough that a measurement and a credit read as captions rather than as data.

Motion

Two moments, both in the press section, both opacity only. A quotation fades in over eight hundred milliseconds. The publication and the date arrive a full second after it, which is long enough that you read the sentence before you know who wrote it.

Nothing else on the site moves. The images do not parallax, no number counts up, and no section slides in from the side.

Declined

What is not on the page.

Four things were left off the page on purpose.

A navigation bar
A model’s site has one route through it and the route is downward. A menu adds a decision at the top of a page that was built to need none.
Social links
Every one of them sends the person who arrived at her site somewhere she does not own. The site is the destination, so it does not point anywhere except at the two mailboxes that can book her.
Named houses and titles
Every counterparty on the page is described by type rather than named. On a commission the names go in, cleared, with the artist’s consent and the photographer credited. On an invented career they would be fabricated proof, which disqualifies everything else on the page.
Search indexing
The build is served with robots noindex. A fictional model ranking for fashion searches while real represented artists do not would be exactly backwards.

The shared parts

Alexandra M.’s site is assembled from the same primitives as this one. Six of the nine appear on both pages, the name lockup and the indexed list and the contact card among them, and the two sites do not look related. What differs is the theme, which is about a dozen custom properties, and the order and shape of the sections, which are written per artist and shared with nobody.

That is the part of this work that cannot be bought as a template, and it is why the studio does not claim design exclusivity over a component library it reuses on purpose.