Design and build notes

The First Owner's Reference

An annual publication for first-time superyacht buyers, where one typed content source produces both the website and a 120 page casebound book.

Client
The First Owner's Reference
Sector
Editorial publishing
Year
2026
Scope
Editorial system design, Web design, Development, Print typography, Press build pipeline
01

The commission

This is a publication rather than a marketing site. The reader is someone approaching a first superyacht purchase and treating it as a private decision, and the work had to serve long reading on screen, accurate citation by other professionals, and a print edition of genuine quality, all from the same material.

Existing yachting media is written for the trade. The tone is breathless, the structure is that of an auction catalogue, and a first-time buyer reading it would learn little and trust less. The Reference was conceived to fill that gap, which meant the design problem was an editorial one before it was a visual one.

  • Nine chapters, each a complete piece of editorial rather than a section of a brochure.
  • One content source producing the website and a press-ready book, with no dual maintenance.
  • Structured data on every chapter and every defined term, so the content can be quoted correctly.
  • A publication that takes no advertising, recorded as a position in the colophon.
  1. 3 May 2026First commit, and the wireframeThe structure of Edition One set out before any design work
  2. 3 May 2026Lead essays drafted for every sectionEditorial first. The publication was written before it was designed
  3. 8 August 2026Print galley disciplineThe imagery pass and the rule against mid-flow column spanners, both print typography problems
  4. 8 August 2026Proof corrections, round twoVerifications, case arithmetic and the sources hazard checked again
  5. 8 August 2026120 page proof built230 by 300mm trim, the reading proof, the CMYK master and the press block from one command
  6. 10 to 11 August 2026Studio editorContent migrated to JSON with typed loaders, so the publication can be edited without a developer
Commits
297
First to latest
15 weeks
Chapters
9
Proof extent
120pp

Dates taken from the project's commit history. The proof date and extent are recorded in the print folder.

02

The masthead

The masthead is the wordmark. It is set in Newsreader at its light 300 weight, with the strap line, A yachting field manual, beneath it in the same face italicised. There is no drawn logo and nothing else identifies the publication.

It is typeset rather than drawn, and appears as live text wherever it is used. That keeps it selectable, searchable and accessible, and it means the masthead cannot drift out of step with the body typography, because it is the body typeface. On the print edition the same wordmark is foil stamped on the case.

The First Owner’s Reference

A yachting field manual

The mastheadNewsreader Light 300, strap line italic
The First Owner's Reference Publisher's mark
Publisher's markThe Foreland lighthouse, charcoal on paper
The First Owner's Reference Reversed
ReversedPaper on charcoal, for dark grounds
The First Owner's Reference On marine
On marinePaper on the accent
72.01 units120 units

The publisher's mark is the Foreland lighthouse. Measured from the path data it is identical to the mark on the parent company's site, 72.01 by 120 units on a 200 unit square, a ratio of 0.600 to 1. That is deliberate: the Reference is published under the Foreland Marine umbrella, and using the same artwork rather than a redrawing is what makes the relationship legible at a glance.

Aspect ratio
0.6 : 1
Measured from the drawn path
Construction module
24 units
A fifth of the mark height
Artboard
200 × 200
viewBox units
Drawn ink
72.01 × 120
Air, top and bottom
40 units each
Air, left and right
64 and 63.99
Colourways
Charcoal and paper
A chapter opening on The First Owner's Reference, with the masthead set live in Newsreader
The masthead as live text at the top of a chapter opener, with the chapter numeral in marine and the metadata set in DM Mono
xx

The mark carries its clear space on the artboard rather than in a written rule. Forty units of air sit above and below the drawing on a 200 unit square, so placing the file at any size and butting other elements to its edge still leaves a third of the mark height as breathing room. Clear space that is drawn into the file is clear space nobody has to remember.

x = the built-in artboard margin, 40 units on the artboard.

14px
20px
28px
40px
72px
140px

The publisher's mark down to favicon size. It is a narrow, vertical drawing at 0.600 to 1, so it is the height that runs out first rather than the width. The beam is the first detail to close up, which is why it is drawn as a small number of heavy strokes rather than fine rays.

Because the masthead is typeset rather than drawn, most of what would normally be logo misuse cannot happen here: there is no file to stretch and no artwork to recolour by accident. The restrictions that remain are about the two things that can still go wrong, which are the face and the ownership of the mark.

The mark is never scaled on one axis
Never rotated. It is a lighthouse
Charcoal, paper or marine only
No effects. It is printed, blind debossed or not used

One further rule is editorial rather than visual. The masthead is set in Newsreader Light and nothing else, and it is never substituted with a display face for a campaign or a cover. Because it is live text in the body typeface, a substitution would be visible immediately against the prose beneath it, which is a useful property for a publication that will outlive whoever is setting it.

03

Colour

