Design history (archive)

Full record of the design process with dates and rejected alternatives. Not needed to build; see HANDOVER.md for the current state.

This document describes the design of the new Robey B2B dealer portal in such a way that it can be built: which files apply, which values are fixed, how components behave, and which questions are still open. It is written to be fed to Claude Code together with the source files.

What this is, and what it is not

The source files are design code: HTML with inline styles, made to show exactly how something looks and feels. It is not production code and must not be copied.

What can be taken over literally:

• All values: colours, spacing, radii, shadows, font sizes, hover behaviour. These are not estimates from an image but the real CSS.
• The structure of each component (which elements, in which order, with which role).
• The behaviour: smart header, hover panels, the stock/preorder toggle, the cart model.
• The texts. They have been thought through and agreed; they do not need to be written again.

What not: inline styles, the absence of components, base64 images, the absence of responsive behaviour and data binding. The stack (headless on Shopify Plus with B2B) calls for components with props and data from the Storefront and Customer Account APIs.

Files

There are three canvases, because the editor loads at most 200 files per canvas: Robey B2B schermen (desktop · 1200+, plus the sketches and proposals), Robey B2B mobiel en tablet (pages Tablet liggend · 900–1199, Tablet staand · 768–899, Mobiel · < 768; separate since 14 September) and Robey B2B archief (older versions). Seeding is done with python3 seed.py canvas.json robey-b2b-schermen.html "Robey B2B schermen", python3 seed.py canvas-mt.json robey-b2b-mobiel-tablet.html "Robey B2B mobiel en tablet" and python3 seed.py canvas-archief.json robey-b2b-archief.html "Robey B2B archief" (only the images the artboards use are included).

Everything is in b2b-design/.

A .dc.html contains a <style> block and then the markup between </helmet> and </x-dc>. Images are separate files next to it.

Breakpoints

Read this first if you are going to build. The artboards are four separate designs at a fixed width; there is not a single media query in them. This table is the missing link: what changes per width, and where that is really a different component rather than the same layout narrower. All numbers are measured from the artboards, not estimated.

The table also runs. proto/prototype-responsive.html is one DOM with exactly these breakpoints as media queries, built on code/tokens.css and code/componenten.css. Drag the window and the indicator at the bottom right says which breakpoint you are in. The CSS in it (rb- classes) is meant to be borrowed; that is the difference from the three fixed prototypes, whose code is throwaway work. On 17 September it was decided that this becomes the only prototype as soon as the product page and cart are in; since 18 September all 22 screens are in it and the three fixed prototypes are frozen as reference per format.

What is really a different component

Not everything that looks different is also different work. Three categories:

One component, different grid. Product tile, collection tiles, personal blocks on the homepage, account lists, Downloads, Klantenservice, Retourneren. Same structure, only the number of columns changes. One responsive implementation is enough here; the artboards show the same parts.

One component, different placement. Cost summary (amounts and totals side by side on desktop, two columns on tablet, stacked on mobile), switch link, PDP gallery, search field. Same content and same data, different layout. One component with two layouts.

Really two components. The size matrix and the cart card. Below 768 the matrix is not a narrower grid but a card per colour that you expand, with size chips and three cells per row; that is a deliberate choice, not a lack of space. Twelve sizes side by side does not work at 390 and an expander does not work at 1440. Count on two implementations here that share the same state. The same goes for the header: the mobile header with overlay is something different from the smart sticky header.

What is not yet fixed

• 1024 to 1199 is drawn as tablet landscape, but on a 1280 laptop you are already in the desktop design. The transition at 1200 has not been tested on a real screen.
• Above 1400 the page does not stretch further: everything sits in a wrap of max 1320 with 40px side space (content 1240). That is deliberate. On 19 September the wrap was briefly 1400 for the product page according to sketch D; Dennis found the narrower width more pleasant to scan for the menu and other pages, so the wrap is back to 1320 and the matrix row on the product page has been made more compact (colour column 140, totals column 150, gap 32) so that D fits with a photo of 369 px. The current B2B has a fixed container of about 1380.
• There is no artboard between 900 and 1199 for Downloads, Retourneren and Klantenservice; those three are so simple that the desktop design scales along (measured: no horizontal overflow down to 820px).
• Measured in the desktop prototype: homepage, catalogue, Downloads and Klantenservice run down to about 820px without horizontal overflow. The product page breaks at 1000px (279px too wide) and the cart at 1000px (222px). That is exactly the matrix.

Check: is the responsive prototype equal to the design?

Comparing by hand is error-prone and slow. That is why a measurement script is included: vergelijk/vergelijk.py opens both prototypes in headless Chrome at 1440 px, records a screenshot and all text lines per screen (position, font size, weight, colour, font family) and reports every difference. A difference of 0 deviating text lines and less than 1% deviating pixels means: equal to the design. On 17 September home is at 0, the product page at 0, Downloads at 0, Productfoto's at 9 lines of 1-2 px and the catalogue at 36 lines of 1-2 px (rounding in the bottom product row).

Two things came out of the design itself in the process: the product card in the catalogue had a different line height on the name than the one on the homepage (PLPD has been aligned with HomeD: line-height:1.35, colour dots 14 px), and the Downloads intro still mentioned forms (now "en de Pricat"). The script also measures at 390 px (against the mobile prototype) and 768 px (against the tablet prototype): python3 vergelijk/vergelijk.py 390 and ... 768. After the corrections of 17 September everything at those widths is within a few pixels; what remains are differences between the artboards themselves, where the responsive prototype follows the desktop choice:

• the order of the collections (mobile and tablet start with Performance 2.0, desktop with Control);
• the articles in "Meest besteld door jou" (most ordered by you) (mobile and tablet show different example articles than desktop; the content is purely illustrative in all prototypes, see below);
• the label below the bags category ("Tassen" on mobile and tablet, "Accessoires" on desktop; decision 18 September: Accessoires, as the responsive prototype already did);
• the mobile product page shows an outlet price for Navy, the desktop does not;
• Productfoto's on mobile shows six of the nine collections, the responsive prototype all nine;
• the tablet design has no copyright line in the footer; the responsive prototype does have it;
• the breadcrumb on the mobile product page starts without "Home".

Decisions 17 September on the six differences: collections in the desktop order; "Meest besteld" with the desktop examples, with the note that the articles in the product carousels ("Meest besteld door jou", "Vaak samen besteld" (often ordered together)) are never fixed: they only illustrate the design and are filled in the build with the articles this retailer actually ordered most, or with a selection managed by Robey; no outlet price on Navy; all nine collections at Productfoto's; the copyright line everywhere. The label below the bags category became Accessoires on 18 September. The fixed mobile and tablet prototypes are frozen and do not follow these decisions; the responsive prototype does. Search works at every width: below 1200 px the search panel opens below the search row.

Decision 17 September: on mobile the filter and sort buttons on the catalogue together fill the width (each half); from 768 px they sit at natural width, as in the tablet design.

Breakpoint choices after the scan of 17 September: the desktop header with navigation in the bar and the catalogue with filter column only start at 1200 px; from 768 to 1199 px there is the tablet header (logo, buttons, hamburger, search row) and the catalogue with collapsed filters and three tiles. Matrix cells are always 105 px wide from 768 px with four per row and the totals on the right, exactly as on desktop; at 768 px that fits exactly (140 + 4 × 105 + 126). Below 1200 px only the bar with logo and buttons is sticky, the search row scrolls along and the shadow only appears after scrolling, as in the mobile design. Between 1200 and 1340 px the gallery shrinks from 430 to 300 px so that the matrix (150 + 4 × 105 + 180) fits. The jump to the colour row on a colour choice only happens on desktop, where the gallery is fixed; below that only the photo changes.

Decision 17 September on the product card: the price gets the same font size as the product title (15 px on desktop, 13 px on mobile and tablet), also in the product sliders; the designs had 16 and 14 px. The struck-through old price sits next to the price on desktop (13 px, gray) and below it on mobile (12 px).

Two things in the fixed prototypes themselves: the mobile and the tablet prototype put the white bar 6 px lower than their own artboards (the artboards have been followed), and the cart button in the header is 1 to 2 px off on mobile due to rounding.

Mijn account, measured 17 September (late) at 1440, 768 and 390 px: the seven account screens are in place at all three widths; what the script reports are deliberate choices. The status line "2 facturen openstaand" (2 invoices outstanding) from the mobile and tablet designs has been left out everywhere by decision of 17 September (late), as in AccountA; the column headings are Order and Zending (not Ordernummer, Zendingsnr. or Order / webshopnr.), the search field at Zendingen is called "Zoek op zending, order of track & trace", and the webshop number no longer sits as a second line below the order number, because it is the same number. Bold cells are 600 (AccountA) where the tablet and mobile designs use 700; links in tables and cards are gray as on desktop (tablet and mobile had them black); the action menu at a draft order is closed (in ConceptordersA open for illustration); the cost summary of the order is the cart component, so with the labels above the amounts instead of the two columns from OrderA; and at 768 px the totals of a colour row sit to the right of the cells (four per row of 105 px, the decision of 17 September) where TabletOrder768 drew six narrower cells and the totals below the photo. On mobile the button Exporteer is missing (MobielOrders does not have it, the other mobile lists do), and the block Facturen sits on the order detail separately below Zendingen instead of in the meta block. vergelijk/scan.mjs finds no more overflow at the fourteen widths; for that the tables between 1200 and 1339 px had to keep the tablet sizes and let the status wrap at 768 px.

Tokens

Tokens as a file

The tables below also exist as code in b2b-design/code/, generated with bouw-tokens.py from the same source as this document. So copying by hand is not necessary.

The build fails if a colour value does not occur in the artboards, so that the files cannot silently drift out of step with the design.

This is deliberately not the layout of whole pages: those are rebuilt with real data, and the prototype code is throwaway work (inline styles, generated). Tokens and the parts with many states are stable, and that is exactly where things go wrong otherwise.

Colour

Eight gray values, no others. Every gray on the screen is one of these.

Two documented exceptions: #EDEDED for the search bar (must be lighter than gray-1 so as not to look like a surface) and #E9E9E9 as hover tint of the personal blocks (gray-1 → one step darker).

Other actions are black or white with a border. "Bestel nu" (order now) on the banner is white on the photo.

Product colours (swatches) come from the product data, one hex value per Robey colour code; see Data questions.

Typography

• Headings: Univers Black, fallback Arial Black. Uppercase, letter-spacing:-0.15px. Page heading 30/36, banner heading 41/48, section heading 22/32. The @font-face block with the Univers data is in HomeD.dc.html.
• Everything else: Inter 400–900 via Google Fonts, fallback Helvetica Neue/Arial. Base 15px, line-height:1.6, colour black.
• Scale: 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 26 · 30 · 41. The source files have been on this scale since 9 September.
• Uppercase labels (ACCOUNT, INSTELLINGEN, ARTIKELEN): 11px 700 letter-spacing:.07em.
• Amounts: 800, letter-spacing:-0.005em, font-variant-numeric:tabular-nums where digits are in columns. Notation € 2.246,40 (space after the euro sign, full stop as thousands separator, comma as decimal).

Radius

Nested: outer radius minus padding (the knob in the toggle is 10 − 4 = 6).

Shadow

• White bar: 0 2px 6px rgba(18,18,18,.1)
• Drop-down panels (account, minicart, search): 0 14px 30px -10px rgba(18,18,18,.28), with clip-path:inset(0 -40px -40px -40px) so that the shadow does not rise above the bar
• Mega menu: 0 18px 30px -22px rgba(18,18,18,.4) plus border-bottom:1px solid gray-2
• Matrix cell: 0 1px 2px rgba(0,0,0,.16)
• Active button in the toggle: 0 1px 2px rgba(0,0,0,.12)

Sizes and layers

• Content: max-width:1320px (token --robey-size-wrap; briefly 1400 on 19 September), padding:0 40px.
• White bar: 86px high; search bar and buttons 48px; navlinks 46px.
• Z-index: white bar 20, search panel 26 (must rise above the bar shadow). Cost summary in the cart is position:sticky; bottom:0 without z-index.
• PDP photo column: position:sticky; top:110px (bar plus 24px); becomes 24px when the bar is gone.

Components

Black bar

At the top, black, one line. Left: checkmark + "Gratis levering in Nederland vanaf € 150" (free delivery in the Netherlands from € 150; bold "Gratis"). Right: Downloads · Retourneren · Klantenservice · flag NL with a small arrow. Links white with opacity:.85, hover opacity:1 and underline (text-underline-offset:3px).

White bar (header)

Sticky. From left to right: logo (link to home) · navlinks Catalogus, Custom Made, Outlet (Outlet in red) · search bar · account button · cart button.

• Navlink: 15/600, hover underlined with text-underline-offset:7px; text-decoration-thickness:2px. Catalogus opens the mega menu.
• Search bar: #EDEDED, 999px, 48px high, padding:0 20px 0 28px, text 1px optically up (margin-top:-1px, the x-height of Inter otherwise sits just below the middle), placeholder "Zoek op product of artikelnummer" (search by product or article number), magnifying glass on the right. Hover #E4E4E4. On focus: white with box-shadow:0 0 0 2px #121212 inset, and the suggestion panel opens below the width of the search bar itself (not page-wide). Behaviour (works like this in the prototype): an empty field shows POPULAIR (four articles and one collection); typing filters live on name and article number, shows at most five articles, matching collections and "Alle N resultaten voor '…'" (all N results for '…'); no match gives one line of explanation with the tip to try an article number. The panel closes when the mouse leaves the search area (220ms delay), on Escape and on a click outside it.
• Account button (.hpil): white, border gray-2, 10px, 48px high, padding:0 18px, person icon + first name + small arrow. Hover: gray-1, border gray-3.
• Cart button (.hpil-goud): gold, white text, same size; cart icon + (stuks) + small arrow. Hover gold-hover.

Rule: a button in the header opens a card below itself (account, cart, search). The mega menu is the exception and is page-wide.

Smart header

The white bar slides away (transform:translateY(-100%), 220ms ease) as soon as the user scrolls down more than 4px and is deeper than 220px. It comes back at 4px up, and is always present when the page is above 120px. Same behaviour everywhere, no exceptions per page. The black bar simply scrolls along (is not sticky). The cost summary in the cart does stay sticky at the bottom: that is the action of the page, not navigation.

