Design System: C · Workshop drop
Overview
Mike's number one problem is the shelf: 32 one-off pieces that need to sell. C sells them in his own taste, the orange-logo clothing brand he likes and the feel of Service Works and Finisterre, as numbered one-off drops. The page is dense and loud, there's no hero photograph, and sold pieces stay on the board as proof, the way Concrete Cat does it.
It speaks to Instagram followers, younger homeowners and anyone who likes owning a one-off. It serves the stock route hardest, and it's the natural home for MOK.
Everything on a page comes from the data. "001/037" is a piece's place in today's listing, out of everything listed. The 32, 5 and 37 on the home page are counted from the pieces. Nothing here is typed by hand.
Colors
Concrete, ink and flat blocks. The ground is W+R's own White #dcddd8, a pale concrete grey, so the page is literally their material. Text and rules are Ink #212121.
Colour arrives as seven jobs, never as colours: ground, text, block (the loud block: the home intro, Ready now, the buttons, the end tile), on-block, bar (Sold bars, the ticker and the footer), on-bar and hover (the light block that carries ink: route hover, the ticker's Pause button and the footer wordmark). A colourway repaints those jobs and nothing else, so every pairing is chosen once and holds in all three.
Orange is never text. MOK orange #FF5D00 only ever fills a block that carries ink, at 5.23:1. Orange text #C24300 fails on every ground here, so it isn't used. Gray #696667 is also unused for text, at 4.16:1 on White.
Product photographs are never touched. No filter, no blend mode, no recolour, no greyscale on sold pieces.
Typography
Two type variants, switched in the dock (?type=1 or ?type=2, remembered, applied before first paint). Both reach every route, and the type-role tokens in c-workshop.css are the only place a face is named, so the ported pages, the pages added in V1.6 and the shared V1 components inside them all change together. Type 1 is as built; type 2's fonts load only when it is chosen. Everything inside the MOK section keeps MOK's own type, Bai Jamjuree for headings, buttons and the film block, and V1's mono for small labels, under both variants: the type-role tokens are reset inside .mok, so choosing a variant changes nothing there. The film's controls take MOK's orange and cream in every colourway.
Type 1 · Archivo (as built)
One family, Archivo, at three widths: bold and condensed for shouting, normal for reading. No mono and no serif.
- Display: Archivo 800 at width 62, uppercase, line height 0.9, tracking -1%. It runs from 56px at 390 to 160px at 1440. Word spacing is opened by 0.08em so "DROP 01" doesn't read as "DROP01".
- Drop numbers: Archivo 700 at width 62, tabular figures. 28px to 32px on a card, 72px at 390 to 120px at 1440 on the piece page.
- Labels: Archivo 600 at width 75, uppercase, tracking +0.04em, 12px to 13px. Navigation, badges, chips and facts.
- Body: Archivo 400 at width 100, 16px to 17px, line height 1.45.
This breaks "light, never bold" on purpose. That's the wildcard.
Job: the drop shouts, so a one-off sells like a clothing drop. Reference: the orange-logo clothing brand Mike likes (14 October meeting) and Service Works: condensed, capitalised and counted.
Type 2 · Inter Tight + DM Mono ("Quiet board")
The same numbered board with the volume turned down: width, weight and case all reverse against type 1.
- Display: Inter Tight 500, sentence case, line height 0.98, tracking -4%. 44px at 390 to 120px at 1440.
- Card names: Inter Tight 500, 20px to 26px, tracking -2%.
- Drop numbers: Inter Tight 400, tabular figures. 28px to 32px on a card, 72px to 120px on the piece page.
- Body: Inter Tight 400, 16px to 17px, line height 1.45.
- Labels and status tags: DM Mono 500, uppercase, tracking +4%, 12px to 13px.
- Prices: DM Mono 500, tabular figures, 18px to 22px.
- Navigation: Inter Tight 500, 14px to 15px. Buttons: Inter Tight 600, 15px to 16px, tracking +1%.
Badge shapes stay the rectangles; only the lettering changes. The numbers, the ticker and the layout stay the same.
Job: for the worry that the drop is the least "less is more" of the directions (Mike's own rule): the same board, quietly. Reference: Finisterre (Mike) sets headings, body, nav, buttons and prices in one neutral roman-weight grotesk, Neue Haas Grotesk Text 55 Roman, served under the alias "Helvetica Neue LT W05_55 Roman"; this borrows that quiet sentence case for names, numbers and body. Concrete Cat (Mike) sets prices and shop labels in Roboto Mono Regular; this borrows the mono for status tags and prices. It leaves Neue Haas Grotesk Text (commercial), Concrete Cat's all-mono body (that is direction D) and the condensed capitals. Inter Tight is a licence-safe stand-in, not a match for Neue Haas. From References/fonts.md, C · Workshop drop.
Layout
A dense grid: 2 columns at 390, 3 from 900 and 4 from 1200, with 8px gutters and 12px outer margins (20px from 1200). The spacing scale is tight: 4, 8, 12, 20, 32 and 52px. 2px rules in the bar colour separate sections. Nothing is centred.
- Home: the home page is the shop. No hero photograph. A block reads "Workshop drop 01. 32 pieces on the shelf. One of each." and the drop grid starts right under it. After 12 cards a bar carries "Why it costs less" and the workshop strip, then the grid goes on and closes with a tile that spans the last row, so it never ends on one orphan card. The four routes close the page as four big condensed words.
- Shop: "The shelf", with a live count. Sort by Number, Price or Colour. Family and model are inline chips with their counts. All 37 pieces stay on the board; the sold ones carry a bar.
- Piece: the number first, then the name, then a full-width strip of photographs in Gozney order (practical, human, context, video), each at its own proportions so the whole piece is always in frame. Then the specs as a ruled list, one fact per row. At 1440 the price, the reason line and Add to basket sit top right and the add-ons sit beside the specs. At 390 a bar above the colourway dock holds the price and Add to basket.
- Every other route has its own page in the drop's parts, not V1's layout recoloured. Each opens on a route head: a block with the marque, the route's number in the footer's own numbering (01 Ready now, 02 Made to order, 03 Bespoke, 04 MOK), a very large title and the facts as outlined tags, with counts on the flap board.
- Made to order: the designs as numbered cards ("07/38", a "To order" block where the shelf says "Ready now"), a section per kind with its count, and a block that closes the basins.
- A design: its number and name first, the price large, the gallery and colour picker side by side at 1440, the facts as a ruled list, then its ready-now pieces as drop cards.
- Samples, basket, checkout: the route head, then the shared components set in the drop's rules, chips and blocks. Confirmation is the shared order summary under the drop's header.
- Bespoke: the five steps as five big numbered rows, the projects as numbered cards ("CS07", the case study's own number), the enquiry form under a ruled head.
- For architects: outlined facts, the colour strip, designs as cards, "At a glance" as ruled rows, the trade form, and ready-now cards.
- MOK: a bar carries "04 MOK", then MOK's own page, which keeps its orange, cream and Bai Jamjuree, with W+R's own MOK film between the hero and the collections.
Elevation & Depth
None. Blocks and bars sit flat on the concrete, with no shadow, gradient or blur. A card lifts 4px on hover and drops back. Depth is a 2px rule or a block of colour.
Shapes
Rectangles only. Square photographs edge to edge on the cards, rectangular badges, blocks and chips, square colour swatches. No pills and no circles. The marque on every card is the unchanged W+R mark, sized to the cap height of the number beside it.
Components
The drop card. Three rows and no border. The top row is 40px: the marque, the number ("014/037") and the status block. The middle row is the photograph, square, edge to edge. The bottom row is the name in condensed capitals, the price large, the was-price struck through and "1 OF 1". A sold card has no status block, and a full-width bar reading "SOLD" and "Have one made" covers the bottom quarter of the photograph. The photograph isn't dimmed.
Badges. Ready now: a block. 1 of 1: a 1.5px ink outline. New: an ink block with ground-coloured text. Sold: the bar across the photograph.
The ticker. Under the header on every page. The newest pieces and the sold ones scroll at 40px a second. A 44px Pause button sits at its left. It starts paused under reduced motion.
The header. The marque alone, the four routes (Shop, Made to order, Bespoke, MOK) and the basket count. On a phone the routes sit behind Menu.
Buttons and chips. Buttons are blocks, 52px high, condensed capitals, with an arrow on the buy buttons. Chips are 44px, outlined, and fill with ink when on. Hover inverts a button.
The price block. The price, the was-price and one plain reason line: "Made alongside one of our larger commissions, so it's priced below the made-to-order price." The wording is to confirm with W+R.
The split-flap counts. The shelf counts (on the shelf, sold, listed), the shop's showing count and the route heads' facts are cells of two halves with a hinge line: the bar colour on the ground, and the concrete colour with ink digits on a block or on the header's ink basket button, so a flap never disappears. Each digit rolls up from 0 once when it first comes into view, after the loader has gone, then settles. A later change flips only the digits that differ. The real number is in the page for a screen reader and for a browser with no script.
The stamp. "Added" in a block with an outline, slammed on in 140ms in three steps. It appears under the header's basket button with the item and the count (a status line, so it's announced) for anything added anywhere in the direction, and over the buy button on a piece page.
The route head. See Layout.
Shot to come. A photograph that doesn't exist yet is a dashed, labelled box that says "Shot to come" and what the shot is. It's never a fake.
Do's and Don'ts
- Do keep sold pieces on the board, as proof the shelf moves.
- Do give anything that moves a visible Pause button, and stop it under reduced motion.
- Do keep a flap readable on its ground: concrete with ink digits on a block, never the block's own colour.
- Don't let a hover be the only way to see something: the second photo has its tap.
- Do write facts W+R hasn't confirmed as "to confirm": delivery, lead times, brackets, trade terms and the repeated weights.
- Do label a render "Render" and a lifestyle photograph of another colour as exactly that.
- Don't set orange as text, in any colourway.
- Don't dim, filter, blend or crop away a basin. If a crop cuts the piece, show the photograph whole.
- Don't add "Request price list" anywhere.
- Don't use MOK's orange outside the 1 · MOK orange colourway.
Feel
Fast and snappy, like a clothing drop. Nothing eases for long: effects cut or step, and the longest movement is the board reshuffling in 280ms. Every effect has one job; anything without one was cut.
- A card cuts hard to its second real photo, and its price block stamps (job: show the piece from another angle without leaving the board). On hover or focus the photo cuts with no fade, a frame tag reads "2/3", and the price takes an ink block in 140ms of steps. On touch the first tap does the same, with "Tap again to open", and the second tap opens the piece; Escape or a tap elsewhere puts it back. The second photo is only fetched once something asks for it, so the board costs no more than before. Every piece has at least two real photos of that exact piece.
- The shelf counts tick up once, like a split-flap board (job: say the numbers are real and counted). 32 on the shelf, 5 sold, 37 listed, from the data. Reduced motion shows the number.
- Filtering and sorting move the cards to their new places (job: let the eye follow a piece across a reshuffle). Each card slides from where it was to where it is in 280ms; cards joining the board cut in; drop numbers stay with their pieces, so the numbers visibly travel. Reduced motion: they move without sliding.
- Adding to the basket stamps "Added" (job: confirm, in the drop's own language, without a pop-up). The stamp sits under the basket in the header and over the buy button, the header count flips one flap, and a ring pulses off the basket button. It confirms what really happened: a one-of-one piece already in the basket fires nothing.
- A keyboard add keeps its place. The shared Add to basket swaps its button for a "Go to basket" link; on a piece page, if the focus was in the buy block, it moves to that link, with the usual focus ring, so a keyboard user carries on from there.
- The ticker holds still while it's hovered or focused (job: let a name be read). The strip is one tab stop. The Pause button is still the way to stop it for good, and the only way on touch.
- Hover and focus everywhere: every link and button shows a visible change on a device that can hover, in the drop's own moves. Buttons, chips and the marque invert; nav links, footer routes, menu items, text links, "Remove" and the "All designs" links take the hover block with a heavier underline; the cross-sell tiles invert their text panel; colour swatches and gallery thumbnails take an ink ring; quantity buttons invert; form fields and options take a heavier base rule or the hover block; the end tile and the bespoke tile invert; a press moves a button 2px. Inside MOK the same moves use MOK's orange and charcoal. The tap equivalent of a hover that reveals something is the first-tap reveal above.
- The card lift is 120ms, buttons invert instantly, the ticker runs at a steady 40px a second. When a piece sells while the page is open (live mode), the sold bar is meant to drop in over 160ms.
- MOK's film plays muted and looping when it's on screen, with a 44px Pause button and a poster frame, and nothing is fetched until it is near the screen. Under reduced motion it doesn't start by itself.
Reduced motion stops the ticker, the lift, the stamp's slam, the ring, the flap rolls and flips, the board slide and the film's autoplay. The ticker and the film, the only things that loop, always have a Pause button.
The voice is short, capitalised and counted: numbers, "1 OF 1", "SOLD", "Have one made", "Missed one? Have it made." It states a fact and stops. (In type 2 the same words are sentence case.)
Colourways
Three colourways. The slots are jobs: ground, text, block, on-block, bar, on-bar and hover. Orange text is never used. Ratios are worked out from the hex values with the WCAG formula, and the build fails if a pairing drops under AA.
1 · MOK orange. Mike's taste: the orange-logo clothing brand he likes. Light and loud.
- Ground White #dcddd8, text Ink #212121, block MOK orange #FF5D00 with Ink, bar Black #1a1a1a with White, hover MOK orange.
- Ink on White 11.79:1. Ink on MOK orange 5.23:1. White on Black 12.74:1. Ink on hover MOK orange 5.23:1. White on Ink (the New badge and chips that are on) 11.79:1.
2 · Weissbier. If MOK's orange has to stay on MOK: the same drop in W+R's own Weissbier. Mid: Stone concrete with mustard blocks, like site hi-vis.
- Ground Stone #8b8b8b, text Ink #212121, block Weissbier #d09c4a with Ink, bar Black #1a1a1a with Stone, hover Weissbier.
- Ink on Stone 4.73:1. Ink on Weissbier 6.55:1. Stone on Black 5.11:1. Ink on hover Weissbier 6.55:1. Stone on Ink (the New badge and chips that are on) 4.73:1.
3 · Concrete. Mike's stated rules on Mike's taste: mostly monochrome, less is more. The drop as a monochrome lookbook, for architects who'd find orange too loud. There is no orange anywhere in it, and every colour is a W+R grey.
- Ground White #dcddd8, text Ink #212121, block Black #1a1a1a with White, bar Black #1a1a1a with White, hover Natural #ababab.
- Ink on White 11.79:1. White on Black (blocks, buttons, Sold bars, ticker, footer) 12.74:1. Ink on hover Natural 7.01:1. White on Ink (the New badge and chips that are on) 11.79:1.
The SVG lockups and badges are written once per colourway into public/directions/c-workshop/ (-cw2 and -cw3 for the others) by scripts/make-assets.mjs, from the same palette. The pages draw the same shapes in CSS and inline SVG, so they follow the live switch.