ORME

A System Built Around Quiet Type

• · Body type is 11px/15px on every screen — navigation, product cards, specifications and price all share one size. Hierarchy comes from whitespace and capitals instead, so nothing competes with the photography.
• · Only two things are allowed to be large: the editorial serif that anchors the home page, and the single black call to action on a product page. Everything else stays at the base size, which is what makes those two read as decisions rather than decoration.
• · Product images are letterboxed onto white at a fixed 2:3 and never cropped. Thirty-two garments of different shapes and lengths therefore sit in the grid without any one of them breaking the rhythm.

A Commerce Shell With No Backend

• · Login, bag, wishlist, newsletter and search are all absorbed by a single notice component. The copy is written as a calm announcement in the brand's voice rather than an error, so the storefront never has to apologise for what is not open yet.
• · Every filter and sort lives in the query string, which makes any state linkable — a category, a line, a colour, a price order. Scroll restoration was deliberately bound to pathname changes only, so filtering never throws the reader back to the top.
• · The detail page stacks its images vertically instead of running a carousel. Nothing to click means nothing to break, and the full look is visible in one scroll rather than three taps.

One Base Frame, Thirty-Two Garments

• · Producing 32 looks independently gives 32 different people in 32 different rooms. Instead one base frame was fixed first — model, background, crop and lighting — and every subsequent frame was generated against it with only the garment changed.
• · The prompt builder reads the product catalogue directly, so the catalogue is never maintained in two places. Adding a product adds its frame.
• · Two findings shaped the art direction: the crop had to sit at mid-thigh with the face large and frontal rather than full-length, and naming a city anywhere in the brief quietly overrode the casting, so the location had to leave the prompt entirely.

Pipelines Instead of Handwork

• · Normalisation runs through ImageMagick — originals are letterboxed onto white at 1000x1500 for product and 1400x933 for editorial, never cropped, with the filename acting as the route into the site.
• · The product grid pulls 32 images at once, so a card-only 600x900 variant is generated alongside each original. List-page transfer fell from 8.7MB to 2.5MB with no visible difference.
• · Verification is a script: three engines, seven widths from 320 to 2560, six pages, collecting console errors, horizontal overflow and failed image loads. 126 checks, zero findings at deployment.

No Products on the Home Page

The grid lives only in Shop. The home page is entirely editorial, and one large serif block near its centre does the work of a hero. A storefront that opens with a wall of product asks to be compared on price; one that opens with a photograph asks to be read.

Documents on a Twelve-Column Asymmetry

A single centred column only makes a page longer. The title runs across nine columns, the lede is pushed right to leave air on the left, and the body folds into two columns beside a label that stays put as you read.

A Serif Wordmark

Three routes were drawn — serif wordmark, grotesque wordmark, and a ridge mark inside a circle — and compared on white and black from 54px down to favicon size. The serif won because it shares its face with the large editorial type, so masthead and body read as one object.