the wingman project

make · §II.12 · email design · sealed

from: your brand <hello@yourbrand.com>

to: one person, addressed by name

subject: Native in the inbox. Ships in hours.

preheader: the one-to-one channel, finally designed.

Email is the only medium where your brand stands in someone’s private room. You arrive by name, you are judged in a second, and the room’s rendering rules are brutal. We design for the room, and for the machines that draw it.

Start a sendRead the teardown ↓

opened · what the envelope was protecting

The highest-ROI channel most brands already have.

Most brands earn more from email than from any rented audience, and treat it as an afterthought export. Design that breaks in Outlook kills the channel quietly. Design that takes three days to build kills it slowly. Both deaths look like “email doesn’t work for us.”

We design email for volume, for speed, and for the ESP you actually run, so the channel compounds instead of decays. Native in the inbox. Shipping in hours.

the wingman project

read · the teardown

Every zone has a job. We name them all.

A send is not a poster. It is nine zones in a strict column, each with one job, rendered by machines that punish vagueness. We name every job before we draw a pixel.

f-1 · the anatomy of a sendevery zone has a jobsubject: worth opening, by namea reason to openYour BrandASHOP NOWunsubscribe · preferences · addressPREHEADERthe whisper after the subjectit earns the open before the openHEROone image, one claimdesigned to survive images-offTWO-UPa product pair, scannableat arm’s length on a phonePRODUCT ROWthe repeatable shelfrestock it, never rebuild itSUBJECTwritten with the design,never appended after itMASTHEADthe nameplate: you arerecognized before you are readCOLUMNtext-only warmth, the partthat reads like a letterCTAa bulletproof buttoneven Outlook can’t break itFOOTERunsubscribe in plain sightrespect is deliverabilityevery zone argued for, before it argues in the inbox
f-1 · anatomy of a sendSUBJECT: WORTH OPENING, BY NAMEa reasonYour BrandSHOP NOWunsubscribe ·preferencesPREHEADERearns the openMASTHEADrecognized firstHEROsurvives images-offCOLUMNreads like a letterTWO-UPscannable pairCTAoutlook-proof buttonPRODUCTSthe repeatable shelfFOOTERrespect, in plain sightevery zone argued for, beforeit argues in the inbox

read · the room

Judged in a second.

  • the from-name is recognized before anything is read
  • the subject earns the open
  • the preheader seals it

Three lines decide the whole send. We design them as hard as any layout, because in this room, they are the layout.

inbox · tuesday · 8:04 amCOMPOSEinboxstarredsentarchivepromotionsupdates6:117:20YOUR BRANDWe made you something worth opening.designed for this exact room,8:049:3810:4711:5612:05f-2 · the inbox lineupsix rows compete. one reads.
8:04search mailINBOXYOUR BRANDWe made you somethingworth opening.8:04f-2 · the lineupone row reads.

read · the machines

Designed inside the cage

The inbox’s rendering rules aren’t obstacles to apologize for. They’re the brief, and designing against the real ones is the discipline.

R-01

Dark mode

Your ivory becomes someone’s obsidian at eleven at night. We design both renders on purpose: every color chosen to survive inversion, every logo tested against a black room.

R-02

Outlook

Still renders email with a word processor. Tables, not flexbox; cages, not canvases. We design inside the cage so nothing rattles when the door shuts.

R-03

Gmail clipping

Gmail trims heavy sends mid-sentence. Every email leaves the bench weighed, so the footer (and the unsubscribe) always arrive intact.

made · the method

Five folds, from brief to inbox.

  1. 01CONSTRAINWe design against the real renderers first: dark mode, Outlook, Gmail clipping. The constraint is the brief, not the obstacle.
  2. 02BUILDDirectly in Klaviyo, Customer.io, or whichever ESP you actually run. No bespoke MJML pipelines to babysit, no handoff that drops the ball.
  3. 03SYSTEMIZEA component library, built once, so every future email ships in under two hours instead of three days.
  4. 04FLOWWelcome, abandoned cart, post-purchase, win-back, VIP: designed end to end, built, and switched on.
  5. 05WRITECopy alongside design, not after it. The subject line is designed as hard as the layout it opens.

made · the library

Built once. Then every send ships in under two hours.

built directly inKLAVIYOCUSTOMER.IOYOUR ESP

The design system lives inside the tool your team already opens, not in a Figma file nobody exports, not in an MJML pipeline nobody maintains.

f-3 · the system boardeight blocks · any sendE.01MASTHEADAaE.02HEROE.03TWO-UPE.04COLUMNE.05CTAE.06PRODUCT TILEE.07FOOTERE.08SIGN-OFFyours,Your BrandSHOP NOWyours,unsubscribe · preferencesONE SEND · ASSEMBLEDthe library, built onceevery send after: under two hours
f-3 · the system boardE.01MASTHEADAaE.02HEROE.03TWO-UPE.04COLUMNE.05CTAE.06PRODUCT TILEE.07FOOTERE.08SIGN-OFFyours,Your BrandSHOP NOWyours,unsubscribe · preferencesbuilt once · every send after: under two hours

made · the automations

Always on. End to end.

Campaigns are the letters you choose to write. Flows are the ones that write themselves: every one designed, built, and live before we call it done.

  1. Welcomehellothe storythe producta soft ask
  2. Abandoned cartthe reminderthe proofthe last note
  3. Post-purchasethe receiptthe how-tothe reviewthe reorder
  4. Win-backmiss youthe valuethe door, left open
  5. VIPthe invitation

kept · what stays when we stand up

What you keep.

  • K-01A full email template libraryEvery campaign shape you send, designed and saved where your team works.
  • K-02Every automation flow built and liveNot recommended. Not documented. On, and sending.
  • K-03Campaign templates ready for your teamOpen, swap, send, without calling a designer.
  • K-04A design system inside your ESPThe blocks live in the tool, so the system survives every staff change.
  • You don’t code emails.
  • You don’t test in Litmus.
  • You don’t wait days for a single send.

Send it.

Start your first send

email design · §II.12 · make · the wingman project