Handover to the developer

This document describes the design of the new Robey B2B dealer portal so that it can be built: what is authoritative, which values are fixed, how each component behaves, and which questions are still open. It belongs with the clickable prototype and the token files; together those three are the handover. The design history (what was different before and why it changed) lives separately in DESIGN-HISTORY.md and is not required reading.

What is authoritative

1. The prototype: proto/prototype-responsive.html. One file, works offline (only the Inter typeface comes from Google Fonts), all twenty-one screens at every width. Open it in a browser and resize the window: this is the source for sizes, behaviour and copy. Where this document and the prototype disagree, the prototype wins.
2. The tokens and base components: code/tokens.css, code/tokens.json, code/componenten.css and code/voorbeeld.html. Colours, sizes, radii, shadows, the size cell with all its states, buttons, labels and prices. Ready to import.
3. This document: the rules you cannot read off a screen (behaviour, models, exceptions) and the open questions.

The design canvases with separate artboards (desktop, mobile, tablet) are background. They show older intermediate states and are no longer updated; use them only for a detail the prototype does not show.

How to use the prototype. An indicator in the bottom-right corner names the breakpoint you are in. Press S, or click the indicator, for a navigation bar with all screens.

Everything that looks clickable works: navigation, menu, search with suggestions, filters, colour swatches on tiles and product pages, the size matrix (type quantities), the cart (quantities typed on a product page appear there immediately), the cost summary, the account pages, and the gallery view on the product page (click the large photo). The sample data is illustrative, not authoritative.

Twenty-one screens: home · catalogue · four product pages · Custom Made and Outlet catalogues · cart · search results · four Downloads pages · seven account pages (orders, order detail, shipments, draft orders, draft order detail, credit notes, my details).

Reading values. The prototype is real HTML and CSS, so the browser's inspector replaces the inspect panel of a design tool: right-click, Inspect, and you see the real spacing, font sizes, colours and hover behaviour per element and per breakpoint. Prototype classes are named rb-<component>__<part> and the values refer to the tokens. The complete stylesheet is also in code/prototype-styles.css.

Glossary of the prototype class names (Dutch abbreviations): rb-tegel tile · rb-mx size matrix (__rij colour row, __cellen cells) · rb-wk cart card (__rij colour row, __cellen cells) · rb-ko cost summary · rb-pdp product page (__boven top grid, __kleur colour block, __specs specifications) · rb-galerij / rb-gal photo gallery · rb-sws / rb-sw colour swatches · rb-staal tile swatch · rb-filters / rb-fgroep / rb-frij / rb-fkleur filter column, group, row, colour · rb-fchip filter chip · rb-wagen one cart · rb-mc minicart · rb-otab / rb-okaart account table / account card · rb-zend shipment row · rb-lb gallery view (lightbox) · rb-acties action menu · rb-legen confirmation dialog.

What you adopt literally: every value (colours, spacing, radii, shadows, font sizes, hover behaviour), the structure of each component, the behaviour and the copy. What you do not adopt: the code itself. The prototype is generated design code with a single DOM and embedded images; the portal gets components with props and data from the Storefront and Customer Account APIs.

Stack and principles

• Headless on Shopify Plus with B2B. In Shopify every colour of an article is its own product (tags color:<code> and MasterProductCode:<article number>); the portal groups those into one article with colour rows. Sizes are variants.
• No "Add to cart" button. A quantity in a size cell is in the cart immediately (write per cell change, with a short debounce). Dealers know this from the current B2B.
• Two carts, Stock and Preorder, checked out separately. Only Custom Made articles can be in both; catalogue articles are always Stock, outlet too. On screen the order types are called Voorraad (stock) and Voorverkoop (preorder).
• Base prices everywhere; the dealer's additional discount is only deducted in the cost summary, as one line.
• Gold is only for cart and checkout. Green, orange and blue are status colours (stock, backorder, preorder), red is reduced, yellow is a notice that asks for a correction. A message that is neither a status nor a correction gets no colour: the free-shipping label in the cost summary is gray.
• Product photos come from the B2C webshop (Shopify CDN, one to three photos per colour, 1100 × 1375 on #F3F3F3). The first photo is always the product photo on the gray background; model photos follow.
• The on-screen copy is Dutch. The portal is for Dutch dealers; the wording is part of the design and is listed under Canonical copy.

Breakpoints

Four bands, as media queries in the prototype: mobile < 768, tablet portrait 768–899, tablet landscape 900–1199, desktop ≥ 1200. Two extra thresholds inside the desktop band: from 1240 the cost summary of the cart sits on one line, and from 1340 the size matrix has five cells per row and the account pages swap their tabs for the side navigation. These two are fine adjustments, not layouts of their own. The number of cells per row elsewhere follows the available width (auto-fill) and is not a threshold. Content sits in a wrap of at most 1320 px with 40 px gutters (content 1240); above a 1400 px viewport the page does not stretch further.

One component, different grid: product tile, collection tiles, personal blocks, account lists, Downloads. One component, different placement: cost summary, switch link, PDP gallery, search field, colour block on the PDP. Genuinely two components: the size matrix (cards below 768, rows above) and the cart card; they share the same state. The mobile header with its menu overlay is also something else than the smart sticky header.

Deliberately not yet tested on a real screen: the transition at 1200 px on 1280 laptops. The lower bound is 375 px (iPhone 13 mini).

Tokens

The tables below exist as code in code/, generated from the same source; there is no need to copy them by hand.

Colour

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

Two exceptions: #EDEDED for the search bar (lighter than gray-1, otherwise it reads as a surface) and #E9E9E9 as hover tint of the personal blocks.

Other buttons are black, or white with a border. Product colours (swatches) come from the product data: one value per Robey colour code, two-colour articles as linear-gradient(135deg, A 0 50%, B 50% 100%); 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 is in HomeD.dc.html.
• Everything else: Inter 400–900, fallback Helvetica Neue/Arial. Base 15 px, line-height:1.6, black.
• Scale: 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 26 · 30 · 41.
• Uppercase labels (ORDERTYPE, column headers): 11 px 700 letter-spacing:.07em.
• Amounts: 800, letter-spacing:-0.005em, font-variant-numeric:tabular-nums in columns. Notation € 2.246,40 (Dutch: space after the sign, dot as thousands separator, comma as decimal separator).
• Inputs on mobile at least 16 px, otherwise iOS Safari zooms in on focus.

Radius

Nested: outer radius minus padding.

Shadow

• White bar: 0 2px 6px rgba(18,18,18,.1), only after scrolling
• Dropdown panels (account, minicart, search): 0 14px 30px -10px rgba(18,18,18,.28), with clip-path so the shadow does not rise above the bar
• Mega menu: 0 18px 30px -22px rgba(18,18,18,.4) plus border-bottom 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)
• Cost summary (floating card): 0 12px 30px -14px rgba(18,18,18,.3)

