UK

Case study / 06

Retreat landing

Open the draft

A client arrived with a Pinterest board, ten photos and a planning document that disagreed with itself. The first deliverable was not a page — it was the brief.

RoleBrief digest, content system, design system, build, art direction, client review loop
TimeframeLive but unlaunched · mid iteration
  • HTML
  • CSS
  • Vanilla JS
  • Figma
  • Vercel

The problem

There was no brief to build from.

A yoga studio was selling a nine-night retreat and needed a page that could carry the price. What arrived was a Pinterest board, ten reference photos, a chat brief and a long planning document that contradicted itself in two places.

Building straight from that would have shipped the contradictions along with the design. So the first thing made was not a page.

The system

One source for the words, one page for the system.

The technology is deliberately plain — hand-written HTML, one stylesheet, twenty-seven lines of JavaScript, no build step and no backend — so the effort goes where a client can actually see it.

01

A canonical content file

  • Every line on the site traces back to one document, so there is a single place to argue with.
  • Writing it exposed two contradictions the client had not noticed: the price promised two meals a day while the schedule listed three, and the copy said the villa was minutes from the ocean.
  • Both went back as questions rather than quiet edits, with eight further open points parked next to a working fallback each.
02

A design system with its own page

  • Eleven colour tokens, two Garamonds, a spiral mark drawn with a wobble so the line reads as hand-made, and a film-grain veil over everything.
  • All of it published to an internal page, so a non-technical client reviews the system rather than only the layout.
  • Rules stated where they can be broken: the gold is decorative and banned for small text on cream.
03

Generated imagery, labelled as such

  • There were no photographs of the venue, so frames were generated to written prompts kept in the repository as four versioned hand-offs.
  • Two frames were rejected, which produced a written rule: no close-up skin, people only at a distance and in silhouette.
  • Twelve frames shipped at 1.5 MB, and every one is called generated stand-in imagery wherever it appears.

Production workflows

How a client without a spec ends up with one.

The value here is the loop, not the markup. Each step turns something vague into something a client can answer.

01Scattered inputs → one documentDisagreements surface early, while they are still cheap.
  1. Collect the board, the photos, the chat and the planning document into one canonical content file.
  2. Trace every line of the page back to it, so nothing on the site is unsourced.
  3. Return contradictions as questions and park the unknowns beside a fallback, so the page can ship while answers are pending.
02A palette → a system a client can reviewThe client approves rules, not one lucky screenshot.
  1. Name eleven tokens, two typefaces and the layout measures, and state where each may and may not be used.
  2. Publish the system to its own page alongside the reference photos that justified each decision.
  3. Let the client react to the system, so later pages stay consistent without another round.
03Five corrections → one documentThe client can reply with numbers instead of prose.
  1. Ship the corrections the same day they arrive.
  2. Answer in one self-contained file: the real page scrollable inside desktop and phone frames, twelve numbered text blocks to edit, five fixes marked done.
  3. List the six open decisions with what each one blocks, so the next reply can be a list of numbers.

Interactive preview

The system, not the page.

This recreates the internal review page: the eleven tokens, the type scale and the surface stack, in the project's own palette.

T1

Design system review panel

Pick a token to see its role and its restrictions, then switch the surface to see that clay is a six-layer stack rather than a flat colour.

Real tokens and scale · film grain as on the siteThe tokens and the scale values are the ones in the stylesheet. This is what the client reviews before approving any layout.

What was built

Small on purpose, documented anyway.

This is a page for a nine-night event, not a platform. The numbers show where the effort went, and the project is still mid iteration.

lines of first-party code
1,385
802 of them the stylesheet
build step / dependencies / backend
0 / 0 / 0
Nothing to break
colour tokens / typefaces
11 / 2
Published to a review page
contradictions caught in the brief
2
Returned as questions
generated frames shipped / rejected
12 / 2
The rejections produced a written rule

What this proves

The first deliverable is often not the one you were asked for.

01

A brief is a deliverable

Reconciling scattered inputs into one document found errors before they reached the page, and gave the client something concrete to argue with.

02

The stack is a decision, not a habit

The same client relationship has a payment platform behind it. A nine-day event page got hand-written HTML on purpose.

03

Review built for a non-technical client

A design system on its own page and numbered text blocks turn feedback into a list of numbers instead of a thread.