Email

The signature covers the block at the bottom of someone else’s message. This page covers the message itself: a full-width, sendable email with a header, sections, a call to action, and a footer.

Everything the signature page says about construction — tables, inline styles, web-safe stacks, literal hex, role="presentation" — applies here unchanged and is not repeated. What follows is what a whole message adds.

It opens straight from the filesystem — no runtime, no build step — so it can be pasted into a sending tool and previewed as-is.

Structure

600px, centred on a neutral surround, in this order:

600px is the width every mail client can be relied on to render without horizontal scrolling, and it is the reason the message is not laid out on the 1100px measure. Below that, max-width:100% on the outer table lets the content reflow in a phone client.

Sections are numbered — 01 · agent pattern — in the accent, in the overline style. The number is the only ornament in the body: it gives a scanning reader a structure to skip through without a rule, an icon, or a background tint per section.

The preheader

The first line of hidden text is what the inbox shows next to the subject line. It is not optional and it is not a repeat of the headline:

<div style="display:none;max-height:0;overflow:hidden;opacity:0;">
  Cloud · Agile · Agentic AI — this month: three agents worth stealing, and
  why generic SaaS is losing its edge.
</div>

Leave it out and the client fills the space with whatever text comes first, which is usually the wordmark followed by “View in browser”.

The bulletproof button

A styled <a> is not a button in Outlook’s Word renderer: padding collapses and the fill shrinks to the text. So the call to action is built twice — a VML rectangle inside a mso conditional comment, and a table cell with bgcolor for everyone else.

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://…"
             style="height:44px;v-text-anchor:middle;width:220px;"
             arcsize="9%" fillcolor="#cc4528" strokecolor="#cc4528">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:14px;font-weight:bold;">
    Read the case study
  </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr><td bgcolor="#cc4528" style="border-radius:4px;" align="center">
    <a href="https://…" target="_blank" style="display:block;padding:13px 26px;
       font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;
       color:#ffffff;text-decoration:none;mso-line-height-rule:exactly;">Read the case study</a>
  </td></tr>
</table>
<!--<![endif]-->

Three things are load-bearing:

• The fill is #cc4528, not #E05232. White on the identity accent is 3.87:1; on accent-solid it is 4.72:1. The same rule as solid controls in the interface, and email is where it matters most, because a mail client will not offer a hover state to compensate.
• 44px tall. A mail is read on a phone more often than not, so the touch floor is the binding constraint.
• arcsize="9%" approximates the 4px radius the HTML path sets. VML has no pixel radius; it takes a percentage of the shorter side.

One button per message. A second call to action does not add a second chance — it splits the first one.

Colour in a message

The signature’s colour table holds, with two additions a whole message needs:

The accent appears as text in the overlines and as a fill on the one button — and #E05232 itself appears nowhere carrying text, in either role.

The footer is not decoration

Commercial mail has to say who sent it, why it arrived, and how to stop it. Those three facts are the footer’s whole job:

• Who — the legal entity and its postal address.
• Why — one sentence: “Sent to you because you subscribed to Field notes.”
• How to stop — an unsubscribe link that works in one click and does not require signing in.

An unsubscribe that leads to a login screen is, in most of the jurisdictions on the signature page, not an unsubscribe.

Before sending

• Send to Outlook (Windows), Gmail web, Apple Mail, and one mobile client. The VML path only exists for the first of those, so it only gets tested there.
• Check the preheader in the inbox list, not just in the opened message.
• Turn images off. The message must still make complete sense — which is why there are none in the layout to begin with.
• Turn dark mode on. Clients recolour aggressively; as with the signature, the hierarchy is carried by size and weight so it survives.
• Click the unsubscribe link from a logged-out browser.