Design System: F · Proof
The tokens above are the largest value of each fluid size. The CSS clamps them, for example display type is clamp(2.5rem, 6.7vw, 7.25rem) and a tile's print border is clamp(11px, 8%, 16px).
Overview
Creative North Star: "The Proof Sheet"
Joe's pitch to Mike is that every piece is photographed exactly as it's sold, a promise that gets more valuable as AI imagery floods the market. F · Proof makes that promise the look of the store, in Mike's taste at full volume: white borders, mostly monochrome, clean lines, open space, less is more.
Every photograph is a print. It sits whole in a generous white border, with crop marks drawn around it in code, a frame number and a film-edge code underneath, on a W+R grey contact sheet. The basin is the only colour on the page. Nothing in F is generated: the flare is typographic and photographic grammar (crop and registration marks, step wedge, sprocket marks, frame numbers) drawn in CSS from real data, plus one signature, the loupe.
F keeps V1's wireframe exactly. Every route has the same sections in the same order, with the same content and the same columns at 390 and 1440, as /v1/. tools/wireframe-check.mjs proves it. What changes is how the store is shown.
Key Characteristics:
- Real photographs only, untouched, shown whole in white borders. No filters, blend modes or recolouring.
- A loupe that magnifies the real photo at its full resolution: "See the real surface".
- Contact sheets, not galleries: frame numbers, film-edge codes, crop marks.
- V1's own faces, pushed hard in scale.
- Space Mono for film-edge codes and frame numbers as well as V1's labels and prices.
- The voice is short, plain and exact: "This exact piece." "Photographed as sold." "Shot to come."
Colors
Monochrome, from W+R's own greys plus Paper and Ink. No accent colour.
Primary
- Ink (#212121, also the
primary token): all text, rules, crop marks, buttons, selected chips, the Sold badge.
- Paper (#FEFEFE): the page, and the print: the white border around every photograph.
Secondary
- White (#DCDDD8): W+R's own pale concrete grey, used as the contact sheet the prints lie on. Only Ink text sits on it.
- Gray (#696667): secondary text on Paper (breadcrumbs, colour names, hints).
Tertiary
- Natural (#ABABAB) and Stone (#8B8B8B): only the middle steps of the step wedge on the wordmark band.
- Black (#1A1A1A): the last step of the wedge, the 120ms shutter blink and the backdrop of the inspect dialog.
Named Rules
The Basin Is The Colour Rule. The interface has no hue. Colour comes only from the photographs and, on the made-to-order pages, from W+R's real colour samples. MOK pages keep MOK's own orange, cream and type, as the brand rules say.
The Contact Sheet Rule. Ink text only on White. Gray on White is 4.16:1 and fails, so Gray is only ever used on Paper.
Typography
Display and body: AUTHENTIC Sans, light (300) for everything spoken, 400 for running text, never bold. Labels, prices, measurements, frame numbers and film-edge codes: Space Mono, uppercase.
Character: V1's two voices, pushed. Display type runs from 2.5rem to 7.25rem (V1: 2.25rem to 5.75rem), tracked at -0.04em with a 0.92 line height. Page and piece titles reach 7rem. The mono stays small and exact, 11px for film-edge codes, so the contrast in scale is the point.
Hierarchy
- Display (300, clamp(2.5rem, 6.7vw, 7.25rem), leading 0.92): the four home route rows.
- Headline (300, clamp(2.75rem, 1.2rem + 6.2vw, 7rem)): page titles and piece titles.
- Title (300, clamp(1.75rem, 1.3rem + 1.9vw, 3.25rem)): section titles.
- Body (400, clamp(1rem, 0.96rem + 0.2vw, 1.1875rem), leading 1.5): running text, prose capped at 62ch.
- Label (Space Mono 400, clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem), tracking 0.06em, uppercase): navigation, buttons, chips, prices, captions.
- Film edge (Space Mono 400, 0.6875rem, tracking 0.08em, uppercase): frame numbers and the code under a print.
Named Rules
The Two Voices Rule. AUTHENTIC Sans says things; Space Mono names and counts things. Never set a sentence in mono apart from a photo caption, and never set a price or measurement in the sans.
The Never Bold Rule. Sans is 300, or 400 for body. No heavier weight exists in the build.
Layout
V1's wireframe, unchanged: a single column of full-width bands, each closed by a 1px ink rule, in a wrapper with a fluid side gutter (16px to 48px). F lifts the 1600px cap so the contact sheet runs to the edge of the window. Grids keep V1's auto-fill rule, so the counts match: 2 columns of frames at 390 and 7 at 1440 on the shop.
Home. The wordmark band (full width, between hairlines, with crop and registration marks), one sentence, then four route rows. Each row is a proof frame at the right: a ready-now piece, a strip of real colour samples for made to order, a real project photograph for bespoke, a real MOK photograph for outdoor kitchens. Then rooms, the shelf, the specifying split, partners and projects, as in V1.
Shop. V1's page head, filters and results. The results are a contact sheet: every piece is a frame with its number (its position in the data, out of 37) and a film-edge code from its W+R name and size. Sold pieces stay on the sheet.
Piece. Two columns at 1440, the gallery on the left and the sticky buy column on the right, where V1 has them. The gallery is a contact strip in Gozney's order: plain-background shots, then scale, then context, then video. A step without a photograph yet is a labelled "Shot to come".
Named Rules
The Wireframe Rule. Imagery may fill or sit behind the blocks V1 already has. F never adds, drops or reorders a section.
Elevation & Depth
Flat. There are no shadows. Depth is the tonal step between Paper (the print) and White (the sheet), and the hairline. The loupe's rim is a Paper outline with a 1px Ink ring, not a shadow.
Named Rules
The Hairline Rule. Separation is a 1px rule, a crop mark or the step from Paper to White. Never a shadow, never a box.
Shapes
Prints, photographs and sheets are square. Pills (999px) are for anything you press: buttons, chips, the Inspect button. Circles (50%) are for badges, the loupe and the registration marks. Crop marks are 1px lines, 6px to 12px long, set 2px to 4px outside the photograph's corners.
Components
The print
The piece's own photograph, shown whole (never cropped, never filtered), inside a paper border of 8% of the card's width (at least 11px, at most 16px) on a tile, and up to 40px on the piece page. Eight 1px Ink hairlines, drawn in CSS, mark the corners outside the photograph. The photograph develops once, the first time it enters the viewport.
The contact sheet
A White (#DCDDD8) ground that paper prints lie on, with 12px to 24px between frames. A tile is a paper card: the print, its film-edge strip, then V1's tile text (name, colour, price and ex-VAT price). Sold tiles keep their photograph untouched and carry V1's circular Sold badge in Ink with Paper text.
The film edge
Under each print: a frame number (07/37, its place in the data), a code from real data (OMOI 420MM, the W+R name and size) and a row of sprocket marks. On the piece page it also names the shot's step. Decorative: the same facts are in the text beside it.
The loupe
The signature. A circular lens magnifies the photograph at its full resolution (one image pixel to one CSS pixel), labelled "See the real surface" and reading "100%".
- Pointer: it follows the cursor over the photo.
- Touch: press and hold; it floats above the finger and goes on release.
- Keyboard: the Inspect button (44px high) opens the photo at 100% in a dialog. Focus is trapped, Escape closes, and focus returns to the button.
The contact strip
The piece gallery in Gozney's order: 01 Plain background, 02 Scale, 03 In a room, 04 Video. A 64px thumbnail per photograph (44px minimum target), the selected one ringed. A missing step is an empty frame drawn as four crop marks beside the line "Shot to come: hand on the rim for scale". Changing the photograph gives a 120ms shutter blink.
Captions
Each photograph says exactly what it is. Photographs of the piece: "This exact piece. Photographed as sold." A group shot: "Shown with others from the same set. Not this exact piece." A lifestyle photograph of the design: "A lifestyle photograph, not this exact piece." A render: "Render. Not a photograph."
Buttons, chips and the rest
V1's: pill buttons (ink fill, paper text, 48px), pill chips (40px), hairline-ruled lists, inputs with a bottom rule, circular badges. Every other V1 page renders in this Chrome with these tokens.
The wordmark band
The full-width wordmark with crop marks in its four corners, registration targets top and bottom centre, a slug line ("Proof · 37 frames · as sold") and a five-step wedge in White, Natural, Stone, Gray and Black. All decorative and aria-hidden.
Do's and Don'ts
Accessibility the build relies on
- Every photograph has alt text. Decorative thumbnails and film-edge marks are empty or aria-hidden.
- Focus is a 2px Ink outline. The Inspect dialog is a native modal
dialog, so focus is trapped and Escape closes it.
- Every pressable element is at least 44px on its short side, except V1's 40px chips.
- Reduced motion: no develop, no shutter blink. Nothing in F loops, so there is nothing to pause.
- Without scripting, every photograph shows.
Do:
- Do show the whole photograph, in a white border, with its crop marks.
- Do build every frame number and film-edge code from the data.
- Do write "Photographed as sold" only under a photograph of that exact piece.
- Do label a missing shot "Shot to come: ..." and leave the frame empty.
- Do keep delivery, lead times, bracket compatibility, defaulted weights and trade terms as "to confirm".
Don't:
- Don't generate, filter, blend or recolour a photograph, or dim a sold piece's photo.
- Don't add colour to the interface.
- Don't use a shadow, a box or a rounded photo.
- Don't put Gray text on the White sheet.
- Don't add, drop or reorder a section against V1.
Feel
Quiet and exact, like a proof sheet under a light. Photographs develop: the first time one enters the viewport it fades up from paper white over about 600ms, once, with opacity alone. Changing the photograph in the piece gallery gives a 120ms shutter blink: a Black flash over the photo, with the new photograph swapped in under it. The loupe follows the cursor without easing. Everything respects prefers-reduced-motion (no develop, no blink), and nothing loops. The voice is short, plain and exact: "This exact piece." "Photographed as sold." "Shot to come."
Colourways
1 · Proof. Monochrome set, white borders; the basin is the only colour. F needs only this one: its job is to answer "can we keep the structure we've already seen and still get the wow?" in Mike's taste, and a second colourway would add colour, which is the one thing Proof refuses. A dark or warm version would be a persona label, not a job, and would fail the squint test against a monochrome page.