Fable 13 · Guide 03 · Clothing e-commerce
The brief: a clothing store with a product grid, cart flow, and single product page. The idea: a Rotterdam label that cuts eight seasonless garments from undyed cloth and dyes to order — which hands the interface its one big trick.
Every garment photo is desaturated (filter: grayscale(1)) and set to
mix-blend-mode: multiply over a coloured figure background. Switching the dye bath —
undyed, Klein blue, moss, rust — recolours the entire catalogue instantly, on the grid
and on the product page, with no second photography set. The site even admits it:
“dye previews are simulations — cloth arrives better.”
The product page is a hash-routed takeover (#/p/the-coat works, Back and Escape both
return) with size chips, dye chips, and ship-time that honestly changes when you pick a dye
(the dye queue costs days). The cart is a spring-driven drawer — Motion's
spring(260, 30) — with quantity steppers, a localStorage-persisted basket, and a checkout
that admits it's a runway, not a till. Cart anatomy cross-checked against commerce patterns on
21st.dev, rebuilt in-house.
Newsreader italic at display sizes is the fashion voice — the Klein-blue dyed to order is the whole brand in three words. Familjen Grotesk handles UI labour. The hero's pattern-cutting schematic (dashed SVG with notch points) is the only illustration, because a cutting table is the only place this brand decorates.
Process — three passes