Sizes and layers

• Content: max-width:1320px (--robey-size-wrap), padding:0 40px; 16 px on mobile, 24 and 32 px on tablet.
• White bar: 86 px high on desktop; search bar and buttons 48 px; nav links 46 px. Mobile: black bar 34, white bar 76, search row 56.
• Matrix cell: 105 px wide (--robey-size-cell-width), input 45 px.
• Z-index: white bar 20, search panel 26, gallery view 100. The cost summary is position:sticky without z-index.
• PDP photo column: position:sticky; top:110px (bar plus 24); 24 px when the bar is hidden.

Components

Black bar

rb-topbar · one line, black, 36 px at every width. Scrolls away with the page; only the white bar is sticky.

Build

Behaviour

• Below 900 px only the delivery line, centred; the four links are then in the menu overlay.
• From 900 px the links are in the bar and the delivery line sits left. It needs 721 px for that.

White bar (header)

rb-header · sticky. Logo (to home) · nav links Catalogus, Custom Made, Outlet (Outlet red) · search bar · account button · cart button.

Per width

With the search field in the bar the header needs 1166 px, without it 788; hence the split at 1200.

Parts

Behaviour

• The account button shows the name at every width and never says "Account". Below 900 it goes straight to Orders en facturen and has no arrow. From 900 it opens the account panel; a click from 1200 still goes to Orders en facturen.
• The cart button opens the minicart and navigates nowhere, except to the empty cart page when both carts are empty.
• A button in the header opens a card under itself; the mega menu is page-wide. The suggestion panel opens under the width of the search bar.
• Panels open on tap between 900 and 1199, because that band is tablets in landscape. From 1200 on hover: they stay open while the mouse is on button or panel and close 150 to 220 ms after leaving. Only the card catches the mouse, not an invisible full-width strip. Search opens on focus and closes with Escape or a click outside.

Smart header

• The white bar slides away (translateY(-100%), 220 ms) as soon as the user scrolls down more than 4 px and is deeper than 220 px. It comes back on 4 px upwards and always shows above 120 px. The same at every width.
• While the bar is away it carries no shadow, otherwise the shadow of a bar translated out of view stays visible along the top edge.
• Below 1200 px only the bar with logo and buttons is sticky; the search row scrolls along and the shadow appears after scrolling.

Mega menu

rb-mega · page-wide panel under Catalogus, white, border-bottom gray-2.

Build

Columns

Account panel

rb-acc · panel under the account button, 300 px, white, border-radius:0 0 10px 10px.

Build, top to bottom

Behaviour

• There is no account overview page: the personal blocks on the homepage are the overview.
• Wisselen is only for sales staff acting as a dealer to prepare a draft order. A dealer with one account does not see it. Data question: role of the user.

Minicart

rb-mc · panel under the cart button, 360 px.

Build

Behaviour

• The card opens the cart page on that cart. No Checkout button in the minicart.
• With one filled cart the panel changes: heading "Mijn winkelwagen", "7 artikelen · 219 stuks", subtotal 18/800 and the gold button "Bekijk winkelwagen".
• Tablet: a panel top-right of 340 px. Mobile: a sheet from below (top radius 16, handle, dim rgba(18,18,18,.45)), tapping outside closes.
• The dealer always chooses in this panel, at every width, so it stays tangible that there are two carts.

Search suggestions

rb-zoekpaneel · card under the search bar, same width.

Build

Behaviour

