- Newsletter
- Promotional
- and Announcement
Dark Dev Newsletter email template
A black developer newsletter with cyan accents, a big headline, a code photo, three numbered stories with sources, quick hits, a sponsor panel and a sign-off.
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>Dark Dev Newsletter</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-36{font-size:28px!important;line-height:31px!important;}
.ete-ds-20{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#050505!important;}
.ete-content{background-color:#0b0b0b!important;}
.ete-text{color:#a8a8a8!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#8a8a8a!important;}
.ete-link{color:#67e8f9!important;}
.ete-border{border-color:#242424!important;}
.ete-panel{background-color:#141414!important;border-color:#242424!important;}
.ete-btn{background-color:#22d3ee!important;border-color:#22d3ee!important;}
.ete-btn-text{color:#031a1f!important;}
.ete-btn-outline{border-color:#22d3ee!important;}
.ete-btn-outline-text{color:#22d3ee!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:#a8a8a8!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#8a8a8a!important;}
[data-ogsc] .ete-link{color:#67e8f9!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#050505!important;}
[data-ogsb] .ete-content{background-color:#0b0b0b!important;}
[data-ogsb] .ete-panel{background-color:#141414!important;border-color:#242424!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-inter{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=Inter:wght@400;600;700;800&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#050505;">
<!-- 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;">A memory safe language in a kernel, an open model that holds up, and why the old database won. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#050505;">
<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:#0b0b0b;border-radius:6px;overflow:hidden;">
<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="128" valign="middle"><![endif]--><div class="ete-stack ete-stack-center" style="display:inline-block;vertical-align:middle;min-width:23.88%;max-width:100%;width:23.88%;width:calc((429px - 100%) * 429);font-size:16px;text-align:left;"><a href="https://example.com/" style="text-decoration:none;color:#ffffff;"><span class="ete-heading" style="font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:18px;line-height:23px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;">Commitlog.</span></a></div><!--[if mso]></td><td width="408" valign="middle"><![endif]--><div class="ete-stack ete-stack-center ete-nav-cell" style="display:inline-block;vertical-align:middle;min-width:76.11%;max-width:100%;width:76.11%;width:calc((429px - 100%) * 429);font-size:16px;text-align:right;"><p style="margin:0;text-align:right;"><a href="{{view_in_browser_url}}" style="display:inline-block;padding:4px 10px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#8a8a8a;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">Issue 018 · Oct 28</a></p></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><p class="ete-link" style="margin:0 0 12px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#22d3ee;text-align:left;">This week</p><h1 class="ete-ds-36" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:36px;line-height:43px;font-weight:700;color:#7dd3fc;text-align:left;mso-line-height-rule:exactly;">Three shifts in how I write code.</h1></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;text-align:left;">A memory safe language landed in a major kernel's network stack. The first open model held up on real agent work. And a 30 year old database quietly made half my cache layer pointless.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><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/issues/018" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="8%" strokecolor="#22d3ee" fillcolor="#22d3ee"><w:anchorlock/><center style="color:#031a1f;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read the issue</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/issues/018" style="display:inline-block;background-color:#22d3ee;border:1px solid #22d3ee;line-height:48px;border-radius:4px;color:#031a1f;font-family:Inter, '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 class="ete-btn-text" style="color:#031a1f;">Read the issue</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/dark-dev-newsletter-code.jpg" alt="Colorful lines of code on a dark monitor" width="536" height="280" class="ete-fluid" style="display:block;width:536px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:6px;"></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #242424;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><div style="padding-bottom:20px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#ffffff;text-align:left;mso-line-height-rule:exactly;">Three stories</h2></div><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="44" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="28" height="28" style="width:28px;height:28px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:28px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">1</span></td></tr></table></td><td valign="top" style="padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">A safer language in the kernel's network path</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">It took five years of patches, three rewrites and one long argument about memory safety. Here is what went in and what comes next.<br>
<i>Systems Weekly · 11 min</i></p></td></tr><tr><td width="44" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="28" height="28" style="width:28px;height:28px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:28px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">2</span></td></tr></table></td><td valign="top" style="padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">The first open model that beats the closed ones on real tasks</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">Not on benchmarks, on messy multi step agent work. The scaling laws still hold, but the open models caught up faster than anyone expected.<br>
<i>Model Notes · 8 min</i></p></td></tr><tr><td width="44" valign="top" style="padding-right:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="28" height="28" style="width:28px;height:28px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:28px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">3</span></td></tr></table></td><td valign="top" style=""><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">Why the old database won (and what's next)</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">Documents, vectors, queues and search all live in one place now. The many databases story looks like overkill in hindsight.<br>
<i>Data Desk · 14 min</i></p></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #242424;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><div style="padding-bottom:20px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#ffffff;text-align:left;mso-line-height-rule:exactly;">Quick hits</h2></div><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="40" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="24" height="24" style="width:24px;height:24px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">✓</span></td></tr></table></td><td valign="top" style="padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">Tool: Gooseneck</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">An open source coding agent that lives in your terminal.</p></td></tr><tr><td width="40" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="24" height="24" style="width:24px;height:24px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">✓</span></td></tr></table></td><td valign="top" style="padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">Release: a JS runtime adds a built-in object storage client</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">Plus native HTML streaming and faster cold starts.</p></td></tr><tr><td width="40" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="24" height="24" style="width:24px;height:24px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">✓</span></td></tr></table></td><td valign="top" style="padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">Deep dive: how a code index really works</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">A long engineering post that finally explains the embedding pipeline.</p></td></tr><tr><td width="40" valign="top" style="padding-right:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="24" height="24" style="width:24px;height:24px;background-color:#22d3ee;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;font-weight:700;color:#031a1f;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#031a1f;">✓</span></td></tr></table></td><td valign="top" style=""><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#ffffff;">Fun: a kanban board in one HTML page</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;padding-top:4px;">No build step, no framework, and it's been making the rounds.</p></td></tr></table></td></tr>
<tr><td height="12" style="height:12px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td height="20" bgcolor="#111a1f" style="background-color:#111a1f;height:20px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" bgcolor="#111a1f" style="background-color:#111a1f;padding:24px 32px 8px;"><p style="margin:0 0 12px;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#22d3ee;text-align:left;">Sponsored</p><h3 class="ete-ds-20" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:24px;font-weight:700;color:#ffffff;text-align:left;mso-line-height-rule:exactly;">Want to stop writing deploy files?</h3></td></tr>
<tr><td class="ete-px" bgcolor="#111a1f" style="background-color:#111a1f;padding:8px 32px;"><p style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#b6c2c7;text-align:left;">Shipyard builds, deploys and watches your code straight from your repo. No config files. <a style="color:#b6c2c7;text-decoration:underline;" href="https://example.com/sponsor">Try it free</a></p></td></tr>
<tr><td height="20" bgcolor="#111a1f" style="background-color:#111a1f;height:20px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td height="12" style="height:12px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#a8a8a8;text-align:left;">That's it for this week. Forward this to a friend who'd like it, or reply with what you're reading. I read everything.</p></td></tr>
<tr><td class="ete-px" style="padding:12px 32px 20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:26px;color:#ffffff;font-weight:700;padding-top:6px;">Alex</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#8a8a8a;line-height:20px;text-align:left;padding-top:10px;">Commitlog is a weekly letter about the software industry, by Alex Moreno.</p><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#8a8a8a;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{view_in_browser_url}}" style="color:#8a8a8a;text-decoration:underline;">Read on the web</a> · <a class="ete-link" href="{{unsubscribe_url}}" style="color:#8a8a8a;text-decoration:underline;">Unsubscribe</a> · <a class="ete-link" href="{{preferences_url}}" style="color:#8a8a8a;text-decoration:underline;">Email preferences</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:Inter, '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 28, Pulse newsletter) by Colorlib, MIT license.
About this template
A weekly newsletter for software developers, written by one person and designed in a dark editor look. It suits indie writers, developer tool companies and engineering teams that share what they read.
The masthead is a short wordmark with the issue number on the right. A small cyan label and a large headline set the theme of the week, and a short intro sums up the three big stories before a cyan button links to the web version. A photo of code on a screen gives the page some texture.
Three numbered stories follow, each with a title, two lines of summary and the source with its reading time. Quick hits cover four smaller links in one line each. A slightly lighter panel holds one clearly marked sponsor, and the issue ends with a personal note and the writer’s first name.
The structure follows a modern designer newsletter template. Keep the dark palette, write summaries that save the reader a click, and always label the sponsor.
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 issue number
- Label, headline and intro
- Read the issue button
- Code photo
- Three numbered stories
- Quick hits
- Sponsor panel
- Personal sign-off
- Footer
Subject line ideas
- Commitlog 018: three shifts in how I code
- Memory safety, open models and a database comeback
- {{first_name}}, this week's three stories
Preview text idea
A memory safe language in a kernel, an open model that holds up, and why the old database won.