Implementation in bouw-prototype.py, function kopBijwerken.

Mega menu

Below Catalogus, page-wide, white, border-bottom gray-2. Four columns (repeat(4, minmax(0,1fr)), gap 32, padding 34px 40px 38px). Column heading 14/700 black, links 14 gray-6 line-height:2.1, hover gold. Columns: Kleding (Shirts, Shorts, Trainingstops, Broeken, Jassen, Polo's, Sweats & hoodies, Onderkleding) · Accessoires · Collecties (Performance 2.0, Crossbar, Control, Pro, Goalkeeper, Women, Off Pitch, Tennis & Padel, Gym) · Snel naar (Nieuw seizoen 26/27, Catalogus PDF, Pricat, Voorraadlijst; the last one to be verified).

Account panel

Below the account button, 300px wide, white, border-radius:0 0 10px 10px. From top to bottom: name 16/700 · list Orders en facturen, Nalevering, Zendingen, Conceptorders, Creditnota's, Mijn gegevens (.acc: 14 gray-6 line-height:29px, hover gold; no counters) · line · Prijzen verbergen (hide prices) with a slider (34×20, gray-3, knob 16px white) · gray-1 block with shop name 14/700, Accountnr. 12 gray-6 and link Wisselen (.lnk, black underlined, not gold) · line · Uitloggen 14/600 with icon. Hover on the account button opens the panel; a click on the button goes to Orders en facturen. There is no separate account overview page: the personal blocks on the homepage are the overview.

Removing an article in the cart

Via the options menu per article, with confirmation; not with a separate button (decision 18 September, after a day of back and forth). On the right in the card header is a button with three dots: a white circle with border gray-2 of 32 px with three filled dots (icon 20 px, dots 4 px; outlined dots merged at this size) at all widths; hover border and dots black, always visible so that it reads as a button, which opens the same menu as at a draft order: Naar productpagina (to product page) · Toon alle kleuren (show all colours; becomes Verberg lege kleuren, hide empty colours, as soon as they are shown) · line · Artikel verwijderen (remove article, red). Removing asks for confirmation in the same dialog as Winkelwagen legen ("Artikel verwijderen? Alle aantallen van Crossbar Shirt in deze winkelwagen gaan op 0.", button Verwijderen) and then removes the card immediately. The current B2B also has this menu (three dots to the left of the name, with Details and Verwijder); so dealers are used to it. Why a menu and not a button: two taps (open, choose) plus a confirmation prevent the mis-tap that a trash can on a phone invites, it costs no space, and it gives a place to more than removing. In addition, the rule remains that the quantities are the cart: if all sizes of an article are at 0, the card stays as long as you are on the page, faded (header at 55% opacity) with "Geen aantallen meer. Dit artikel verdwijnt zodra je de winkelwagen verlaat." (No quantities left. This article disappears as soon as you leave the cart.), and the article is gone on leaving or reopening. That way you can move quantities between colours without the card falling away under your hands, and a card may show only empty colours after "Toon de overige kleuren". Colour rows are only hidden, never removed; by default you see the ordered colours, with "Toon de overige N kleuren" per article and Weergave › Verberg lege kleuren for everything at once (not remembered per account). The empty state only appears when no card is visible any more. History: until 16 September a trash can of 18 px next to the collapse arrow, then the text link "Verwijderen", on 17 September a trash can of 20 px, on 18 September briefly gone entirely, and the same day the options menu. Winkelwagen legen (with confirmation) remains for the big job.

Minicart

Below the cart button, 360px wide. With two filled carts: heading "Mijn winkelwagens" (my carts) 16/700, below it "Twee winkelwagens, elk apart af te rekenen" (two carts, each checked out separately) 13 gray-6, then a gray-1 surface with a white card per cart (border gray-2, 5px, padding:12px 14px): "Winkelwagen" 14/700 with "79 stuks · € 590,92" 12 gray-6 below it; on the right, vertically centred, the cart label (22px variant, 12/600) and a chevron gray-6. Hover on the card: background #FAFAFA, border gray-3. The card opens the cart page on that cart. Deliberately no Afrekenen button in the minicart: you look first, checking out you do on the page (14 September). With one cart: heading "Mijn winkelwagen", "7 artikelen · 219 stuks", gray-1 surface with Subtotaal 18/800 and the gold button "Bekijk winkelwagen" (view cart; full width, 3px, 15/700). The cart button does not navigate anywhere (15 September): on desktop a click opens the panel (it also opens on hover), and the dealer chooses there which cart he views; with one cart there is the button "Bekijk winkelwagen". On tablet a tap on the cart button unfolds a panel at the top right (340px, 10px, shadow like the desktop panels) with the same heading and cards; on mobile a sheet slides up (top radius 16px, grip, dim rgba(18,18,18,.45)). Also with one cart: then the sheet shows one row and the heading "Mijn winkelwagen" (at first the button then went directly to the page; one behaviour for the button is clearer, 15 September). Only with an empty cart does the button go directly to the empty page. Tap outside the panel closes it.

Search suggestions

Card below the search bar, same width. Groups with heading 11/700 uppercase gray-5: ARTIKELEN (row: 40×49 photo, name 13.5/600, article number 11.5 gray-6, price on the right 13.5/700, red if reduced), COLLECTIES, and at the bottom "Alle N resultaten voor 'term'" with arrow. Row hover gray-1, 5px.

Homepage

Order: banner (300px high, photo, heading 41px white, black button "Bestel nu" with white text; white on white merged with the heading, and black keeps the gold button exclusive for the cart) → "Welkom terug, Jesper" (welcome back, Jesper) with on the right the links Orders en facturen │ Conceptorders │ Zendingen → three personal blocks → Collecties → Meest besteld door jou (product tiles) → eight category circles → footer.

Personal blocks (16 September, fourth version): always three blocks, in this order: Conceptorders ("2 conceptorders" 15/700, "Laatst bewerkt 12 september" (last edited 12 September) 12 gray-6 (title and pieces of the last draft order have been left out: they are about one draft while the count is about all of them, and the line broke over two lines), three thumbnails from the last draft order, "+6"), Nalevering, Laatste bestelling (last order). Unfinished work first, then what is on its way, then what has happened. The draft orders block opens the overview of all draft orders (newest at the top), not directly the last one. The cart block is gone: the cart is already at the top right in the gold button, and since "Welkom terug" the row reads as a dashboard. To the right of "Welkom terug" there are still two links, Orders en facturen and Zendingen, the most used; "Conceptorders" is gone there because the block already does it, and "Creditnota's" is not important enough for the homepage (16 September). The empty state is block D on LegeStaten: "Nog geen conceptorders" (no draft orders yet) with below it "Bewaar een winkelwagen om later verder te gaan" (save a cart to continue later), so that the block explains its function on day one. Previous setups (one cart block, four blocks, one block with two lines) are in SchetsConceptblok and the archive. Newsletter button in the footer: white with black text (16 September; was gold, but gold remains exclusive for cart and checkout).

Sliders on the homepage

Collections and categories are sliders that look like a grid: on desktop four collections and eight categories in view, with an arrow on the right (and on the left once you have shifted) that moves one tile per click; on tablet and mobile swiping with peek. The slider contains more than is in view: nine collections (Performance 2.0, Crossbar, Control, Goalkeeper, Pro, Women, Tennis & Padel, Gym, Off Pitch) and eleven categories (the eight in view plus Polo's, Regenkleding, Ballen). Tile width via flex:0 0 calc((100% - (n - 1) * gap) / n), so that the grid stays exactly the same. Images of the collections: the collection banners from robeysportswear.com.

Personal blocks

Three side by side (repeat(3, minmax(0,1fr)), gap 24). Block: gray-1, 10px, padding:18px 22px 18px 24px, align-items:flex-start, no icons. Content: title 15/700 ("219 stuks in je winkelwagen", 219 pieces in your cart), line 12 gray-6 ("€ 2.690,24 · verder bestellen", continue ordering), three thumbnails 32×39 with white border and +N. At the bottom right a white circle 32px with arrow (.ppijl). Hover: whole block #E9E9E9, arrow does not move, title does not become gold.

Order: 1 cart, 2 backorder, 3 last order. Example state of the cart: 79 pieces in stock (Crossbar Shirt, Grip Socks) and 140 pieces in preorder (three Custom Made articles of BSC 68); the PDP of the Performance 2.0 Shirt starts empty. Blocks without thumbnails (.kort) centre vertically.

Empty states (from Leeg.dc.html): cart empty → "Je winkelwagen is leeg" (your cart is empty) with link Naar de catalogus; no backorder → "Niets in nalevering" (nothing on backorder), no arrow; never ordered → reference to the stock list; everything empty → welcome block "Welkom bij Robey B2B" with catalogue, size charts and pricat.

Product tile

Column with gap 9. Photo 4:5 on gray-1 (always the product photo, file name Product_01; model photos only after that, also in the gallery of the product page), label at the bottom left (11/700, black; Outlet red #D90606; Custom Made gold). Name 15/600, article number 12 gray-6 letter-spacing:.03em, price 16/700, "Adviesprijs € …" (RRP) 12 gray-6. Price rule: the tile shows exactly what the PDP shows: with a size surcharge the range lowest – highest (€ 12,48 – € 12,98, RRP € 24,95 – € 25,95), otherwise one number; reduced: red range with the struck-through old range 13/500 gray-5 next to it (flex-wrap, column-gap:8px, wraps to a second line if the column is too narrow; on mobile always stacked). The same rule applies to search suggestions and sliders. row of colour swatches 15px round. Hover: name gold. No heart/wishlist.

Colour swatches on the tile: a function, not decoration (19 September). The swatches are those of the article's product page, in the same order and with the same two-tone swatches. They sit on one line: as many as fit, but never more than nine, followed by a button "+N" that expands the rest (the row then continues on a second line). A click on a swatch switches the tile photo to that colour and marks the swatch (black ring at 2 px); a click on the tile then opens the product page with that colour chosen, without jumping to the colour row. Sizes: on a phone (below 768 px) 24 px with 6 px spacing on at most two lines, so that they can be tapped (iPhone 13 mini, tile 166 px: five per line, so the nine standard colours of the Crossbar fit without +N and with more colours there are eight plus +N); from 768 px 18 px with 6 px spacing on one line (desktop, tile 312 px: nine plus +N; homepage slider, tile 229 px: seven plus +N). Earlier the swatches were 13/14 px, desktop showed all swatches and mobile six; on 19 September they were briefly at a maximum of six everywhere and then at 16 px. Dennis: mobile weighs less here, desktop must work best; nine is exactly the standard series of the Crossbar.

Which colours on the tile (19 September). For the four articles with a product page in the prototype the swatches come from that page. For the other eight catalogue articles and the homepage slider the colours are as the current B2B showed them on 19 September, in the same order, in a colour table per article in the generator (ARTIKEL_KLEUREN) with a table of Robey colour codes and swatches (KLEUREN); there is no photo per colour for those, so the tile photo does not switch there yet. New codes in that table: 347 Storm Blue, 708 Maroon, 358 Tourmaline, 362 True, 363 Gull, 563 Twig; their swatches are an approximation. In the portal, colours, order and photo per colour come from Shopify (one product per colour with tag color and MasterProductCode). For the build: the swatches are buttons that go before the tile link, so the tile is no longer a single <a> but a card with a link and a row of buttons; in the prototype JavaScript intercepts the click. Every colour has its own product with its own photo in Shopify, so the photo switch can work everywhere; in the prototype it only works for the four articles with a product page.

Catalogue (PLP)

Two columns: filters 220px, results, gap 32. Heading on the left "Catalogus (210)", on the right view switch (grid/list) and sorting "Uitgelicht" (featured). Grid three columns, gap 34×26. Below the grid pagination (48px above it, 84px below the page): on the left "1–12 van 210 artikelen" 13 gray-6, on the right buttons 38px (Vorige (previous) disabled gray-4/gray-2, active page black with white text, 1 2 3 4 … 18, Volgende (next)). Pagination centred below the product column: first "1–12 van 210 artikelen", below it the buttons. In design and prototype twelve articles per page (file size); in production 48 per page. On tablet and mobile a button "Toon meer" (show more) instead of pagination, because there you scroll instead of paging.

Filters: block "Toegepaste filters" (applied filters) with chips (gray-1, 3px, 13px, cross) and "Alles wissen" (clear all), only visible when something is active. Groups with heading 15/600 and small arrow, border-top gray-2, padding:16px 0 18px, in this order: Categorie (Shirts, Shorts, Pants, Training tops, Jackets, Baselayers, Polo's, Sweats & hoodies, Accessoires, Skirts) · Seizoen (Nieuw 26/27, Seizoen 25/26, Doorlopend, Outlet) · Collectie (the same nine as in the menu: Performance 2.0, Crossbar, Control, Pro, Goalkeeper, Women, Off Pitch, Tennis & Padel, Gym) · Geslacht (Heren, Dames, Junior) · Kleur (swatches 24px; filter on a colour, and every tile shows the article in that colour as its main photo, with all swatches below it; if an article has several matching colours, the first with stock) · Maat (buttons 13/500, border gray-3, 3px; active black; sits at the bottom because it will probably be dropped). No Merk (brand) and (since 14 September) no Beschikbaarheid (availability): backorder is a property of a size, not of an article, and the orange cell already says it. Clubs (the amateur clubs of this dealer, four names + "Alle N clubs") is only in the Custom Made catalogue, as the first group. Checkmark 18px, border gray-3, active black with white check. Counts on the right 12 gray-5.

Outlet

Own page behind the red navlink Outlet, with the same shell as the catalogue: filter column 220px, grid of three (tablet three, mobile two), same tile, same pagination. Heading "Outlet (46)" with one line of explanation below it (14 gray-6, max 640px): "Restanten en uitlopende artikelen, zolang de voorraad strekt. Alleen uit voorraad te bestellen – geen nalevering." (Remainders and discontinued articles, while stocks last. Only to be ordered from stock, no backorder.) On tablet that line sits below the heading line and not next to it, otherwise it collides with Filters and Sorteren.

• Label: red #D90606 with white text, "Outlet", at the bottom left on the photo, the same place and form as the black "Nieuw 26/27". The label belongs to the article, not to this page: it travels along to the catalogue, the search results, the sliders on the homepage and the search suggestions.
• Price: outlet price red #D90606 16/700, after it the old price struck through 13/500 gray-5 (on mobile below it), below that "Adviesprijs € …" 12 gray-6. The struck-through price is gray and not red: red is the new price.
• Colour swatches: only the colours that are still in stock. In the catalogue that is often eleven, in the outlet usually one; that difference is information, not an error.
• Filters: Korting (discount) as the first group (−60%, −50%), what a dealer scans for and what the current B2B does not have. Seizoen and Collectie are dropped (everything here is discontinued). Categorie, Geslacht, Kleur and Maat remain, with the counts of the real outlet.
• Order type: outlet is by definition stock. No preorder and no backorder; a size that is sold out is sold out. On the PDP that simply means no label and no toggle, just like on a catalogue article (decision 14 September); the difference is in the matrix, see below.
• The page comes in the navigation at the same place as now (third navlink, red) and is clickable in all three prototypes.
• Photos: Robey's variant photos are on white and fill the image more fully than the catalogue photos. They are converted to the catalogue treatment (white to gray-1, product at 79% of the height with 10% air above, 4:5) with maak-outletfotos.py; the same treatment as the Custom Made drawings. For the whole outlet that is a batch, just like the 6213 Custom Made photos.
• Outlet PDP (MainF): the same PDP as a catalogue article, with three differences. The red Outlet label sits per colour row, below the colour name and above the price, just as in the cart, because markdowns happen per colour; not next to the article number, where the red unit price and the breadcrumb already say it. The unit price is red with the old price struck through, also per colour row (junior is cheaper than senior). And per colour only the sizes that still have stock. No empty cells for sold-out sizes, no orange cells, no backorder line, and in the size panel no "Beschikbaar vanaf" (available from): an outlet size gets no new delivery dates. Below the prices one line of explanation: Outlet: zolang de voorraad strekt. Per kleur staan alleen de maten die er nog liggen; wat op is komt niet terug. (Outlet: while stocks last. Per colour only the sizes still in stock are shown; what is sold out does not come back.)
• In the cart: the red Outlet label sits below the colour name in the colour row, not next to the article name; markdowns happen per colour, not per article. The colour row there also shows the red price with the old price struck through; the card line keeps the range of the whole article. Example on the artboards: Playmaker Training Shirt, colour 300 Navy, 24 pieces for € 138,96.
• Price per colour on the PDP: junior (116–164) is cheaper than senior. If a colour has both, the colour row shows the range with the old range struck through below it; if it has only one, then one amount. That does not apply only to outlet: it is the rule for every article with a price break.

Search results

After Enter in the search bar or via "Alle resultaten voor …" in the search panel. The same shell as the catalogue (filter column 220, grid three columns, view and sorting), with: the search term stays in the search field; heading "Resultaten voor 'term'" 30px with the count as 14px gray after it. No collection card above the grid. Search covers name, article number, colour name and EAN; an exact article number opens the product page directly. Sorting by default on relevance. One tile per article (not per colour) in the featured colour, with the colour swatches on the tile; the featured colour is configurable per article (see data questions). Also applies to the catalogue. Search panel without a search term: only the first four articles of "Meest besteld door jou", no collections; with a search term: articles plus matching collections.

Empty states

Rule for every page without content: the same heading as the filled page, below it centred (max 560px) a heading 20/700, one sentence 14 gray-6, one black button (44px) with the logical next step. No icons, no links below the button. Never an empty grid or an empty table without text. Worked out in LegeStaten.dc.html: search without matches (with spelling suggestion), empty cart (button to the catalogue), no orders yet (table header stays, button to the catalogue), nothing on backorder (one line, no button). A catalogue without results does not occur: a filter value with counter 0 for the current selection is disabled (gray-4, not clickable) and the counters are recalculated after every choice. Error and loading states have not been drawn; proposal: yellow bar at the top with message and button Opnieuw (retry), the page stays in place.

Product page (PDP)

Breadcrumb Home / Catalogus / product name. On the left the photo column (sticky): large photo, below it thumbnails 60×75 (active outline:1px solid black). On the right: heading 30px, article number as black label 12/600, specifications in two columns 150px + value (Stukprijs (unit price), Adviesprijs (RRP), Eenheid (unit), …), below that the line Kleur: 900 Black (without the number of colours, 14 September) with the colour swatches (24px, .sw, active outline:1px solid; outline-offset:2px) directly below it, aligned with the value column (margin-left:162px = label column 150 + gap 12, so that they sit straight below "900 Black"; 14 September), above the toggle; the swatches were at first below the photos, but they determine what the matrix shows and so belong with the choices on the right (14 September; on tablet it was already like that, on mobile they stay below the photo); two-tone articles as linear-gradient(135deg, #121212 0 50%, ACCENT 50% 100%)).

A click on a colour swatch switches the gallery and scrolls the corresponding colour row in the matrix to about a third of the screen (scroll-margin-top:280px on the anchor).

Order type label and toggle (decision 14 September, see SchetsOrdertypes; the old PDP with a toggle on every article is in the archive as MainD-schakelaar). A catalogue article shows no label, no toggle and no explanatory sentence (14 September): the cell itself says via colour and ⓘ what a size does, and the backorder subcount appears as soon as a size that is sold out is filled in. A separate label "Voorraad" read as a stock notice ("this article is in stock"), which misleads as soon as a size is sold out, and the order type only matters in the cart (14 September). Only a Custom Made article, which can be delivered both from stock and produced, gets the toggle, with above it the heading ORDERTYPE (11/700 uppercase gray-6), so that the buttons read as a choice of order type and not as a filter (example MainE: BSC 68 Home LS; the product photos of Custom Made are drawings, square on white; the portal shows them at 4:5 with gray-1 as background, just like the catalogue photos): gray-1 surface 10px with two buttons 36px high, 14/600; active white with shadow. Each button: dot (green / blue) + name + counter "N stuks" in the colour of the mode, hidden at 0. Below it one line of explanation 13 gray-6:

• Voorraad: Levering uit onze voorraad. Maten die op zijn worden nageleverd zodra ze zijn aangevuld. (Delivery from our stock. Sizes that are sold out are delivered later once they have been replenished.) (only still on the Custom Made PDP below the toggle; left out on catalogue articles since 14 September)
• Voorverkoop: Wordt na bestelling geproduceerd. (Produced after ordering.) (the delivery date was removed on 14 September; it is in the size panel per size)

Price is the same in both modes. By default Voorraad is on. The second order type is called Voorverkoop, as in the current B2B (decision 14 September on the buyer's advice). In between, "Productie" was considered because dealers accidentally chose Voorverkoop; that misunderstanding, however, was in the button, not in the word: as long as every catalogue article had a Voorverkoop button, it was clicked. Now that only Custom Made has the choice, the familiar word (dealers, sales, ERP) weighs more heavily. Also weighed and rejected: "Productie" (businesslike, unfamiliar), "Op bestelling" (you order stock too), "Pre-order" (English, means reserving before launch), "Voororder" (looks like Voorraad), "Uit voorraad" (promises immediate delivery) and "Nieuwe productie" (evokes a new collection). In the cart the orders are called Voorraad and Voorverkoop: the same stem as on the PDP, that matters more than short.

The label is called Voorraad, not "Uit voorraad" (decision 11 September). "Uit voorraad" reads as a promise of immediate delivery, and that is not true for a size that is sold out: it is delivered later within the same order flow. The two modes remain, because they are about delivery and invoicing (from our stock, including what is still coming in, versus specially produced), not about "now" and "later". Backorder subcount (chosen 11 September, see SchetsNalevering): as soon as there are pieces in stock mode in cells of a size that is sold out (orange), a line in pieces with the orange 8px dot appears in three places: below the explanation of the toggle "6 van de 30 stuks in nalevering · volgen zodra ze binnen zijn" (6 of the 30 pieces on backorder · follow as soon as they are in; 13px, number 600 black); in the section heading Voorraad of the cart an orange-tint chip (24px, 3px, 12/600) "12 in nalevering" next to the counter (on mobile a line below the section heading); in the cost summary a sub-line 12 gray-6 below Voorraad "waarvan 12 in nalevering" (of which 12 on backorder). Hidden at 0. Not in the header dropdown and not after the order, where order detail and Nalevering show it per shipment and per line. In the checkout the same sub-line if Shopify allows it. Data questions that go with this: can the Shopify checkout show an extra line in the summary, and is backorder invoiced separately (then the subcount belongs in euros instead of pieces).

Matrix: a row per colour (border-bottom gray-2): left column 150px with photo 64×80, colour code 11 gray-6, colour name 14/600, price 12 gray-6; then the grid of cells (105px wide, gap 6); on the right a column 130px with Aantal (quantity) and Prijs (price) of the row. Cell (5px, shadow): size label 14/700 on gray-1 with info icon (opens the size panel, see below) · stock line 26px high 11/600 gray-6 with "(19)" · input field 45px with indicator line 2px at the top. States:

Focus: three-sided inner border of 2px in the indicator colour (box-shadow:inset 2px 0 0, inset -2px 0 0, inset 0 -2px 0). Digits only, no leading zeros, placeholder 0 in gray-4.

Below the matrix the slider "Vaak samen besteld" (often ordered together; section heading 20/700, tiles as on the PLP).

Confirmation below the matrix (18 September). There is no "In winkelwagen" button: a quantity in a cell is in the cart immediately. That is why below the matrix, right-aligned, there is the line "✓ Automatisch toegevoegd aan je winkelwagen" (automatically added to your cart; 13 px, 600) with the link "Bekijk winkelwagen" (gray-6, underlined; opens the cart of the order type you were typing in). The line is state, not a notification that disappears: it is there as soon as there is a quantity greater than 0 anywhere on this product page, also when you come back to an article that is already in the cart, and goes away when everything is back to 0. No toast, because that disappears exactly at the moment someone is looking at the matrix, and no colour, because the gold counter in the header already counts along. Taken from the current B2B, which shows "Artikelen zijn automatisch toegevoegd aan de winkelmand" at the bottom right after filling in; here shorter and with winkelwagen instead of winkelmand (canonical term).

Two small decisions (18 September). The Custom Made product page starts at 0 in the prototype, also for Voorverkoop: the preorder card of that article (CM78500, 60 pieces) has become an empty mirrored card in the responsive prototype, so that whoever tests it for the first time sees the interaction come into being; the preorder cart therefore counts 80 instead of 140 pieces. The counter on the order type button ("12 stuks" in the coloured badge) shows only the number below 900 px, as the mobile design already did.

Last ordered: no (18 September). A dealer suggested a line "laatst besteld op … in order …" (last ordered on … in order …) on the product page. Built briefly and removed again: on the product page it distracts more than it delivers. The question "when did I last order this" is answered by searching by product in Orders en facturen. Sketch: smaller photo and wide matrix (18 September, open). At Dennis's request SchetsPDPB is on the desktop canvas: main photo at two thirds (290 instead of 430 px), thumbnails to the left of the photo, a Producttekst line below Levertijd (delivery time), and the size matrix not next to the photo but below it across the full width; the photo column is then no longer sticky. Measured at 1440×900: the first row of size cells starts at 575 px and ends at 749 px, so in view without scrolling, and the twelve sizes are on one line. The price: cells of 76 px instead of 105 (1240 wide, minus 140 colour column and 130 totals, divided by twelve). Three digits still fit, but the cells are tighter than in the cart, where 105 stays. Alternative if 76 feels too tight: keep cells at 105 and put the series in two lines of six; then the first line also stays visible without scrolling. Until a decision, the product page in the prototypes follows MainD.

Sketch C (18 September, evening; widened on 19 September). Variant of B with four test points: the content width from 1320 to 1380 px (wrap 1460 with 40 px inner margin), exactly the width of the current B2B, which has a fixed container of about 1380 at both 1512 and 1920 px (measured 19 September); arrows and dots on the photo instead of thumbnails; the line "0 van 0 stuks in nalevering" gone; the product text at 440 px with two lines and a link Lees meer directly below the text. Cells become 88 px (B 76, MainD 105). The left arrow on the photo only appears after clicking to the right (19 September). On a 14-inch MacBook (1512) 26 px of side space remains plus the inner margin, together 66 px, equal to the current B2B; on a 1440 screen 1460 does not fit and the content shrinks to 1360 with cells of 86.

Sketch D (19 September). Dennis's proposal, also at 1400 px: the left column is sticky again as in the prototype, with the main photo at 400 px (MainD 430, C 290), below it the thumbnails, with 26 px of air below that the colour swatches and below the swatches only code and name, "900 Black" (19 September, at Dennis's request; at first "Kleur:" was in front of it and the line was above the swatches; below the swatches because the name is the result of the choice and so reads as a caption to the row), so that the dealer can switch colour via the swatches while scrolling through the matrix. Making the left column narrower gains nothing: the matrix row is fixed at 879 px, so the space would remain empty to the right of the matrix. On the right the specifications with Producttekst (440 px, Lees meer) and the matrix with five cells of 105 px per row: the junior sizes 116 to 164 on the first line, S to 2XL on the second, 3XL and 4XL on the third. The calculation: 1400 minus 80 side space is 1320; a row is 150 colour column plus 5 × 105 plus 4 × 6 plus 180 totals is 879; 401 px remains for the photo. Measured at 1440 × 900: cells 105 px, matrix starts at 475 px, first colour row ends at 812 px, sticky column 666 px high (fits below the bar of 110 px). Caveat: a colour with twelve sizes still costs three lines, so the page only gets shorter for articles with ten sizes or fewer; the gain is in the overview (junior sizes together) and in the swatches that remain reachable while scrolling.

Sketch E (19 September). Sketch C with the thumbnails back, to the left of the main photo as in B; the arrows and dots on the photo are then gone. Otherwise equal to C. The thumbnails make the top busier, but in Voorverkoop a dealer orders articles he has not yet had in his hands and wants to see the photos without clicking; they cost 72 px that the photo of 290 does not need.

Decision: D (19 September). Dennis chose D: the familiar page structure, the children's sizes on one row, and a layout that stays the same with two extra sizes (92, 5XL) while the other variants then change their number of rows. D is in the responsive prototype from v50; the layout of tablet and mobile has not changed, and the prototype from just before is frozen as prototype-responsive-pdp-maind.html. What changed on desktop: from 1200 px the colour block sits in the fixed photo column below the thumbnails (JavaScript moves the block between photo column and specifications at the 1200 px boundary, so that the mobile and tablet layout remain unchanged; the place between the specifications has a hidden anchor .rb-pdp__kleuranker), below it only code and name ("900 Black", without the word Kleur, 13 px gray with the name 600 black), 26 px of air between thumbnails and swatches. From 1340 px the matrix has five cells of 105 per row in a more compact row (colour column 140 + 5 × 105 + 4 × 6 + totals column 150 = 839, gap to the photo column 32) and the photo column gets what is left, minimum 300 and maximum 430: at the content width of 1240 that is 369 px; the ten swatches of the Performance shirt then sit on one line, the fourteen of the Grip Socks in two. (Earlier on 19 September the row was at 150/180 with the wrap at 1400 and a photo of 401; Dennis chose the narrower portal.) Below the specifications there is 24 px of air (was 6) so that Lees meer does not sit against the matrix. Between 1200 and 1339 px it stays four cells per row, because five cells with a photo of at least 300 only fit from 1340. New at all formats is the line Producttekst in the specifications: two lines with the link Lees meer / Lees minder, on desktop 440 px wide; in the real portal the text comes from the article description (data question). The line "0 van 0 stuks in nalevering" has stayed, because it only appears when there is backorder in the matrix.

Grip Socks as second catalogue product page (19 September). At Dennis's request, because it is the most ordered article: RS5005 with the fourteen colours, sizes Junior and Senior, stock and prices (7,48, RRP 14,95) as in the current B2B on 19 September; photos from the B2C webshop (one to three per colour), file names sok-<kleur>-<n>.jpg. Only the article RS5005 itself, no professional club variants. The tile on the homepage and the cart card refer to it; the cart card of CartC (which still had sock sizes 35 to 50) has been rebuilt on the same data, with the ordered quantities divided over Junior and Senior. The matrix with two cells per colour shows that D also works with short size series: fourteen colours in fourteen short lines. In the catalogue the Grip Socks is the second tile (after the Performance 2.0 Shirt), with the B2C photo; the homepage tile at Meest besteld uses the same photo (19 September). Dennis called the combination of content width 1320 and matrix D the right balance on 19 September; that decision is fixed.

Advice that preceded the decision (19 September). With all five side by side, and with two facts from Dennis added: there will be articles with fourteen sizes (92 to 5XL, a minority) and dealers look on narrower screens. Then D is the safest choice: five cells of 105 per row works with twelve and fourteen sizes (5-5-2 or 5-5-4) without a separate rule, shrinks on a narrower screen via the photo instead of via the cells, keeps the cell width of the current B2B, puts the children's sizes together and keeps the swatches in view while scrolling. The price: the page stays as long as MainD (nine colours well over 2000 px), which dealers are used to now anyway.

E is the denser variant: one line per colour halves the page and reads as an order form, and the thumbnails keep the photos within reach for Voorverkoop. But E is fragile: with fourteen sizes a cell becomes 74 px (1110 minus 13 × 5, divided by 14) and on a viewport of 1366 px it becomes 81. E is only possible with a fallback rule: as soon as cells drop below 88 px, the row divides equally over two lines (7 + 7, or 6 + 6), where the cells can become 105 again. That is a second layout of the same component, and a dealer who orders thirty articles in one session then sees the matrix arranged differently per article. Choose it only if Robey accepts that switching and the screen widths (data question) show 1440 and wider as the rule; and then with a typing test of 88 versus 105.

B drops out on the cell width (76), C on the missing thumbnails for Voorverkoop, MainD on the page length without the gain of D. If the data question on screen widths and the typing test turn out differently than expected, the order is D, then E.

Availability per size: three states and an upper limit

Decision and advice of 18 September, following the question of what happens when a dealer wants more than there is. Per size there are three states, and they are shown in the cell itself, not in a pop-up:

1. In stock (green): the number below the size is what is there now.
2. Sold out, but replenishment on its way (orange, backorder): the cell can be filled in; the size panel behind ⓘ shows when how much comes in. The same for Custom Made and catalogue.
3. Sold out and no replenishment (robey-cell--unavailable, gray, not fillable, text "uitverkocht" (sold out)): always for outlet, for catalogue and Custom Made if purchasing sets it so. If the article can also be ordered in Voorverkoop (Custom Made), then below the cell there is not a blockade but a way out: the message refers to the Voorverkoop tab.

Upper limit. Every fillable cell has a deliverable maximum: now in stock plus what is on its way (the same numbers as in the size panel); for outlet only what is there. If the dealer types more, the cell resets the quantity to the maximum and a yellow message line (token notice) appears in the colour row: "Maat 164: maximaal 60 leverbaar (nu op voorraad plus wat onderweg is)." (Size 164: maximum 60 deliverable (now in stock plus what is on its way).) For Custom Made with preorder it continues: "Meer nodig? Bestel de rest via Voorverkoop" (Need more? Order the rest via Voorverkoop), a link that opens the Voorverkoop tab. The line disappears after seven seconds or on the next input. No modal window: a pop-up interrupts filling in a matrix with twelve sizes, while a line at the place of the problem gets read and the number is already correct. That is also how it works in the prototype; try it on the outlet product page (maximum = stock) or in the cart.

What the developer needs: per size the stock, the replenishments with date and quantity, and the flag "will no longer be replenished" (data question).

Message stays (18 September, evening). The upper limit message at first disappeared after seven seconds; now it stays until the next change in a size cell (the same or another) or a screen switch. A timer is arbitrary: whoever looks away for a moment misses the message, and whoever keeps working has already seen it.

Minimum of 15 pieces in Voorverkoop (18 September, evening; per colour confirmed by Dennis). Per colour of an article a minimum of 15 pieces applies in the order type Voorverkoop, across all sizes of that colour. Three places, increasing in weight: the explanation below the order type button mentions the minimum ("Minimaal 15 stuks per kleur.", minimum 15 pieces per colour); in the colour row of the preorder matrix a yellow line appears below the cells as long as that colour is between 1 and 14 pieces ("Minimaal 15 stuks per kleur in Voorverkoop: nog 7 stuks nodig.", 7 more pieces needed; the same place and styling as the upper limit message); in the cart the colour row gets the same message, and the cost summary shows in the messages column next to Verzendkosten "2 kleuren onder het minimum van 15 stuks" (2 colours below the minimum of 15 pieces) with a gray, non-clickable button Afrekenen. Adding to the cart is not blocked: the dealer builds up his order and the limit only becomes hard at checkout. Only the preorder cart does this; Voorraad has no minimum.

Size panel (behind the ⓘ in a cell)

A click on the ⓘ opens on desktop and tablet a panel of 420px above the cell (white, 10px, shadow all round 0 2px 40px rgba(18,18,18,.26) plus hairline 0 0 0 1px rgba(18,18,18,.06), no dimmed background, padding 20/22, arrow tip 14px towards the cell, cross at the top right; below the cell if there is no 12px of space above; closes on click outside, Escape and scrolling). On mobile a sheet from below over a dimmed page (rgba(18,18,18,.45)), with button Sluiten (close); the tap area is the whole cell header (size + ⓘ), not just the icon. Content: heading "Kleurcode Kleurnaam · Maat" 16/700 (e.g. "900 Black · M"), no article number; lines of 14px with line gray-2 and padding:10px 0, label on the left in a column of 140px with 24px to the values, lines padding:13px 0: Nu beschikbaar (now available) dot + N stuks (bold; dot green for stock, orange at 0, blue for preorder) · Beschikbaar vanaf (available from) with a line per incoming delivery: date on the left (month name: 23 okt 2026), total bold and replenishment (+N) right-aligned · EAN with link Kopieer (copy) on the right. The same order and naming as the current B2B; no explanatory sentence. Every line fits on one line, also at 390px. Preorder cells: "Verwacht" (expected) with blue dot and "vanaf 1 juli 2027", plus EAN. Data per variant: stock now, incoming deliveries (date, quantity), EAN; see Data questions. Example: MainD.dc.html (Black · M) and MobielMaatpaneel.dc.html; generator bouw-maatpaneel.py.

Cart

Heading "Winkelwagen" 30px with below it "7 artikelen · 219 stuks". Toolbar: Verberg lege maten (hide empty sizes; checkbox) · Sortering (sorting) · Acties (actions) · on the right "Alles inklappen" (collapse all).

Two orders in one cart (decision 14 September; the cart as one order is in the archive as CartC-eenorder). Stock and production enter the system as two orders and are checked out separately. For the dealer they are two carts: "Winkelwagen (Voorraad)" and "Winkelwagen (Voorverkoop)" (page heading, minicart, switch chip, homepage); in the cost summary and button short "Totaal voorraad" / "Afrekenen voorraad". Rejected on 14 September: two tabs of one cart (gives the impression that you check out both together) and the names "Voorraadorder/Voorverkooporder" (contrived). The word order is for the system (two orders, two invoices), not for the dealer; on the PDP the label of the article remains "Voorraad" or "Voorverkoop", because there it is not yet an order. The page remains one cart with heading, toolbar and cards as they were; per order the following is added: its own cost summary and its own button at the end of the section, and at the top and bottom an overview of both orders.

Order overview (previous setup, CartC) below the heading (only when both orders are filled): small heading 11/700 uppercase gray-6 "Twee orders in deze winkelwagen · los af te rekenen" (two orders in this cart · checked out separately), below it two cards side by side (white, border gray-2, 5px, padding:14px 18px): dot, order name 15/700, "4 artikelen · 79 stuks · € 590,92" 12 gray-6, on the right the total incl. VAT 16/800 and the link "Naar afrekenen ↓" (to checkout). The card jumps to the section. Deliberately no buttons in toolbar style: they looked like the filter buttons below and did not say that these are open orders (14 September). On mobile stacked. On mobile stacked.

Two carts, one in view (CartD.dc.html, chosen direction 14 September; CartC.dc.html with two orders one below the other remains as comparison). The page always shows one cart, never a mix. Heading "Winkelwagen" (h1, same style) with next to it the cart label (label and switch link sit 2 to 3px up: capitals sit optically above the middle of the line): dot 8px and "Voorraad" or "Voorverkoop", 13/600, 26–28px high, radius 3px, on the light tint of that colour (E4FDE1 / E3ECFB, the same tint as a filled cell in the matrix). Since 16 September; earlier "Winkelwagen (Voorraad)" in capitals with a dot in front, which read as busy and cluttered. The same label sits in the minicart, the sheet and the tablet panel after "Winkelwagen"; the written name "Winkelwagen (Voorraad)" is now only for running text. No count and no explanation below the heading: pieces and amount are in the Kostenoverzicht, and the explanation about production and delivery time is on the Custom Made PDP where the choice is made (15 and 16 September). Next to the label a quiet switch link (13px gray-6, underlined, no frame, hover black): switch icon (two opposing arrows, 15px), "Wissel naar Voorverkoop" (switch to Voorverkoop) as a gray underlined text link (13px, no colour surface), directly next to the active label on the title line (desktop and tablet; mobile below it, there it does not fit alongside). That way the active label is the only coloured element on the page: a coloured label of the other cart at the top right could, at a quick glance, be read as "this is where I am" (16 September). Hover: text black. Click switches cart. Shorter than "Wissel naar Winkelwagen (Voorverkoop)" and in the same language as the heading (16 September). Deliberately no chip with dot any more (15 September, second round): it drew the eye and could be read as "this is where I am"; as a gray text link it can sit at the top right again, where a secondary action belongs. The words "Wissel naar" say precisely that this is not the current cart; the title is the only thing that says where you are. Earlier rejected: a page-wide switch bar (broke the rhythm) and an arrow pointing right (says "continue"). Then toolbar, cards and the Kostenoverzicht, which is sticky at the bottom again as in the first cart (15 September): with one cart in view that is possible again, and with that the section heading with count, backorder and amount at the top is superfluous and removed. That is also how the current B2B cart works. Open by default: the cart the dealer last added something to, otherwise Voorraad; a card in the minicart opens that cart. If only one cart is filled, no switch chip. Empty: heading "Winkelwagen" and the empty state. That is also how the current B2B works (switching cart), only the switch no longer determines how you order. The switch is also on the page because mobile and tablet have no minicart and the desktop minicart opens on hover. Rejected: tabs (see above) and a separate choice screen before the cart (extra step for everyone, no overall overview). Mobile and tablet follow the same setup: heading "Winkelwagen (Voorraad)" with dot; on mobile and tablet the same switch link below the heading, no section heading. Tablet has the Kostenoverzicht sticky like desktop; mobile no longer has a sticky strip and no backorder chip at the top (16 September): the Kostenoverzicht at the end of the list suffices, with the backorder in it. The artboards MobielWinkelwagens and TabletWinkelwagens768 show the sheet and the panel with which you choose a cart.

Section heading (only when both orders are filled): dot 9px + name 16/700 + explanation 13 gray-6 + on the right "N artikelen · M stuks" and amount 16/800, with border-bottom:2px solid in the mode colour. Texts:

• Voorraad — no explanation any more (15 September: the delivery time sentence said nothing a dealer does not know; backorder remains visible via the chip and the line below Totaal stuks)
• Voorverkoop — Geproduceerd na bestelling (produced after ordering)

Article card: border gray-2. Header on gray-1 (padding:18px 20px 8px): name 18/700, line "RS1030 · stukprijs € 12,48 – € 12,98 · adviesprijs € 24,95 – € 25,95" 12 gray-6; on the right "Aantal: N" (shortened from "Aantal besteld" on 18 September, saves space next to the menu) and amount 19/800 and the button with three dots for the options menu. No collapse arrow per article any more (decision 17 September, late): collapsing is in Weergave › Alles inklappen, the card shows only ordered colours and is therefore already compact, and a collapsed card without a photo says little. No article photo in the header. Body gray-1 (padding:12px 20px 4px) with a white row per colour (border gray-2, 5px, padding:14px 20px, gap 14): photo 64×80 with code/name/price (column 100px), cells as on the PDP but in eight columns, on the right Aantal/Prijs. Rows without a quantity are hidden behind "Toon de overige N kleuren".

Total per order at the end of the cart, sticky at the bottom (position:sticky; bottom:0, back since 15 September): a floating card within the column (16 September, after a page-wide version): gray-1, border 1px gray-6 (darker than the product cards, which have gray-2, so that the card stands out; 16 September), radius 10px, padding:16px 24px, position:sticky; bottom:24px, shadow 0 12px 30px -14px rgba(18,18,18,.3); at the bottom of the page 48px clear of the footer, so that the card never sticks to it. That is how the current B2B does it too, and it reads as a layer over the content: no false ending, no peep-box. No line in the colour of the cart: green means "from stock" everywhere and this summary also counts orange backorder; the dot at the small heading carries the colour. On tablet the same card with 24px margin; there two equal columns of 250px sit side by side, on the left Totaal stuks and Verzendkosten, on the right Subtotaal, Aanvullende korting and Totaal excl. btw with the line above it, and the button Afrekenen at the bottom right below the second column (16 September). On mobile the Kostenoverzicht sits as a block at the end of the list, with 32px of space before the footer. Layout (decision 18 September, replaces the single line of 16 September): the card has three groups of at most two lines each. On the left the amounts (13 px, label gray-6 with colon, amount 700): Subtotaal: and Aanvullende korting 30%:. Each column is always two lines high on desktop, so that Verzendkosten stays in the same place when the delivery line disappears. Next to it Verzendkosten in its own column: Gratis (free), or the amount with below it the delivery line "Nog € 20,12 tot gratis levering" (€ 20,12 more to free delivery) as a light yellow notice label (token notice #FFF4C2 with border notice-border #F0DC8C, 12 px black, only the amount bold, radius 3 px, padding 2/8; no icon). Decision 18 September: yellow sits outside the status colours (green stock, orange backorder, blue preorder, red reduced, gold action) and is the colour everyone reads as a notice; that is why it is its own token, also usable for later notices that are not a status. No italics. CartD.dc.html has been adjusted to this via bouw-cartd.py; the tokens come from bouw-tokens.py. On the right two equal total blocks, Totaal stuks and Totaal excl. btw, in the same styling (label 12 px gray-6 above, number 20/800 on desktop, 18/800 on tablet and mobile), and the gold button Afrekenen. So the quantity sits on the right next to the amount, where it also sits on the right per article; at the far left it got lost. No backorder line in the cost summary: the orange cells in the matrix and the line "N van de M stuks in nalevering" on the product page already say it, and the current B2B does not add it up separately either without questions arising about it. From 1240 px heading, amounts, shipping costs, the two totals and the button sit on one row, with the free space distributed evenly (justify-content:space-between, at least 32 px between the parts), so that the amount columns do not sit against each other; because no column has more than two lines, the card is two text lines high (around 80 px) and the height does not change when the delivery line appears. From 768 to 1239 px (decision 18 September: below 1240 px the row just no longer fits comfortably, even though the desktop header already starts at 1200) the amounts and the shipping costs sit stacked in the left column (from 900 to 1239 px at natural width, so that label and amount stay together; at 768 to 899 px two equal columns like TabletCart768) and the two totals with the button in the right column of 250 px, without a line above the first total so that that column starts at the top, with the heading across the full width. On mobile everything is stacked, the totals behind a line.

No sticky bar (14 September): a sticky bar with both buttons at the bottom duplicated the buttons in the total blocks. The order chips below the heading are the overview and the jump to each order. The buttons stay gold, not green or blue: gold is the colour of cart and checkout in the portal, and green and blue are status colours (in stock, production); dot, 2px line and the word in the button carry the order identity. The old cost summary was sticky and combined: At the top across the full width the delivery threshold strip, only visible when the subtotal excl. VAT is below € 150: white, border gray-3, 5px, padding:9px 14px, truck icon 16px, text 13px "Nog € 48,20 tot gratis levering · verzendkosten € 5,00" (amount 700, calculates live in the prototypes). Above the threshold the strip disappears; that delivery is free is then stated in the Verzendkosten line. Deliberately no status colour: green-tint and orange-tint mean "in stock" and "size sold out" in the matrix, and "Gratis levering in Nederland" as a fixed line reads as a general promise (decision 14 September). Below it heading 17/800 and the columns, aligned at the top; only the button Afrekenen is vertically centred. Below the mode lines is Aanvullende korting 30% with a negative amount (example 30%; the percentage comes per dealer from the price agreement). All prices on tile, PDP, in the matrix and on the cart lines are the base price without additional discount; the discount only appears here, as one line (decision feedback round 14 September: that way a reduced outlet article stays recognisable). The line "Afhandelingskosten" (handling costs) has been replaced by Verzendkosten: "Gratis" from the threshold, below it as placeholder € 5,00 (real rates: data question). The threshold and the VAT are calculated on the amount after additional discount; Totaal = net + shipping costs + VAT. On mobile the delivery line sits at the top of the gray cost block, on tablet at the top of the cost summary. The threshold follows the black bar; whether it applies excl. or incl. VAT and what Belgium does is under the data questions; column 280px with Totaal stuks and Afhandelingskosten; column 280px with per mode a line with dot and amount (or one line Subtotaal if only one mode is filled), Btw 21%, Totaal 19/800 above a line gray-3; on the right button Afrekenen gold 190px 16/700 padding:16px 20px.

Account: Orders en facturen

Breadcrumb Home / Account / Orders en facturen. Two columns like the PLP: 220px navigation, rest content, gap 32.

Navigation: no surface, no small headings, no counters. One list .anav a (14px gray-6, padding:6px 0 6px 12px, border-left:2px solid transparent; hover black; active: black, 600, left stripe black): Orders en facturen · Nalevering · Zendingen · Conceptorders · Creditnota's · Mijn gegevens. At the bottom behind a line gray-2 the identity: shop name 14/600, "Accountnr. 10428" and the name 12 gray-6, and two small buttons .knop-klein (32px, border gray-3, 3px, 12/600): Wisselen and Uitloggen. Prijzen verbergen is only in the account panel in the header.

Heading: 30px heading, below it "38 orders sinds januari 2024 · bedragen excl. btw" (38 orders since January 2024 · amounts excl. VAT) 14 gray-6; on the right nothing any more; the account identity sits above the navigation.

Filters: search field 420×40 white with border gray-3 and 3px radius, like the filter buttons next to it ("Zoek op order, factuur, referentie of product" (search by order, invoice, reference or product), decision 18 September: shorter, and a dealer can also search his orders by article, for example to see when he last ordered a Crossbar Shirt; the field searches all four). Deliberately different from the search bar in the header: that one is gray and round and searches articles, this field filters the list. The magnifying glass sits on the left, the text after it. Same style on tablet and mobile (.lzoek) and on all list pages of the account (decision 11 September); the filter buttons (Status, Periode, Verwacht, Order, Aangemaakt door; the button Met factuur (with invoice) at Orders en facturen was left out on 18 September) and Exporteer sit on tablet and mobile next to or below the search field, as on Orders en facturen, dropdowns in .tb style (40px, border gray-3, 3px, white-space:nowrap): Status, Periode, the toggle "Met factuur", and on the right the button "Exporteer ▾" (csv, Excel, pdf). Above the filter row one line with orange dot: "2 facturen openstaand · € 1.898,56 · de eerste vervalt 28 sep 2026" (2 invoices outstanding · the first is due 28 Sep 2026) and the link "Toon alleen openstaand" (show only outstanding); this replaces the separate invoices page of the current B2B. The chosen value of a dropdown appears as a chip in the row below it (same pattern as the catalogue).

Table (.otab): header row 11/700 uppercase gray-6 with line gray-3; rows 14px, padding:15px 12px, line gray-2, hover gray-1. Columns: Ordernr. with below it the webshop number (11px gray-6) · Datum · Referentie (the dealer's own text; empty = dash in gray-4) · Status (dot 9px + text) · Stuks (right) · Bedrag (right, 600, tabular) · Factuurnr. (small button with the invoice number and a download icon, 11/700, border gray-3, 3px; opens the pdf; no invoice = dash) · arrow to the order detail.

Status colours follow the matrix: green Geleverd (delivered), orange Deels geleverd (partly delivered), blue In productie (preorder), black In behandeling (in progress), gray-3 Geannuleerd (cancelled; text gray-6).

Below the table: "1–8 van 38 orders" and buttons Vorige/Volgende (36px, .tb style; disabled in gray-4 with border gray-2). Below that a gray-1 block referring to credit notes and older invoices.

Source: AccountA.dc.html.

Account: other pages (generated with bouw-account.py from AccountA)

Same shell as Orders en facturen: breadcrumb, account navigation on the left (active item gets the stripe), content column on the right with heading 30px, optionally search bar and filter buttons, table .otab. The status line with dot is only where money is outstanding (Orders en facturen: outstanding invoices; Creditnota's: to be settled), nowhere else. No gray info block at the bottom and no explanatory text below the table, on any account page; explanation belongs in the customer service texts. Rules per page:

• Nalevering is no longer its own page (decision 18 September). The delivery time differs per size, so a list per article said too little and too much at the same time. Instead: in Orders en facturen a toggle button Nalevering with a counter (number of orders in which sizes are still being delivered); on = only those orders. The account navigation, the account panel and the footer no longer have an item Nalevering; the homepage block "3 regels in nalevering · Bekijk de verwachte leverdata" (3 lines on backorder · view the expected delivery dates) and the link at an outstanding shipment in the order detail open Orders en facturen with the toggle on. The expected week is in the order detail per size (the cell shows "wk 38" instead of "volgt") and at the shipment ("verwacht week 38"). NaleveringA.dc.html and the mobile and tablet variants remain as reference, but are no longer followed.
• Conceptorders: no button "Nieuwe conceptorder" (you save a draft from the cart via Acties › Bewaar als conceptorder); columns name with sub-line · aangemaakt door (created by) · type (Voorraad/Voorverkoop, the order type from the current B2B) · aangemaakt (created; changed below it, 11px) · artikelen · stuks · bedrag · status ("Voorstel van sales" (proposal from sales) blue, "Concept" black) · button Acties ▾ (.tb 34px) with menu .amenu (white, border gray-2, 5px, shadow): Bekijken (view) · In winkelwagen · line · Exporteren naar csv · Exporteren naar pdf · line · Verwijderen (red, confirmation). The same five choices as the current B2B.
• Creditnota's: like Orders en facturen; amounts negative and bold; status "Te verrekenen" (to be settled) orange / "Verrekend" (settled) green with invoice number below it / "Uitbetaald" (paid out) green; pdf chip per line; column stuks; numbers in the invoice series 260xxxxx, as now.
• Mijn gegevens: five cards (border gray-2, 10px, padding 20/22) with a definition list .gdl (small headings 11/700 uppercase gray-6, values 14px; three columns, two with long text): Account, Contactpersoon, Adressen (default tag), Inloggen (code by e-mail, add colleague), Voorkeuren (language, hide prices, e-mail on shipment, csv separator). Cards that can be edited by the user have a link in the header; administrative details go via the button "Verzoek tot wijziging" at the top right.
• Tablet: the same tables as Orders en facturen (tab row, compact 13px). Conceptorders without Type and Artikelen (type as a line below the creator), Creditnota's without separate columns Stuks and Pdf (pieces after the reason, pdf chip below the number), so that everything fits in 720px; the same version at 1024. Mijn gegevens with two columns per card.
• Mobile: cards like Orders en facturen. Beware in the build: a card that is itself a link (to the order) may not contain a second link; Track & trace on the shipment card is therefore a clickable element that is not an anchor, on the right in the status line before the arrow (18 September; nested anchors broke the card open on mobile). Nalevering: photo, article/colour, expected bold on the right, sizes as chips, status + order + pieces. Zendingen: number/date, pieces, order, status, track & trace. Conceptorders: name, creator/date, amount, type and status dot, articles/pieces and the button Acties. Creditnota's: number/date, amount negative, reason, status with invoice number, pdf chip. Mijn gegevens: button across the full width, cards with one column. Search results: catalogue shell, search term in the search row, heading with count, two tiles per row. Empty cart: heading with 0 articles, centred block, black button.
• All three widths read from accountdata.py; change the example data there, not in the artboards.
• Responsive prototype (phase 4): where the three designs deviate from each other the responsive prototype follows the desktop choice, with three exceptions that are deliberately the same at all widths: the block Facturen on the order detail is also on mobile and tablet (there it was in the meta block), the buttons Exporteren and Opnieuw bestellen (reorder) are everywhere the same .rb-tb buttons (44 px and 600 on desktop), and the cost summary of the order is the same component as in the cart (not sticky, with border). The action menu at a draft order is closed and opens on click; in ConceptordersA it is open for illustration. Between 1200 and 1339 px the table keeps the tablet sizes (13 px, cell padding 8) and the status may wrap, because the content column is 868 px there; from 1340 px the desktop sizes apply. At 768 px the status also wraps and Naam and Aangemaakt door are at most 130 px, otherwise the draft order table does not fit in 720 px.
• Every list page (Nalevering, Zendingen, Conceptorders, Creditnota's) has on tablet and mobile the same search bar below the heading as Orders en facturen, with its own placeholder. Product photos in lists small: 28×35 desktop, 26×32 tablet, 32×40 mobile. Mijn gegevens on mobile: per line label on the left (38%, 13 gray-6) and value on the right, with a line gray-1 between the lines. Conceptorders without description below the name.

Account: order detail

The page behind the arrow in the order list. Same grid as the order list (220px navigation, content, gap 32); the content column is therefore 988px, so the matrix sits here in six columns of 105px instead of eight.

Heading: back link "‹ Orders en facturen" 13 gray-6; heading "Order B2B98702" 30px with the status next to it (dot 9px + 14/600). The line "Besteld op … door … · N stuks · € … excl. btw" (ordered on … by … · N pieces · € … excl. VAT) is gone since 18 September: date and orderer are in the meta block, pieces and amount in the cost summary at the bottom. On the right three white buttons (.knop-wit: 44px, border gray-3, 3px, 14/600, icon + text; hover border black): "Factuur 26013435" (download), "Exporteren ▾" (menu: order as csv, order as pdf, EAN list, product photos) and "Opnieuw bestellen" (repeat icon). No gold: the page sells nothing. Opnieuw bestellen puts only the stock articles in the cart (like "Stock-producten naar winkelmandje" in the current B2B) and takes the user there. Below the heading the webshop number (B2B98702) sits next to the order number.

Meta block (dl.meta): gray-1, 10px, padding:20px 22px, three columns in two rows; labels 11/700 uppercase gray-6, values 14. Referentie · Besteld (date, by whom) · Klantnummer (customer number) · Factuuradres (invoice address) · Afleveradres (delivery address) · Betaling (payment, with due date). Since 18 September without the column Factuur, because the invoices are their own block below it (an order can have several); customer number and invoice address have been added because the current B2B shows them on the order detail (Factuuradres, Afleveradres, Ordergegevens with customer number) and dealers look for them there.

Shipments: heading 18/700; per shipment a .zend line (white, border gray-2, 5px, padding:14px 18px): dot, "Zending N · stuks · moment" 14/600, below it articles and carrier 12 gray-6, on the right the track & trace link. A backorder is a shipment that does not yet exist: orange dot, text "verwacht week 38 · nalevering, geen actie nodig" (expected week 38 · backorder, no action needed) and link "Alle orders met nalevering" (all orders with backorder; opens Orders en facturen with the toggle Nalevering on). Since 18 September without orange-tint as background: the dot carries the status, as in all tables; the coloured surface was too heavy and clashed with the meaning of orange-tint in the matrix (size sold out).

Articles: the same cards and rows as the cart, but static. Cell (.cel): size label · status line ("geleverd" gray-6 / expected week "wk 38" in orange / empty) · value 45px 700. Indicator line green when delivered, orange with orange-tint on backorder, gray-2 at 0 (value in gray-4, 500). One line of explanation above the cards: "Per maat het bestelde aantal. Groen is geleverd, oranje volgt nog." (Per size the ordered quantity. Green is delivered, orange still to follow.) To the right of the heading Artikelen a switch "Weergave: Matrix · Lijst"; the list view (line per size: model number, colour, size, quantity, still open, line total, with export) exists in the current B2B and has not yet been drawn.

Cost summary: the same block as in the cart, with the same groups (Subtotaal, Btw 21% | Verzendkosten | Totaal stuks, Totaal), not sticky and without delivery line.

Source: OrderA.dc.html. Not yet designed: registering a return from an order, partly cancelled orders.

Downloads

Built on 17 September as artboards for desktop, mobile and tablet, and clickable in all three prototypes; the reasoning is on SchetsDownloads. The current page is a search field with seven closed accordion bars, three of which are empty.

The rule that followed from it: Download alles sits at the level where the set is one thing. At Model- en campagnebeeld new photography is added per campaign and at Catalogus there are two thick pdfs of which you want one; a button at the top that grabs everything is not right there.

Five categories: Catalogus 26/27, Pricat, Productfoto's, Model- en campagnebeeld, Logo's en merkrichtlijnen. Retourprocedure and the forms have been dropped (17 September): returns go via the returns portal, so there is no longer a form to download. Icons: book for the catalogue, photo for both photo categories, document for Pricat and Logo's.

• Overview: one row per category: icon 40px in gray-1, name 15/700, one line of explanation 13 gray-6, on the right the meta (count · size · updated) 12 gray-5 and a chevron. Whole row clickable, no download button. Search field above it in the style of the list search bar on the account pages. An empty category is not shown.
• Category as its own page, no accordion: a link to one category is shareable and the page does not jump when unfolding. Breadcrumb Home / Downloads / category.
• Category with individual files: heading with meta and on the right Download alles, below it a table: type as a block of 34px, readable name with a line of explanation, size, date, download link. The name in the portal is not the file name; what you download may keep the name it has.
• Category that grows per campaign: row per campaign with thumbnail 96×64, name, one line, meta and its own button Download alles plus a chevron to the individual images. Newest at the top, with a small black label Nieuw until the dealer has opened it once. Productfoto's gets the same setup with a row per collection.
• Category with two files (Catalogus): row per pdf with cover and its own button Download. No bulk button: 87 MB for someone who wants one is no service.
• Organisation: split Retourprocedure into Retourneren en klachten and Formulieren (there are now three things under one heading). Category names become what a dealer searches for, not the folder names of the archive. A date everywhere; without a date a dealer does not know whether he has this season's catalogue; the Team Guide is now called 2024 and sits under 2026.
• Searching in product photos (DownloadsD): the search field is about articles, not about folders; that is what a dealer searches for. Type an article number or a name and you get a row per article with photo, number of colours, number of images, size and its own download button. An empty field shows the collections again; no match gives one line with the tip to try an article number. Works in the prototype.
• Classes: everything under .dl-. The first version used .meta and .thumb; those clashed with the .meta of the order detail (display:grid) as soon as all pages come together in one stylesheet, which made the rows collapse into each other.
• Open proposal: a download button for the photos of one article on the product page, so that nobody has to fetch a whole collection for one shirt. Separate decision, not yet designed.
• Mobile and tablet: the same two levels, more compact: icon 34px, thumbnail 74×50, and the meta below the explanation instead of next to it. The button per collection is called Alles there. Search also works there in the prototype.

Returns

New on 17 September, and a break with the current B2B: returns work as in the B2C, via the returns portal of Sendcloud. No longer a form that you download, fill in and send along.

• The page (RetourA) opens with one line of explanation and immediately two buttons: Retour aanmelden (black, opens the portal) and Bekijk je retouren (view your returns).
• Below that three steps: look up the order by order number and postcode, choose what goes back, print the label. A button that leads away to another system is a hurdle; three lines that say what is going to happen remove it and save questions to customer service.
• Two cards at the bottom: the conditions, and what happens afterwards: an approved return becomes a credit note, visible under Creditnota's in the account.
• Dropped as a result: the downloads Retourprocedure, return form and complaint form.
• Still to be confirmed by Robey: the conditions on the page (30 days, unworn with labels, no printed or Custom Made articles) have been filled in according to what is customary. And: does the dealer see the status of a return only in the portal, or also in the B2B portal?

Customer service

The setup of robeysportswear.com, filled for B2B (ServiceA).

• Three tiles to what most questions are about: Retourneren, Levertijden en verzending (delivery times and shipping), Contact.
• Frequently asked questions with a search field (style of the list search bar on the account pages) and three groups: Bestellen (ordering), Levering en facturen (delivery and invoices), Account en downloads. The current FAQ is about using the old portal (Mijn account, Catalogus, Downloads); this one is about what a dealer really calls about. The first question is open, so that it is visible that there is an answer underneath.
• Contact form with the same fields as the current B2B contact page (name, e-mail, telephone, order number, type, subject, description), with one difference: the dealer is logged in, so name, e-mail and telephone are prefilled with a gray "uit je account" (from your account) after them.
• Next to it three cards: direct contact with opening hours, the dealer's own account manager, and the visiting address. The account manager is new; dealers call him anyway.
• Still to be confirmed by Robey: the answers, the opening hours, the e-mail address and whether every dealer has a fixed account manager.

Footer

Black, padding-top:60px. On the left Nieuwsbrief (newsletter) with gold button Aanmelden (sign up); three columns (heading 18/800, links 15px): Account (Orders en facturen, Conceptorders, Zendingen, Nalevering, Creditnota's, Mijn gegevens) · Service (Klantenservice, Levertijden en verzending, Retourneren) · Downloads (Catalogus 26/27, Productfoto's en campagnes, Logo's en merkrichtlijnen, Pricat). No column about Robey itself: dealers are logged in, the brand story belongs on the B2C. At the bottom copyright, socials, language selector (see the artboards). On mobile three accordion lines with the same headings.

Cart model

One number per article · mode · colour · size. The PDP matrix and the cart are two views of the same numbers: what you type on the PDP is directly in the cart and vice versa. The counter in the gold button is the total number of pieces; the minicart shows articles (colour rows with quantity > 0) and pieces, and per order pieces and subtotal; the homepage block shows pieces and subtotal.

Everything in the cart follows from that model: row totals, card totals, section headings (only appear when both modes are filled), toolbar counter, cost summary (VAT 21% on the subtotal). A card without pieces disappears; a row without pieces hides behind "Toon de overige N kleuren".

There is no "In winkelwagen" button on the PDP; that is a deliberate choice by Robey. Every filled cell is directly in the cart, as dealers know from the current B2B. So writing happens per cell change (with a short debounce), not per page.

Stock and preorder

The difference is not now versus later, but from our stock (including what is still coming in) versus specially produced for this customer. So a size that is sold out in stock mode can be ordered and follows later; that is the orange state. In preorder no stock figures are shown.

The toggle is per article; whether an article can have both stock and preorder depends on how seasons are tagged in Shopify (Data questions).

Hover panels

Open on hover of their button and stay open as long as the mouse is on button or panel (:has(:hover) in the source; in production add a short close delay of ~150ms so that a diagonal mouse movement does not close the panel). Search opens on focus/click, closes with Escape or a click outside the panel.

Mobile (390px)

Sources: MobielPDP, MobielMenu (three states), MobielCart, MobielHome, MobielPLP, MobielFilters (.dc.html), generated with bouw-mobiel.py from the desktop data. Rules that deviate from desktop:

• Header: black bar 34px (only the delivery line) · white bar 76px with logo 52px on the left and on the right Account (white pill with border, icon + text), gold cart button with pieces, menu icon · search row 56px with the search bar across the full width (44px, padding-left:20px). Only the white bar sticks; the search row scrolls along and comes back on scrolling up. Shadow of the search row only downwards (clip-path:inset(0 0 -24px 0)).
• Account button goes directly to Orders en facturen (no panel). Everything from the desktop account panel is in the menu: the account pages plus Uitloggen under Mijn account ▾; at the bottom three separate parts with lines between them: Prijzen verbergen (slider), language (flag + Nederlands + arrow), and the gray account block (shop name 15/600, account number 12 gray-6, on the right link Wisselen; only show if the user has more than one account).
• Menu: full screen; bar empty except for the cross. Level 1: Catalogus, Custom Made, Outlet (17/700, arrow right = new screen) · at the bottom, against the foot: Mijn account ▾, Klantenservice, Retourneren, Downloads, Prijzen verbergen with slider, language line (all 15/400 with a line gray-2 above across the full width, except above the first) (flag, Nederlands, arrow) · gray account block with shop name, number and Wisselen (only with several accounts). Level 2 (Catalogus): bar with back arrow and title in gray regular; Alle artikelen, Nieuw seizoen 26/27, then Kleding ▾ / Accessoires ▾ / Collecties ▾ that unfold, one open at a time; items indented 32px on white, group closed off with a line gray-2 (no gray surface). Arrow down = unfolds here, arrow right = new screen.
• PDP: main photo 4:5 with swipe, arrows and dots; swatches (32px) directly below the photo only switch the photos and open the corresponding colour card without scrolling; other cards without quantities then collapse, cards with quantities stay open (also like this in the responsive prototype since 18 September). Toggle full width, counter only as a number. Matrix as colour cards: header 75px (photo 44×55, code, name, price; on sale red + struck through, may go to two lines; counter, chevron); an open card shows the twelve sizes in three columns (cells 108px, field 44px). No button In winkelwagen.
• Cart: per article a gray-1 card with radius 10 px and padding 16/16/14, colour cards 10 px apart with 12/14 px inner margin and chips 8 px below the name (made more spacious on 18 September: it felt crammed) (decision 18 September: the gray surface bundles the colour cards of an article, as on desktop; the mobile artboard had everything white, which became chaotic with several articles one below the other), in it the text header and per colour a white, collapsed card with chips (S 6 · M 12), open = cells in three columns; colours without a quantity hidden behind "Toon de overige N kleuren". Cost summary as a gray block; sticky bar at the bottom with total incl. VAT and gold Afrekenen. No toolbar.
• Homepage: banner 3:2 · three personal blocks stacked + the three links below them · sliders: Collecties 272px (1.3 in view), Meest besteld 235px (1.5), Categorieën 88px (3.5); always a piece of the next tile visible.
• Behaviour mobile (tested in the mobile prototype): the white bar (logo, account, cart, menu) is sticky with smart behaviour (gone on scrolling down, back on scrolling up); the black delivery line and the search row scroll along. Search: tapping the search row turns it into an input field and opens a white panel over the content below the search row with Populair/Artikelen and Collecties, the same source as the desktop search panel; the magnifying glass becomes a cross to close. The cross closes the panel and empties the field; tapping outside the panel or Escape also closes. Same behaviour on tablet. All input fields on mobile at least 16px font, otherwise iOS Safari zooms in on focus (matrix cells are therefore at 16px). Swatch on the PDP: switches the main photo and unfolds the colour card, but does not jump to the card (on desktop it does scroll to the colour row). Menu: height equal to the screen height, the bottom block (Mijn account through account block) against the bottom; if it does not fit, the menu scrolls. The retailer block stays in the menu, not in the account accordion: switching account is a one-tap action. Orders: the link "Toon alleen openstaand" sits inline after the due date in the invoice strip, not right-aligned. No subtitle below the heading "Orders en facturen" (the number of orders and "excl. btw" add nothing; also applies on desktop and tablet). Search field: typed text 16px, placeholder 14px. Search row without shadow; the floating white bar gets a shadow (0 2px 6px, 10%) as soon as the page has been scrolled, and loses it at the top. Swatch on the PDP opens the chosen colour card and closes the other cards that are empty; cards with quantities always stay open. Menu: lines in the bottom block across the full width as at the three shop entrances, no line above Mijn account (the white space already separates), no line below the unfolded account accordion. The gray account block (shop name, account number, Wisselen) runs across the full width and closes off the menu at the bottom, without radius and without margin: that way it reads as the closing of the menu and only "Wisselen" is the button. Shop name 14/600, account number 12 gray-6, so that the block is not heavier than the menu lines above it. Search row: 8px below the field (was 12 with shadow). PDP on mobile starts without filled quantities; the card of the shown colour is open. Homepage: 44px between the sections. Cart: 26px above a product heading and 6px below it, so that the heading visibly belongs with the colour cards below it.
• Catalogue: heading with count · buttons Filters (badge with number active) and Sorteren · chips · grid 2 columns (173px) · "Toon meer (N over)". Filter panel full screen: groups as unfolding rows with badge, checkmarks 22px, swatches 30px, size buttons; fixed foot with Alles wissen and black button "Toon N artikelen" (show N articles; counts live).
• Account: account navigation as horizontally scrolling tabs below the header (14px, active 600 with 2px underline). Order list as cards (border gray-2, 5px, padding:12px 14px): 'Order 104811' 15/700 + 'Webshopnr. B2B98811 · datum' 12 gray-6, amount on the right 15/800; reference 14; status with dot 8px, pieces, small button 'Factuur 26013435' on the right; every number with its word in front, because a card has no column headings. Search field: 'Zoek ordernummer, factuurnummer of referentie' (without 'op', so it also fits at 380px). Order detail: back link, heading with status, details, two .tb buttons side by side (Factuur, Exporteren) and Opnieuw bestellen as a wide outline button with '(voorraadartikelen)'; meta block as a list; shipments as cards; articles as the collapsed colour cards of the cart with chips and a status line per colour (green delivered / orange to follow; orange chips).
• Tablet (1024px): source TabletPDP.dc.html, generated with bouw-tablet.py. Breakpoints: < 768 mobile · 768–1199 tablet · ≥ 1200 desktop. Desktop with breakpoints, except: header more compact (72px, logo 44px, search bar max 300px right-aligned, buttons 44px; below 900 the search bar becomes an icon and the first name disappears from the account button), photo 400px next to the information, and the matrix in two rows of six cells (grid-template-columns:repeat(6, 1fr)): children's sizes 116–164 above, adult sizes S–4XL below; never scroll sideways. Colour column 150px on the left, Aantal/Prijs 126px on the right, field 44px. Swatches switch photos and scroll to the colour row (like desktop). Cart (TabletCart.dc.html): like desktop, with the same two rows of six in the colour rows; cost summary sticky with heading 150, columns 250, button 170. Portrait (768px, TabletPDP768/TabletCart768): the mobile header one to one (black bar with only the delivery line centred; white bar 76px with logo 52, account button, gold button, menu icon; search row 44px below it; menu as on mobile). Headers: mobile < 900 · compact desktop 900–1199 · desktop ≥ 1200; the content follows the bands 768/1200, the header 900/1200; photo 300px; row totals (Aantal/Prijs) below the colour in the left column (140px PDP / 96px cart) instead of on the right, so that the six cells stay 89px wide; slider 4 columns, footer 2; cost summary two columns with the gold button below, as wide as the total column and right-aligned; section explanation hidden. Transition at 900px (header switches, row totals on the right again, filter column → filter panel); the account side column switches to the tab row at 1200, together with the content. Catalogue at 1024 (TabletPLP.dc.html): filter column 200px + 28px gap, three tiles of 235px, as wide as four tiles without a column would be, so the column costs nothing. Other pages at 768 (TabletHome768, TabletPLP768, TabletOrders768, TabletOrder768): homepage with three blocks side by side and three sliders with peek (collections 215px → 3.2 in view, products 161px → 4.2, categories 97px → 6.5; swiping, no arrows on touch screens; arrows only with @media (hover: hover)); catalogue with filter panel and three columns; orders as a table (fits in 720px, reference wraps) below the tab row; no retailer block (shop name, account number, Wisselen) on the account pages below 900px, that is in the menu there; order detail with the two-row cells static. Smart header (gone on down, back on up) also applies on tablet; the search row scrolls along as on mobile. Rotating switches the layout live while keeping filled quantities. Test widths: 390 · 507 (Split View → mobile) · 768 · 810 · 834 · 1024 · 1194 · 1366 · 1440. Tablet landscape has the same six screens as portrait (TabletHome, TabletPLP, TabletPDP, TabletCart, TabletOrders, TabletOrder). Homepage at 1024: sliders with the same number in view as at 768 and therefore wider tiles (collections 287px → 3.24, products 215px → 4.25, categories 133px → 6.55); the desktop grid of five starts at 1200. Account pages at 1024: the layout of 768 (tab row, full width) with the compact desktop header; the account side column only comes from 1200. A column of 200px next to a table of 732px was tried and found too tight; the desktop version even ran out to 1171px. The tab row is itself the account navigation, so the header does not have to switch along: the account button in the header gives the same list. Order detail at 1024 (TabletOrder.dc.html): tab row, compact desktop header, six cells per row with row totals on the right. Button row order detail: below 1200px Factuur, Exporteren and Opnieuw bestellen sit on their own row below the order number and the meta line (36px high, left-aligned, flex-wrap); at 768 the same row; on mobile two rows (Factuur + Exporteren, below it Opnieuw bestellen across the full width); from 1200 on the right next to the heading. Reason: heading plus buttons together are well over 850px, next to the account column about 730px remains at 1024. The four views per page (390 · 768 · 1024 · ≥ 1200) are not four designs but one responsive layout at four test widths: build the rules from this document, use the artboards as a check per width.

Canonical texts

Comparison with the current B2B (account)

Reviewed on 9 September: Mijn orders, order detail (matrix and list), Mijn facturen, Mijn verzendingen, Mijn open orderregels, Mijn draftorders.

Data questions for the developer

• Product text (19 September): which article description is available per article (ERP, PIM, webshop), in which languages, and with or without formatting? The product page shows two lines with Lees meer. The Grip Socks page uses the description from the B2C webshop.
• Product photos (19 September): the photos for the portal come from the B2C webshop (Shopify CDN, per colour a product with one to three photos of 1100 × 1375 on #F3F3F3), not from the current B2B. Confirmed by Dennis (19 September): every B2B colour has a B2C product with photos, also the colours that are in draft status in the webshop (RS5005: 350, 504).
• Minimum Voorverkoop (18 September, confirmed per colour): does the minimum of 15 pieces per colour also apply to Custom Made articles that only exist in Voorverkoop? And is there an exception for reorders of a colour that was already ordered in Voorverkoop earlier?
• Screen widths of dealers (18 September): from the analytics of the current B2B (or of the webshop, if the B2B has no analytics) the distribution of viewport widths on desktop over the last twelve months. The token has been at 1400 since 19 September (content 1320); the data confirm whether that is right: only viewports from 1480 px show the full width, at 1366 nothing changes compared to 1320 and at 1536 it fits comfortably.

1. Size surcharges: are large sizes separate variant prices? Determines the price rule on the tile (range or "v.a.") and in the cart per cell.
2. Swatch colour: where is the hex value per Robey colour code? Without a source swatches remain manual work.
3. Preorder: how is a production variant modelled: separate product, separate variant, or tag with season? Determines whether the toggle works per article or per colour.
4. Backorder: can "size sold out but coming back" (orange) be distinguished from "size disappears" (not orderable)? The design assumes the first; the second has no state yet.
5. Stock figures: are exact quantities shown to dealers (like "(19)") or thresholds? The design shows quantities, like the current B2B. For the size panel the next incoming stock is also needed: date and quantity per variant.
6. Gender / Sport: do these exist as tags or metafields? Otherwise the filters cannot exist.
7. Accounts: switching between accounts/locations via the Customer Account API (B2B company locations); is "Accountnr." the customer number from the ERP?
8. Hide prices: is this a setting per user (for the shop floor) and must it survive the session?
9. Webshop number: the external document number (B2B98168) comes from the webshop, the order number from the ERP. Does that stay so in the new setup, or does the Shopify order number become the only number?
10. Shipping costs: the black bar mentions € 150 for the Netherlands; what applies for Belgium and other countries, and does that come from Shopify Markets? Does the threshold for free delivery apply to the subtotal excl. VAT (assumption in the design) and does preorder count?
11. Draft orders: Shopify draft orders or ERP? Determines whether sales can create them in the admin and whether "Aangemaakt door" can be filled.
12. Discount agreements: the current list has a percentage per EAN (0% and 60% mixed). Does that come from the ERP as a price list per dealer, or from Shopify B2B price lists? Determines how the net price on the PDP and the Pricat download are filled.
13. Featured colour per article: the tile in catalogue and search results shows one colour per article; which one is configurable per article (in the current B2B that is possible per product). Proposal: metafield on the product, fallback to the first variant with stock. With an active colour filter the filter wins: the tile shows the filtered colour (requires a Product_01 photo per colour; that exists).

Custom Made on mobile and tablet (16 September): the same thirteen articles as on desktop. The catalogue has the club filter chip and tiles without a label (the gold Custom Made label is gone everywhere since 16 September: in the Custom Made catalogue and on the Custom Made PDP the breadcrumb already says it, and on the regular catalogue these articles do not appear); the PDP alone keeps the order type toggle, with the heading ORDERTYPE and an explanatory sentence per position, and the matrix switches from green with stock quantities to blue without. No "Vaak samen besteld" on a club article; in the specifications the club appears instead of the delivery time.

Orders en facturen: no invoice column any more (16 September). The order list shows order number, date, reference, status, pieces and amount; the column Factuurnr. is gone, on desktop, tablet and in the mobile order cards. Reason: an order can have several invoices (per shipment what has been delivered is invoiced), and one cell cannot carry that; moreover there was a dash for orders without an invoice. The invoices are now on the order detail page in their own block Facturen (number, date, which shipment, amount, PDF), with the line "Een order kan meerdere facturen hebben: per zending wordt gefactureerd wat is geleverd." (An order can have several invoices: per shipment what has been delivered is invoiced.) On mobile and tablet it sits in the details list below the heading, with the second invoice as an announcement. Searching by invoice number remains in the search field above the order list, and the filter "Met factuur" remains; those are the two places where a dealer really uses an invoice number.

Backorder: size column capped (16 September). The column Maten shows at most four size chips and then "+8 maten"; the full series is on the order detail page. A full size series (116 to 5XL) otherwise made the row unreadable. The column itself stays: which sizes you are missing is the core of a backorder overview. The example in the design now deliberately has a full series, so that the case is visible.

Round of 16 September (team Robey).

• Cart button always opens the choice panel (decision 18 September). At every width the gold button opens the panel with the two carts; you always choose one. That way it stays tangible that they are two carts. The cart block on the homepage does go directly to the stock cart. The toggle Wisselen in the account panel and the account navigation is only for sales staff who pose as a dealer to prepare a draft order; a regular dealer does not see it (data question: role of the logged-in user).
• Homepage, first block is the cart again. 80 to 90 percent of the orders are on stock, so the block always shows Winkelwagen + label Voorraad, with pieces and amount and below it "Ook: Winkelwagen (Voorverkoop) · 140 stuks" as soon as that is filled. The three blocks are Winkelwagen, Nalevering, Laatste bestelling. Conceptorders is no longer on the homepage: the action belongs in the cart ("Bewaar als conceptorder") and the overview in the account menu. To the right of "Welkom terug" two links remain: Orders en facturen, Zendingen.
• Backorder block on the homepage shows "42 stuks · volgen zodra ze binnen zijn" (42 pieces · follow as soon as they are in) instead of an expected week. The expected week is an estimate Robey cannot make firm; the number is a fact.
• Cart toolbar: Zoek · Weergave (dropdown with Verberg lege maten and Alles inklappen) · Bewaar als conceptorder · on the right the text link Winkelwagen legen. Sorting is gone (on a handful of articles sorting adds nothing) and Acties is gone: with one action in it a menu is more cumbersome than a link.
• Minicart and account panel no longer linger: the panel is pointer-events:none and only the card inside it catches the mouse. The invisible strip across the full width used to keep the panel open.
• Tablet PDP: clicking a colour swatch only switches the main photo and no longer jumps to that colour in the matrix.
• No sale price any more on the Crossbar Shirt. The sale price (7,48 – 7,98) has become the regular price, so that all totals add up; the struck-through price, the red colour and the badge Outlet are gone on the homepage, in the catalogue, the search results, the PDP and the cart. The Performance 2.0 in Navy does still keep a sale price on the product page; that is the remaining example of a reduced article.

Account (round of 16 September).

• Order number is the number that starts with B2B (or VO). The column is called "Ordernummer" and the internal number is gone everywhere: order list, order cards on mobile, order detail.
• The line about outstanding invoices above the order list is gone; that is not tracked.
• Nalevering: the column Maten is gone on desktop, mobile and tablet. A full size series made the row unreadable; the sizes are on the order detail page.
• Zendingen are called "verstuurd" (sent) instead of "geleverd" (delivered), and for a backorder only "volgt zodra binnen" (follows as soon as in) is shown, without an expected week.
• On the order detail page Zendingen, Facturen and Artikelen have the same heading style (18/700) and there is 34px of space below the invoices block.
• Searching orders by article name or article number (the search field of Orders en facturen searches by order, invoice, reference and product).
• Per size: stock, replenishments (date, quantity) and the flag "will no longer be replenished", for the three cell states and the deliverable maximum.
• Role of the logged-in user (dealer or sales staff), for the toggle Wisselen.

Open decisions for Robey

• Colour of the free-shipping label (decided 20 September): gray-2, no border, black text, in the shape of the correction notices. The route there, in one day: yellow like the correction notices (wrong, because yellow asks the dealer to change something and free shipping is an opportunity), then white with a gold border, which looked right on a comparison sheet but turned out too weak in the live summary, then light green, published and lived with for an hour. Green worked, but it also means stock in the cells and on the cart label, and on reflection the message was louder than comparable webshops make it. Nine variants were then put side by side in the real cost summary with the real figures: no label in gray or black text, white with a gold or gray border, gray-2, gray-3, gray-6 and black with white text, and the green. Gray-2 was chosen: it stays a recognisable element that appears and disappears, without claiming a status colour. Ruled out along the way: white text on a tint just darker than the card, which cannot reach a readable contrast (1.3:1 on gray-2, 1.8:1 on gray-3; white text needs gray-6 or darker, and that is a badge rather than a quiet label). The token green-tint-border #9AD08F, added for the green version, was removed again.
• Order types (decided 14 September): fixed label on catalogue articles, toggle only on Custom Made, two orders in one cart with their own cost summary and button, the word Voorverkoop. Data question: are there Custom Made articles that can only be produced (then a fixed blue label)?
• Two search bars on account pages (decided 11 September): both stay, but the list search bar is white with border and 3px radius, in the style of the filter buttons, so that it reads as a filter of the list and not as a second site search bar.

• Several invoices per order (reported 11 September): an order can have more than one invoice, probably one per shipment. Then the column Factuurnr. in Orders en facturen changes into a counter with button ("2 facturen ▾" with per invoice number, date, amount and pdf) and on the order detail the invoice belongs with the shipment instead of with the order: every .zend line gets its invoice number with download, and the meta block says "Facturen: 2 · € 1.086,16". The button Factuur in the heading then becomes "Facturen ▾". Still to be confirmed: is a backorder invoiced separately on shipping? If so, that is also the answer to the question of whether the backorder subcount should be in euros.
• "Meest besteld door jou" (decided 16 September after a round of questions among retailers): the section shows the articles this dealer himself ordered most, calculated over the last twelve months so that the season counts. Not the last ordered articles and not what all dealers order. New dealer without history: fallback to the most ordered articles of all dealers, with the heading "Meest besteld".
• Order numbers: stock orders get prefix B2B, preorder orders VO (Shopify), alongside the ERP number. The portal will probably show only one number; Robey will come back to this. Until then both are on the artboards.
• Zendingen as a separate page, or merge with Nalevering into Leveringen (expected · on its way · delivered): question for sales, see annotation at ZendingenA.
• Kortingen page left out (10 September). Decided on 14 September after the feedback round: the portal shows the base price everywhere (tile, PDP, matrix, cart lines) and only deducts the additional discount in the cost summary, as one line "Aanvullende korting 30%". Reason: that way reduced outlet articles stay distinguishable from regular ones. Shipping cost threshold and VAT are calculated on the net amount. Dennis is checking with sales whether the list has another function (for example for dealers' purchasing systems that need the percentage). If so: include as a download next to the Pricat, not as a page. Mijn gegevens no longer mentions the price agreement.
• Conceptorders has been chosen (confirmed 9 September). A draft order can have been created by sales or by the dealer himself; the list Conceptorders therefore gets a column "Aangemaakt door".
• Season in view or not (audit 11)
• Duration of the welcome strip after first login
• Wishlist for sales (left out; can come back if sales requires it)
• Gold for the cart button (confirm in the round of questions)
• Verify the Chamber of Commerce (KvK) number on the invoice page
• Preorder per article or per colour

• First personal block on the homepage (16 September): decided, Conceptorders (see Homepage). Open: the empty state and whether the block should be called "conceptorders" or "bewaarde winkelwagens" (saved carts) for dealers who do not know the term.
• Outlet on mobile and tablet (16 September): the outlet catalogue is on all three formats, the outlet PDP only on desktop. On mobile and tablet an outlet tile now points to the regular PDP. Accompanying data question: are sold-out sizes in the outlet really never replenished? The design assumes so and leaves them out entirely.
• Minimum order quantity Custom Made (note 15 September, for later): ideally a minimum of 15 pieces per order applies per Custom Made article. Not yet designed: where the message goes (size panel, card in the cart, or only at Afrekenen), whether it counts per colour or per article, and whether the minimum also applies to stock or only to preorder.
• Product photos Custom Made (task, later): all 6213 Custom Made articles in the B2B need a product photo in the same treatment as the thirteen examples: white background to #F3F3F3, placed on 4:5, jpg. Batch with Pillow via the script behind bouw-custommade.py; doubtful cases (white areas in the product, no pure white background) are set aside for manual checking. Source: the open B2B tab.

Not yet designed

Outlet PDP on mobile and tablet · Acties button in the cart (Bewaar als conceptorder, export, empty) · volume discount line in the cost summary · list view order detail · tablet PDP and cart · empty states other than the cart on mobile and tablet (same block, fits without adjustment) · error and loading states · checkout and login (Shopify) · e-mails.

Order as agreed: the remaining account pages, then mobile and tablet (with the PDP matrix as the main question), then the rest.

Audit of the first design canvases

Status after processing (9 September 2026). Processed on the canvas and in the prototype: 1 (glossary: Orders en facturen · Conceptorders · Zendingen · Nalevering, footer follows the account menu), 2 (counters at the CartC state), 4 (CartB to the archive, remains available as a screen), 5 (dead CSS removed), 7 (font sizes on the scale), 8 (radii: chip 3, checkmark 3, toggle knob 6), 9 (small gray text to #5C5C5C), 12 (minicart with two lines), 14 (canvas: page Ontwerp and page Archief), 15 (border Voorverkoop). Decided by Robey: 3 (no button on the PDP is deliberate, as in the current B2B). Still open: 6, 11, 13 and the questions in 15. Processed on 10 September: 10 (tiles show the same range as the PDP).

Reviewed: the eighteen artboards on the canvas and the clickable prototype, as of 9 September 2026. Ordered by what a dealer or the developer encounters first. Each point states what I recommend; anything that requires a decision from Robey is phrased as a question.

1. One thing, three names

The same items are named differently in three places.

A dealer who clicks Facturen in the footer and sees Orders en facturen in the account menu will start to doubt whether it is the same thing. For the developer this is worse: he builds one page and has to guess which name the route gets.

Recommendation: one glossary, everywhere. Orders en facturen · Conceptorders · Zendingen · Nalevering. Draftorders is Shopify jargon, Conceptorders is Dutch and is already in the account menu. "Open orderregels" and "nalevering" are the same concept; choose nalevering (backorder), which is the word dealers use. The footer follows the account menu literally.

2. The cart counters on the artboards are frozen

On every artboard the gold button shows (5), the minicart 5 articles · 58 pieces · € 443,84 and the homepage block 58 pieces. That was the old, single cart. The chosen cart (CartC) contains 238 pieces for € 2.690,24, and since this week the button shows pieces instead of articles.

In the prototype everything is calculated live and it is correct. On the canvas it is not. Whoever hands the canvas to the developer hands him contradictory numbers.

Recommendation: update the artboards to the CartC state: button (238), minicart 7 articles · 238 pieces · € 2.690,24, homepage block 238 pieces. I will do this with a single script change as soon as you agree.

3. The PDP has no "In winkelwagen" (add to cart) button

Neither of the two product pages has a button that puts the matrix into the cart. The prototype therefore lets every filled cell land in the cart immediately. That is defensible for a matrix portal, but right now it is the consequence of a missing element, not of a decision.

Question for Robey: straight into the cart (as the prototype does now) or a button below the matrix? Argument for straight in: nothing is lost if you click away, and the counter at the top right updates while you type. Argument for a button: a typo does not end up in the cart immediately, and it is what the current B2B does (to be verified). Whichever it becomes, the developer must get it as a rule, not derive it from the prototype.

4. Two carts and two PDPs in the "current" set

CartB (single) and CartC (stock and preorder separated) are both on the canvas and both in the prototype. CartC is the choice; CartB is the state from before that choice and moreover shows the frozen counters from point 2.

MainC (Crossbar) and MainD (Performance 2.0) are indeed both needed: MainC shows what an article without preorder looks like (no toggle), MainD an article with one. That rule is not written down anywhere.

Recommendation: CartB to the archive and out of the prototype. Record the rule for MainC/MainD: the toggle appears only when the article has a preorder variant.

5. Dead CSS from the old matrix, with a wrong colour rule

The stylesheets of MainC and MainD still contain the classes .mt .cx .ok .low .no .f .s from the very first matrix. No element uses them any more, but they are still there, and .low colours low stock gold (#B58521). That clashes with the agreed rule that gold is only for cart and checkout. The colours #108043, #F0F7F2 and #D8232A in it are also outside the palette.

A developer who reads the CSS copies this along.

Recommendation: remove. No decision needed; I will do it at the next build.

6. Product colours have a different hex value in each place

The same Robey colour has different values on tiles, filters and swatches: red is #D8232A, #D0021B or #AE1C28; green #1E9E4A, #1E7A34 or #1E8449; yellow #F5D414 or #F0C419. On a single screen it goes unnoticed, side by side it does not.

This is not a design question but a data question: the colour of a swatch must come from the product, one hex value per Robey colour code (900 = Black, 972 = Black/Royal Blue, and so on).

Question for the developer: where does the swatch colour come from in Shopify: a metafield on the colour code? Without that source he cannot build this properly, and then it remains manual work.

7. Font sizes on half pixels

The design uses 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 16, 17, 18, 19, 20, 22, 26, 30 and 41 px. Seventeen steps, three of them on half pixels. That arose from tuning per element; it becomes ugly in a component library.

Recommendation: a scale of twelve steps: 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 26 · 30 · 41. Round half pixels up (11.5 → 12, 12.5 → 13, 13.5 → 14); 17 and 19 to 18 and 20. Visually hardly anything changes, the developer gets a scale instead of a list.

8. Eight corner radii

In use: 999 (round), 10 (header buttons, panels, personal blocks), 8 (knob in the toggle), 6 (search field), 5 (matrix cells, card rows), 4 (filter chips), 3 (text buttons, labels, size buttons), 2 (checkmarks). Four are deliberate choices and are stated as a rule on the canvas (999, 10, 5, 3). The other four crept in.

Recommendation: chips to 3, search field to 5, checkmark to 3. The 8 in the toggle stays: a nested radius is the outer one (10) minus the padding (4), which is not an extra value but a derivation. That leaves four, with one rule for nesting.

9. Contrast of small gray text

#898989 on white achieves 3.5:1. That is below the AA threshold of 4.5:1 for text smaller than 18 px, and it is used on 11–12 px text: the headings ACCOUNT and INSTELLINGEN in the account menu, the counts behind the filters, struck-through old prices. #B0B0B0 (the 0 in empty cells) achieves 2.0:1, defensible for a placeholder, not for anything else. The orange focus ring on the orange field achieves 2.2:1 (already flagged).

Dealers often work in a shop with daylight on the screen; this is not theoretical.

Recommendation: #898989 only for decorative gray (lines, icons) and for text from 14 px bold. Everything that has to be read at 11–13 px: #5C5C5C (7.0:1). The orange focus ring: a thicker 3 px border in the field itself, or make the field white on focus so the ring falls on white.

10. Price on the tile is one number, on the PDP a range

The PLP tile says € 12,48; the PDP says € 12,48 – € 12,98, because large sizes cost more. A dealer who orders 4XL sees a different price in the cart than on the tile.

Question for the developer: how are size surcharges modelled: as variant prices? Then the rule for the tile is: lowest price with "v.a." (from) in front, or the range. I would show the range, it is more honest and fits on the tile.

Status 10 September: implemented. Every tile (catalogue, homepage slider, search suggestion, mobile, tablet) shows the same range as the PDP: Performance 2.0 Shirt € 12,48 – € 12,98 (RRP € 24,95 – € 25,95), Crossbar Shirt € 7,48 – € 7,98 with struck-through € 9,98 – € 10,48. Articles without a size surcharge keep one number. On mobile (tile 173px) the struck-through range sits below the red price; on tablet and desktop next to it, and it wraps when the column gets too narrow. The data question remains: a range is only possible if size surcharges are variant prices.

11. Season in view or not

The PLP tiles carry the label "Nieuw 26/27" and the footer says "Catalogus 26/27", while 26/27 was deliberately removed from the preorder toggle. Shopify tags carry a season, so the data can do it.

Question for Robey: do we show seasons to dealers, and where? My inclination: only as a label on new articles and in the name of the catalogue PDF, nowhere in the order flow.

12. The minicart does not know the distinction yet

The minicart below the gold button shows a single subtotal. Now that the cart separates stock and preorder with different delivery moments, the minicart hides that.

Recommendation: two lines in the minicart when both are filled (green dot Voorraad € …, blue dot Voorverkoop € …), otherwise one line Subtotaal, the same rule as in the cost summary. That is a small design I can add.

13. Search is half designed

The suggestion panel exists, the results page does not. "Alle 9 resultaten voor Crossbar" links to the catalogue in the prototype. For a dealer who searches by article number this is a main route.

Recommendation: the results page is the PLP with a different heading ("9 resultaten voor 'Crossbar'") and without the category filter if the search term was already a category. One artboard, little new design, but make it explicit.

14. The canvas is hard to read for an outsider

Eighteen artboards in one row, old and new mixed: the chosen homepage is at position 1, the rejected ones at 7 and 8; the header annotations start above HeaderE and run on until above HomeB. It works for you because you saw it come into being; the developer sees eighteen screens without knowing which ones count.

Recommendation: page 1 becomes "Ontwerp" (Design) in flow order: HeaderE, HomeD, Leeg, PLPD, MainC, MainD, Voorverkoop, CartC, and page 2 becomes "Archief" (Archive) with Home, HomeB, Header, HeaderB, PLP, PLPB, PLPC, Main, Cart and CartB. The annotations move along with their artboard. This is your working environment, so I will only do this after a yes.

15. Small sloppiness

• Voorverkoop.dc.html uses a border #E0E0E0; the palette says #E4E4E4.
• The information icons next to every size in the matrix (264 of them on the PDP) have no content; if no tooltip is coming, they have to go.
• The black bar says "Gratis levering in Nederland vanaf € 150" (free delivery in the Netherlands from € 150), to be verified against the real terms, also for Belgium.
• The language selector NL in the black bar suggests multilingualism; is an EN or DE needed?
• Voorverkoop.dc.html (the concept sheet) still shows the counters 31 and 108 pieces as an example; fine as an explanation, but it is not a screen and belongs in the archive or under a heading "uitleg" (explanation).

What is not in this audit

Not designed and therefore not assessed: account pages, mobile and tablet, search results, error messages and loading states, the checkout (Shopify) and the login screen (Shopify). These are listed in the handover document under "Nog niet ontworpen" (Not yet designed).