• Enter opens the search results page.
• Below 1200 px the panel opens under the search row, and the magnifier becomes a cross that closes the panel and clears the field.

Homepage

Order: banner (300 px, photo, heading 41 white, black button "Bestel nu") → "Welkom terug, Jesper" with the links Orders en facturen │ Zendingen on the right → three personal blocks → Collecties → Meest besteld door jou → eight category circles → footer. On mobile 44 px between sections.

Personal blocks rb-pblok

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

Sliders rb-sl

• Collecties and Categorieën are sliders that look like a grid: on desktop four collections and eight categories in view, an arrow on the right (and left after sliding) moves one tile.
• On tablet and mobile swipe with a peek of the next tile, no arrows on touch screens (@media (hover: hover)).
• Nine collections, eleven categories. Tile width flex:0 0 calc((100% - (n - 1) * gap) / n). Mobile: collections 272 px, products 235, categories 88.
• "Meest besteld door jou" is the same slider with product tiles: the articles this dealer ordered most in the last twelve months. A new dealer gets the most-ordered articles of all dealers under the heading "Meest besteld".

Product tile

rb-tegel · one tile per article, not per colour, in the featured colour. Column with gap 9. No wishlist.

Build, top to bottom

One label per photo, filled, bottom-left. Black is the neutral season label, red is Outlet. A further label keeps that shape: a filled background with text at 4.5:1 or more, and never gold, which belongs to the cart. A light fill disappears on the gray-1 photo background.

Price line: exactly what the product page shows. With a size surcharge the range lowest – highest (€ 12,48 – € 12,98, RRP € 24,95 – € 25,95), otherwise one figure. Reduced: red range with the old range struck through 13/500 gray-5 next to it, below it on mobile. The same rule for search suggestions and sliders.

Colour swatches are a function

The swatches are those of the article, in the same order and with the same two-colour swatches as on the product page.

• They sit in a row: as many as fit, never more than nine, then a "+N" button (round, 1 px border gray-3, 11 to 12 px 600 gray-6) that expands the rest onto a next line.
• Clicking a swatch switches the tile photo and marks the swatch (outline:1px solid black, outline-offset:2px). Clicking the tile then opens the product page with that colour selected, without jumping to the colour row.

For the build: the swatches are buttons in front of the tile link, so the tile is a card with a link and a row of buttons, not a single <a>. In the prototype the photo switch works for the four articles that have a product page; in the portal every colour has its own photo.

Catalogue (PLP)

rb-plp · two columns: filters 220 px and results, gap 32.

Build

Behaviour

• In production 48 articles per page.
• On tablet and mobile a "Toon meer (N over)" button instead of pagination.
• On mobile the Filters button (badge with the active count) and Sorteren share the width; from 768 px they take their natural width.

Filters

• Applied filters at the top of the column: the block "Toegepaste filters" with chips (gray-1, 3 px, 13 px, cross; a colour chip carries a 12 px dot) and "Alles wissen". Only visible when something is active. Clicking a chip turns that filter off.
• On mobile and tablet the same chips sit in a row under the Filters and Sorteren buttons, and the Filters button gets a badge with the count.
• Groups: heading 15/600 with arrow, border-top gray-2, padding:16px 0 18px.

No Merk (brand) and no Beschikbaarheid (availability): a backorder is a property of a size, not of an article.

• Checkbox 18 px, border gray-3, active black with white check. Counts on the right 12 gray-5.
• A value with count 0 is disabled (gray-4); counts are recalculated after every choice, so an empty catalogue does not occur.
• Filter on a colour and only the articles with that colour remain, each tile showing the photo in that colour with the swatch marked. With several matching colours, the first one with stock.
• The count in the heading and the "Toon N artikelen" button follow; the pagination disappears while the filter is on.
• The filter works on colour family: a two-colour article (940 Black/Yellow) belongs to Black and to Yellow, so under Yellow the Performance 2.0 Shirt shows its Black/Yellow photo and the Grip Socks their yellow one. An article that also has the colour on its own wins.
• Filter panel on mobile and tablet: full screen, groups as expandable rows with a badge, checkboxes 22 px, swatches 30 px, fixed footer with Alles wissen and the black button "Toon N artikelen" that counts live.

In the prototype: the page opens without active filters, and a colour filter keeps only the two articles that have a photo per colour (Performance 2.0 Shirt, Grip Socks). The other groups do not filter. In the portal every article has a photo per colour.

Custom Made

Its own catalogue behind the nav link Custom Made, in the same shell as the catalogue.

• Filter Clubs (the amateur clubs of this dealer) as the first group.
• No label on the tiles: the breadcrumb already says it.
• The product page is the only one with the order-type toggle; see Product page.
• The product photos are drawings, square on white. The portal shows them at 4:5 with gray-1 as background, like catalogue photos.
• The specifications list the club. No "Vaak samen besteld" for a club article.

Outlet

Its own page behind the red nav link, in the same shell as the catalogue. Heading "Outlet (46)" with one line of explanation (14 gray-6, max 640 px): "Restanten en uitlopende artikelen, zolang de voorraad strekt. Alleen uit voorraad te bestellen – geen nalevering." On tablet that line sits under the heading row.

