Premium Promotional Campaign
A product launch email for Selvane skincare: art-directed hero, live-text headlines, bulletproof buttons and hybrid columns, with dark-mode styles built in. Scroll the email; it’s the real file.
Email development for ambitious marketing teams
Custom email development, modular templates, platform implementation, and meticulous QA. Built for agencies and marketing teams that need dependable technical execution.
Enterprise experience. Flexible production support.
From code to inbox
<body id="body" class="dm-page" style="margin:0;padding:0;background-color:#efe9e1;word-spacing:normal;"> <!-- MODULE: preheader (hidden inbox preview text) --><div data-module="preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Meet Night Renewal: a bakuchiol serum for slow, overnight repair. Plus a three-step evening ritual. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏</div> <div role="article" aria-roledescription="email" aria-label="Selvane: Rest is a ritual" lang="en" dir="ltr" style="font-size:16px;"><table role="presentation" class="dm-page" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;background-color:#efe9e1;"> <tr> <td align="center" style="padding:0 10px 32px;"> <!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]--> <table role="presentation" class="wrap" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:100%;border-collapse:collapse;"> <!-- MODULE: top bar (teaser and browser link) --> <tr data-module="topbar"> <td class="pad" style="padding:14px 40px;font:11px/16px Arial,Helvetica,sans-serif;letter-spacing:.6px;color:#6f675c;text-align:center;" > <span class="dm-soft">The Night Edit has arrived.</span> <a class="dm-soft" href="https://selvane.example/view" style="color:#6f675c;text-decoration:underline;">View in browser</a> </td> </tr> <!-- MODULE: header (live-text logotype and navigation) --> <tr data-module="header"> <td class="dm-surface pad" align="center" style="padding:30px 40px 22px;background-color:#fbf8f3;"> <a href="https://selvane.example/" style="text-decoration:none;"><span class="serif dm-ink" style="font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:30px;line-height:34px;letter-spacing:9px;color:#2f3a2c;">SELVANE</span></a> <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:16px auto 0;"> <tr> <td class="nav-link" style="padding:0 12px;font:12px/18px Arial,Helvetica,sans-serif;letter-spacing:1.2px;"><a class="dm-soft" href="https://selvane.example/serums" style="color:#5d564b;text-decoration:none;">SERUMS</a></td> <td class="nav-link" style="padding:0 12px;font:12px/18px Arial,Helvetica,sans-serif;letter-spacing:1.2px;"><a class="dm-soft" href="https://selvane.example/moisture" style="color:#5d564b;text-decoration:none;">MOISTURE</a></td> <td class="nav-link" style="padding:0 12px;font:12px/18px Arial,Helvetica,sans-serif;letter-spacing:1.2px;"><a class="dm-soft" href="https://selvane.example/rituals" style="color:#5d564b;text-decoration:none;">RITUALS</a></td> </tr> </table> </td> </tr> <!-- MODULE: hero image (2x export, width attribute for Outlook) --> <tr data-module="hero"> <td style="padding:0;background-color:#e7e3dc;"> <a href="https://selvane.example/night-renewal"><img src="img/selvane-hero.jpg" width="600" height="640" alt="Night Renewal serum in an amber glass dropper bottle on a wooden pedestal, in soft afternoon light." style="width:100%;max-width:600px;height:auto;background-color:#e7e3dc;font:14px/20px Arial,Helvetica,sans-serif;color:#2f3a2c;"></a> </td> </tr> <!-- MODULE: intro (headline, copy, bulletproof button) --> <tr data-module="intro"> <td class="dm-surface pad" align="center" style="padding:52px 56px 54px;background-color:#fbf8f3;"> <p class="dm-soft" style="margin:0 0 16px;font:bold 11px/16px Arial,Helvetica,sans-serif;letter-spacing:2.6px;color:#9a6a50;">NEW · THE NIGHT EDIT</p> <h1 class="h1 serif dm-ink" style="margin:0 0 18px;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:54px;line-height:56px;font-weight:normal;color:#2f3a2c;">Rest is a <em style="font-style:italic;">ritual.</em></h1> <p class="dm-soft" style="margin:0 0 32px;font:16px/26px Arial,Helvetica,sans-serif;color:#5d564b;">Night Renewal pairs bakuchiol with squalane for slow, overnight repair. Three drops after cleansing, and your skin does the rest while you sleep.</p> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://selvane.example/night-renewal" style="height:52px;v-text-anchor:middle;width:240px;" arcsize="50%" stroke="f" fillcolor="#2f3a2c"> <w:anchorlock/> <center style="color:#fbf8f3;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold;letter-spacing:1px;">DISCOVER THE SERUM</center> </v:roundrect> <![endif]--> <a class="btn-a dm-btn" href="https://selvane.example/night-renewal" style="background-color:#2f3a2c;border-radius:26px;color:#fbf8f3;display:inline-block;font:bold 14px/52px Arial,Helvetica,sans-serif;letter-spacing:1px;text-align:center;text-decoration:none;width:240px;-webkit-text-size-adjust:none;mso-hide:all;">DISCOVER THE SERUM</a> </td> </tr> <!-- MODULE: ingredients (three fluid hybrid columns) --> <tr data-module="ingredients"> <td class="dm-surface pad-cols" align="center" style="padding:0 28px 48px;background-color:#fbf8f3;font-size:0;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="dm-rule" style="border-top:1px solid #e4dccf;font-size:0;line-height:0;height:40px;"> </td></tr></table> <!--[if mso]><table role="presentation" width="544" cellpadding="0" cellspacing="0" border="0"><tr><td width="181" valign="top"><![endif]--> <div class="col" style="display:inline-block;width:100%;max-width:181px;vertical-align:top;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="padding:0 10px 18px;"> <img src="img/selvane-ing1.png" width="80" height="80" alt="" style="width:80px;height:80px;margin:0 auto 14px;"> <p class="serif dm-ink" style="margin:0 0 6px;font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:26px;color:#2f3a2c;">Bakuchiol</p> <p class="dm-soft" style="margin:0;font:13px/20px Arial,Helvetica,sans-serif;color:#6f675c;">A plant-based retinol alternative for smoother texture.</p> </td></tr></table> </div> <!--[if mso]></td><td width="181" valign="top"><![endif]--> <div class="col" style="display:inline-block;width:100%;max-width:181px;vertical-align:top;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="padding:0 10px 18px;"> <img src="img/selvane-ing2.png" width="80" height="80" alt="" style="width:80px;height:80px;margin:0 auto 14px;"> <p class="serif dm-ink" style="margin:0 0 6px;font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:26px;color:#2f3a2c;">Olive squalane</p> <p class="dm-soft" style="margin:0;font:13px/20px Arial,Helvetica,sans-serif;color:#6f675c;">Weightless moisture that sinks in without residue.</p> </td></tr></table> </div> <!--[if mso]></td><td width="181" valign="top"><![endif]--> <div class="col" style="display:inline-block;width:100%;max-width:181px;vertical-align:top;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="padding:0 10px 18px;"> <img src="img/selvane-ing3.png" width="80" height="80" alt="" style="width:80px;height:80px;margin:0 auto 14px;"> <p class="serif dm-ink" style="margin:0 0 6px;font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:26px;color:#2f3a2c;">Oat lipids</p> <p class="dm-soft" style="margin:0;font:13px/20px Arial,Helvetica,sans-serif;color:#6f675c;">Calming support for the skin barrier overnight.</p> </td></tr></table> </div> <!--[if mso]></td></tr></table><![endif]--> </td> </tr> <!-- MODULE: products (two-up product cards) --> <tr data-module="products"> <td class="pad-cols" align="center" style="padding:44px 26px 40px;font-size:0;"> <h2 class="h2 serif dm-ink" style="margin:0 0 26px;font-family:'Instrument Serif',Georgia,serif;font-size:36px;line-height:40px;font-weight:normal;color:#2f3a2c;text-align:center;">Complete the <em style="font-style:italic;">evening.</em></h2> <!--[if mso]><table role="presentation" width="548" cellpadding="0" cellspacing="0" border="0"><tr><td width="274" valign="top"><![endif]--> <div class="col-half" style="display:inline-block;width:100%;max-width:274px;vertical-align:top;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="padding:0 7px 14px;"> <table role="presentation" class="dm-surface" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#fbf8f3;"> <tr><td><a href="https://selvane.example/barrier-cream"><img src="img/selvane-prod1.jpg" width="260" height="300" alt="Barrier Cream in a clear glass jar, its lid lifted above a stone." style="width:100%;max-width:260px;height:auto;"></a></td></tr> <tr><td style="padding:18px 20px 22px;text-align:left;"> <p class="serif dm-ink" style="margin:0 0 4px;font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:26px;color:#2f3a2c;">Barrier Cream</p> <p class="dm-soft" style="margin:0 0 14px;font:13px/20px Arial,Helvetica,sans-serif;color:#6f675c;">Rich, cushioning, fragrance-free · $48</p> <a href="https://selvane.example/barrier-cream" style="font:bold 12px/16px Arial,Helvetica,sans-serif;letter-spacing:1.2px;color:#2f3a2c;text-decoration:underline;" class="dm-ink">SHOP NOW</a> </td></tr> </table> </td></tr></table> </div> <!--[if mso]></td><td width="274" valign="top"><![endif]--> <div class="col-half" style="display:inline-block;width:100%;max-width:274px;vertical-align:top;"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="padding:0 7px 14px;"> <table role="presentation" class="dm-surface" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#fbf8f3;"> <tr><td><a href="https://selvane.example/oat-cleanser"><img src="img/selvane-prod2.jpg" width="260" height="300" alt="Oat Milk Cleanser in a soft white tube on a peach-colored block." style="width:100%;max-width:260px;height:auto;"></a></td></tr> <tr><td style="padding:18px 20px 22px;text-align:left;"> <p class="serif dm-ink" style="margin:0 0 4px;font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:26px;color:#2f3a2c;">Oat Milk Cleanser</p> <p class="dm-soft" style="margin:0 0 14px;font:13px/20px Arial,Helvetica,sans-serif;color:#6f675c;">Gentle, low-foam, pH balanced · $32</p> <a href="https://selvane.example/oat-cleanser" style="font:bold 12px/16px Arial,Helvetica,sans-serif;letter-spacing:1.2px;color:#2f3a2c;text-decoration:underline;" class="dm-ink">SHOP NOW</a> </td></tr> </table> </td></tr></table> </div> <!--[if mso]></td></tr></table><![endif]--> </td> </tr> <!-- MODULE: ritual (numbered steps on a tinted band) --> <tr data-module="ritual"> <td class="dm-band pad" style="padding:46px 56px 44px;background-color:#e9dccc;"> <p class="dm-soft" style="margin:0 0 10px;font:bold 11px/16px Arial,Helvetica,sans-serif;letter-spacing:2.6px;color:#8a5a42;">THE EVENING RITUAL</p> <h2 class="h2 serif dm-ink" style="margin:0 0 24px;font-family:'Instrument Serif',Georgia,serif;font-size:34px;line-height:38px;font-weight:normal;color:#2f3a2c;">Three steps, ten minutes.</h2> <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td class="step-num dm-rule" valign="top" width="56" style="width:56px;padding:14px 0;border-top:1px solid #d4c2ad;font-family:'Instrument Serif',Georgia,serif;font-size:24px;line-height:26px;color:#8a5a42;">01</td> <td class="dm-rule" valign="top" style="padding:14px 0;border-top:1px solid #d4c2ad;font:15px/23px Arial,Helvetica,sans-serif;color:#4c463d;"><strong class="dm-ink" style="color:#2f3a2c;">Cleanse.</strong> <span class="dm-soft">Massage the Oat Milk Cleanser into damp skin, then rinse.</span></td> </tr> <tr> <td class="step-num dm-rule" valign="top" width="56" style="width:56px;padding:14px 0;border-top:1px solid #d4c2ad;font-family:'Instrument Serif',Georgia,serif;font-size:24px;line-height:26px;color:#8a5a42;">02</td> <td class="dm-rule" valign="top" style="padding:14px 0;border-top:1px solid #d4c2ad;font:15px/23px Arial,Helvetica,sans-serif;color:#4c463d;"><strong class="dm-ink" style="color:#2f3a2c;">Treat.</strong> <span class="dm-soft">Press three drops of Night Renewal into face and neck.</span></td> </tr> <tr> <td class="step-num dm-rule" valign="top" width="56" style="width:56px;padding:14px 0;border-top:1px solid #d4c2ad;border-bottom:1px solid #d4c2ad;font-family:'Instrument Serif',Georgia,serif;font-size:24px;line-height:26px;color:#8a5a42;">03</td> <td class="dm-rule" valign="top" style="padding:14px 0;border-top:1px solid #d4c2ad;border-bottom:1px solid #d4c2ad;font:15px/23px Arial,Helvetica,sans-serif;color:#4c463d;"><strong class="dm-ink" style="color:#2f3a2c;">Seal.</strong> <span class="dm-soft">Finish with a pea-sized amount of Barrier Cream.</span></td> </tr> </table> </td> </tr> <!-- MODULE: offer (live-text promotion) --> <tr data-module="offer"> <td class="pad" align="center" style="padding:28px 40px;background-color:#2f3a2c;font:14px/22px Arial,Helvetica,sans-serif;color:#efe6d8;"> A travel-size cleanser with orders over $60. Use code <strong style="letter-spacing:1px;color:#ffffff;">NIGHT</strong> at checkout. </td> </tr> <!-- MODULE: footer (links, address, unsubscribe) --> <tr data-module="footer"> <td class="pad" align="center" style="padding:34px 40px 10px;font:12px/19px Arial,Helvetica,sans-serif;color:#6f675c;"> <p style="margin:0 0 14px;"><a class="dm-soft" href="https://selvane.example/journal" style="color:#4c463d;text-decoration:none;">Journal</a> · <a class="dm-soft" href="https://selvane.example/stores" style="color:#4c463d;text-decoration:none;">Stores</a> · <a class="dm-soft" href="https://selvane.example/help" style="color:#4c463d;text-decoration:none;">Help</a></p> <p class="dm-soft" style="margin:0 0 12px;color:#6f675c;">You’re receiving this email because you signed up for news from Selvane.<br>Selvane Skin Co. · Portland, Oregon</p> <p style="margin:0 0 18px;"><a class="dm-soft" href="https://selvane.example/preferences" style="color:#4c463d;text-decoration:underline;">Manage preferences</a> · <a class="dm-soft" href="https://selvane.example/unsubscribe" style="color:#4c463d;text-decoration:underline;">Unsubscribe</a></p> <p class="dm-soft" style="margin:0;font-size:11px;line-height:17px;color:#6f675c;">© 2026 Selvane Skin Co. All rights reserved.</p> </td> </tr> </table> <!--[if mso]></td></tr></table><![endif]--> </td> </tr></table></div></body></html> Inspect a module
Hover the email, or choose a module, to see the code behind it.
Running static checks…
Live HTML, rendering in your browser. The checks inspect this file’s code and layout here; they are not Outlook, Gmail or Apple Mail test results.
Why Sendright
The design gets the attention. The build decides whether it arrives intact. Sendright focuses on that second part, so the email your team approved is the one your subscribers see.
Hand-coded, table-based HTML with the fallbacks email clients still need. Clean structure, deliberate decisions and nothing left to chance.
Enterprise platforms, regulated content, multiple languages, dynamic personalization. Comfortable where email gets complicated.
Clear scoping, organized handoffs and honest communication, so your team can plan around delivery instead of chasing it.
What we do
Six specialist services, from a single complex build to an entire template system, delivered directly or under your agency’s name.
Explore Our ServicesHand-coded, responsive emails built from your designs, with the fallbacks that keep them intact in Outlook, Gmail and Apple Mail.
How it worksSelected work & capabilities
Four working previews of real HTML email files, built to show the craft. Production work is marked separately.
A product launch email for Selvane skincare: art-directed hero, live-text headlines, bulletproof buttons and hybrid columns, with dark-mode styles built in. Scroll the email; it’s the real file.
The Weekly Edit for Halden & Co.: one template, interchangeable blocks. Switch optional modules off and on: the layout closes up cleanly every time, which is what lets a team assemble new sends without a developer.
One template, three subscribers. Choose a profile to see the version the platform would render for them, and the conditional logic that decides it.
{% assign name = subscriber.first_name | default: "there" %}{% if subscriber.loyalty_tier == "gold" %} <h1>{{ name }}, meet your next bag.</h1> {% render 'points-bar', points: subscriber.points %} {% render 'picks', based_on: last_order.product %}{% elsif subscriber.orders_count == 0 %} <h1>Hi {{ name }}, let’s find your roast.</h1> {% render 'welcome-code' %}{% else %} <h1>Hi {{ name }}, we saved your usual.</h1> {% render 'reorder', product: last_order.product %}{% endif %} Other platforms express the same logic in their own templating languages.
Drag the viewport from a wide desktop pane down to a small phone. The email reflows at real widths in your browser: columns stack, type scales and buttons go full width at the breakpoint.
A browser preview at real widths. Email apps add their own quirks, which is why every project also gets a review in the clients that matter to it.
Who we support
Sendright fits around the way you already work: as a white-label partner for agencies, or as the technical side of an in-house marketing team.
Specialist email development when your team needs more capacity or more depth.
An extension of your team for the technical side of email.
Emails that keep up with launches, promotions and a busy calendar.
The technical depth behind journeys, flows and triggered sends.
Platforms & technologies
Email HTML is the constant; platforms differ in how templates, content and data come together. Every project starts by confirming the exact requirements of your account.
Platform names are trademarks of their owners. Listing a platform doesn’t imply certification, partnership or endorsement.
Our process
Send the designs, the platform and the deadline, or book a call and talk it through. We confirm scope, timing and anything that needs a decision before work starts.
Development happens against the agreed scope, with a preview link for review. Feedback is gathered into clear rounds, so changes are fast and nothing gets lost.
Final files, or templates set up in your platform, checked against the agreed QA list and handed over with notes your team can actually use.
Ways to work with us
Start with one project or plan for steady capacity. Either way, scope and timing are agreed in writing before work begins.
Defined scope
A defined piece of work with a written scope: one complex campaign, a modular template system, a platform migration or a QA review.
Ongoing capacity
Reserved development and QA capacity around your campaign calendar, for teams and agencies with a steady flow of email work.
Experience that shows
Sendright’s technical foundation draws on enterprise email development experience supporting Bank of America marketing initiatives, developed through work at Tamman Inc.
That means production HTML for Salesforce Marketing Cloud, desktop Outlook support, AMPscript tracking, a full Spanish edition and pages of regulated disclosures with accessible footnotes. The same discipline goes into every Sendright build, with the direct attention of a specialist studio.
Bank of America is not a Sendright client. The work is shown with its source as portfolio copies.
See the enterprise workStart a conversation
Whether you’re planning one complex email build or looking for a dependable production partner, we’re ready to hear what you’re working on.