The palette treats the screen as paper. The ground is a warm off-white rather than white, text is near black rather than black, and a single marine blue carries headings, links and drop caps. Stone handles metadata and captions, and a warm rule colour draws the hairlines that structure the page.

Each colour has a deeper partner, so contrast can be raised without introducing a new hue. The print edition uses slightly warmer versions of the same tokens, because ink on uncoated stock reads cooler than the same value on a backlit screen.

Paper

#F5F2EC

245, 242, 236

The page

Paper deep

#EDE8DF

237, 232, 223

Alternating bands and callouts

Charcoal

#1A1A1A

26, 26, 26

Editorial text

Charcoal soft

#2A2A2A

42, 42, 42

Secondary text on paper

Marine

#0F3B5C

15, 59, 92

Headings, links, drop caps

Marine deep

#0A2A44

10, 42, 68

Immersive grounds

Sail

#4A7DA9

74, 125, 169

Links on dark grounds

Stone

#7A756D

122, 117, 109

Metadata and captions

Rule

#D8D2C4

216, 210, 196

Hairlines and dividers

Measured contrast

Measured contrast ratios for each text and surface pair in the palette, with the WCAG 2.1 grade each one earns.
PairSampleRatioWCAG 2.1
Charcoal on paperSample text15.6:1AAA
Marine on paperSample text10.4:1AAA
Stone on paperSample text4.1:1AA large
Paper on marineSample text10.4:1AAA
Sail on marine deepSample text3.4:1AA large

Ratios are computed from the hex values on this page under WCAG 2.1, not quoted from the brand document.

04

Typography

Three families divide the work. Newsreader carries the masthead and all editorial prose. DM Sans handles signposting, which is to say chapter numerals, navigation and metadata, set in letter-spaced capitals. DM Mono sets the numbers, tabular wherever money is involved, so a column of figures aligns on the decimal without anyone having to think about it.

Newsreader

Masthead and editorial prose

Light 300 for the masthead, up to 500 in chapter headings, italic for the strap line and pull quotes. It carries old-style figures and standard ligatures throughout.

DM Sans

Signposting

Chapter numerals, navigation and metadata in letter-spaced capitals. It never sets a paragraph.

DM Mono

Numbers

Tabular numerals for cost tables and the calculators, where alignment matters more than colour on the page.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 & £ € , . ; : ( ) “ ”

The first year of ownership is the year in which the assumptions made during the purchase are tested.

Newsreader Light 300, the editorial voice
The type scale: size, role, family, weight, line height and tracking for each step, with a live setting of the face.
StepSizeRoleFamilyWeightLine heightTrackingSet
displayclamp(3rem, 6vw, 6rem)DisplayNewsreader1.02Aa
headlineclamp(2rem, 3.5vw, 3rem)HeadlineNewsreader1.1Aa
titleclamp(1.5rem, 2.2vw, 2rem)TitleNewsreader1.2Aa
subhead1.125rem / 18pxSubheadNewsreader1.4Aa
body1.125rem / 18pxBodyNewsreader1.65Aa
small0.875rem / 14pxSmallDM Sans1.5Aa
meta0.75rem / 12pxMetadataDM Sans1.4Aa

Body type is set at 18 pixels rather than the 16 that most sites use, on a 1.65 line height, because the reader is expected to stay with a chapter for twenty minutes rather than scan it. Paragraphs are hyphenated with limits set so that no word breaks with fewer than four characters on a line, which is a print convention rarely carried across to the web.

Chapter body copy showing the drop cap, the prose measure and hyphenated line breaks
Everything the typography section describes, in one screen: the marine drop cap, the measure, hyphenation across line ends, the chapter rail in DM Mono and a figure sitting in the outer margin
05

Layout

The layout serves long reading above everything else. A single column runs at a 38rem measure, which lands between sixty and seventy-five characters a line at body size. A rail of 22rem carries footnotes, sources and figures alongside the text at desktop width and folds beneath it on a phone. The page container stops at 80rem.

Desktop12 columns

Prose column plus a 22rem rail for notes and sources

Tablet6 columns

Rail folds beneath the prose

Mobile4 columns

Single column, notes inline

Prose measure
38rem
Note rail
22rem
Page container
80rem
Body size
18px
Body line height
1.65
Drop cap
Marine, chapter opener
  • Drop caps are set in marine on the first paragraph of each chapter, matching the print edition.
  • A scroll progress bar runs across the top of a chapter, because a reader who has committed twenty minutes deserves to know where they are.
  • Navigation strips between chapters carry the previous and next chapter titles rather than arrows alone.
  • Every defined term in the glossary is auto-linked on first use in the body, without an editor marking it up.
06

The publication

Nine chapters form the spine, running from the reality of ownership through the market, how the industry works, acquisition, new build against brokerage, refit, operations, motor against sail, and a closing decision framework. Each chapter is a complete piece of editorial in its own right: a lead essay, a data spread, a guest opinion, an anonymised case and a printable checklist.

