Email designer
One layout, every brand — the 3-pill pattern. This generalises Fanogram’s lib/email/templates/layout.ts with brand tokens: brand name, logo, accent and footer swap; structure and content NEVER fork per brand.
Demo
Swaps logo · accent · footerContent byte-identical
Rendered preview Fanogram
A faithful HTML/CSS mock of the live layout — the email itself is the one intentionally light surface in this pack, because transactional email renders on light grey in every client.
fanogram.co
Your payout is on its way
Hi Ari — your payout was approved and has been handed to your bank. Most banks clear it within 1–2 business days.
Payout total
$1,284.00
— Fanogram team
Fanogram Ltd · 1 Demo Street, London
Sent by Fanogram · part of the folo.link family
1Brand band — near-black with a brand tint; the logo is a hosted white PNG in production (Gmail/Outlook strip inline SVG). Wordmark text stands in here.
2560px white card on light grey — table-based layout, every style inlined, no external CSS. Radius 12 · 1px #e4e4e7 hairline (email-client land, not app land).
3Bulletproof button — in the real template Outlook gets a VML roundrect fallback; every other client gets the anchor styled inline. Accent is the only thing that swaps.
4Preheader — hidden inbox-preview line supported by the layout (display:none + zero-size), set per template, not per brand.
Never forks
The invariant list — identical bytes for all three brands.
✓Band structure — one band, logo left, 20×28 padding
✓560px card — width, radius, shadow, light-grey canvas
✓Type scale — system stack, 19px heading, 14.5px body, 13px footer
✓Button geometry — padding, radius, weight (only the fill swaps)
✓Footer layout — team line · address · unsubscribe/preferences · family strap
✓Copy — subject, body and CTA text belong to the template, never the brand
✓Plain-text twin — each template renders its own text version, per the live layout
✉
Fanogram’s live template is deliberately monochrome — layout.ts ships a near-black ink (#0a0a0a) for band, button and links, sidestepping colour-rendering drift across clients. The brand-tokens object can express that too: a brand may set its accent to its ink. The preview shows the tokenised family voice.
What swaps — the brand-tokens object
One column per brand. These five rows are the ENTIRE per-brand surface; accent + band values from DESIGN-SYSTEM §1. From-addresses marked spec are placeholders until DNS is ruled.
| Token | Folo | Fanogram | Receipt |
|---|---|---|---|
| Brand-band colour | #151024 | #0f0d16 | #0b131d |
| Logo asset | folo-logo-white.png | fanogram-logo-white.png Live | receipt-logo-white.png |
| Accent (button + links) | #8b7bff | #a78bfa | #38bdf8 |
| Footer legal name | Folo | Fanogram | Receipt |
| From-address | no-reply@folo Spec | no-reply@fanogram.co | no-reply@receipt Spec |
⛭
Implementation = ONE layout.ts taking a brand-tokens object — not three template files. Today’s renderEmailShell({ preheader, bodyHtml }) grows one argument: brand { name, logoUrl, band, accent, legalName, siteUrl, fromAddress }. Every template keeps calling one shell. This concept is a spec, not code to port.
Templates this layout carries click a row — it renders left
The full transactional set (#167, designed 2026-08-11) — every one renders through the single shell, on every brand the dots allow. The row you click previews in the client frame; flip the brand pills and the SAME template re-skins.
| Template | Subject line | Brands |
|---|---|---|
| Welcome | Welcome — let’s get you set up | |
| Verify email | Confirm your email address | |
| Payout sent | Your payout is on its way | |
| Payout approved | Payout approved | |
| KYC result | Your verification result | |
| New subscriber | You have a new subscriber | |
| Receipt | Your receipt | |
| Needs-you notification | Action needed: confirmation statement due |
FoloFanogramReceipt
◎
Why one layout: three brands, one transactional voice, one place to fix rendering bugs. The pill switch above is the whole demo — flip it and watch the logo, accent and footer swap while every other byte stays identical. Anything money-adjacent in real templates links docs/PRICING-CANONICAL.md; no figure is hard-coded per brand.