Skip to content

Showroom01E-commerce — watches

MERIDIAN

Cold light, blued steel

A watch house that sells on the specification instead of the atmosphere — with a loupe you can drag across the dial.

Brand
MERIDIAN — Watchmakers
Where
Design District, Miami
Sector
E-commerce — watches
Quoted as
Premium Websites · BeyondFrom $6,500
branvisuals.com/demos/watches

The clock in the bar is ticking at Miami’s meridian. The loupe raises under the pointer and the plate turns with it, the plinths swap the product page, and the strap changes the price. The bag opens with a plate thrown into it, and the checkout walks two steps to a tick that draws itself. Every reference, caliber and figure on it is invented, and no payment is taken.

Open the live demo

New tab — the frame above is already running it.

01 — The brief

Every independent watch brand on the internet is selling in the dark: black ground, gold hairline, a slow dissolve, and the word heritage. That is the grammar of a fragrance campaign, and it was being used on an object whose entire claim is that it holds two seconds a day across five positions. The atmosphere was doing the job the tolerance should have been doing, and a buyer comparing three of these sites could not tell any of them apart, which on a $9,400 purchase is the only thing that matters.

02The direction

Cold light, blued steel

Three moves, in the order they were made. Everything after this page — the palette, the type, the sections — falls out of them.

  1. 01

    The lights came on

    Cold white, north-light gray, hairlines everywhere, and exactly one color — taken out of the object rather than off a mood board. Heat-blued steel is what a watch hand turns at 290°C; it is a process with a temperature attached to it rather than a decoration, which makes it the one accent in horology that means something. There is no gold anywhere on this site, and its absence is the loudest thing on the page.

  2. 02

    The loupe

    The difference between a $600 watch and this one is visible at about four times magnification and nowhere else, so the product plate magnifies under the pointer and turns into the light as it goes — one gesture, two things. A shop that sells on hand-finishing and then serves a flat photograph is arguing against itself, and almost all of them do.

  3. 03

    The numbers are the copy

    A Didone over a mono: the house speaks in one voice and the instrument speaks in another. Every figure on the page — reference, case width, power reserve, price — is set in the register of a specification rather than of a pitch, and the nav carries a running clock at the workshop’s own meridian, because a site selling a mechanical movement should visibly keep time.

03 — Palette

The colors, and what each one is for.

Every value here is a real token in the build. A palette with a role written beside each color is a palette somebody can hand over — which is the difference between a design and a decoration.

#f2f4f5

Frost

The page. A cool gray with a blue cast

#fbfcfc

Snow

Plinths, the bag, every raised sheet

#d9dde0

Rule

Hairlines. There are a great many

#14171a

Ink

Type, and the emphatic borders

#616a72

Steel

Specifications, units, secondary copy

#26418f

Blued

The one accent — and the one action

#0d1014

Night

The single dark room: the caliber

#e9eef2

Chalk

Type inside that room

#7d9fe8

Azure

The blued steel, as it reads on night

04 — Typography

Two faces, and the reason for both.

Display

Bodoni Moda

Aa Bb Cc 0123

The quick brown fox jumps over the lazy dog — 1234567890

Iron & Oak threw a Didone out in session 16 for being the typography of a perfume advertisement on a shop that sells forty-five minutes of a Saturday. The face was never the problem — the object under it was. A Didone was drawn in the same decades and with the same instruments as the escapements this house claims to descend from, and its extreme thick-to-thin is a machining gesture. It carries an optical-size axis, which is the only reason one family can set both a wordmark and running copy without either being a compromise.

Text

IBM Plex Mono

Aa Bb Cc 0123

The quick brown fox jumps over the lazy dog — 1234567890

Every reference, case width, reserve and price on the site. A specification sheet is set in a mono in the real world because columns align without a table and a figure never changes width as it changes value. It is also, deliberately, not charming: nothing here should be trying to talk anybody into the number.

05 — What it does

The part a template cannot copy.

A loupe, not a lightbox

Hover the plate and a magnifier follows the cursor at three times, drawn from the full-resolution file, while the whole plate tilts three degrees with a sheen sliding across it — the object catching the light as you turn it. On a phone there is no cursor to chase, so a tap holds the magnification where you put it.

Four references, one page

The plinths change the product page above them in place rather than navigating away, because choosing between a 36mm hand-wound and a 41mm chronograph is an act of comparison and a page load throws comparison away. The trade — no deep link to a single reference — is the right one at four pieces and would be the wrong one at forty.

A bag that behaves like one

Add-to-cart throws a plate of the watch across the page into the bag, the badge flinches as it lands, quantities merge by variant, and the drawer locks the page behind it, closes on Escape and hands focus back to the button that opened it. That last sentence is the part no template gets right.

Two steps, and both of them can fail

Where it goes, then how it is paid — no account, no newsletter tick, no shipping radio group between a person and a $6,200 watch. Both steps validate on submit and say something a human wrote. No payment is taken and the page says so plainly.