Design System: E · Colour Menu
Overview
W+R's colour names are a hidden gem. They read like a menu (Weissbier, Mojito, Dijon, Moroccan, Chocolate, Fruit Salad), so the store serves them as one. Every colour is a full field, the name set huge, with its real sample photograph, its Pantone and W+R reference, and a £6 sample one tap away. The pieces on the shelf sit on their colour as Paper discs. A sample is the cheapest way into made to order, so the store sells those first.
It speaks to homeowners who start from a colour, to Triniti's Instagram audience, and to anyone not ready to spend hundreds yet. It's the most joyful direction and the one that sells samples. It's weaker at clearing one specific shape fast, and it's the furthest from Mike's "mostly monochrome".
The honest risk is the gap between a screen and a piece of concrete. "It's not the colour I saw" is the worst return, so every field says: "Screen colours are a guide. Order a sample to see the real thing."
Colors
Paper #FEFEFE ground, Ink #212121 text, and W+R colours as full fields. W+R's pigments are dusty, not neon, so E is bold through scale, not saturation. Each field carries Ink or Paper, whichever contrasts more. Where neither reaches 4.5:1 the field is for large text only, and small text on it sits on a Paper strip. All 32 standard colours are palette slots, so the fan deck, the shop's colour bar and the samples page paint every one of them. The eight the design document names:
The other 24 follow the same rule, and each ratio is listed under Colourways. Ink on Paper is 15.97:1, so buttons are Ink pills with Paper text.
(ASSUME) The site's Moroccan, Chocolate and Rose are the colour card's Clay, Chocolat and Pink (open question 7), and Charcoal is Gray. Mojito, Fruit Salad, Pewter, Teal and Blue aren't on the 34-colour card, so they get no field and no sample yet. Their pieces appear on plain Paper under "Not on the colour card yet".
Typography
A soft, heavy 1970s serif for the names (W+R even has a colour called 1977), and a plain sans for the rest.
- Display: Fraunces 600, soft axis at 100. Scales fluidly from 56px at 390 to 176px at 1440 (the front matter gives the 1440 size), line height 0.92, tracking −2%. Colour names, page titles and section titles use it, at smaller sizes where the space is tighter.
- Body: Instrument Sans 400. 17px at 390 and 18px at 1440 (front matter: 18px), line height 1.5.
- Labels and prices: Instrument Sans 500 with tabular figures. Labels 13px and 14px. Prices 18px and 20px.
Everything that isn't a name is Instrument Sans. Nothing is uppercase and nothing is bold.
Layout
Full-width bands, one colour each, divided only by the change of colour. 2 columns at 390 and 12 at 1440. Spacing steps are 8, 16, 32, 56, 96 and 160px, with an outer margin of 16px at 390 growing to 56px at 1440.
- Home: the first screen is a fan deck under "What colour?". With a mouse at 1280px and up it's the 32 standard colours as thin strips, with one open as a panel showing its real piece, its price and its sample. On a phone, a tablet or a touch screen it's a grid of chips (4 across at 390), and a Weissbier preview row keeps a real piece on the first screen. A dot marks the colours with stock. Tap one and its field opens. Below, one field per colour with stock, flipping sides at 1440 so the stack doesn't read as one band repeated. Then the pieces whose colour isn't on the card, the made-to-order colours as a mosaic, and the full £60 pack on Ink.
- Shop: grouped by colour, not model, under a sticky colour bar that follows you down the page. Two discs per row at 390, four at 1440. Sort reorders the colours and the pieces inside them, and the shape filter hides other shapes. Sold pieces stay at the end of their colour, ringed.
- Piece: a top band in the piece's colour with the disc on the field and the price on a Paper label. Then the gallery in Gozney's order (practical, human, context, video), the details, the add-ons with the sample never pre-ticked, and "This shape in other colours, made to order".
- Samples: colour first. Every colour with a sample is a tile painted in that colour, with its real photograph and an "Order a sample" button. The two terrazzo finishes aren't a flat colour, so they get a Paper tile.
- Everything else (made to order, a model, bespoke, architects, basket, checkout, confirmation) is V1's page in E's type, pills, rules and discs. MOK keeps its own orange, cream and type.
Elevation & Depth
Flat. The change of colour is the only divider, plus 1px Ink rules where a band needs one. Discs sit on fields without shadows. There are no cards and no blur. The one ring is a 1px Ink line round a Stone field when the ground is Stone too.
Shapes
Round discs for samples, pieces, badges and rings. Pill buttons. Full-width rectangles for fields. A 4px corner on the Paper strips and the buy label. No frames.
Components
The colour field. The signature component. A full-width band in one W+R colour. The name in Fraunces, the unchanged marque in the corner, its Pantone and W+R reference on a Paper strip, and the real sample photograph in a 120px disc. Then the stock in that colour as Paper discs with name and price, never cropped, filtered or recoloured. Two pills close it: "Order a sample, £6" and "See it made to order". A colour with no stock still gets its field. Text is Ink or Paper, whichever passes, and small text on a large-text-only field sits on a Paper strip.
The piece disc. The piece's own photo, whole, inscribed in a Paper circle at 68% of its width so even a square photo's corners stay inside. Field and basin won't match exactly; the disc keeps them apart.
Badges. Round 52px discs in Instrument Sans 500 at 11px. Ready now is a Paper disc with ink text. 1 of 1 is an Ink disc with paper text. Sold is a Paper disc with an Ink ring, and the photo stays. New is the field's own colour, ringed in Paper.
Pills. Ink with Paper text, 48px tall. On a dark field the primary turns Paper. "Order a sample" really adds the £6 sample to the shared basket and stays in place, with a polite status saying how many are in it.
The fan deck and colour bar. Strips or chips of the 32 colours. The colour bar is Paper, like the header, with a dot of each colour and its count.
Missing shots. A step with no photo yet is a dashed Paper circle that says "Shot to come: …" or "Film to come: …". It is never a fake.
Do's and Don'ts
- Do say on every field that screen colour is a guide, and offer the sample.
- Do keep the piece's own photo whole in a Paper disc, apart from the field.
- Do label a render "Render" and a composite "Art direction".
- Do keep delivery, lead times, bracket compatibility and trade terms as "to confirm".
- Do keep the was-price reason line: "Made alongside one of our larger commissions, so it's priced below the made-to-order price." (ASSUME)
- Don't change a field's colour in any colourway. The fields are the product.
- Don't give Mojito, Fruit Salad, Pewter, Teal or Blue a field until W+R confirms their references.
- Don't put small text on a large-text-only field. Put it on a Paper strip.
- Don't put the wordmark on a field. On a field, only the marque, in Ink or Paper.
Feel
Playful but short. The fan deck spreads open over 600ms, 12ms apart. Colour names slide up 16px as their field enters the screen. Discs tilt 3 degrees on hover. Nothing loops, so nothing needs a pause control, and under reduced motion everything appears in place.
The voice is the menu: the colour's name first, said with relish, then the plain facts. "What colour?" opens the home page, "On the shelf, colour by colour." introduces the fields, "The whole menu, £60." sells the pack.
Colourways
The fields never change. A colourway repaints only the page ground behind and between them. The header, the colour bar, the strips and the discs stay Paper.
1 · Paper
Job: colour fields on bright paper. This is the direction as designed, and Mike's off-white shop with the colour added as fields.
Text pairings:
2 · Stone
Job: E's own risk is "it's not the colour I saw". Colour is judged against neutral mid-grey: ISO 3664 asks for a neutral matt surround of 10 to 60% reflectance, with walls preferably between L* 50 and 70. W+R Stone #8b8b8b is neutral at L* 58, so every field sits on it instead of on bright white.
Text pairings that change:
Everything else is as in 1 · Paper. A Stone field on the Stone ground gets a 1px Ink rule so it still reads as a band.
Every field, in both colourways
The same in both, because the fields never change. Ratio of the text colour on the field.