Deliver custom, HTML -based email templates that grab attention and convert. At Segan Emails, we design beautifully branded emails—from cold outreach to newsletters—that feel personal and professional.
Need a custom solution? Let’s create a solution tailored for your business. Get a Free Strategy Call
We refine your email concept in Figma until you love the look, ensuring clarity before any code is written.
Our developers translate approved designs into clean, responsive HTML that renders flawlessly across every email client.
Whether you need OFT, Mailchimp, Klaviyo, or a custom build, we deliver templates that integrate seamlessly with your platform.
With our expertise, your branding stays consistent across all campaigns, helping customers recognize and trust you immediately. Plus, our templates are optimized for all devices, ensuring they look great.
Watch the video bellow to see how to use this template!
Click “Copy” to copy the code and follow the walkthrough video.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" style="font-family:'Exo 2', sans-serif">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>Sample Template </title><!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]--><!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]--><!--[if gte mso 9]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]--><!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><!--<![endif]--><!--[if mso]><xml>
<w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word">
<w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>
</w:WordDocument>
</xml><![endif]-->
<style type="text/css">.rollover span {
font-size:0;
}
.rollover:hover .rollover-first {
max-height:0px!important;
display:none!important;
}
.rollover:hover .rollover-second {
max-height:none!important;
display:block!important;
}
.container-hover:hover>table {
background:linear-gradient(153.06deg, #7EE8FA -0.31%, #EEC0C6 99.69%)!important;
transition:0.3s all!important;
}
.bq.bp td a:hover,
a.ch:hover {
text-decoration:underline!important;
}
#outlook a {
padding:0;
}
.ch {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.a {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
@media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120%!important } h1 { font-size:28px!important; text-align:left } h2 { font-size:24px!important; text-align:left } h3 { font-size:20px!important; text-align:left } .co p, .co ul li, .co ol li, .co a { font-size:16px!important } .cn p, .cn ul li, .cn ol li, .cn a { font-size:16px!important } *[class="gmail-fix"] { display:none!important } .ck, .ck h1, .ck h2, .ck h3 { text-align:center!important } .cj img, .ck img, .cl img { display:inline!important } .ci { display:inline-block!important } a.ch, button.ch { font-size:20px!important; display:inline-block!important } .cb table, .cc table, .cd table, .cb, .cd, .cc { width:100%!important; max-width:600px!important } .adapt-img { width:100%!important; height:auto!important } .bw { padding-top:0!important } .bs, .bt { display:none!important } table.bp, .esd-block-html table { width:auto!important } table.bo { display:inline-block!important } table.bo td { display:inline-block!important } .ba { padding-right:15px!important } .z { padding-left:15px!important } .y { padding:20px!important } .h { padding-right:35px!important } .d { padding-bottom:40px!important } .m-c-p16r { padding-right:8vw } }
@media screen and (max-width:384px) {.mail-message-content { width:414px!important } }</style>
</head>
<body style="width:100%;font-family:'Exo 2', sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
<div dir="ltr" class="es-wrapper-color" lang="en" style="background-color:#12022F"><!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#12022f"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center top;background-color:#12022F" role="none">
<tr>
<td valign="top" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" class="cb" align="center" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%">
<tr>
<td class="ba z" align="center" style="padding:0;Margin:0">
<table class="co" align="center" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;width:640px" role="none">
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:30px;padding-left:40px;padding-right:40px">
<table cellpadding="0" cellspacing="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr class="bs">
<td align="center" height="15" style="padding:0;Margin:0"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td class="y" align="left" bgcolor="#ffffff" style="Margin:0;padding-top:30px;padding-bottom:40px;padding-left:40px;padding-right:40px;background-color:#ffffff;border-radius:20px 20px 0px 0px">
<table cellpadding="0" cellspacing="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="left" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="left" style="padding:0;Margin:0;font-size:0px" height="32"><a target="_blank" href="https://yourlink.com" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:18px;text-decoration:none"><img class="adapt-img" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/9676/PrideFashion_Logo.png" alt="" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="230"></a></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:30px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Exo 2', sans-serif;line-height:27px;color:#666666;font-size:18px"><strong>Hi Mike!</strong><br><br>My name is Alisa, I am a representative of the Electros company.<br><br>Recently, we decided to hold a promotion together with our partners, so for you we have prepared offers for electronics with discounts up to 80%.<br><br>We will provide you with a personal consultant who will help you in choosing a product.<br><br><strong>Regards, Alice</strong></p></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:25px"><!--[if mso]><a href="https://yourlink.com" target="_blank" hidden>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" esdevVmlButton href="https://yourlink.com"
style="height:52px; v-text-anchor:middle; width:198px" arcsize="50%" strokecolor="#ffdda9" strokeweight="2px" fillcolor="#ffdda9">
<w:anchorlock></w:anchorlock>
<center style='color:#000000; font-family:"Exo 2", sans-serif; font-size:20px; font-weight:400; line-height:20px; mso-text-raise:1px'>More Details</center>
</v:roundrect></a>
<![endif]--><!--[if !mso]><!-- --><span class="msohide ci" style="border-style:solid;border-color:#FFDDA9;background:#FFDDA9;border-width:0px 0px 2px 0px;display:inline-block;border-radius:30px;width:auto;mso-hide:all"><a href="https://yourlink.com" class="ch" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#000000;font-size:20px;padding:15px 30px 15px 30px;display:inline-block;background:#FFDDA9;border-radius:30px;font-family:'Exo 2', sans-serif;font-weight:normal;font-style:normal;line-height:24px;width:auto;text-align:center;mso-padding-alt:0;mso-border-alt:10px solid #FFDDA9">More Details</a></span><!--<![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td class="y" align="left" bgcolor="#f9f9f9" style="padding:40px;Margin:0;background-color:#f9f9f9;border-radius:0px 0px 20px 20px">
<table cellpadding="0" cellspacing="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="left" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#f9f9f9" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:separate;border-spacing:0px;background-size:initial;background-attachment:initial;background-origin:initial;background-clip:initial;background-color:#f9f9f9;border-radius:20px" role="presentation">
<tr>
<td style="padding:0;Margin:0">
<table width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td valign="top" style="padding:0;Margin:0;width:64px">
<table role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td style="padding:0;Margin:0;font-size:0px"><a target="_blank" href="" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:18px;text-decoration:none"><img src="https://luzxfw.stripocdn.email/content/guids/CABINET_109b42e969cb8bcd6bf3547022ae0deb/images/taylorhernandezdlkr_x3t_7sunsplash_3.png" class="p_image" alt="Avatar" width="64" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;border-radius:18px" title="Avatar"></a></td>
</tr>
</table></td>
<td style="padding:0;Margin:0;width:20px"></td>
<td valign="top" style="padding:0;Margin:0">
<table width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td class="bw" style="padding:0;Margin:0;padding-top:10px"><h3 class="p_name" style="Margin:0;line-height:24px;mso-line-height-rule:exactly;font-family:'lucida sans unicode', 'lucida grande', sans-serif;font-size:20px;font-style:normal;font-weight:normal;color:#000000"><b>Alice</b></h3></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:5px"><h5 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:'lucida sans unicode', 'lucida grande', sans-serif;color:#666666">Representative of the {{company_name}}</h5></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:30px;padding-left:40px;padding-right:40px">
<table cellpadding="0" cellspacing="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr class="bs">
<td align="center" height="15" style="padding:0;Margin:0"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="cd" align="center" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top">
<tr>
<td class="ba z" align="center" style="padding:0;Margin:0">
<table class="cn" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;width:640px" role="none">
<tr>
<td align="left" bgcolor="#ffffff" style="padding:40px;Margin:0;background-color:#ffffff;border-radius:20px">
<table cellpadding="0" cellspacing="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td class="d" align="center" valign="top" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" class="h ck" style="padding:0;Margin:0;font-size:0px" height="30"><a target="_blank" href="" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:16px;text-decoration:none"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/9676/PrideFashion_Logo.png" alt="" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="128"></a></td>
</tr>
<tr>
<td align="center" style="padding:0;Margin:0;padding-top:20px;font-size:0">
<table cellpadding="0" cellspacing="0" class="bp bo" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" valign="top" style="padding:0;Margin:0;padding-right:15px"><a target="_blank" href="https://yourlink.com" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:16px;text-decoration:none"><img title="Facebook" src="https://luzxfw.stripocdn.email/content/assets/img/social-icons/logo-black/facebook-logo-black.png" alt="Fb" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a></td>
<td align="center" valign="top" style="padding:0;Margin:0;padding-right:15px"><a target="_blank" href="https://yourlink.com" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:16px;text-decoration:none"><img title="Х" src="https://luzxfw.stripocdn.email/content/assets/img/social-icons/logo-black/x-logo-black.png" alt="Х" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a></td>
<td align="center" valign="top" style="padding:0;Margin:0;padding-right:15px"><a target="_blank" href="https://yourlink.com" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:16px;text-decoration:none"><img title="Instagram" src="https://luzxfw.stripocdn.email/content/assets/img/social-icons/logo-black/instagram-logo-black.png" alt="Inst" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a></td>
<td align="center" valign="top" style="padding:0;Margin:0"><a target="_blank" href="https://yourlink.com" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:16px;text-decoration:none"><img title="Youtube" src="https://luzxfw.stripocdn.email/content/assets/img/social-icons/logo-black/youtube-logo-black.png" alt="Yt" width="32" height="32" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" style="padding:0;Margin:0;padding-top:15px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Exo 2', sans-serif;line-height:24px;color:#666666;font-size:16px">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></td>
</tr>
<tr>
<td align="center" style="padding:0;Margin:0;padding-top:10px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Exo 2', sans-serif;line-height:24px;color:#666666;font-size:16px"><a target="_blank" href="https://yourlink.com" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#391484;font-size:16px;text-decoration:none">Unsubscribe</a></p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:30px;padding-left:40px;padding-right:40px">
<table cellpadding="0" cellspacing="0" width="100%" role="none" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr class="bs">
<td align="center" height="15" style="padding:0;Margin:0"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
We start by crafting a detailed Figma mockup based on your brand and goals, then turn that design into the final email format you need (OFT, EML, HTML, or any platform-ready file). Each template is fully customizable and on-brand, ensuring consistency and maximum impact for every message you send.
We begin by understanding your brand, target audience, and specific email marketing objectives.
Our designers create a pixel-perfect draft in Figma for your review and feedback. (We offer revision in this stage)
Once approved, we convert the Figma design into your desired format – HTML, OFT, etc..
Your custom templates are delivered, ready to be used, with ongoing support if needed.
Don’t just take our word for it – see what our amazing clients have to say about our email design services.

