- Newsletter
- Promotional
- and Announcement
Design Agency Portfolio email template
A portfolio email for a design studio: a centered wordmark, a bold statement, eight project photos in a two column grid with names and fields, and dark 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>Design Agency Portfolio</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-ds-28{font-size:28px!important;line-height:31px!important;}
.ete-ds-30{font-size:28px!important;line-height:31px!important;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0e0f11!important;}
.ete-content{background-color:#17181b!important;}
.ete-text{color:#c6c8cc!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9a9da3!important;}
.ete-link{color:#7db6ff!important;}
.ete-border{border-color:#2d2f34!important;}
.ete-panel{background-color:#202226!important;border-color:#2d2f34!important;}
.ete-btn{background-color:#5aa2ff!important;border-color:#5aa2ff!important;}
.ete-btn-text{color:#0b1420!important;}
.ete-btn-outline{border-color:#5aa2ff!important;}
.ete-btn-outline-text{color:#5aa2ff!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:#c6c8cc!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9a9da3!important;}
[data-ogsc] .ete-link{color:#7db6ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0e0f11!important;}
[data-ogsb] .ete-content{background-color:#17181b!important;}
[data-ogsb] .ete-panel{background-color:#202226!important;border-color:#2d2f34!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:#f1f1f1;">
<!-- 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;">Interiors, furniture and objects from our last eight projects. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1f1f1;">
<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 align="center" class="ete-px" style="padding:28px 32px 20px;"><a href="https://example.com/" style="text-decoration:none;color:#000000;"><span class="ete-heading ete-f-dm-sans" style="font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:25px;font-weight:700;letter-spacing:2px;color:#000000;">HALDEN</span></a></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 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:#000000;text-align:center;mso-line-height-rule:exactly;">We design rooms, objects and the brands behind them</h1></td></tr>
<tr><td height="16" style="height:16px;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-30" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:30px;line-height:36px;font-weight:700;color:#000000;text-align:center;mso-line-height-rule:exactly;">Projects</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#808080;text-align:center;">A few of the spaces and products we finished this season.</p></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 8px;"><a href="https://example.com/work/storage-wall"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w1.jpg" alt="Open shelving with blue and wooden boxes beside a white chair" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/storage-wall" style="color:#000000;text-decoration:none;">Storage wall</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Furniture</p></td><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/reading-corner"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w2.jpg" alt="White desk with a wooden ladder shelf holding magazines" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/reading-corner" style="color:#000000;text-decoration:none;">Reading corner</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Interior</p></td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;margin-top:16px;"><tr><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/turntable"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w3.jpg" alt="Silver turntable with a record on a white shelf" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/turntable" style="color:#000000;text-decoration:none;">Turntable</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Product</p></td><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/club-lounge"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w4.jpg" alt="Brown leather armchair in a warm living room" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/club-lounge" style="color:#000000;text-decoration:none;">Club lounge</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Interior</p></td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;margin-top:16px;"><tr><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/garden-table"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w5.jpg" alt="Long dark wooden table with round stools in a garden" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/garden-table" style="color:#000000;text-decoration:none;">Garden table</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Furniture</p></td><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/home-studio"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w6.jpg" alt="Home office with a plant and a desk by a window" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/home-studio" style="color:#000000;text-decoration:none;">Home studio</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Interior</p></td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;margin-top:16px;"><tr><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/bar-light"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w7.jpg" alt="Bare light bulb in a white metal shade" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/bar-light" style="color:#000000;text-decoration:none;">Bar light</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Lighting</p></td><td width="50%" valign="top" style="width:50%;padding:0 8px;"><a href="https://example.com/work/bud-vase"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/design-agency-portfolio-w8.jpg" alt="Small dark green bud vase with pink flowers on a sunlit table" width="252" height="252" class="ete-fluid" style="display:block;width:252px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;"></a><p class="ete-heading" style="margin:0;padding-top:10px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;font-weight:700;color:#000000;text-align:center;"><a class="ete-heading" href="https://example.com/work/bud-vase" style="color:#000000;text-decoration:none;">Bud vase</a></p><p class="ete-muted" style="margin:0;padding-top:2px;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:19px;color:#808080;text-align:center;">Product</p></td></tr></table></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" 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:#b3b3b3;">About</p><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#b3b3b3;line-height:20px;">Halden is a design studio for interiors, furniture and product brands.</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:#b3b3b3;">Contact</p><p style="margin:0;font-family:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#b3b3b3;line-height:20px;">9 Kiln Yard<br>
Bristol BS1 6QH<br>
studio@halden.example</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:#b3b3b3;">Useful 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:#b3b3b3;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:#b3b3b3;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/services" style="color:#b3b3b3;text-decoration:underline;">Services</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:#b3b3b3;text-decoration:underline;">Work</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;">© Halden Works. You get this email because you follow our studio news.</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:#808080;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#808080;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 3, Agency) by Colorlib, MIT license.
About this template
A clean portfolio update for a design studio, an interior designer or a product design team. There is almost no copy: a centered wordmark, a bold statement about what the studio makes, and then the work.
Eight project photos sit in a two column grid with even gaps. Under each photo is the project name in bold and the field in small grey text, such as Interior, Branding or Product. Each photo links to its case study, so the grid works as a menu into the site.
Three footer columns on black close the email with a short about line, the studio address and useful links.
Use it as a quarterly round-up of finished work, as a follow-up after a pitch, or as a welcome for new subscribers to the studio list. Pick photos with the same light and color mood so the grid feels like one set. The layout is rebuilt from an open source portfolio agency template.
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
- Statement headline
- Projects heading
- Two column project grid
- Footer columns
- Footer
Subject line ideas
- Eight projects we finished this season
- New work from the studio
- {{first_name}}, see what we made this autumn
Preview text idea
Interiors, furniture and objects from our last eight projects.