Design System

Your licensed OTF files converted to web format and cut down to the characters the site actually uses. Every weight below is the real Gotham, loading from this page.

Scale

Two rules. Uppercase always gets letter-spacing — Gotham's caps are wide and tight tracking makes them illegible at small sizes. And numbers that sit in columns or change in place (prices, bids, countdowns) always use tabular-nums, so a figure never jitters as it updates.

Your brief said not to make everything red. The way to guarantee that is to give each colour one job and never spend it elsewhere. If red appears on a page where nothing is happening live, it has been misused.

Where each one is allowed

The brackets from the logo are the one motif that carries into the interface. Used once per view it reads as identity; stamped on every card it becomes wallpaper. This page uses it exactly twice.

Square corners throughout. Icons sells objects with hard edges — crates, frames, film — and rounded corners read as software. A control says exactly what it does; "Bid Now" is followed by a state that says "You are the high bidder", never "Success".

A collector scanning a catalog needs to know what they are looking at before they read a word. Status is shape and colour first, text second.

The most emotionally loaded element on the site, and the one most likely to be got wrong. It escalates in three stages, and it is never the only thing conveying urgency.

Three rules that are not negotiable. The closing time comes from the server and the browser measures its own clock offset against it — a bidder with a wrong device clock must never be misled about how long they have. The value is announced to screen readers at sensible intervals through aria-live, never conveyed by colour or motion alone, because a bidder using a screen reader has money at stake. And the pulse stops entirely under prefers-reduced-motion while the colour change remains.

The unit the whole catalog is built from. Photography dominates; the interface gets out of its way. Production name above the item name, because a collector searches by title first.

Cards share one object shape: same edges, same inner padding, same baseline for the figure row — so a grid reads as a set rather than a pile. The figure row is pinned to the bottom regardless of how long a title runs, which is why a two-line title never pushes the price out of alignment with its neighbours.

On mobile this sticks to the bottom of the lot page. Your brief was explicit that bid controls must stay easy to use under pressure, so the target sizes here are deliberately larger than the rest of the site.

Note what the panel tells a bidder about someone else: the number of bids, and nothing more. No usernames, no bidder count, no proxy maximums — the losing maximum in the second panel is the viewer's own. That is a design constraint inherited straight from the read layer, and it is a better experience anyway.

Your brief asked for film-inspired motion that feels expensive rather than gimmicky. The discipline: the photograph moves, the interface does not.

Nothing animates on scroll into view. Every element on a page is visible and readable the moment it loads — which matters for a shared link, a screenshot, and a reader who is skimming. Under prefers-reduced-motion all of the above become instant state changes; none of them are load-bearing.