Resize the window: mobile (< 768), tablet portrait (768–899), tablet landscape (900–1199) and desktop (≥ 1200) are one file. The indicator bottom-right names the breakpoint.
Everything that looks clickable works: menu, search, filters, colour swatches, the size matrix (type quantities), the cart, the account pages, the gallery view.
Quantities typed on a product page appear in the cart immediately; there is deliberately no "Add to cart" button.
Sample data, not authoritative. The on-screen copy is Dutch: the portal is for Dutch customers, and the wording is part of the design.
Reading values
The prototype is real HTML and CSS, so the browser inspector replaces a design tool's inspect panel: right-click, Inspect, and you get the real spacing, font sizes, colours and hover behaviour per breakpoint. Classes are named rb-<component>__<part> (glossary in the dossier) and the values refer to the tokens.
Adopt the values, the structure of each component, the behaviour and the copy. Do not adopt the prototype's own code: it 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.
Recent changes
So you can see whether anything moved since you last read it. The prototype and the dossier always show the latest version.
21 September 2026
A size still to come says "volgt ± wk 38" in the cell, and the shipment row "verwacht ± week 38". The ± marks it as an estimate.
The view switch "Weergave: Matrix · Lijst" is gone from the order detail and the draft order detail: the list view is not designed yet.
Photo labels ("Nieuw 26/27", "Outlet") get the 3 px radius that the token already prescribed.
An empty colour row no longer shows in the cart. The first row of every card used to stay visible even at zero.
The full header now starts at 900 px instead of 1200: nav links in the bar, search row underneath, panels on tap. The black bar carries its links from 900 and is 36 px at every width.
20 September 2026
The Components chapter has one shape per component: class name, a Build table, a Behaviour list.
The free-shipping label in the cost summary is gray-2, and the summary has a third line "Na korting" with the amount the € 150 threshold counts.
The parked screens Retourneren and Klantenservice are out of the prototype; their code sits in geparkeerd-retour-service.py.