Differences from the catalogue

Outlet product page, three differences from a catalogue article:

1. The red Outlet label sits per colour row under the colour name. In the cart it sits there too.
2. The unit price is red with the old price struck through, per colour row.
3. Per colour only the sizes still in stock are shown: no empty or orange cells, no "Beschikbaar vanaf" in the size panel.

Under the prices: Outlet: zolang de voorraad strekt. Per kleur staan alleen de maten die er nog liggen; wat op is komt niet terug.

Price per colour: junior (116–164) is cheaper than senior. If a colour has both, the colour row shows the range, otherwise one figure. That applies to every article with a price break, not only outlet.

Robey's outlet photos are on white and fill the frame more; they are converted to the catalogue treatment (white to gray-1, product at 79% of the height with 10% air above, 4:5).

Search results

The same shell as the catalogue, reached with Enter or via "Alle resultaten voor …".

• The query stays in the search field. Heading "Resultaten voor 'term'" 30 px with the count 14 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.
• Default sort by relevance. Without matches the empty state with a spelling suggestion.

Empty states

Every page without content gets the same heading as the filled page, and below it, centred in at most 560 px: a heading 20/700, one sentence 14 gray-6 and one black button (44 px) with the logical next step.

• No icons, no links under the button, never an empty grid or an empty table without text.
• Worked out: search without matches · empty cart (Naar de catalogus) · no orders yet (the table header stays) · nothing on backorder (one line, no button).
• Error and loading states are not designed. Proposal: a yellow bar at the top with the message and a Retry button, the page stays.

Product page (PDP)

rb-pdp · breadcrumb Home / Catalogus / product name.

Desktop (≥ 1200)

Two columns: left the photo column (sticky, top:110px), right the information with the matrix below it.

Photo column, taking what is left next to the matrix row, at least 300 and at most 430 px (at content 1240 that is 369), top to bottom:

1. Large photo 4:5 on gray-1.
2. Thumbnails 60 × 75 (active outline:1px solid black, gap 10, arrow on the right if there are more).
3. 26 px below that, code and name of the selected colour on one line, "900 Black" (13 px, code gray-6, name 600 black).
4. 8 px below that the colour swatches (24 px round, active outline:1px solid; outline-offset:2px, two-colour as gradient).

The name sits above the swatches because it also belongs to the photo and thumbnails above it; mobile and tablet use the same order.

Right column: heading 30 px, article number as a black label 12/600, then the specifications in two columns (label 150 px 600, value): Stukprijs, Adviesprijs, Eenheid, Producttekst (two lines with the link Lees meer / Lees minder below it, text 440 px wide), and for Custom Made also Club. 24 px of air under the specifications.

Gallery behaviour

• Clicking a colour swatch switches the gallery and sets the colour name. On desktop it also scrolls the colour row in the matrix to about a third of the screen (scroll-margin-top). On tablet only the photo switches. On mobile the photo switches and the colour card in the matrix opens without scrolling; other cards without quantities collapse, cards with quantities stay open.
• Arriving from a tile where a colour was chosen: that colour is already selected and the page does not scroll.
• Clicking the large photo opens the gallery view rb-lb: a layer over the page (rgba(18,18,18,.94)), the photo large (max 720 px wide, 4:5), white round 44 px buttons for previous, next and close, the thumbnails at the bottom (52 × 65, active white outline). Arrow keys and Escape work; a tap outside the photo closes.

Order type

A catalogue article shows no label, no toggle and no explanation: the cell says through colour and ⓘ what a size does. Only a Custom Made article gets the heading ORDERTYPE (11/700 uppercase gray-6) above the matrix and the toggle rb-modus: gray-1 surface radius 10 with two 36 px buttons, 14/600, active white with shadow. Each button has a dot (green, blue), the name and a counter in the colour of the order type, hidden at 0; below 900 px only the number.

The price is the same in both. Voorraad is on by default. Each order type has its own matrix, and what you type in one goes to that cart.

Matrix

rb-mx · one row per colour (border-bottom gray-2): left the colour column with photo 64 × 80, colour code 11 gray-6, colour name 14/600 and price 12 gray-6 (the range with a price break); then the grid of cells; right the column with Aantal and Prijs of the row.

Cell (radius 5, shadow), three layers: size label 14/700 on gray-1 with ⓘ that opens the size panel · stock line 26 px 11/600 gray-6 with "(19)" · input 45 px with a 2 px indicator line on top. Digits only, no leading zeros, placeholder 0 gray-4. Focus: three-sided 2 px inner border in the indicator colour.

The third state always applies to outlet, where those sizes are simply left out, and to catalogue and Custom Made when purchasing sets it so. If the article can also be ordered as Preorder, the notice under the cell points to the Voorverkoop tab.

Under the matrix

• Right-aligned the state line "✓ Automatisch toegevoegd aan je winkelwagen" (13/600) with the link "Bekijk winkelwagen", which opens the cart of the order type you typed in. It is there as soon as a quantity above 0 exists on this page, also on return, and goes away when everything is 0. No toast, no colour.
• Backorder line: as soon as the stock matrix holds pieces in orange cells, a line with an orange dot appears: "N van de M stuks in nalevering · volgen zodra ze binnen zijn" (13 px, count 600). Not visible at 0, and not for Preorder or outlet.
• Below that the slider "Vaak samen besteld" (section heading 20/700, product tiles); not for Custom Made.

