Collateral

• 1: Business card
• 2: Email signature
• 3: Email
• 4: Social and OG images
• 5: Service one-pager

1 - Business card

The primary format is digital — a vCard shared via QR code or direct link, not a printed card.

Paper stock

The same card on white. This is the form to hand a printer when a physical card is required, and the one to reach for when the card will sit on a light surface it does not control — a conference badge holder, a scanned page, a slide.

Three things change, and nothing else does:

The wash does not survive the change of surface. At 12% on midnight it reads as a soft light source; at 12% on white it reads as a printing fault — an uneven patch of ink that a press will faithfully reproduce. So the accent moves to a rule down the leading edge, which is one line, prints cleanly at any size, and is the same device the signature uses.

The name, role, and contact rows keep their type sizes and weights exactly. Only their colours change, to the light-mode text steps: midnight-9 for the name, slate-9 for the role at 5.58:1, and slate-11 for the mono rows at 5.18:1.

Layout

• Midnight surface, mark top-left, name in Plus Jakarta Sans 700.
• Role in Source Sans 3 400, in slate-dark-11.
• Contact rows in IBM Plex Mono at 11px — addresses and handles are data, and monospace makes them scannable and unambiguous.
• projectious.work always present.
• Accent used once, on the QR frame or the primary contact method.

Print fallback

If a printed card is required:

• 85×55mm, matte stock.
• Single-colour midnight on uncoated white, or reversed white on midnight.
• Use the monochrome mark — no accent on press unless a spot colour is budgeted.
• Respect the 1× clear-space rule; do not bleed the mark to the trim edge.

Handing colour to a printer

The brand is defined in sRGB hex. Press is not sRGB, so a printed card needs the values converted — and the conversion is the vendor’s job, not a lookup table’s.

Give the printer the Lab values. They are device-independent: they describe the colour itself rather than one recipe for making it, so the vendor can hit them on whatever stock and profile the job actually runs on.

Do not guess a Pantone equivalent. If the job budgets a spot colour, give the vendor the Lab value and let them specify the closest ink; a Pantone number picked from a screen swatch is a different colour with an authoritative name on it.

2 - Email signature

Email is not the web. Every value below is a literal, every layout is a table, and nothing depends on a stylesheet the client is free to discard.

Two forms are supplied:

The signature

Both specimens are rendered on white, because that is where a signature actually lives. The surrounding page has a colour mode; a mail message generally does not.

One rule, and it is vertical

A signature accumulates dividers as it accumulates fields — one under the name, another above the legal block, another before the disclaimer — and each reads as a section break in a message that is not sectioned. On a white background the result is a small form stapled to the bottom of a letter.

So there are no horizontal rules at all. One vertical accent rule runs down the left of the whole block: it marks the signature as a unit, ties it to the brand, and costs one line instead of four. Everything else is separated by space and by type size.

Fields

Replace every [PLACEHOLDER]. Delete any row that does not apply — the block is built so that removing a row leaves no gap behind it.

What the law asks for

A starting point, not legal advice — confirm against your own jurisdiction before shipping a signature.

Construction

Declaring white three times is not belt-and-braces

It is the difference between a signature that survives dark mode and one that does not, and it is the most common way this block breaks.

<table … bgcolor="#ffffff" style="…background:#ffffff;background-color:#ffffff;…">
  <tr bgcolor="#ffffff" style="background-color:#ffffff">
    <td bgcolor="#ffffff" style="background:#ffffff;background-color:#ffffff;…">

A client that repaints a message for dark mode works element by element: it looks at each one, decides whether it has a background it should keep, and inverts the rest. Declare white only on the <td> and the <table> around it has no background to keep — so the cell stays white while its own container is repainted dark. The result is a white island with a dark halo, or worse, the dark text inverted to light and then drawn on the white cell that was kept.

Every enclosing element that has a painted area needs the declaration, and each one needs it in both forms: the bgcolor attribute, which Outlook’s renderer prefers, and background-color, because several clients strip the background shorthand while keeping longhands.

