Design System: D · Cast Lab
Overview
Joe's techy brief: concrete sold like precision product, for specifiers who want numbers before mood, and for anyone wary of buying a heavy object online. It borrows the structure of Joey's BraceCommerce draft (an airy ground with faint grid lines, one gradient ribbon, mono eyebrows, pill buttons, dark sections with floating product cards) and leaves its violet behind. Concrete Cat's "1 left" becomes a live count.
The store is built as a lab bench. Every piece is a spec card with its size, weight, fit, colour and stock, set in a mono readout. The shop is a table you can sort by width ("will it fit?"), weight or price. The piece page is a product console. Anything W+R hasn't confirmed says "to confirm" in oxide mono, not a guess.
It is the coldest of the eight directions on purpose: the handmade feel lives in the photographs, which stay untouched in Paper cards. Counts (32 on the shelf, 5 sold, 37 listed) are read from the data, never typed.
Colors
Paper and Ink carry the page. Paper is the ground, Ink is the text, and White carries the faint grid and every hairline (decorative only, never the only thing that says something). Welsh Slate is the secondary text and the dashboard tiles and toast. Black is the dark section.
Midnight Sun is the one accent. It is an iron-oxide red, and iron oxide is what colours concrete, so the "tech" colour is W+R's own material. It is the brightest W+R colour that still carries Paper text, so it does both of the violet's jobs: Paper on Midnight Sun for pills and the New badge, and Midnight Sun on Paper for eyebrows and "to confirm" labels. Both are 4.96:1.
The ribbon is the only generated image. It runs Oxford, Powder, Peach and Midnight Sun, concrete greys folding into oxide, and no text or photo ever sits on it. Laurel is the live dot.
Colours reach the code as --cl-* tokens from palette.ts; no stylesheet writes a colour. Colourway detail and every text pairing's contrast are at the end.
Typography
No typeface from V1 or A to C. Fonts are Google Fonts stand-ins; W+R's own web licence for AUTHENTIC Sans is unconfirmed.
- Display: Geist 300, 44px at 390 and 104px at 1440, line height 1.0, tracking -3%.
- Headings: Geist 300, 32px to 56px, tracking -2.5%.
- Body: Geist 400, 17px at 390 and 18px at 1440, line height 1.55.
- Eyebrows, readouts and prices: Geist Mono 400 with tabular figures. Eyebrows are uppercase at 12px and 13px; readouts 13px; prices 18px and 20px.
Weight is light or regular, never bold. Mono is for the numbers: sizes, weights, prices, counts and "to confirm".
Layout
Twelve columns at 1440 and four at 390, drawn as faint White lines behind the page, with a 1200px content width. Spacing steps are 8, 16, 24, 32, 48, 80 and 128px. 390px is designed first, and nothing scrolls sideways at 320, 390, 768 or 1440.
- Home: the eyebrow "Hand-cast in Nottingham · Live stock", a typed headline "Cast in concrete." with a second line in Midnight Sun that cycles Ready now, Made to order and Bespoke, and the ribbon on the right with a real piece's spec card floating on it so a real basin is on the first phone screen. Then a Black section of floating cards (the stock tile, the Omoi spec card, the toast), a shelf of spec cards, the sample picker, four routes and a marquee of the client logos already on W+R's site.
- Shop: four Welsh Slate dashboard tiles, then a spec table of all 37 listed pieces: thumbnail, name, width × depth × height, weight, colour, price and a live status dot. It sorts by width, weight or price (column headers are buttons with
aria-sort), filters by family, and toggles to spec cards. A piece with no confirmed weight or size sorts last whichever way you sort.
- Piece: a product console. The photo card and a thumbnail rail in Gozney's order (practical, human, context, video) on the left; on the right the sticky readouts, the price with its was-price reason, a plan-and-side footprint drawn from the listed size, add-ons and the buy buttons. Steps with no photograph yet read "Shot to come".
- Samples: the sample picker at full size, the full pack, and every colour in a plain list.
- Every other route (made to order, a model page, outdoor kitchens, bespoke, for architects, basket, checkout, confirmation) uses V1's page inside this chrome, with these tokens mapped onto V1's. MOK pages keep MOK's own orange, cream and type.
Elevation & Depth
This is the only direction with shadows, and they carry the idea: cards float over the grid and over the dark sections like product UI. One soft shadow on Paper cards, a deeper one on cards over Black. Everything else is flat, with 1px White hairlines.
Shapes
Cards have 16px corners, photos inside them 10px. Buttons, badges and controls are pills; colour chips and status dots are circles. The unchanged W+R marque marks each spec card. Photos are always contained in a Paper card, never cropped, so the whole piece is in frame.
Components
The spec card. A Paper card. The photo on top, contained. The name in Geist 400 at 20px, then readouts in Geist Mono: "420 × 420 × 120 mm", the weight ("to confirm" while W+R's figure reads like a default), "Sink only", the colour with its dot, and "1 in stock" with a live dot. Then the price block and a Midnight Sun "Add to basket" pill that puts the piece in the shared basket and raises the toast.
The toast. Welsh Slate, rising over 200ms: the piece's name, and "Ready now · dispatch to confirm". It sits above the direction dock, so it never covers a button.
The price block. The price, the was-price struck through, and one sentence: "Made alongside one of our larger commissions, so it's priced below the made-to-order price." (ASSUME: W+R must confirm the wording and that the was-price is the made-to-order price.)
The spec table. Sortable by width, weight and price, filterable by family, with a toggle to spec cards. Sold pieces stay, reading "Sold · 0 in stock".
The sample picker. The 32 standard colours as round chips cut from W+R's real sample photos, one radio group (arrow keys move between chips). The chosen chip shows its Pantone and W+R reference from colours.json, and "Add a sample, £6" puts that sample in the shared basket.
Badges. Pills with a dot in Geist Mono uppercase 11px. Ready now: a Laurel dot, Ink text. 1 of 1: an Ink outline. Sold: a Welsh Slate fill, Paper text. New: a Midnight Sun fill, Paper text.
Pause controls. Anything that loops (the ribbon and the headline's route line, the marquee) has a labelled Pause button.
Do's and Don'ts
- Do show weights as "to confirm" until W+R checks them; 27 of 37 read "15 kg", which looks like a default.
- Do keep delivery, lead times, bracket compatibility and trade terms as "to confirm".
- Do show every product photo untouched and whole. Label a render "Render" and a composite "Art direction".
- Do give the ribbon, the route line and the marquee a pause control, and respect reduced motion.
- Don't let the ribbon touch a basin or run behind the wordmark.
- Don't use Midnight Sun for small text on White: it is 3.66:1 there. It is for Paper grounds only.
- Don't let it read as Brace's own template: the photos and the oxide carry the brand.
- Don't type a price, a count or a hex. They come from the data and the palette.
Feel
Precise and calm, readouts first: numbers, units, status. The headline types at 50ms a letter, and the route line cycles three times, then stops on "Ready now." The ribbon drifts slowly, the stock numbers count up once as they scroll into view, live dots pulse, and the toast rises over 200ms. The ribbon and the marquee each have a Pause button. Under reduced motion everything is still, the buttons read "Motion off", and the page shows its settled state.
Colourways
D has one colourway, and that is deliberate: nothing earned a second. Iron oxide is what colours concrete, so Midnight Sun is the colour. A dark version and a warm version were tested. The dark one had no job. The warm one was only a temperature shift at similar lightness, with an accent just ΔE 6.6 from the original, so it failed the squint test.
1 · Midnight Sun. Iron oxide is what colours concrete.