Availability per size

Maximum

Every editable cell knows a deliverable maximum: in stock now plus what is on its way, the same figures as in the size panel. Outlet counts only what is there; preorder has no maximum.

• Type more and the cell resets the quantity to the maximum, with a yellow notice line (token notice, 13 px) under the cells of that colour row: "Maat 164: maximaal 60 leverbaar (huidige voorraad + wat nog binnenkomt)", without a full stop.
• Outlet: the bracket reads "(outlet wordt niet aangevuld)".
• Custom Made with preorder: a middle dot and "Meer nodig? Bestel de rest via Voorverkoop" follow, a link that opens the Voorverkoop tab.
• The line stays until the next change in a size cell or a page change. No modal. The same in the cart.

Preorder minimum

A minimum of 15 pieces per colour of an article, across all sizes of that colour. On screen it says "per product", because in Robey's coding and in Shopify each colour is its own product (RS5005-900); the article number the dealer sees (RS5005) is the MasterProductCode. So count per colour row, not per card: a card with two colours of 10 pieces each shows the notice twice.

Three places:

1. The explanation line under the toggle.
2. In the colour row of the preorder matrix, a yellow line while that colour is between 1 and 14 pieces: "Minimaal 15 stuks per product in Voorverkoop: nog 7 stuks nodig."
3. In the cart, the same line per colour row.

Nothing is blocked: the Afrekenen button stays active and the cost summary says nothing about it. Sales sometimes allows an order below the minimum against the full price without the additional discount. Enforcing the rule, and the no-discount exception, can be added later; see Open decisions. Stock has no minimum.

Size panel (behind the ⓘ in a cell)

On desktop and tablet a 420 px panel above the cell: white, radius 10, shadow 0 2px 40px rgba(18,18,18,.26) plus hairline, no dim, padding:20px 22px, 14 px pointer to the cell, cross top-right. Below the cell if there is no 12 px room above. Closes on a click outside, Escape and scrolling. On mobile a sheet from below over a dimmed page with a Sluiten button; the tap area is the whole cell header.

Content: heading "900 Black · M" 16/700, then rows of 14 px with line gray-2 and the label left in 140 px.

Preorder cells show "Verwacht" with a blue dot and "vanaf 1 juli 2027", plus EAN. Every row fits on one line, also at 390 px.

Cart

rb-wagen · two carts, one in view. The page always shows one cart.

Heading

Open by default: the cart something was last added to, otherwise Voorraad. On mobile the switch link sits under the heading, next to the text link Winkelwagen legen.

Toolbar (hidden when the cart is empty)

On mobile Weergave and Bewaar share the width.

Article card

Border gray-2; on mobile a gray-1 card with radius 10 and padding:16px 16px 14px.

• 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", the amount 19/800 and a three-dot button (white 32 px circle, border gray-2, hover black).
• Options menu behind the three dots: Naar productpagina · Toon alle kleuren (becomes Verberg lege kleuren) · line · Artikel verwijderen (red, with confirmation "Artikel verwijderen? Alle aantallen van Crossbar Shirt in deze winkelwagen gaan op 0.").
• No collapse arrow, no article photo in the header, no separate delete button.
• Body gray-1 with one white colour row per colour (border gray-2, radius 5, padding:14px 20px): photo 64 × 80 with code, name and price (column 92 px at 768, 100 px above), then the cells as on the product page with as many 105 px cells as fit (repeat(auto-fill)), on the right Aantal and Prijs of the row.
• On mobile the colour row is a collapsed card with chips (S 6 · M 12); open it and the cells sit in three columns.
• Colour rows are sorted by colour code. Rows without a quantity sit behind "Toon de overige N kleuren" per article.
• All sizes at 0: the card stays while you are on the page, faded (header at 55% opacity) with "Geen aantallen meer. Dit artikel verdwijnt zodra je de winkelwagen verlaat." On leaving it is gone. Colour rows are only hidden, never removed. The empty state appears only when no card is visible anymore.

Cost summary

A floating card inside the column: position:sticky; bottom:24px, gray-1, border 1 px gray-6, radius 10, padding:16px 24px, shadow, 48 px clear of the footer. Three groups, left to right.

• Na korting is the amount the threshold is measured against. Without it the figures do not add up, because the total on the right includes the shipping cost.
• Free-shipping label: "Nog € 20,12 tot gratis levering" while the net amount is under € 150. Background gray-2, no border, padding:3px 9px, radius 3, 12 px black text, amount bold, no icon. A label and not a plain line, because it comes and goes; gray and not a status colour. See the design history.
• The threshold counts the net amount per cart: subtotal minus the additional discount, excluding shipping and VAT. So € 199,30 with 30% discount gives € 139,51, a label of € 10,49 short, and a total of € 144,51 because shipping is in it. Not the total including shipping: the label would then disappear while the shipping is still charged.
• Calculation: additional discount on the subtotal; shipping € 5,00 while the net amount is under € 150 (Belgium and other countries: data question); VAT only in checkout. No backorder line, the orange cells and the line on the product page already say it.

