Creative Studio Intro email template
A friendly studio welcome email with an overlay hero, three alternating split panels, a small portfolio, two blog posts, a numbers band and footer columns.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Creative Studio Intro</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
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;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
.ete-nav-cell{padding-top:12px!important;}.ete-nav-cell p{text-align:center!important;}
.ete-ds-34{font-size:28px!important;line-height:31px!important;}
.ete-split-text{padding:32px 20px 36px!important;}
.ete-ds-24{font-size:28px!important;line-height:31px!important;}
.ete-ds-28{font-size:28px!important;line-height:31px!important;}
.ete-ds-40{font-size:28px!important;line-height:31px!important;}
.ete-icon-cell{padding-left:2px!important;padding-right:2px!important;}
.ete-stat-102{min-width:102px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#101010!important;}
.ete-content{background-color:#1b1b1b!important;}
.ete-text{color:#c8c8c8!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9a9a9a!important;}
.ete-link{color:#7cc6f2!important;}
.ete-border{border-color:#333333!important;}
.ete-panel{background-color:#232323!important;border-color:#333333!important;}
.ete-btn{background-color:#4fb3ec!important;border-color:#4fb3ec!important;}
.ete-btn-text{color:#0d1b24!important;}
.ete-btn-outline{border-color:#4fb3ec!important;}
.ete-btn-outline-text{color:#4fb3ec!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#c8c8c8!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9a9a9a!important;}
[data-ogsc] .ete-link{color:#7cc6f2!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#101010!important;}
[data-ogsb] .ete-content{background-color:#1b1b1b!important;}
[data-ogsb] .ete-panel{background-color:#232323!important;border-color:#333333!important;}
body,table,td,th,p,a,span,div,li{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
.ete-f-dm-sans{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#efefef;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Who we are, what we do and a few projects from this year. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#efefef;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td class="ete-px" style="padding:24px 32px 20px;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="120" valign="middle"><![endif]--><div class="ete-stack ete-stack-center" style="display:inline-block;vertical-align:middle;min-width:22.38%;max-width:100%;width:22.38%;width:calc((429px - 100%) * 429);font-size:16px;text-align:left;"><a href="https://example.com/" style="text-decoration:none;color:#111111;"><span class="ete-heading ete-f-dm-sans" style="font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-0.3px;color:#111111;">Kestrel</span></a></div><!--[if mso]></td><td width="416" valign="middle"><![endif]--><div class="ete-stack ete-stack-center ete-nav-cell" style="display:inline-block;vertical-align:middle;min-width:77.61%;max-width:100%;width:77.61%;width:calc((429px - 100%) * 429);font-size:16px;text-align:right;"><p style="margin:0;text-align:right;"><a class="ete-heading" href="https://example.com/" style="display:inline-block;padding:4px 10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#111111;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Home</a><a class="ete-heading" href="https://example.com/about" style="display:inline-block;padding:4px 10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#111111;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">About</a><a class="ete-heading" href="https://example.com/work" style="display:inline-block;padding:4px 10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#111111;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Work</a><a class="ete-heading" href="https://example.com/contact" style="display:inline-block;padding:4px 10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#111111;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Contact</a></p></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td bgcolor="#4a4a4a" background="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-hero.jpg" valign="top" style="background-color:#4a4a4a;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-hero.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:380px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-hero.jpg" color="#4a4a4a" /><v:textbox inset="0,0,0,0"><![endif]--><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-px" valign="top" align="center" height="380" style="height:380px;padding:48px 6.67%;mso-padding-alt:48px 40px;text-align:center;background-color:rgba(0,0,0,0.45);"><h1 class="ete-ds-34" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:34px;line-height:41px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">We design clear websites</h1><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:16px;text-align:center;">A small studio for brands that want a site people enjoy using. Thanks for saying hello, here is who we are.</p><div style="padding-top:28px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/about" style="height:48px;v-text-anchor:middle;width:199px;" arcsize="42%" strokecolor="#ffffff" fillcolor="#ffffff"><w:anchorlock/><center style="color:#111111;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Meet the studio</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/about" style="display:inline-block;background-color:#ffffff;border:1px solid #ffffff;line-height:48px;border-radius:20px;color:#111111;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span style="color:#111111;">Meet the studio</span></a><!--<![endif]--></td></tr></table></div></td></tr></table><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td></tr>
<tr><td class="" style="padding:0;"><div style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;background-color:#f7f7f7;"><!--[if mso]><table role="presentation" width="600" bgcolor="#f7f7f7" cellpadding="0" cellspacing="0" border="0"><tr><td width="263" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:43.83%;max-width:100%;width:43.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;background-color:#222222;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-type.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:263px;height:375px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-type.jpg" color="#222222" /><v:textbox inset="0,0,0,0"><![endif]--><div role="img" aria-label="Old typewriter on a wooden desk under a warm lamp" style="height:375px;line-height:375px;font-size:0;"> </div><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></div><!--[if mso]></td><td width="337" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:56.16%;max-width:100%;width:56.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-split-text" style="padding:40px 32px;"><h1 class="ete-ds-24" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:29px;font-weight:700;color:#111111;text-align:left;mso-line-height-rule:exactly;">Good ideas, built with care</h1><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#111111;padding-top:16px;text-align:left;">We start every project with a long talk and a blank page, not a template.</p><div style="padding-top:28px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/about" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="42%" strokecolor="#1f8fd1" fillcolor="#1f8fd1"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/about" style="display:inline-block;background-color:#1f8fd1;border:1px solid #1f8fd1;line-height:48px;border-radius:20px;color:#ffffff;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span style="color:#ffffff;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="" style="padding:0;"><div dir="rtl" style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;background-color:#ffffff;"><!--[if mso]><table role="presentation" width="600" dir="rtl" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"><tr><td width="263" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:43.83%;max-width:100%;width:43.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;background-color:#222222;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-stairs.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:263px;height:375px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-stairs.jpg" color="#222222" /><v:textbox inset="0,0,0,0"><![endif]--><div role="img" aria-label="Person sitting alone at the top of a wide outdoor staircase" style="height:375px;line-height:375px;font-size:0;"> </div><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></div><!--[if mso]></td><td width="337" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:56.16%;max-width:100%;width:56.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-split-text" style="padding:40px 32px;"><h1 class="ete-ds-24" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:29px;font-weight:700;color:#111111;text-align:left;mso-line-height-rule:exactly;">What we do</h1><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#111111;padding-top:16px;text-align:left;"><b>Brand identity</b><br>
Names, logos and the rules that hold them together.<br>
<br>
<b>Websites</b><br>
Fast pages that work on every screen.<br>
<br>
<b>Email design</b><br>
Layouts your team can reuse.</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="" style="padding:0;"><div style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;background-color:#f7f7f7;"><!--[if mso]><table role="presentation" width="600" bgcolor="#f7f7f7" cellpadding="0" cellspacing="0" border="0"><tr><td width="263" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:43.83%;max-width:100%;width:43.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;background-color:#222222;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-office.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:263px;height:375px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-office.jpg" color="#222222" /><v:textbox inset="0,0,0,0"><![endif]--><div role="img" aria-label="Quiet office corner with a white desk, a lamp and a plant" style="height:375px;line-height:375px;font-size:0;"> </div><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></div><!--[if mso]></td><td width="337" valign="middle"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:middle;min-width:56.16%;max-width:100%;width:56.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-split-text" style="padding:40px 32px;"><h1 class="ete-ds-24" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:29px;font-weight:700;color:#111111;text-align:left;mso-line-height-rule:exactly;">How we work</h1><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#111111;padding-top:16px;text-align:left;"><b>Week 1</b> Listen and plan<br>
<b>Week 2</b> Sketch and test<br>
<b>Week 3</b> Design and build<br>
<b>Week 4</b> Launch and teach</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="24" style="height:24px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-ds-28" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#111111;text-align:center;mso-line-height-rule:exactly;">Recent work</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;text-align:center;">Three spaces we photographed for a furniture brand this spring.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:12px 32px;"><a href="https://example.com/work/haven"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-w1.jpg" alt="White room with an orange wall, a desk, a guitar and shelves" width="536" height="300" class="ete-fluid" style="display:block;width:536px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"></a></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;"><tr><td width="50%" valign="top" style="width:50%;padding:0 6px;"><a href="https://example.com/work/living"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-w2.jpg" alt="Laptop on a grey sofa in a bright living room" width="256" height="192" class="ete-fluid" style="display:block;width:256px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a></td><td width="50%" valign="top" style="width:50%;padding:0 6px;"><a href="https://example.com/work/apartment"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-w3.jpg" alt="Apartment living room with a brick wall and a grey sofa" width="256" height="192" class="ete-fluid" style="display:block;width:256px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a></td></tr></table></td></tr>
<tr><td height="16" bgcolor="#f7f7f7" style="background-color:#f7f7f7;height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" bgcolor="#f7f7f7" style="background-color:#f7f7f7;padding:24px 32px 8px;"><h2 class="ete-ds-28" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#111111;text-align:center;mso-line-height-rule:exactly;">From the blog</h2></td></tr>
<tr><td class="ete-px" bgcolor="#f7f7f7" style="background-color:#f7f7f7;padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><a href="https://example.com/blog/naming"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-b1.jpg" alt="Desk from above with books, pencils, a laptop and a phone" width="258" height="194" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></a><div style="padding-top:14px;"><h3 style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#666666;text-align:left;mso-line-height-rule:exactly;">How we name a brand</h3></div><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:left;">Apr 12 · Process<br>
Lists, walks and a lot of crossing out.</p><div style="padding-top:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/blog/naming" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="42%" strokecolor="#1f8fd1" fillcolor="#1f8fd1"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/blog/naming" style="display:inline-block;background-color:#1f8fd1;border:1px solid #1f8fd1;line-height:48px;border-radius:20px;color:#ffffff;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span style="color:#ffffff;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><a href="https://example.com/blog/fewer-pages"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/creative-studio-intro-b2.jpg" alt="Laptop on a low table in a living room" width="258" height="194" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></a><div style="padding-top:14px;"><h3 style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#666666;text-align:left;mso-line-height-rule:exactly;">Fewer pages, better site</h3></div><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#666666;padding-top:6px;text-align:left;">Mar 30 · Web<br>
Why we cut most sites in half.</p><div style="padding-top:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/blog/fewer-pages" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="42%" strokecolor="#1f8fd1" fillcolor="#1f8fd1"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read more</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/blog/fewer-pages" style="display:inline-block;background-color:#1f8fd1;border:1px solid #1f8fd1;line-height:48px;border-radius:20px;color:#ffffff;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span style="color:#ffffff;">Read more</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td height="16" bgcolor="#f7f7f7" style="background-color:#f7f7f7;height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" bgcolor="#1d2a33" style="background-color:#1d2a33;padding:20px 32px 12px;"><div style="font-size:0;text-align:center;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="178" valign="top"><![endif]--><div class="ete-stat-102" style="display:inline-block;vertical-align:top;width:33.33%;min-width:102px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-ds-40 ete-hf" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:40px;line-height:44px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">9</p><p style="margin:0;padding-top:6px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;text-align:center;">Designers</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-stat-102" style="display:inline-block;vertical-align:top;width:33.33%;min-width:102px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-ds-40 ete-hf" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:40px;line-height:44px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">2</p><p style="margin:0;padding-top:6px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;text-align:center;">Studios</p></td></tr></table></div><!--[if mso]></td><td width="178" valign="top"><![endif]--><div class="ete-stat-102" style="display:inline-block;vertical-align:top;width:33.33%;min-width:102px;max-width:100%;font-size:16px;text-align:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-icon-cell" style="padding:0 6px 8px;"><p class="ete-ds-40 ete-hf" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:40px;line-height:44px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">1</p><p style="margin:0;padding-top:6px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;text-align:center;">Office dog</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" bgcolor="#000000" style="background-color:#000000;padding:16px 20px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="560" cellpadding="0" cellspacing="0" border="0"><tr><td width="186" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p style="margin:0 0 8px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#bdbdbd;">About</p><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#bdbdbd;line-height:20px;">Kestrel is a design studio for brands and websites.</p></td></tr></table></div><!--[if mso]></td><td width="186" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p style="margin:0 0 8px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#bdbdbd;">Contact</p><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#bdbdbd;line-height:20px;">18 Mercer Lane<br>
Bristol BS1 4QA</p></td></tr></table></div><!--[if mso]></td><td width="186" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:33.33%;max-width:100%;width:33.33%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p style="margin:0 0 8px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#bdbdbd;">Links</p><p style="margin:0;padding-top:4px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/" style="color:#bdbdbd;text-decoration:underline;">Home</a></p><p style="margin:0;padding-top:4px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/about" style="color:#bdbdbd;text-decoration:underline;">About</a></p><p style="margin:0;padding-top:4px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/work" style="color:#bdbdbd;text-decoration:underline;">Work</a></p><p style="margin:0;padding-top:4px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a href="https://example.com/contact" style="color:#bdbdbd;text-decoration:underline;">Contact</a></p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="center" class="ete-px" bgcolor="#000000" style="background-color:#000000;padding:28px 32px 32px;"><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#9a9a9a;line-height:20px;text-align:center;padding-top:10px;">You get this email because you contacted Kestrel Studio.</p><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#9a9a9a;line-height:20px;text-align:center;padding-top:10px;"><a href="{{unsubscribe_url}}" style="color:#9a9a9a;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#8a8a8a;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#8a8a8a;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Colorlib Email Templates (template 15, Clutch) by Colorlib, MIT license.
About this template
A welcome email for a design studio, an agency or a freelancer that wants to introduce itself after someone gets in touch. It tells the story in short steps: who we are, what we do, how we work, and what we made.
A wordmark with a menu opens the email, then a desk photo with the headline and a white button on top. Three split panels follow, each with a tall photo on one side and short text on the other, switching sides as you scroll. One holds a short note and a blue button, one lists services, and one shows a four week plan.
A recent work section has one wide photo and two smaller ones, then two blog posts with blue buttons. A dark band with three small house facts and black footer columns with contact details close the email.
Swap the photos for your own work and keep the text short in every panel.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark with menu
- Overlay photo hero
- Split panel with note
- Split panel with services
- Split panel with plan
- Recent work photos
- Two blog posts
- Numbers band
- Footer columns
- Footer
Subject line ideas
- Nice to meet you, here is our studio
- Who we are and how we work
- {{first_name}}, thanks for getting in touch
Preview text idea
Who we are, what we do and a few projects from this year.