Around them sit a glossary of fifty defined terms, each with its own page and its own structured data, a search that covers the whole publication, and four working tools built on published industry data.

What was shipped

  • Nine chaptersEssay, data spread, guest opinion, anonymised case and checklist in each
  • GlossaryFifty terms, each with a page and DefinedTerm schema
  • Running cost calculatorBuilt on sourced industry figures
  • Captain and crew salary, 2026Published pay data by role and vessel size
  • Order book trackerThe new build market, by yard
  • Yacht VAT, 2026Import and charter positions by jurisdiction
  • SearchCompiled at build, runs in the browser, queries never sent anywhere
  • Colophon and press kitHow the publication is made, and how to cite it
The glossary index, showing defined terms with their short definitions
The glossary. Every term carries its own page and its own structured data, and is auto-linked on first use in the chapters
The running cost calculator, with inputs on the left and cost categories on the right
The running cost calculator. Figures are set in DM Mono tabular, so a column of money aligns without anyone thinking about it
The First Owner's Reference on a phone
The same publication at 390 pixels
07

The print edition

The same content renders a second time as a book. There is no separate print file and no page layout application in the chain: the print edition is a route on the website, rendered through a print stylesheet that runs to 2,565 lines, and printed by a headless browser.

The proof as built on 8 August 2026 runs to 120 pages at a 230 by 300 millimetre trim. The sheet is 236 by 306 millimetres, which is the trim plus three millimetres of bleed on each edge, with mirrored margins so the gutter is wider than the fore-edge on both verso and recto.

Page

Trim
230 × 300mm
Sheet with bleed
236 × 306mm
Margins, verso
29 / 27 / 29 / 27mm
Gutter margin
29mm
Extent
120pp

Text

Body
12.5 / 17pt
Columns
Two at 91.5mm
Column gutter
7mm
Running heads
7 to 8pt
Folios
9.5pt
Head and foot padding
11mm

Materials

Text stock
Munken Pure 120gsm
Binding
Smyth-sewn, casebound
Case boards
Colorplan
Wordmark
Foil stamped
Lighthouse
Blind debossed
Edition
500 hand-numbered

The build is a two-pass print rather than a single render, because a document with contents folios cannot know its own page numbers until it has been laid out once. The first pass discovers where each chapter falls and writes the real folios and the verso and recto parity spacers back into the project. Later passes verify that the pagination has stopped moving.

Full-bleed pages are handled separately. A full-page image box placed mid-document fragments against the root page master and shows a seam at the join, so the cover, frontispiece, chapter openers and closing page are each printed standalone from their own route and merged over placeholder pages in the flow document. The result is then stamped with TrimBox and BleedBox, converted to CMYK, and padded to a multiple of eight pages to give the printer a clean press block.

Source

Typed content

Chapters, essays, glossary and checklists in TypeScript and JSON

Print stylesheet

2,565 lines of CSS Paged Media

Image manifest

Curated assignments, resized to 2700px long edge, sRGB

Render

Chrome, via Puppeteer

Native paged media, no pagination library

Pass one

Discovers chapter positions, writes real folios and parity spacers

Pass two

Verifies pagination has stabilised

Full-bleed pages

Printed standalone, merged over placeholders

Press

TrimBox and BleedBox

Stamped with pypdf

CMYK conversion

Ghostscript, generic prepress profile

Press block

Cover dropped, padded to a multiple of eight

Case artwork

Printed flat from its own route for the binder

One command produces the reading proof, the CMYK master, the press block and the case artwork. Nothing in the print folder is edited by hand.
08

Built to be cited

A reference work is only useful if other people can quote it correctly, which is a design problem as much as an editorial one. Twenty distinct schema types are in use across the publication, from Article on each chapter and DefinedTerm on each glossary entry through to Dataset on the data spreads and SoftwareApplication on the tools.

Every numerical claim in the text carries a source, and the structured data carries a suggested citation format, so an answer engine quoting a figure has both the number and where it came from.

  • The search index is compiled at build time and shipped with the page, so a query never leaves the reader's browser. For a publication whose readers are researching a purchase they have told nobody about, that is a feature rather than an optimisation.
  • Each chapter's checklist has its own single-page print layout, intended to be printed and carried into a meeting.
  • The colophon records how the publication is made and states that it takes no advertising.
  • A press kit provides the masthead, the mark and the correct citation format, so third parties reproduce it accurately.

What a full chapter weighs

Transferred
1.7MB
Requests
49
DOM nodes
781

When it paints

First contentful paint
208ms
Largest contentful paint
208ms
Load complete
200ms

Measured on 25 August 2026 by loading firstownersreference.com/01-reality-of-ownership twice in headless Chrome at 1440 pixels with the cache disabled, and keeping the better run. This is a desktop connection on a fast line, so the paint figures are a floor rather than a field measurement. The transfer weight and request count are the numbers worth comparing, because they do not change with the connection.