Foreland Marine

Foreland Marine is an independent consultancy working on sailing and motor yachts between 24 and 60 metres. It runs refit projects, acts as owner's representative on new builds, manages yachts in service and takes technical consultancy work. Its commercial position is that it holds no yard affiliations, takes no broker commissions and accepts no referral fees, so its advice carries no conflict of interest.

That independence is the product. The brief was to build an identity and a site that make it legible without saying it too loudly, and that read like a colleague rather than a brochure.

Yacht consultancy sites converge on a single look: a dark page, drone footage, a carousel of superlatives and a contact form. The convergence is so complete that a reader cannot tell two firms apart. Foreland's advantage is editorial, in that it thinks clearly and writes plainly, so the work was to make the identity and the site behave the way the consultancy behaves.

The company takes its name from the South Foreland Lighthouse in Kent, which has guided vessels into the Thames Estuary since the seventeenth century and later carried the first ship to shore wireless transmission. The mark is that lighthouse, drawn with its signal beam, and the wordmark sits beside it.

The single most consequential decision in the identity is negative: the kit contains no light colourway at all. The mark exists in white and is placed on navy, and there is no approved alternative. That removes an entire class of inconsistency, because there is no decision to make about which version to use, and it puts clear distance between Foreland and competitors still trading on white pages.

The palette is four blues and white. Three of them are grounds, running from the deepest navy in the footer up through the page background to the chart blue used for cards and raised surfaces, so depth is built from the palette rather than from shadows. Ocean is the only accent and is reserved for interactive elements.

The rule that does most of the work is that body copy is set in muted blue rather than grey or white. White is held back for headings and emphasis. Because text and background are drawn from the same family of colour, the pages hold together even where the density of information is high.

Depth beyond the three grounds comes from white at fixed opacities rather than from new colours. Five values are defined and nothing outside them is used, which is why borders and dividers stay consistent across sixty-five pages.

One typeface does all of the work. Nunito Sans is a humanist sans with a warm character, and the brand uses four of its weights for four fixed jobs. The distinctive choice is that headings are always set at the light 300 weight, large and unemphasised. Most consultancies reach for bold headings to signal authority; setting them light says the opposite, and says it consistently.

The component set is small and fully specified, which is what allows a site of this size to be extended without a design review each time. Every value below is fixed in the brand document rather than decided per page.

The brand document specifies components in detail and says nothing about layout. In practice the site settled on a consistent set of widths and rhythms anyway, and they are worth recording, because an undocumented convention followed sixty-five times is a system whether or not anyone wrote it down. The figures below are counted from the code rather than quoted from the kit.

The mobile menu is rendered outside the header element rather than inside it. That is not a stylistic choice: an element with a backdrop blur establishes a containing block, and a fixed overlay nested inside it is positioned against the header rather than the viewport. Moving the overlay out of the header is the fix.

There is no icon library. Icons are inline SVG at a 1.5 to 1.8 pixel stroke with round caps and joins, sized between 16 and 22 pixels, and coloured with currentColor so they inherit from the text they sit beside.

Motion is restrained and consistent, and no animation library is shipped. Scroll reveals run on an Intersection Observer at a threshold of 0.15 with a root margin of -40 pixels at the bottom, so an element begins to arrive slightly before it is fully in view. Every reveal runs for 0.7 seconds on an ease-out curve and holds its final state.

The imagery is genuine racing and yard photography rather than stock: J Class under sail, welders in dry dock, timber planking, rig work, engine rooms. It is never shown at full brightness. Every image sits beneath a navy gradient at reduced opacity, which is what keeps the text above it legible and keeps the pages looking like one site rather than a gallery.

The site runs to sixty-five pages and carries a good deal more than the four consultancy services. Alongside them sit a paid technical support product on three subscription tiers, six self-serve tools, a journal, a quarterly newsletter archive and a private membership area entered by invitation code.

Every service page is written in the register of a private memo rather than a sales deck, with plain language, real numbers and named clients where permission allows. Each carries FAQ structured data, so the answers can be quoted accurately by search and by answer engines.

There is more infrastructure behind the pages than the front of the site suggests. Stripe handles the support subscriptions through a custom checkout and webhook flow, Resend sends transactional email from branded templates, and Supabase records membership interest, verifies invitation codes and logs gated downloads.

The written rules are part of the identity rather than an afterthought, because on a site with this much copy the writing is more visible than the mark. The register is professional but not stuffy, technical without piling up jargon, and direct about costs, risks and conflicts of interest.