Marketing Manager
“Working with Studio Segan was a breeze! They delivered our HTML emails ahead of schedule and shared tips to get the most out of them. Looking forward to collaborating again!”

Marketing Director
“Studio Segan’s professionalism really shines through their email designs. They were polite, positive, and delivered superb results. Highly recommend!”

Founder
“Studio Segan crafted a beautiful landing page template that nailed our brand’s vibe. Their attention to detail, responsiveness, and creative ideas exceeded expectations. I’ll definitely be back for more projects!”

COO, BrightWave
“Studio Segan’s creativity truly wowed us and made our emails stand out. The process was smooth thanks to their prompt delivery and clear communication. Couldn’t have asked for a better experience!”
Get exclusive insights, trends, and strategies delivered straight to your inbox. Subscribe now!
We provide fully coded HTML, Outlook OFT, and export files tailored to platforms like Mailchimp or Klaviyo.
From Figma draft to final code typically takes 3–5 business days, depending on revision rounds.
Yes—your package includes two rounds of revisions at the Figma draft stage and one round after coding.
Absolutely. Every template is hand-crafted to adapt perfectly on desktop, mobile, and tablet.
Yes—we run Litmus or Email on Acid tests to ensure consistent rendering in Gmail, Outlook, and more.
Simply click “Copy Code,” paste into your editor, or follow our embedded video guide for import instructions.
Scale Your Business with Segan Solutions & Works ($600K Revenue Generated for Clients)
Expanish was founded with the express purpose of creating an understanding and greater awareness between cultures. Our schools work as an entryway to Spain and Latin America, where we are able to create connections and experiences for our students that expand their mind.
Augustine
Email design
HTML newsletters
Adobe PS, Figma, HTML5 & CSS.
PetSmart LLC is the largest specialty pet retailer of services and solutions for the lifetime needs of pets. At PetSmart, we love pets, and we believe pets make us better people.
PetSmart LLC.
Email design
HTML newsletters
Adobe PS, Figma, HTML5 & CSS.
As the longest running tour operator in North America, Collette has been providing guided travel for over 100 years. We offer trips on all seven continents, allowing guests to fulfill their deepest travel aspirations.
Collette
Email design
HTML newsletters
Adobe PS, Figma, HTML5 & CSS.
Unlayer is an email editor and page builder to build beautiful, responsive designs quickly and easily. Use it online or embed it into your application. They hired me for create some email design for their users to use.
Unlayer Inc.
HTML newsletters
Email design
Adobe PS, Figma, HTML5 & CSS.
This is a demo design. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
NA
Email design
HTML newsletters
Figma, HTML & CSS.
Casino Elevate is a fresh gambling platform established in 2021. Its distinctive feature is the numerous available bonuses, which are regularly updated.
NDA
Email design
HTML newsletters
Adobe PS, Figma, HTML5 & CSS.
This is a demo design. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
NA
Email design
HTML newsletters
Figma, HTML & CSS.
Outer mountain is an online shop for selling sea items.
Outer mountain
Email design
HTML newsletters
Adobe PS, Figma, HTML5 & CSS.
Marketing Template.
Presale
Email design
HTML newsletters
Adobe PS, Figma, HTML5 & CSS.