Colours

Three families, which is what a signature should have.

Before shipping a change

• Send to Outlook (Windows), Gmail web, Apple Mail, and one mobile client.
• Reply to that message twice and check how the signature looks quoted inside a thread.
• Turn on the client’s dark mode and confirm the hierarchy still reads.
• Forward it, to confirm nothing depends on the original message’s styles.

3 - 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.

4 - Social and OG images

Priority

LinkedIn and GitHub first, blog second, Twitter/X as backup. The templates are sized for those surfaces in that order.

Template rules

• Backgrounds are midnight or midnight-dark, or white with an accent top bar.
• projectious.work is always visible.
• Never place text over a busy background.
• An accent glow circle at subtle opacity provides visual interest without competing with the text.
• Typography hierarchy is unchanged: Plus Jakarta Sans for headlines, Source Sans 3 for body.

Open Graph

• 1200×630px.
• Headline at Display weight, capped at roughly 60 characters — longer headlines are truncated by most platforms anyway.
• The mark sits bottom-left or top-left, never centred.
• Test the rendering at 320px wide: most impressions are in a mobile timeline.

5 - Service one-pager

The card, the signature, and the social artwork all carry the brand in a few square centimetres. The one-pager is the opposite problem: a whole page, handed over or attached, that has to explain a single service to someone who has not asked yet.

One service per sheet

A one-pager describes one offer. A sheet listing four services is a capabilities brochure, and it is read by nobody, because a reader who wants one of the four has to find it first.

If there are four services, there are four one-pagers. They share the structure below and differ only in their content — which is what makes the structure worth specifying.

The bands

Four horizontal bands, top to bottom. The sheet is 1000px wide in the HTML source and prints to a single A4 or Letter page.

Two midnight bands, at the top and the bottom, with white between them. The sheet opens and closes on the brand and leaves the middle to the content — the same shape as a title-and-closer deck, for the same reason.

The header carries a single decorative element: an orange-9 circle at 6% opacity bleeding off the top-right corner. That is the entire ornament budget for the page.

Three benefits, not five

Three columns fit a 12-column grid at four columns each, three items are readable at a glance, and three is roughly how many distinct reasons a person retains from a page they were handed.

Each benefit is an icon tile, a heading of no more than five words, and body text of no more than two lines. The icon is Lucide at 20px inside a 40px tile filled with the tag background — it is a marker, not an illustration.

The heading states the benefit, not the feature: “Self-hosted where it matters”, not “Self-hosting support”.

The process band

A numbered sequence with a connecting rule, each step carrying a duration. The durations are the point: a one-pager that says “we migrate your cloud” competes on adjectives, and one that says “week 3: stand up self-hosted core” competes on a plan.

The numbers are set in IBM Plex Mono inside midnight-9 discs, because they are data. The connector is a 1px slate-5 rule, not an arrow — the numbers already carry the direction.

Do not put a duration on the sheet that the engagement cannot hold. The portfolio principle — make maturity and limitations easier to see, not harder — applies to sales collateral without modification.

One call to action

The close band gets one accent element. It is a button shape carrying white text, so it fills with accent-solid (#cc4528) and not the identity accent — the same 4.72:1 rule as the interface and the email.

Beside it, exactly one contact route, in mono. Two routes make the reader choose before they act.

Printing it

The example is HTML, and the export path is the browser’s print dialogue — the same route as the resume template.

• Colour is not guaranteed. A one-pager is frequently reprinted on an office mono laser. The layout must survive greyscale: the bands separate by value, the numbers stay legible, and no meaning is carried by the accent alone.
• Turn on background graphics in the print dialogue, or the midnight bands print as white and the reversed text disappears.
• Check the fold. If the sheet will be folded, nothing important sits within 10mm of the fold line.
• For volume print, hand the vendor the CMYK values rather than the hex.