Watermans

Watermans is the UK arrivals arm of Foreland Marine, a superyacht agency for London, the Solent and the south west. It books berths, arranges pilotage and bridge lifts, clears yachts in and out with Border Force, and attends on the quay at arrival and departure. The commission was the identity and the website, written for a captain planning a UK visit from somewhere else.

A captain arriving in an unfamiliar port has a short list of questions: where the yacht can lie, who takes the pilot and where, whether the bridge has to lift, what has to be filed and by when, and what the call will cost. The brief was a site that answers those questions directly, with sources and dates, rather than a brochure that asks the captain to get in touch before learning anything.

The design took more turns than the build. The commit history shows thirteen font families loaded across ten type settings in the first two days, before the site settled on one grotesk and the colours of a chart. Each change was committed and judged on the real pages, which is why the record of what was rejected is complete.

The mark is flag H of the International Code of Signals, flown by a vessel to say that it has a pilot on board. The first build used flag G, I require a pilot, which describes the moment before the agent has done the job. H describes the moment after, and it replaced G in the same commit that gave the firm its name.

Flag H is divided vertically, white at the hoist and red at the fly. It is drawn here as line art on a staff, with the white half left open and the red half filled, at the stroke weight of the Foreland lighthouse so that the two marks sit together on a group page. Signal red appears on the flag and on the rule beside the enquiry form's status message, and nowhere else.

The header lockup is measured in the browser rather than set by hand. On load, the narrower of the two lines is letter-spaced out to the width of the wider, never compressed, and the flag is scaled so that its top edge meets the cap line of Watermans and the foot of the staff meets the baseline of Yacht agents. Both figures are read from the font's own metrics, because letter-spacing and font metrics cannot be known in CSS. The lockup therefore stays square at any size and in any fallback font.

The palette is monochrome, with blue and white. The tokens are named after the parts of an Admiralty chart: chart white for the paper, ink for the print, soundings and shoal for the two greys, datum for the rules that everything is measured from, and slack for the tinted band. One blue, pilot, is taken from the Foreland palette so that the two firms read as related.

Blue carries a meaning rather than a mood. It marks a deadline, a link or an action, and nothing else. A label that carries no time limit is set in grey. An earlier version held quiet labels in blue with reduced opacity; it measured 3.7 to 1 and spent the colour on things that did not need it, so it was changed to grey.

Field is the one colour chosen for a threshold rather than a role. Form fields need a visible edge, and the rule for non-text contrast is 3 to 1, so field was set to clear that on both the white page and the slack band. It never sets text.

Page heroes run as a navy duotone. Each photograph is taken to greyscale with a slight lift in contrast, then night is laid over it in the colour blend mode at 85 percent. Pictures from many photographers, taken in different light, read as one set, and white type can sit on any of them. Photographs set beside prose, and the homepage cards, stay in colour, because there they are showing a place rather than carrying a title.

The site uses one typeface, Archivo, with its width axis loaded. A ship carries her name across the transom in wide, flat letters because the transom is wide and flat, and a port notice is set narrow because the column is narrow. Archivo can do both from one file, so headings are widened to 112 and labels narrowed to 88, and the site needs no second family.

Getting there took three late trials. On the evening of 22 September the site was set in Caslon with Public Sans, then Public Sans alone at a light display weight, then Libre Franklin, all within nineteen minutes. Each was judged on the live pages against the tables and the planner, and each lost to the original. Archivo was restored with its original scale at 20:58.

Above 1600 pixels the layout keeps growing, so the reading sizes grow with it: body to 1.25rem, lede to 1.5rem, captions and labels up a step. Scaling only the headings left the running text looking miniature on a wide display. Links are underlined at 1 pixel with a 0.22em offset rather than bordered, because a border belongs to the box and floats away from the word once the link is padded out to a thumb-sized target.

Everything that is not a photograph sits in a 110rem shell. Running text sits in its own centred reading measure inside it, 48rem wide and 55rem above 1600 pixels, because a 60 character column left-aligned in a wide shell leaves two thirds of the page empty and reads as unfinished.

Vertical spacing comes in three densities, and each one means something. Open is for a statement meant to be read slowly, standard is for reference matter, and tight is for lists and tables where the data is the point. Tinted bands and photographs run to the window edge while their contents re-centre on the shell.

The homepage opens on a photograph of a yacht alongside in London with the arrival bar laid across its foot: port, length overall, air draught and the date alongside. Those four answers are enough to plan the call, so the first thing a captain can do on the site is start.

Every port page follows one template, taken from the order a pilot book uses: brief, approach, pilotage, tides, berths, alongside, ashore and events. Running notes are short paragraphs, and anything a captain would look up stays a table. Each page carries a vector nautical chart, the next tides at its own station, and the sources the page was written from.

The planner is the reason the site exists in this form. A captain chooses a port and enters the length overall, the air draught, where the pilot boards and the time alongside. The planner returns the berths that can take the yacht, with the ones that cannot struck through and the reason given, every notice deadline as a date and time counted back from arrival, and the charges line by line.

Every figure is published. London pilotage comes from the Port of London Authority's schedules of rates and charges, berth limits from PLA mooring information and the operators, and the notice periods from the port's own rules. All of it lives in one file, which is revised each January when the tariff changes, and nothing else on the site needs touching.

Both live sources fail quietly. There is no official API for Tower Bridge lifts, so the schedule is parsed from the published page; if that page changes shape the parser returns nothing and the panel disappears rather than showing something wrong. The tide panel carries the Admiralty's statement that the data is for planning and not for navigation, and that line stays.

From the planner, Request this estimate carries the port, length, air draught and time alongside into the enquiry form, so the captain does not type them twice.