The Website · Design Notes · Issue 01

How the site is built to be used

Two public pages, one decision, one way to stay in touch. These notes record the structure, the route through it, and the rules the pages obey.

IThe Site Map

Five rooms

The public site is deliberately small: a door and a volume. Everything after the decision happens inside the product.

I Home The library at night II The Volume One per question Five at launch III Membership Reader or Patron Indicative IV The Guide’sRoom The product V The Letter One email a month Chooses a question Begins the volume Evening I free Not ready tonight Returns by letter

The shelf, the method, the plate, the letter and the tariff are all sections of Home; only the volume earns a page of its own.

Membership is a till, not a room to wander, so it stays a section rather than a page until pricing is confirmed. The Letter is the exit that keeps the door open. In this build every spine opens Volume II, the built exemplar; the other four volumes reuse its template.

IIThe Route In

Four moves, in order

The pages are sequenced so that the visitor is never asked for money before they have chosen a question and read a real exchange.

I

Arrive at night

The hero is the night library: colophon, brand line, one promise, one door. Nobody is asked to sign up; they are asked to choose.

Home · hero

II

Choose a question

The shelf is the decision. Five volumes titled as questions, disciplines and evening counts in plain sight, the frame line on hover. One click opens the volume.

Home · the shelf

III

Taste an evening

Before any price appears, the visitor reads a real exchange with the guide, and the course page sets out Evenings I to III in full so the shape of one is legible.

Home · method  /  Volume · contents

IV

Join, or take the letter

Two tariffs, one line each, marked indicative. The undecided leave an address instead and are returned by the monthly letter.

Home · membership & the letter

IIIThe Homepage

Seven sections, one job each

SectionJobDraws on
iHero Set the register and offer a single action: choose. The night library device, the colophon, the brand line, the opener.
iiThe Shelf Turn browsing into a decision between five named questions. Course titles, disciplines and evening counts; each frame line held behind hover so the shelf stays calm.
iiiHow an evening works Make the nightly unit concrete before anyone commits to eight of them. Three steps and a verbatim play-script sample from Volume II.
ivThe plate A pause between the method and the asks that follow it. One treated plate with a captioned voice line; photography as a plate, never as wallpaper.
vThe Letter Keep the visitor who is interested and undecided. One field, one button, an inline thank-you. No modal, no pop-up, no exit trap.
viMembership Price the decision plainly, after the taste and never before. Two tariffs, one line each on what membership is for, marked indicative.
viiFooter Hold the full map for anyone who scrolled past their turning. The word marque, all five volumes, the house links, London and Hong Kong.
IVNavigation & States

The rules the pages obey

The header

  • Fixed, one row: the word marque left, three links and one action right. The action is the page’s own next step: choose on the homepage, begin on the course page.
  • It starts transparent over the night hero and turns solid Deep Night after 24 pixels of scroll. On the vellum course page it starts in ink and turns the same solid night, so it always sits on a ground it was designed for.
  • There is no drawer menu. Two public pages do not justify one; below 680 pixels the links fold away, the marque and the action remain, and the footer carries the whole map.

Hover

  • Volume covers lift off the shelf and open their frame line with the invitation to open the volume. The whole cover is the link.
  • Text links take brass or gilt according to ground; buttons rise two pixels. Nothing blinks, nothing bounces.
  • On screens without hover the frame lines are simply printed on the covers. Nothing on either page is reachable only by hovering.

Focus

  • Every interactive element shows a 3 pixel outline, offset 3 pixels: brass on parchment grounds, parchment on night and oxblood.
  • A skip link is first in the tab order on both public pages. Keyboard focus on a volume cover opens its frame line, the same as hover.
  • The newsletter success message is a status region, announced without stealing focus.

Reduced motion

  • Script adds html.anim only when the visitor allows motion; every pre-state lives under that class.
  • With motion off: the light sweep holds still, section reveals are already revealed, the typing beat is skipped and the guide’s last line is simply on the page.
  • Both public pages are complete at rest. Motion is a courtesy, never a dependency.
VMobile

The pocket setting

Both pages hold to a 16 pixel gutter at 400 pixels wide, with no horizontal scroll. What changes is layout, never content.

HeaderLinks fold away; the marque and the single action remain.
HeroFull height holds; display type steps down on the fixed ratio, leading unchanged.
The shelfCovers stack two abreast, then full width; frame lines print open, nothing left behind hover.
Contents tableDot leaders drop; the italic guide notes sit directly under their titles.
Meta rowThe three measures stack with hairlines between, centred setting kept.
Play scriptThe measure narrows to the gutters; speaker labels and centring hold.
The LetterField and button stack below 460 pixels; the inline success state is unchanged.
Membership & footerCards and columns fall to a single column; the five volumes stay listed in full.

The numerals, the manicule, the brass action and the focus outline are the same at every width.

Issued by Field Guide · London · October MMXXVI