Everything is aligned to the top (align-items:flex-start), so the heading, Subtotaal, Verzendkosten and both totals start on the same line 17 px below the card edge; only the Afrekenen button centres vertically (align-self:center). The amounts column is always three lines and the shipping column always two, so nothing jumps when the label appears or disappears. The order detail and the draft order detail have no third line and keep their own height.

In the prototype both sample carts stay under € 150 net, so the free-shipping line shows on opening. The preorder cart has one colour below the minimum as well, so both notices are visible at once: 15 pairs of socks (enough) and 2 shirts (not yet).

Cart model

One figure per article · order type · colour · size. The matrix on the product page and the cart are two views of the same figures. Everything follows from that: row totals, card totals, the counter in the gold button (total pieces across both carts), the minicart (pieces and subtotal per cart), the homepage block and the cost summary.

Account: Orders and invoices

rb-account · breadcrumb Home / Account / Orders en facturen. Two columns like the catalogue: navigation 220 px, content, gap 32.

Navigation rb-anav, no surface and no counters

Below 1340 px the navigation is a row of horizontally scrolling tabs under the breadcrumb (14 px, active 600 with a 2 px underline); the identity then lives in the menu.

Heading 30 px, no subtitle.

Filters

A chosen value appears as a chip below. Backorders are not a separate page: the delivery time differs per size, so the expected week sits per size in the order detail. The homepage block and the button at an open shipment open this list with the switch on.

Table

Header row 11/700 uppercase gray-6 with line gray-3. Rows 14 px, padding:15px 12px, line gray-2, hover gray-1; the whole row opens the order detail.

