Print & email
Print is where the brand was born. Email is where most of our readers meet us first. The screen system has to translate to both without becoming a different brand on each surface.
Print: colour
Every screen hex pairs with a tested CMYK build. Use the table — never let a CMYK conversion run automatically from a corrupted or out-of-gamut hex. The Pantone column is a suggested spot match for cover treatments and finishes; specify it only when the print spec sheet calls for it.
These are best-effort approximations. The print spec sheet is final — verify proofs at the print run, not the desk. Files for the magazine ship as CMYK · FOGRA39 for coated stock and CMYK · FOGRA52 for uncoated. Embed the ICC profile on every export; do not flatten without it.
Print: paper
The paper does as much work as the type. Three stocks across the magazine, picked to match the colour direction and to keep the cream feel readable under daylight.
The diary moved hands. The building did not. She came in on Monday and the chair behind the corner desk was empty.
Trim size is 220 × 275 mm — a magazine portrait, slightly taller than A4. Bleed is 3 mm on every edge. Spine width depends on issue thickness; the printer calculates it from the page count and stock combination — never guess. Saddle-stitch up to ~64 pages, perfect-bound from 80.
Print: type
Freight Big Pro 400 and Freight Text Pro 400 / 500 / 600 — the same families as screen. Print uses the optical-display cuts where Darden Studio provides them: Freight Big Pro Display above 20 pt, Freight Text Pro for everything from 9 pt body to 18 pt subheading.
Inter is for marketing collateral and the website only — never for print body. The folio uses Inter, but the folio is page furniture, not reading copy.
Print: composition
A 12-column print grid sits on every spread.
Email: the constraints
Email clients are unreliable. Plan for it from the first line.
- No JavaScript. Any interactivity has to be a link to the web.
- Limited CSS. Flexbox and grid land in modern clients, but Outlook on Windows still renders through Word’s HTML engine. Plan for table-based layout fallback.
- Auto-inverted dark mode. Apple Mail and Outlook will invert backgrounds and text without asking. Design colour pairs that survive it, or opt out.
- 600 px maximum content width. Anything wider clips on Gmail mobile.
We ship three template flavours, in this order of frequency:
Email: HTML pattern
Centred 600 px table. Inlined <style> in the head — most clients respect it now — plus inline style="" on critical elements as fallback for the holdouts. Web-safe stack on every font declaration. Source Serif 4 ships in place of Freight in email: Freight is licence-restricted and cannot be served as a web font on a third-party domain, and the open-source Source Serif 4 is the closest free pairing for Freight Text.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="light only">
<meta name="supported-color-schemes" content="light">
<title>Executive Support — Issue 04</title>
<style>
body { margin: 0; padding: 0; background: #E3E4DC; }
table { border-collapse: collapse; }
img { display: block; border: 0; max-width: 100%; height: auto; }
.es-body { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; line-height: 1.55; color: #080305; }
.es-chrome { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.es-btn { background: #06A0A9; color: #FFFFFF; text-decoration: none; border-radius: 999px; }
</style>
</head>
<body style="margin:0;padding:0;background:#E3E4DC;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding:32px 16px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:600px;background:#FDFDFD;">
<tr><td style="padding:32px 40px 0;" class="es-chrome">
<span style="font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#E3783D;font-weight:600;">Issue 04 · Apr/May 2026</span>
</td></tr>
<tr><td class="es-body" style="padding:16px 40px 8px;font-family:'Source Serif 4',Georgia,serif;font-size:22px;line-height:1.2;color:#181F2C;">
Changing the face of the profession.
</td></tr>
<tr><td class="es-body" style="padding:8px 40px 24px;font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.55;color:#080305;">
For three years she ran the calendar of the man who ran the building. Then the building changed hands.
</td></tr>
<tr><td align="left" style="padding:0 40px 40px;">
<a href="https://executivesupport.example/issue-04" class="es-btn" style="display:inline-block;padding:14px 22px;background:#06A0A9;color:#FFFFFF;text-decoration:none;border-radius:999px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;line-height:1;">Read the issue</a>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>The meta name="color-scheme" line is the single most useful tag we ship. It opts us out of automatic colour inversion in Apple Mail, Outlook for Mac, and the iOS default client. Use it on every editorial template; system templates can drop it if they need to follow the OS.
Email: colour
The same hex codes carry. Cream (#E3E4DC) is the body background; Paper (#FDFDFD) is the card surface; Navy and Ink are the text colours. Teal is reserved for the single primary action, exactly as on screen.
Cream. The outer canvas of every editorial email.
Paper. The 600 px content table sits on this.
Ink. Source Serif body copy on Paper.
Teal. The button. The single action colour.
Dark mode in email is hard to control. Two strategies, in order of preference: opt out for editorial templates with <meta name="color-scheme" content="light only">; for transactional emails where the user expects to read in their preferred mode, design a pair that survives inversion — keep contrast on the text, never put dark navy text on a near-black inverted background.
Email: type sizes
Email type runs slightly larger than screen. Gmail mobile compresses the rendered size on small screens, and 16 pt body becomes effectively 14 pt in the reading pane. Bumping by 2 pt at small sizes restores parity.
Email: hit targets
Buttons in email need a 44 × 44 px tap target — the same minimum as iOS. The cell wrapping the link sets the height; the link sits inside as display: inline-block with matching padding. Outlook ignores CSS padding on anchor tags, so wrap the button in mso- conditional comments to render a VML rounded rectangle on Windows Outlook.
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="44" align="center" valign="middle" style="height:44px;border-radius:999px;background:#06A0A9;">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="#" style="height:44px;v-text-anchor:middle;width:180px;" arcsize="50%" stroke="f" fillcolor="#06A0A9"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:14px;font-weight:600;">Read the issue</center></v:roundrect><![endif]-->
<!--[if !mso]><!-- -->
<a href="#" style="display:inline-block;padding:0 22px;line-height:44px;color:#ffffff;font-family:Inter,Arial,sans-serif;font-size:14px;font-weight:600;text-decoration:none;border-radius:999px;">Read the issue</a>
<!--<![endif]-->
</td>
</tr>
</table>Email: weekly newsletter template
The weekly newsletter is the highest-volume template we ship. Anatomy, top to bottom:
- Logo lock-up — the wordmark plus an issue line in Inter small caps.
- Editor’s letter — three or four short paragraphs in Source Serif body. A signature at the foot.
- Three article promos — each a 4:5 image, an Inter kicker, a Source Serif headline, a single-sentence tease, and a Read button.
- Footer — unsubscribe always, postal address, social links. Inter 12 pt, stone-600.
Three pieces this week. The first one took us six months to land — I think you’ll see why.
Executive Support · 14 Hatton Garden, London EC1N 8AT · Unsubscribe
Print, email, screen — when each gets used
The brand reads consistent across all three; the cadence is what differs.
Usage rules
Use the published CMYK pair for every print build. The values are tuned against proofs, not auto-converted.
Letting the export pipeline guess CMYK from a corrupted hex is how teal becomes a dull turquoise on press.
Freight Text in the body. Print pages stay in the family — no system-font substitution.
Print body is Freight Text Pro 400. The licence covers the print run; use it.
Inter in the body. The page reads as a deck, not a magazine.
Inter is for marketing collateral and the website. Setting print body in Inter strips the magazine voice.
Hold every editorial email at 600 px maximum. Anything wider clips on Gmail mobile.
Full-width email cards reflow unpredictably and chop content under the fold on small clients.
font-family: ‘Source Serif 4’,
Georgia, serif;
Every email font declaration ends in a system fallback. Source Serif first, Georgia second, generic serif last.
font-family: ‘Freight Text Pro’;
Outlook on Windows will not load the web font. Without a fallback the client picks Times — the worst possible default.
background: #E3E4DC;
Solid background colours render in every client. Cream behind the 600 px table, paper inside.
background-image: url(…);
Outlook strips background images. The text lands on whatever the client decides — usually unreadable.
<img src=”…” alt=“Anika Patel, photographed in the Marylebone office.”>
Every image carries alt text. It is read aloud, indexed, and shown when the image fails to load.
<img src=”…”>
A missing alt attribute leaves screen-reader users with the file name. An empty alt only ever belongs on a decorative spacer.
Full-bleed photo signatures carry no folio. Let the photograph carry the spread.
A folio over a face is the sound of a typesetter not reading the page. Drop it on photo spreads.
Every editorial email leads with reading. The button comes after the reason to click it.
A bare button with no editorial context reads as marketing exhaust. Always include the reading.