Email Collateral
Below: a set of responsive email builds — promotional, transactional, and newsletter — hand-coded to render everywhere from Apple Mail to Outlook.
Email is the format designers most often outsource, because it breaks the normal rules of the web: table-based layouts, inline styles, and one file that has to render in every client. These three builds share one colour system and type treatment, so the brand stays consistent across very different jobs.
01 · Promotional
Spring Harvest — a seasonal sale campaign
The workhorse marketing email: a strong hero, a clear offer, product picks, and one job for the reader — click through and shop.
Build notes
- 600px table layout — nested tables, not divs, so structure holds across every client
- Hidden preheader sets the inbox preview line before the email is opened
- Bulletproof CTA — a padded link inside a coloured cell, so the button renders in Outlook
- MSO conditionals and a PixelsPerInch fix correct Outlook’s sizing quirks
- Product row stacks 2→1 column under 600px via a media query
- Dark-mode overrides keep contrast legible where clients honour it
02 · Transactional
Order confirmation — the receipt
A different discipline entirely: no persuasion, just clarity. The order number, total, and delivery window have to be scannable in three seconds.
Build notes
- Line-item table with right-aligned figures for a clean money column
- Totals hierarchy — a 2px accent rule separates subtotal from the final total
- Address + ETA block sits two-up on desktop, stacks on mobile
- Scannable structure — order #, total and delivery read at a glance
- Same inline-style discipline and bulletproof button as the promo build
- Reply-to support line instead of a hard CTA — right tone for a receipt
03 · Editorial
The Pour — a monthly newsletter
The hardest layout to keep tidy: several stories of different weights on one page, in a modular grid a new issue can drop content straight into.
Build notes
- Modular blocks — lead feature, a 2-up story row, and a product callout
- 48px content gutter holds the grid aligned across every section
- Story row reflows 2→1 column on mobile without losing rhythm
- Reusable card pattern so each new issue drops content into place
- Colour placeholders mark exactly where lifestyle photography lands
- One shared palette + type scale ties it to the other two builds