A · Plinth

Design System: A · Plinth

Overview

Every piece is shown as sculpture: a white-framed photo hung on a wall painted in a W+R colour, like a gallery hang. It's Triniti's KAST reference, and the "good, enhanced" step on Mike's scale. It keeps what W+R already owns (the full-width wordmark between hairlines, Space Mono, 1px rules, pill buttons and circular badges) and adds one idea: colour lives on the wall, never on the basin.

It speaks to interior designers and homeowners who buy with their eyes, and to anyone who arrives from a styled Instagram post. It serves the stock route best, because every tile is a finished piece you can buy today. It flatters made to order too: the walls are W+R's own colours, so the shop doubles as a colour card.

Mike's white border is what makes coloured walls honest. Every photograph sits inside a Paper frame, whole and untouched, so the basin is still seen on white. The hero is an art-direction composite and is labelled "Art direction" until Mike's painted-plinth set exists.

Where W+R has real media of its own that makes the store more real, Plinth uses it, untouched: a photograph of a maker flame-finishing a basin in the Nottingham workshop on the bespoke page, and W+R's own MOK film on the outdoor-kitchens page. A product photo is only ever the real photo of that exact piece.

Colors

The page ground is Paper #FEFEFE with Ink #212121 for text and rules. Sand #E9E1D8 is the secondary ground: the New badge, the "To confirm" tags and the shelf the hero basins stand on.

The walls are W+R colours, one per colour family in the shop data. Each is a slot (bone, oat, olive, chocolat, plus slate for the footer), so a colourway can repaint a wall without touching a layout:

