Design System: B · Journal
Overview
The store is a magazine. W+R already owns a journal brand, W+RITTEN ("Your Design Journal, Written by Warrington + Rose"), so the store becomes its magazine, and every story ends with the piece you can buy.
It speaks to architects and interior designers who read before they specify, and to the slower homeowner planning a bathroom. It serves made to order and bespoke best: stories sell a design, a colour and a way of working. Stock sells through the "Shop this piece" card at the end of each story, and through The Index, a plain list of everything on the shelf.
Four pages are built as Journal's own: the Home cover, the Index, the Piece photo essay and the chrome round them. Every other page (made to order, samples, bespoke, for architects, basket, checkout, confirmation) is V1's page inside Journal's header and footer, with V1's type, colour, buttons and rules mapped onto Journal's. MOK keeps its own orange, cream and type.
Colors
Almost monochrome, and warm only by choice. Colours are named by job, not by colour, because a colourway can change what a job looks like. Seven jobs: ground (the page), text (body text and hairlines), block (the masthead, buttons and footer), on-block (text on the block), caption (captions, issue numbers and secondary text), card (the contents band and the "Shop this piece" card) and link (links, labels and Sold). An eighth, photo-border, is Mike's white mat round every photograph and stays Paper in every colourway.
Colourway 1 is Paper #FEFEFE with Welsh Slate #3E3E3C text and block, Seaweed #5F6152 captions, a Sand #E9E1D8 card and Terracotta #935247 links. Colourway 2 warms it: a Sand ground, Chocolat #4F322E text, a Terracotta block with Paper text, Juniper #585346 captions and a Paper card. The only other colour on a page is the colour discs: W+R's own standard colours as round swatches, never behind text. The white W+RITTEN artwork sits on the block in both, and is legible on both.
Typography
A light display serif against thin geometric capitals. It's the only direction with a serif and no monospace at all. Gilda Display and Jost are Google Fonts stand-ins; the web licence for W+R's brand font, AUTHENTIC Sans, is unconfirmed.
- Display: Gilda Display 400, 44px at 390 and 112px at 1440 (the token above is the 1440 size; every size is fluid between the two), line height 1.0, tracking -1%.
- Story headline: Gilda Display 400, 32px at 390 and 56px at 1440.
- Section capitals: Jost 200, uppercase, tracking +0.3em, only at 24px and 32px, because Jost 200 is too thin to read small.
- Labels: Jost 400, uppercase, tracking +0.12em, 12px at 390 and 13px at 1440.
- Body: Jost 300, 18px at 390 and 20px at 1440, line height 1.6, a measure of 62 characters at most.
- Prices: Jost 400 with tabular figures.
Layout
An asymmetric 12-column grid. Columns 1 to 3 are a margin for issue numbers, captions and the buy block; the text runs in columns 4 to 9. Outer margins are 120px at 1440 and 20px at 390, where everything stacks into one column. The spacing scale is 4, 12, 24, 48, 96 and 192px. Hairlines separate stories.
- Home: a magazine cover. The small wordmark in the header, the W+RITTEN masthead with "Issue 01" and the live count of pieces on the shelf, a 7-column cover photo with its cover line, a numbered contents list on the card colour, then the stories. Story 01 (the cloakroom) and 02 (Daphne) each end on a "Shop this piece" card. No. 03 is the colour card, where one of the 32 discs picks a £6 sample. No. 04 is a project, on desktop.
- Shop: "The Index", a typographic list grouped by design, with a colour disc, size, price and "Ready now" on each row. At 1440 hovering a row shows its photo in the left margin. At 390 each row has a 64px thumbnail. A row of 32 colour discs filters the list.
- Piece: a photo essay in one central column, the gallery stacked in Gozney order (practical, human, context, film) with captions. At 1440 the buy block sticks in the left margin. At 390 a bar sits above the direction dock with the price and the one "Add to basket", so the buy button is always reachable; "Details" opens the rest as a sheet.
Elevation & Depth
None. The page is paper; images sit in white borders; hairlines and the card colour do the separating. No shadows, no blur.
Shapes
Rectangles for images and bands. Round colour discs (a 50% radius), each with a hairline ring so a disc that matches the ground still reads. Pill buttons. Badges aren't shapes at all: they're words with a 1px rule under them.
Components
The story with a shoppable piece. A full-bleed 3:2 lifestyle photo in a white border, a Jost 200 section label ("No. 01 · The cloakroom"), a Gilda Display headline and two or three short paragraphs. It ends on the "Shop this piece" card: the card colour between two hairlines, with the piece's own photo, the link-coloured label, the name, a colour disc, the price block with its reason line and an "Add to basket" pill. Under it: "Have it made in any of our 32 standard colours. Order a £6 sample." If the piece has sold, the card reads "Sold. Have one made".
The Index row. Name in Gilda, colour disc and name, size with "1 of 1", price with its struck-through was-price, and "Ready now". Sold pieces stay listed.
The colour card. 32 discs, each a button. Pick one and its £6 sample goes in the basket.
Badges. Words in Jost 400 uppercase with a 1px rule under them: Ready now, 1 of 1 (caption colour), Sold (link colour), New this issue.
Buttons. Pills, 48px high. Primary is the block colour with its text; secondary is an outline.
To confirm. Delivery prices, lead times, bracket fit, care notes, returns on heavy pieces and trade terms are shown as a link-coloured "To confirm" with a rule under it, never as a made-up fact.
Do's and Don'ts
- Do keep Mike's white border round every photograph, in every colourway.
- Do show the whole piece. A product photo is never cropped; only lifestyle photos take a crop, and the basin stays in frame.
- Do say plainly when a photo shows another colour: "Lifestyle photo of the same design in another colour: white. The piece for sale is Rose."
- Do label a missing shot "Shot to come" and a missing film "Film to come". Never fill the gap.
- Don't let a lifestyle photo stand in for a stock piece.
- Don't use filters, duotones, blend modes or colour washes on any photo.
- Don't put text on a colour disc.
- Don't publish one issue and stop. A journal with one story looks abandoned; it needs a new story a month.
Feel
Almost still, and unhurried. A photograph below the fold fades in over 600ms as it enters the screen. The phone buy bar slides up over 200ms as the page arrives. There's no parallax, no hover zoom and nothing loops, so there's nothing to pause. Under prefers-reduced-motion the fade and the slide are removed and everything is simply there. The voice is Mike's: calm, specific, written to be read ("Small rooms, dark bowls."), with the shop kept to the end of each story.
Colourways
Slots are jobs: ground, text, block, on-block, caption, card, link and photo-border. Chocolat and Natural are gone; there are exactly two.
1 · Paper. The architect's monograph: paper white and Welsh Slate. Mike's version of Journal. Ground Paper #FEFEFE, text and block Welsh Slate #3E3E3C, on-block Paper, captions Seaweed #5F6152, card Sand #E9E1D8, links Terracotta #935247, photo borders Paper.
2 · Terracotta. Triniti's version: warmed to her terracotta boards. A warm interiors magazine. Ground Sand #E9E1D8, text Chocolat #4F322E, masthead, buttons and footer in Terracotta #935247 with Paper text, captions Juniper #585346, card Paper #FEFEFE, links and labels Terracotta, photo borders Paper. Its masthead is ΔE 35 away from Welsh Slate, so it reads as a different page, and Mike's white borders stay.