Email development for ambitious marketing teams

Exceptional emails. Expertly built.

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

selvane/night-edit.html
<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.&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;&#8199;&#847;</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> &nbsp;<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 &middot; 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;">&nbsp;</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 &middot; $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 &middot; $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> &nbsp;&middot;&nbsp; <a class="dm-soft" href="https://selvane.example/stores" style="color:#4c463d;text-decoration:none;">Stores</a> &nbsp;&middot;&nbsp; <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. &middot; 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> &nbsp;&middot;&nbsp; <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;">&copy; 2026 Selvane Skin Co. All rights reserved.</p>          </td>        </tr>       </table>      <!--[if mso]></td></tr></table><![endif]-->    </td>  </tr></table></div></body></html> 
Selvane Rest is a ritual. Meet Night Renewal  

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

    Great campaigns deserve better code.

    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.

    1. Precision in every build

      Hand-coded, table-based HTML with the fallbacks email clients still need. Clean structure, deliberate decisions and nothing left to chance.

    2. Built for complex environments

      Enterprise platforms, regulated content, multiple languages, dynamic personalization. Comfortable where email gets complicated.

    3. Dependable production support

      Clear scoping, organized handoffs and honest communication, so your team can plan around delivery instead of chasing it.

    Selected work & capabilities

    The details make the difference.

    Four working previews of real HTML email files, built to show the craft. Production work is marked separately.

    Modular Lifecycle Template

    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.

    Optional modules 9 of 9 in use

    Personalized Email Experience

    One template, three subscribers. Choose a profile to see the version the platform would render for them, and the conditional logic that decides it.

    Subscriber profile
    template logic · Liquid syntax
    {% 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.

    Desktop/Mobile Compatibility

    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.

    680 px
    • LayoutDesktop
    • Columns3 across
    • Email width600 px

    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.

    Production work · Enterprise employment Bank of America production emails, open for inspection. Five real builds developed at Tamman Inc. for Bank of America’s lending and investing programs, with their source, disclosures and Outlook fallbacks. Shown as portfolio copies; Bank of America is not a Sendright client. View the case study

    Who we support

    Your team, extended.

    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.

    • Marketing Agencies

      Specialist email development when your team needs more capacity or more depth.

      • White-label production under your name
      • Overflow support for campaign peaks
      • Builds to your client’s brand and platform
    • In-House Marketing Teams

      An extension of your team for the technical side of email.

      • Campaign and template development
      • Modular systems your marketers can use
      • QA support before important sends
    • E-commerce Brands

      Emails that keep up with launches, promotions and a busy calendar.

      • Promotional and launch campaigns
      • Product-driven and personalized content
      • Templates for post-purchase and win-back flows
    • CRM & Lifecycle Teams

      The technical depth behind journeys, flows and triggered sends.

      • Automation and triggered email builds
      • Dynamic content and fallback logic
      • Platform implementation and cleanup

    Platforms & technologies

    Built to work with your stack.

    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.

    • Core HTML & CSS for email Table-based, responsive, accessible builds for every client.
    • Core Dynamic content Conditional blocks, personalization and fallbacks.
    • Platform Salesforce Marketing Cloud Content Builder, AMPscript and shared blocks. See it in the work
    • Platform HubSpot Email templates and modules, scoped per project.
    • Platform Klaviyo Templates and flow emails, scoped per project.
    • Platform Mailchimp Custom templates and campaign builds.
    • Platform Shopify ecosystem Store-connected email and order data, scoped per project.
    • Content Contentful Structured content feeding email templates, scoped per project.
    • Working with a different platform? Tell us about your requirements. Discuss Your Stack

    Platform names are trademarks of their owners. Listing a platform doesn’t imply certification, partnership or endorsement.

    Our process

    Simple to start. Easy to work with.

    1. 01

      Share the brief

      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.

    2. 02

      Build & refine

      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.

    3. 03

      Deliver with confidence

      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

    Flexible support. Serious execution.

    Start with one project or plan for steady capacity. Either way, scope and timing are agreed in writing before work begins.

    Defined scope

    Project-Based Development

    A defined piece of work with a written scope: one complex campaign, a modular template system, a platform migration or a QA review.

    • Clear deliverables and review rounds
    • Scope and timing agreed before work starts
    • Ideal for launches, rebuilds and one-off problems

    Ongoing capacity

    Ongoing Production Partnerships

    Reserved development and QA capacity around your campaign calendar, for teams and agencies with a steady flow of email work.

    • A consistent build standard across every send
    • Capacity planned around your calendar
    • White-label options for agencies

    Experience that shows

    Enterprise experience. Studio‑level attention.

    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 work

    Start a conversation

    Let’s make your next send exceptional.

    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.