• Neutral pieces hang on the bone slot (Bone #B9B39D), with ink text.
• Warm pieces hang on the oat slot (Oat #BF9B89), with ink text.
• Green and blue pieces hang on the olive slot (Olive #808373). Ink on Olive is large text only, so on that wall small text sits inside the white frame or a paper chip.
• Two-tone and limited pieces hang on the chocolat slot (Chocolat #4F322E), with paper text.
• The footer and the night band use the slate slot (Welsh Slate #3E3E3C), with paper text.

There is no accent colour in the interface. Buttons are ink or paper. Colour dots next to a piece's colour name come from the W+R colour list and are shown only where W+R's own name matches. The marque and the wordmark take the colour of their text, so they follow the colourway. Orange is only ever MOK's, and only on MOK's own pages.

Typography

Two type variants, chosen in the dock, remembered for this direction, carried by ?type=N, and applied on every route before first paint. Only the chosen variant's fonts load. Both are Google Fonts stand-ins: the web licence for W+R's brand font, AUTHENTIC Sans, is unconfirmed.

1 · Familjen (as built)

A refined grotesk with a little more weight than today, so the headline still lands on a busy coloured wall. Familjen Grotesk and Space Mono.

• Reference: Plinth as built in V1.5, with W+R's own Space Mono for labels (the W+R site already uses it).
• Job: a compact grotesk at medium weight so the headline lands on a busy coloured wall, with Space Mono for labels.
• Display: Familjen Grotesk 500, 40px at 390 and 96px at 1440, fluid in between, line height 1.0, tracking -2%.
• Body: Familjen Grotesk 400, 17px at 390 and 18px at 1440, line height 1.5.
• Tile name: Familjen Grotesk 400, 17px.
• Labels, navigation and measurements: Space Mono 400, uppercase, 13px at 390 and 14px at 1440, tracking +1px.
• Prices: Space Mono 400, 16px at 390 and 18px at 1440. The was-price is struck through in ink.

Moving the headings from light to medium goes against the "never bold" brand rule. It's a step, not a leap. The piece page's title is 56px at 1440 so it fits the buy column; it's the same face, weight and tracking. Type 2 is the answer to that worry.

2 · Mona Sans

One variable family at two widths: Mona Sans Expanded in capitals for the headline, titles, labels and buttons, and Mona Sans at its normal width for reading and prices.

• Reference: LUSSO, from Triniti (References/fonts.md, A · Plinth). LUSSO sets headings, navigation and labels in ABC Diatype Extended capitals at weight 500 and reading text in the normal-width Diatype. Plinth borrows that structure: an extended-width grotesk in capitals for the headline, title and labels against a normal-width sibling for reading. It leaves ABC Diatype itself (commercial), LUSSO's styled room sets (they hide the piece) and its photo-overlay layout. Mona Sans is an open-licence stand-in with the same structure, not a match for Diatype.
• Job: width and capitals carry the headline on a coloured wall instead of weight, so Plinth no longer sets medium-weight headings against W+R's light, never-bold type.
• Display and titles: Mona Sans 400, width 125, uppercase, line height 1.1, tracking +0.01em. Section and page headings run 30px at 390 to 76px at 1440, fluid in between. The home headline is 29px at 390 and 34px at 1440. The piece title is 22px at 390 and 30px at 1440. Plinth and route titles are 20px at 390 and 26px at 1440.
  • Departures from fonts.md (display 32px at 390 and 76px at 1440, titles 20 to 32px), and why: headings start at 30px, not 32, so the longest wide-capital headings ("Green and blue", "For architects and designers") still fit the 288px column at 320. The home headline is smaller than a page heading because at 1440 it sits in one wall, a third of the page wide, beside the pieces. The piece title is 30px at 1440 so it fits the 5-column buy column. The shop's page title (30 to 54px) and room headings (26 to 40px) are smaller still, so the first row of prints stays above the fold at 1440.
• Body: Mona Sans 400, width 100, 17px at 390 and 18px at 1440, line height 1.5.
• Labels, navigation and buttons: Mona Sans 500, width 125, uppercase, 12px at 390 and 13px at 1440, tracking +0.08em.
• Prices: Mona Sans 500, width 100, tabular figures, 16px at 390 and 18px at 1440. Tile names are the normal width, sentence case. The badges use the normal width too, because the wide face doesn't fit "Ready now" in a 44px circle.

The wide capitals are the widest thing in the direction, so every long name (Weissbier, Fruit Salad, "For architects and designers") wraps rather than shrinks, and nothing scrolls sideways at 320 or 390. No colour changes with the type, so every pairing below stands.

Layout

A 12-column grid with 24px gutters at 1440, and 4 columns with 16px margins at 390. The spacing scale is 8, 16, 24, 40, 64, 104 and 168px. Sections are separated by 64px or more of space and a 1px rule.

• Home: the full-width wordmark between hairlines, then a campaign hero as tall as the screen allows, with the headline and button on the first screen. At 1440 it's three walls side by side; on a phone it's one wall per screen, swiped inside the hero with no page overflow, with three dots as real buttons. Then four "rooms", one wall band per colour family holding three pieces (a grid at 1440, a swipe rail at 390), a night band on Welsh Slate, and the four routes drawn as plinths of different heights.
• Shop: tabs with counts by colour family, then one wall per family. Tiles are big, because the wall is the point: 3 columns at 1440 and 1 at 390. Sold pieces leave the grid for a "Recently sold" row.
• Piece: two columns at 1440. On the left, 7 columns: the gallery on a wall of the piece's family colour, in Gozney's order (practical, human, context, video). On the right, 5 columns: a sticky buy column on paper with the price block, the add-ons and the "to confirm" lines. On a phone the framed lead photo comes first, then the buy block, then the rest of the gallery.
• Made to order: the same hang as the shop, one wall per kind of piece (basins on Bone, baths on Oat, tables on Olive, planters on Chocolat), each design a framed catalogue image whole in a Paper frame. Two to a row on a phone, because there are 41 of them.
• A design: the piece page's hang, for a design rather than one piece. The gallery sits on the design's wall, every photo opens full screen, and the sticky paper column holds the shared colour picker. The finished pieces of that design hang below.
• Colour samples: the page is the colour card. Each colour family is a wall, in turn Bone, Oat, Olive and Chocolat, and each sample is a paper card hung on it. The full pack sits first, on a Bone wall.
• MOK: MOK keeps its own orange, cream and type. Plinth adds the white frame round the hero image and the modules, and the film.
• Bespoke: a Chocolat head with a real workshop photograph, the five steps as plinths of different heights, the projects as framed prints on a Chocolat wall, and the enquiry on paper.
• For architects and designers: the colours as a card of paper chips on an Olive wall, the designs hung on Oat, the specification as a label list, trade enquiry on a Welsh Slate wall.
• Basket, checkout and confirmation: a Bone wall for the head, then the shared basket or form on paper, each line's photo in a white frame. The confirmation is a paper label hung on a Bone wall.

Elevation & Depth

Flat. Depth comes from the frame sitting on the wall and the badge overlapping the frame's corner, never from shadows or blur. 1px ink rules separate sections, and the only filled boxes are walls, frames and labels. When a print lifts off its wall, a 1px rule appears at its old edge: the rule is the shadow.

Shapes

Rectangles for walls, frames and labels, never rounded. Pill buttons and tabs, circular badges, as on today's site. The frame's border is about 7% of the tile width, at least 12px, and the tile shows 8% of wall on every side. A circular badge, 56px at 1440 and 44px on a phone, overlaps the frame's top-right corner by a quarter of its diameter.

Components

The plinth tile is the signature component. It sits on the wall colour for the piece's family. In the middle is a Paper frame at 4:5 holding the lead photo, contained and never cropped. Below, still on the wall, is a paper gallery label: the piece name, a colour dot with the colour name in Space Mono, and the price block with the was-price struck through. A circular badge overlaps the frame's corner. The whole tile is the link (the name's link is stretched over it). On hover (on devices that hover) or keyboard focus the print lifts 8px off the wall and the piece's second real photo fades in over 400ms. On touch, a 44px "1/2" control on the label does the same, and a tap anywhere else opens the piece. Focus shows a 2px outline offset 4px outside the frame, in Ink, or in Paper on a Chocolat wall.

The gallery is a native modal dialog on the piece's own wall: the photo stays in its white frame, in full. Every framed photo on the piece page opens it. Arrow keys, the two 44px buttons and a swipe move through the photos, Escape or the close button shuts it, and focus returns to the photo it was opened from. The caption names the shot ("Photo 2 of 3 · Three-quarter") where that is known from looking at the photo.

The "Added" line appears under the buy buttons when something really goes into the basket: what went in, how many are there, a link to the basket. It stays. The header count flashes ink and paper and settles, and a polite status line tells a screen reader.

The film is W+R's own MOK film in a white frame: muted, looping, with a poster frame and a pause control. It plays while it's on screen, stays paused once you pause it, and does not start under reduced motion.

Badges are circles in Space Mono 11px uppercase. Ready now: paper fill with an ink ring. 1 of 1 and Sold: ink fill with paper text. New: Sand fill with ink text.

Buttons are pills, 48px high, Space Mono uppercase. Primary is ink with paper text; secondary is paper with ink text, and they swap on hover.

The price block shows the price and the was-price, and on the shop and piece pages one plain sentence of reason: "Made alongside one of our larger commissions, so it's priced below the made-to-order price." (ASSUME, W+R to confirm.)

The hero stands real cut-outs of three basins on a paper shelf, sized in proportion to their real widths. The cut-outs are made by a script that never changes a pixel it keeps, and the hero is labelled "Art direction".

A step with no photo yet is a labelled frame with a dashed ink outline ("Shot to come: A hand on the rim, for scale."), never a fake.

"To confirm" is a Sand tag, used for delivery prices, timing, returns on heavy pieces, bracket compatibility and price, finish, care, lead times and trade terms.

Do's and Don'ts

• Do show the whole photograph inside the white frame. The frame is what makes a coloured wall honest.
• Do label every composite "Art direction" until Mike's painted-plinth set exists.
• Do put small text on paper: inside the frame, a chip or a label. Never straight onto Olive.
• Do write "to confirm" for any fact W+R hasn't given us.
• Don't blend, tint, filter or recolour a basin to suit its wall.
• Don't generate a plinth under a real basin without labelling it.
• Don't use a styled room set that hides the piece.
• Don't autoplay anything with sound, or anything that can't be paused. The one film (MOK) is muted, plays while it's on screen, has a pause control and a poster, and does not start under reduced motion.
• Do name a shot (front, top, three-quarter, close-up) only when you've looked at the photo. Otherwise say "Photo 2 of 3" and nothing more.
• Do keep the first real piece on screen the moment the page paints. The hero's entrance touches the other walls, never the first.
• Don't bake a colour into the marque or a lockup. They take the colour of their text.

Feel

Slow and quiet, like walking a gallery. Nothing here is decoration: each movement has one job, stated beside it.

• A print lifts off its wall. On hover or keyboard focus the framed print rises 8px over 320ms and the piece's second real photo fades in over 400ms; a 1px rule marks where it hung. On touch, the visible 1/2 control does the same and says which photo you are on. Job: show a second look at the exact piece without leaving the page.
• The walls ease. Changing colourway fades each wall to its new colour over 520ms. Changing type dims the page while the new face arrives, then brings it back over 460ms. Job: the change reads as the same room repainted, not a different page.
• The photo opens full screen. On the piece page (and a design's page) a framed photo opens as a gallery with arrows, swipe, Escape and focus restored. Job: look at the whole real photo, large, without leaving the page. A photo slides in 28px from the side you moved towards. Job: show which way you are moving through the set, so a swipe or an arrow has a direction.
• Adding confirms in place. An "Added" line under the button, a button that flashes ink and paper over 900ms, and a header count that inverts and settles over 760ms. Job: no guessing whether it worked.
• The hero walls drift. As you scroll the page past the hero, each wall's contents rise by a few pixels (10, 20 and 30 at 1440; 18 on a phone), at a different rate per wall. Off under reduced motion. Job: the hang feels hung, not printed.
• The second and third walls rise as the loader leaves. They rise 24px and fade in over 600ms, staggered by 120ms. The first wall holds the first real piece and never waits. Job: hand the page over from the loader to the hang, without hiding the first piece.
• Buttons swap ink and paper over 200ms on hover and focus. Job: show that something is pressable, in the one move this direction has for it.
• Samples and projects lift 6px on hover, like the prints. Job: say these are hung things you can take a closer look at, as on the shop wall.
• The MOK film plays while it is on screen, muted, looping, with a poster frame. A pause control stops it, and it stays paused until you press play, even if you scroll away and back. Under reduced motion it does not start: the poster shows and the button reads Play. Job: show a MOK kitchen in a real garden, which a still can't.
• Under reduced motion nothing lifts, slides, drifts, fades or flashes; states still change and the "Added" line still appears. Nothing loops except the muted film above.

The voice is short and confident, in sentences: "Made once. On the shelf now." "The piece, whole." "Off the shelf, or made for you." Rooms are numbered and named for their wall ("Room 01 · Bone wall"), because the page is a colour card as well as a shop.

Colourways

A colourway repaints only the five walls, so the white frame stays Paper in both. Paper, Ink and Sand never change. Layout and components don't change either, and the type variant is chosen separately. Colours are read from the W+R colour list by name when the site is built, and the build fails if any pairing below drops under WCAG 2.1 AA.

1 · Earth. KAST's earthy walls, from Triniti's references. The mid-toned, earthy hang, and the default.

2 · White. Mike's version: every wall in W+R White, like Gozney's off-white shop, so the basin is the only colour. The Bone, Oat and Olive walls become White, the Chocolat wall becomes Gray, and Welsh Slate stays. The three light walls move 21 to 34 L* from Earth, so it reads as a different store at phone size, not a tint. A 1px ink rule marks where one hero wall ends and the next begins.

Wall names in labels follow the colourway: "Room 01 · Bone wall" reads "Room 01 · White wall" in 2 · White. Ink on Gray is 2.83:1, so nothing small is ever ink on the Gray wall; the 1 of 1 badge's edge there is decoration, as it is on Chocolat.