• Columns: Order (the number starting with B2B or VO) · Datum · Referentie (the dealer's own text; empty = dash gray-4) · Status (9 px dot + text) · Stuks (right) · Bedrag (right, 600, tabular) · arrow.
• No invoice column: an order can have several invoices and they sit on the order detail.
• Status colours: green Geleverd, orange Deels geleverd, blue In productie, black In behandeling, gray-3 Geannuleerd (text gray-6).
• Under the table "1–8 van 38 orders" with Vorige/Volgende (36 px).

Account: other pages

Same shell as Orders and invoices. No gray info block at the bottom and no explanation under a table. Every list page has the same search field with its own placeholder. Product photos in lists: 28 × 35 desktop, 26 × 32 tablet, 32 × 40 mobile.

Zendingen

• Columns: Zending · date · pieces · order · status (verstuurd, onderweg) · Track & trace. Search field "Zoek op zending, order of track & trace".
• On mobile a card that is itself a link may not contain a second link, so Track & trace is a clickable element that is not an anchor, on the right in the status line before the arrow.

Conceptorders

• Columns: name · created by · order type (the cart label Voorraad or Voorverkoop) · created, with changed below it 11 px · articles · pieces · amount · button Acties ▾.
• Menu behind Acties (white, border gray-2, radius 5, shadow): In winkelwagen · line · Exporteren naar csv · Exporteren naar pdf · line · Verwijderen (red, confirmation).
• No "Nieuwe conceptorder" button: a draft is saved from the cart. No status column: who created it, the dealer or sales, already says whether it is a proposal.
• The whole row opens the draft order, like an order; the Acties button does not. On mobile the cards open the draft too and have no Acties menu, because a card that is a link may not contain a second link. The actions live on the detail page.

Draft order detail, the same layout as the order detail

In winkelwagen puts the saved quantities in the cart of that order type; what is already there stays. Example in the prototype: "SV Hooglanderveen · jeugd".

Creditnota's

Like Orders and invoices, with amounts negative and bold, a pdf chip per row and numbers in the invoice series. Status: "Te verrekenen" orange, "Verrekend" green with the invoice number below it, "Uitbetaald" green.

Mijn gegevens

Five cards (border gray-2, radius 10, padding:20px 22px) with a definition list (headings 11/700 uppercase gray-6, values 14; three columns, two on tablet, one on mobile).

Cards the dealer can edit have a link in the header. Administrative data goes through the button "Verzoek tot wijziging" top-right.

Account: order detail

rb-order · same grid as the account pages.

Heading

Below 1200 px the buttons sit on their own row under the heading; on mobile two rows, with Opnieuw bestellen full width.

Meta block

gray-1, radius 10, padding:20px 22px, three columns (labels 11/700 uppercase gray-6, values 14): Referentie · Besteld (date, by whom) · Klantnummer · Factuuradres · Afleveradres · Betaling with due date. A list on mobile.

Zendingen (heading 18/700)

One row per shipment rb-zend: white, border gray-2, radius 5, padding:14px 18px.

No coloured surface: the dot carries the status.

Facturen (heading 18/700)

Its own block with, per invoice, the number, date, which shipment, amount and a pdf chip, with the line "Een order kan meerdere facturen hebben: per zending wordt gefactureerd wat is geleverd." 34 px of space below it.

Artikelen

The same cards and colour rows as the cart, static, with only the ordered sizes per colour. The colour photo in each row links to the product page with that colour selected.

• Cell: size label · status line ("geleverd" gray-6, "volgt ± wk 38" orange) · quantity 45 px 700. The ± says the week is an estimate; the shipment row uses it too. Indicator line green when delivered, orange with orange-tint for a backorder.
• One line of explanation above the cards: "Per maat het bestelde aantal. Groen is geleverd, oranje volgt nog."
• No view switch above the articles: the list view of the order detail is not designed yet, so there is nothing to switch to. See Not yet designed.
• Below the articles the cart's cost summary, not sticky and without the shipping notice, with the groups Subtotaal and Btw 21% | Verzendkosten | Totaal stuks and Totaal.

Downloads

rb-dl · five categories: Catalogus 26/27, Pricat, Productfoto's, Model- en campagnebeeld, Logo's en merkrichtlijnen. No return procedure and no forms: returns go through the return portal.

Rule for Download alles: it sits at the level where the set is one thing.

Build

• Overview: one row per category (icon 40 px in gray-1, name 15/700, one line of explanation 13 gray-6, on the right count · size · updated 12 gray-5 and a chevron). The whole row is clickable, no download button. Search field above. An empty category is not shown.
• A category is its own page, shareable link and no accordion, breadcrumb Home / Downloads / category. Files as rows of the same component: type badge 34 px, readable name with a line of explanation (the name in the portal is not the file name), size, date, Download button. "Download alles" right of the heading on desktop, below it full width on mobile.
• A category that grows per campaign: one row per campaign with thumbnail 96 × 64 (74 × 50 on mobile), name, meta, its own Download alles button and a chevron to the individual images. Newest on top with a black Nieuw label until the dealer has opened it.

Behaviour

• Productfoto's: the search field searches articles. Type an article number or name and you get a row per article with photo, number of colours, number of images, size and a download button. An empty field shows the collections; no match gives one line with the tip to try an article number.
• A date everywhere, so a dealer can see whether they have this season's catalogue.

Returns and customer service

Designed but parked: the links in the black bar, the menu and the footer point to Downloads until Robey decides what goes here. The code sits in geparkeerd-retour-service.py.

• Retourneren through the Sendcloud return portal: button Retour aanmelden, Bekijk je retouren, three steps, conditions, and "an approved return becomes a credit note".
• Klantenservice: three tiles, frequently asked questions with a search field, and a contact form with prefilled account details. Next to it direct contact, the account manager and the visiting address.
• To be confirmed by Robey: copy, conditions, opening hours, and whether every dealer has an account manager.

Footer

rb-voet · black, padding-top:60px.

Column heading 18/800, links 15. No column about Robey itself. On mobile the three columns become accordion rows.

Mobile and tablet

The four views per page are not four designs but one responsive layout; the prototype shows all four. Rules that differ from desktop:

• Header mobile and tablet portrait: black bar 36 px (delivery line only) · white bar 76 px with logo 52 on the left and on the right the account button (white pill with border, icon and first name), gold cart button with pieces, menu icon · search row 56 px with the search bar full width (44 px). Only the white bar sticks (smart behaviour). Tablet landscape (900–1199): compact desktop header (72 px, logo 44, search bar max 300 px, buttons 44) with nav links, without hamburger.
• Account button goes straight to Orders and invoices. The menu contains everything from the account panel: under Mijn account ▾ the account pages and Uitloggen; at the bottom Prijzen verbergen (switch), language, and the gray account block (shop name 14/600, account number 12 gray-6, Wisselen on the right if the user has more accounts) full width as the closing element of the menu.
• Menu: full screen, bar empty apart from the cross. Level 1: Catalogus, Custom Made, Outlet (17/700, arrow right) · at the bottom Mijn account ▾, Klantenservice, Retourneren, Downloads, Prijzen verbergen, language (15/400, lines gray-2 across the width). Level 2 (Catalogus): back arrow, Alle artikelen, Nieuw seizoen 26/27, then Kleding ▾ / Accessoires ▾ / Collecties ▾ that expand, one at a time, items indented 32 px. Height equal to the screen; if it does not fit, the menu scrolls.
• Search: tapping the search row opens a white panel under the search row with the same content as the desktop search panel; the magnifier becomes a cross that closes and clears the field. Typed text 16 px, placeholder 14 px.
• PDP mobile: main photo 4:5 with swipe, arrows and dots; below it the selected colour as "100 White" and the colour swatches (32 px) below that; heading, article number and specifications below; for Custom Made the toggle full width. Matrix as colour cards (see Product page). The page starts without quantities; the card of the displayed colour is open. Tablet: thumbnails under the photo (56 × 70), colour name and swatches by the specifications on the right, Lees meer aligned with the value column (label 130 + 12), photo 300 px (768) or 400 px (900+), matrix in rows with as many 105 px cells as fit.
• Cart mobile: under the heading one line with the switch link on the left and Winkelwagen legen on the right, below it the search field full width and one line with Weergave and Bewaar als conceptorder sharing the width (buttons with 12 px side padding so it fits at 375 px). Per article a gray-1 card (10 px, padding 16/16/14) with the text header and per colour a white collapsed card with chips; 26 px above an article header, 10 px between colour cards. Cost summary as a block at the end. Tablet: like desktop with the colour rows across the width; cost summary sticky with two columns and the gold button bottom-right.
• Homepage mobile: banner 3:2 · three blocks stacked with the two links below · sliders with a peek of the next tile. Tablet: three blocks side by side, sliders with four in view.
• Catalogue mobile: heading with count · Filters (badge) and Sorteren sharing the width · chips · grid two columns · "Toon meer (N over)". Filter panel full screen with a fixed footer.
• Account: tabs under the header; lists as cards below 768; compact tables from 768 to 1339. Order detail: button row under the heading; shipments as cards; articles as collapsed colour cards with chips and a status line per colour.
• Sliders swipe on touch screens, arrows only with @media (hover: hover). Rotating switches the layout live while keeping typed quantities.
• Test widths: 375 · 390 · 768 · 810 · 1024 · 1194 · 1280 · 1366 · 1440 · 1512.

Canonical copy

The on-screen copy is Dutch. English glosses in parentheses where helpful.

Data questions for the developer

1. Article and colour: confirm that the tags color and MasterProductCode suffice to group products into one article with colour rows, and where the order of colours comes from (the current B2B shows a fixed order per article).
2. Swatch colour: where is the hex value per Robey colour code, and the second colour for two-colour articles (940 Black/Yellow)? Without a source, swatches stay manual work.
3. Featured colour per article: which colour the tile shows; proposal: a metafield on the product, falling back to the first colour with stock. With an active colour filter the tile shows the filtered colour.
4. Size surcharges: are large sizes separate variant prices? Determines the price range on tile and product page and per cell in the cart.
5. Stock per size: show exact quantities to dealers (like "(19)") or thresholds? The design shows quantities. For the size panel and the maximum also: incoming deliveries per variant (date, quantity) and the flag "will not be replenished".
6. Preorder: how is a production variant modelled (separate product, variant, season tag)? Determines whether the toggle works per article or per colour. Does the minimum of 15 pieces per colour also apply to Custom Made articles that only exist as Preorder, and is there an exception for reorders of a colour that was ordered before?
7. Product copy: which article description is available (ERP, PIM, webshop), in which languages, with or without formatting?
8. Gender and sport: do these exist as tags or metafields? Otherwise the filters cannot exist.
9. User role: dealer or sales staff (for Wisselen), and switching between accounts through the Customer Account API (B2B company locations); is "Accountnr." the customer number from the ERP?
10. Hide prices: a per-user setting that survives the session?
11. Order numbers: stock orders start with B2B, preorders with VO; the ERP number is not shown. Is that right in the new setup?
12. Shipping costs: € 150 for the Netherlands; what applies to Belgium and other countries (Shopify Markets)? The threshold itself is settled, see the cost summary.
13. Free-shipping gap in catalogue prices: the label names the net shortfall (€ 10,49), but the dealer shops at list prices and has to add € 14,99 of product to close it. Keep the net amount, or name what the dealer has to add? The second is directly actionable but ties to no other figure on the card.
14. Draft orders: Shopify draft orders or ERP? Determines whether sales can create them and whether "Aangemaakt door" can be filled.
15. Discount agreements: does the additional discount come from the ERP as a price list per dealer or from Shopify B2B price lists? Determines how the cost summary and the Pricat download are filled.
16. Invoices: is a backorder invoiced separately on shipment? Determines the Facturen block on the order detail.
17. Dealer screen widths: the distribution of desktop viewport widths from the analytics of the current B2B or the webshop, to check the content width of 1320.
18. Checkout: can the Shopify checkout mirror the cart's cost summary (additional discount as a line, shipping, VAT)?

Open decisions for Robey

• Returns and customer service: what goes on those pages; the design is ready (Sendcloud portal, FAQ, contact form with account manager).
• Zendingen as a separate page, or merged with the backorder information into Leveringen (expected · in transit · delivered): question for sales.
• Discount list: does the per-EAN list still serve a purpose for dealers' purchasing systems? If so: as a download next to the Pricat, not as a page.
• Several invoices per order: confirm that invoicing is per shipment (the order detail is designed for it).
• Enforcing the preorder minimum: today the portal only warns at the colour row and lets the order through, because sales sometimes allows less against the full price (no additional discount). Decide later whether the portal should block below 15 pieces, or drop the discount automatically for that colour, and who may grant the exception.
• List view of the order (one line per size) and registering a return from an order: still to be designed.
• Outlet on mobile and tablet: the outlet catalogue exists at all sizes, the outlet product page only on desktop. Assumption: sold-out outlet sizes are never replenished.
• Custom Made product photos: all Custom Made articles need a product photo in the same treatment as the samples (white to #F3F3F3, 4:5). Batch job.
• Season on the tile or not; duration of the welcome strip after the first login; verify the Chamber of Commerce number on the invoice page.

Not yet designed

Outlet product page on mobile and tablet · list view of the order detail · error and loading states · checkout and login (Shopify) · e-mails · registering a return from an order.

Appendix: working files

Everything lives in b2b-design/. The generators are Python; the prototype is built with python3 bouw-responsive.py, the tokens with python3 bouw-tokens.py, this dossier with python3 bouw-dossier.py. File and script names are Dutch; the generated token and component names are English.