Skip to content

Commit c0efe25

Browse files
JuansesDevJuansesDev
committed
Expand starter library to 10 templates
Adds 8 new templates covering the remaining spread of common email use cases. All keep the same visual language as the first two (system font stack, black/white palette, 600px max-width, inline CSS, 600x400 thumbnails captured via headless Chromium). Welcome: - welcome-trial: SaaS trial kickoff with day counter and three-step onboarding checklist. Variables: first_name, company_name, trial_days, app_url. Newsletter: - newsletter-single-story: long-form essay layout for writers who send one main piece per email (Stratechery-style). Variables: first_name, company_name, post_title, post_url. Announcement: - product-launch: dark hero header with product name, three feature blocks, single CTA. For feature/product launches. Variables: first_name, company_name, cta_url. - changelog: per-release update with Added / Improved / Fixed sections. Recurring low-effort format. Variables: company_name, version, changelog_url. Digest: - weekly-digest: compact five-pick weekly roundup with numbered links and one-line commentary each. Hacker Newsletter style. Variables: first_name, company_name. Transactional (no unsubscribe link, by design — these are not marketing emails): - password-reset: single CTA, expires_in notice, fallback URL, ignore-if-not-you note. Variables: first_name, reset_url, expires_in. - email-verification: account confirmation, same defensive copy pattern as password-reset. Variables: first_name, verify_url. - receipt: order/payment confirmation with metadata block plus itemized table and total row. For e-commerce and SaaS billing. Variables: first_name, order_number, order_date, order_total.
1 parent d58e6d9 commit c0efe25

17 files changed

Lines changed: 609 additions & 0 deletions

‎index.json‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@
1010
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/welcome-minimal.html",
1111
"variables": ["first_name", "company_name", "cta_url"]
1212
},
13+
{
14+
"id": "welcome-trial",
15+
"name": "Welcome — trial start",
16+
"category": "welcome",
17+
"description": "SaaS trial kickoff with day counter and a three-step onboarding checklist.",
18+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/welcome-trial.png",
19+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/welcome-trial.html",
20+
"variables": ["first_name", "company_name", "trial_days", "app_url"]
21+
},
1322
{
1423
"id": "newsletter-monthly",
1524
"name": "Newsletter — monthly digest",
@@ -18,6 +27,69 @@
1827
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/newsletter-monthly.png",
1928
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/newsletter-monthly.html",
2029
"variables": ["first_name", "company_name", "month_year", "lead_url"]
30+
},
31+
{
32+
"id": "newsletter-single-story",
33+
"name": "Newsletter — single story",
34+
"category": "newsletter",
35+
"description": "Long-form essay layout. One main piece per send. For writers who do Stratechery-style posts.",
36+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/newsletter-single-story.png",
37+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/newsletter-single-story.html",
38+
"variables": ["first_name", "company_name", "post_title", "post_url"]
39+
},
40+
{
41+
"id": "product-launch",
42+
"name": "Product launch",
43+
"category": "announcement",
44+
"description": "Hero header plus three feature blocks and a single CTA. Use for new product or major feature launches.",
45+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/product-launch.png",
46+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/product-launch.html",
47+
"variables": ["first_name", "company_name", "cta_url"]
48+
},
49+
{
50+
"id": "changelog",
51+
"name": "Changelog — release notes",
52+
"category": "announcement",
53+
"description": "Per-release update with Added / Improved / Fixed sections. Recurring, low-effort format.",
54+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/changelog.png",
55+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/changelog.html",
56+
"variables": ["company_name", "version", "changelog_url"]
57+
},
58+
{
59+
"id": "weekly-digest",
60+
"name": "Digest — five links",
61+
"category": "digest",
62+
"description": "Compact five-pick weekly roundup. Numbered links with one-line commentary each. Hacker Newsletter style.",
63+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/weekly-digest.png",
64+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/weekly-digest.html",
65+
"variables": ["first_name", "company_name"]
66+
},
67+
{
68+
"id": "password-reset",
69+
"name": "Password reset",
70+
"category": "transactional",
71+
"description": "Transactional reset email. Single CTA, expiration notice, fallback URL, and an ignore-if-not-you note.",
72+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/password-reset.png",
73+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/password-reset.html",
74+
"variables": ["first_name", "reset_url", "expires_in"]
75+
},
76+
{
77+
"id": "email-verification",
78+
"name": "Email verification",
79+
"category": "transactional",
80+
"description": "Account confirmation email. One CTA, plain-text fallback URL, and a safety note for the wrong-recipient case.",
81+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/email-verification.png",
82+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/email-verification.html",
83+
"variables": ["first_name", "verify_url"]
84+
},
85+
{
86+
"id": "receipt",
87+
"name": "Receipt — order confirmation",
88+
"category": "transactional",
89+
"description": "Order/payment confirmation with order metadata and an itemized table. For e-commerce and SaaS billing.",
90+
"thumbnail_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/receipt.png",
91+
"html_url": "https://raw.githubusercontent.com/Arkhe-Systems/senddock-templates/main/templates/receipt.html",
92+
"variables": ["first_name", "order_number", "order_date", "order_total"]
2193
}
2294
]
2395
}

‎templates/changelog.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>{{company_name}} {{version}}</title>
7+
</head>
8+
<body style="margin:0;padding:0;background-color:#f5f5f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#0a0a0a;">
9+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f5f5f4;padding:32px 16px;">
10+
<tr>
11+
<td align="center">
12+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="560" style="max-width:560px;background-color:#ffffff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
13+
<tr>
14+
<td style="padding:32px 40px 16px 40px;">
15+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
16+
<tr>
17+
<td>
18+
<p style="margin:0;font-size:13px;color:#a3a3a3;font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;">{{company_name}}</p>
19+
</td>
20+
<td align="right">
21+
<span style="display:inline-block;padding:4px 10px;background-color:#fafaf9;border:1px solid #e7e5e4;border-radius:6px;font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;font-size:12px;color:#0a0a0a;">{{version}}</span>
22+
</td>
23+
</tr>
24+
</table>
25+
</td>
26+
</tr>
27+
<tr>
28+
<td style="padding:8px 40px 32px 40px;">
29+
<h1 style="margin:0 0 8px 0;font-size:24px;line-height:1.3;font-weight:700;color:#0a0a0a;letter-spacing:-0.02em;">What shipped in {{version}}</h1>
30+
<p style="margin:0;font-size:15px;line-height:1.6;color:#525252;">A short intro paragraph: what's the headline of this release? Two sentences max.</p>
31+
</td>
32+
</tr>
33+
<tr>
34+
<td style="padding:0 40px 20px 40px;">
35+
<p style="margin:0 0 12px 0;font-size:11px;font-weight:600;color:#16a34a;text-transform:uppercase;letter-spacing:0.08em;">★ Added</p>
36+
<ul style="margin:0;padding-left:20px;font-size:15px;line-height:1.7;color:#262626;">
37+
<li>Headline new feature — one sentence, link to docs if relevant.</li>
38+
<li>Second new thing — keep each bullet to one line.</li>
39+
<li>Third addition if applicable.</li>
40+
</ul>
41+
</td>
42+
</tr>
43+
<tr>
44+
<td style="padding:0 40px 20px 40px;">
45+
<p style="margin:0 0 12px 0;font-size:11px;font-weight:600;color:#2563eb;text-transform:uppercase;letter-spacing:0.08em;">↑ Improved</p>
46+
<ul style="margin:0;padding-left:20px;font-size:15px;line-height:1.7;color:#262626;">
47+
<li>Improvement to existing feature X — what the user notices.</li>
48+
<li>Performance / UX / API change Y — measurable if possible.</li>
49+
</ul>
50+
</td>
51+
</tr>
52+
<tr>
53+
<td style="padding:0 40px 32px 40px;">
54+
<p style="margin:0 0 12px 0;font-size:11px;font-weight:600;color:#dc2626;text-transform:uppercase;letter-spacing:0.08em;">✓ Fixed</p>
55+
<ul style="margin:0;padding-left:20px;font-size:15px;line-height:1.7;color:#262626;">
56+
<li>Bug that affected scenario Z — one line, no jargon.</li>
57+
<li>Edge case where W broke — credit the reporter if from a customer.</li>
58+
</ul>
59+
</td>
60+
</tr>
61+
<tr>
62+
<td style="padding:24px 40px 32px 40px;border-top:1px solid #f5f5f4;" align="center">
63+
<a href="{{changelog_url}}" style="font-size:14px;font-weight:600;color:#0a0a0a;text-decoration:underline;">See the full changelog →</a>
64+
</td>
65+
</tr>
66+
</table>
67+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="560" style="max-width:560px;margin-top:24px;">
68+
<tr>
69+
<td align="center" style="padding:0 16px;">
70+
<p style="margin:0;font-size:12px;line-height:1.6;color:#a3a3a3;">
71+
{{company_name}} sends a release note every time something ships.<br>
72+
<a href="{{unsubscribe_url}}" style="color:#737373;text-decoration:underline;">Unsubscribe</a>
73+
</p>
74+
</td>
75+
</tr>
76+
</table>
77+
</td>
78+
</tr>
79+
</table>
80+
</body>
81+
</html>

‎templates/changelog.png‎

30.4 KB
Loading

‎templates/email-verification.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Confirm your email</title>
7+
</head>
8+
<body style="margin:0;padding:0;background-color:#f5f5f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#0a0a0a;">
9+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f5f5f4;padding:48px 16px;">
10+
<tr>
11+
<td align="center">
12+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" style="max-width:520px;background-color:#ffffff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
13+
<tr>
14+
<td style="padding:48px 40px 32px 40px;">
15+
<h1 style="margin:0 0 16px 0;font-size:24px;line-height:1.3;font-weight:700;color:#0a0a0a;letter-spacing:-0.02em;">Confirm your email</h1>
16+
<p style="margin:0 0 24px 0;font-size:16px;line-height:1.6;color:#525252;">Hi {{first_name}} — one quick step to finish setting up your account. Click the button below to confirm this is your email address.</p>
17+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin-bottom:24px;">
18+
<tr>
19+
<td style="background-color:#0a0a0a;border-radius:8px;">
20+
<a href="{{verify_url}}" style="display:inline-block;padding:14px 32px;color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Confirm email</a>
21+
</td>
22+
</tr>
23+
</table>
24+
<p style="margin:0 0 8px 0;font-size:14px;line-height:1.6;color:#737373;">If the button doesn't work, paste this link into your browser:</p>
25+
<p style="margin:0;font-size:13px;line-height:1.5;color:#525252;word-break:break-all;font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;">{{verify_url}}</p>
26+
</td>
27+
</tr>
28+
<tr>
29+
<td style="padding:20px 40px 40px 40px;border-top:1px solid #f5f5f4;">
30+
<p style="margin:0;font-size:13px;line-height:1.6;color:#a3a3a3;">If you didn't sign up for an account, you can safely ignore this email — no account will be created without confirmation.</p>
31+
</td>
32+
</tr>
33+
</table>
34+
</td>
35+
</tr>
36+
</table>
37+
</body>
38+
</html>

‎templates/email-verification.png‎

23.2 KB
Loading

‎templates/newsletter-single-story.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>{{post_title}}</title>
7+
</head>
8+
<body style="margin:0;padding:0;background-color:#f5f5f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#0a0a0a;">
9+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f5f5f4;padding:32px 16px;">
10+
<tr>
11+
<td align="center">
12+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="560" style="max-width:560px;background-color:#ffffff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
13+
<tr>
14+
<td style="padding:32px 40px 0 40px;">
15+
<p style="margin:0;font-size:13px;color:#a3a3a3;">{{company_name}}</p>
16+
</td>
17+
</tr>
18+
<tr>
19+
<td style="padding:8px 40px 24px 40px;">
20+
<h1 style="margin:0 0 16px 0;font-size:28px;line-height:1.25;font-weight:700;color:#0a0a0a;letter-spacing:-0.02em;">{{post_title}}</h1>
21+
<p style="margin:0;font-size:14px;color:#737373;">Hi {{first_name}} — long read this week, ~6 minutes.</p>
22+
</td>
23+
</tr>
24+
<tr>
25+
<td style="padding:0 40px 24px 40px;">
26+
<p style="margin:0 0 20px 0;font-size:17px;line-height:1.7;color:#262626;">Open with the hook. The first paragraph decides whether the reader scrolls. Tell them what this post is about, why it matters, and what they'll know after reading.</p>
27+
<p style="margin:0 0 20px 0;font-size:17px;line-height:1.7;color:#262626;">Then give them the context. The setup. The thing they need to understand before the rest makes sense. Keep paragraphs short — emails are read on phones, in line at the bank, on the toilet. Long paragraphs lose people.</p>
28+
<p style="margin:0 0 20px 0;font-size:17px;line-height:1.7;color:#262626;">Now the actual argument or story. Build it block by block. If you're making a claim, back it with a specific. If you're telling a story, include one detail that only someone who lived it would know.</p>
29+
<blockquote style="margin:24px 0;padding:16px 20px;border-left:3px solid #0a0a0a;background-color:#fafaf9;">
30+
<p style="margin:0;font-size:16px;line-height:1.6;font-style:italic;color:#262626;">A pull-quote works well here. Pick the sharpest sentence from your post and quote it back at the reader.</p>
31+
</blockquote>
32+
<p style="margin:0 0 20px 0;font-size:17px;line-height:1.7;color:#262626;">Land the ending. Don't trail off — end on something the reader can take with them. A question. A challenge. A summary they could repeat to a colleague.</p>
33+
</td>
34+
</tr>
35+
<tr>
36+
<td style="padding:0 40px 32px 40px;">
37+
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
38+
<tr>
39+
<td style="background-color:#0a0a0a;border-radius:8px;">
40+
<a href="{{post_url}}" style="display:inline-block;padding:14px 28px;color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Read on the web</a>
41+
</td>
42+
</tr>
43+
</table>
44+
</td>
45+
</tr>
46+
<tr>
47+
<td style="padding:20px 40px 32px 40px;border-top:1px solid #f5f5f4;">
48+
<p style="margin:0;font-size:13px;line-height:1.6;color:#737373;">Forwarded to you? <a href="#" style="color:#0a0a0a;text-decoration:underline;">Subscribe</a> for a new essay every week.</p>
49+
</td>
50+
</tr>
51+
</table>
52+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="560" style="max-width:560px;margin-top:24px;">
53+
<tr>
54+
<td align="center" style="padding:0 16px;">
55+
<p style="margin:0;font-size:12px;line-height:1.6;color:#a3a3a3;">
56+
You're reading {{company_name}}.<br>
57+
<a href="{{unsubscribe_url}}" style="color:#737373;text-decoration:underline;">Unsubscribe</a>
58+
</p>
59+
</td>
60+
</tr>
61+
</table>
62+
</td>
63+
</tr>
64+
</table>
65+
</body>
66+
</html>

‎templates/newsletter-single-story.png‎

39.1 KB
Loading

‎templates/password-reset.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Reset your password</title>
7+
</head>
8+
<body style="margin:0;padding:0;background-color:#f5f5f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#0a0a0a;">
9+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f5f5f4;padding:48px 16px;">
10+
<tr>
11+
<td align="center">
12+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="520" style="max-width:520px;background-color:#ffffff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
13+
<tr>
14+
<td style="padding:48px 40px 32px 40px;">
15+
<h1 style="margin:0 0 16px 0;font-size:24px;line-height:1.3;font-weight:700;color:#0a0a0a;letter-spacing:-0.02em;">Reset your password</h1>
16+
<p style="margin:0 0 24px 0;font-size:16px;line-height:1.6;color:#525252;">Hi {{first_name}} — someone requested a password reset for your account. Click the button below to choose a new one.</p>
17+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin-bottom:24px;">
18+
<tr>
19+
<td style="background-color:#0a0a0a;border-radius:8px;">
20+
<a href="{{reset_url}}" style="display:inline-block;padding:14px 32px;color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Reset password</a>
21+
</td>
22+
</tr>
23+
</table>
24+
<p style="margin:0 0 8px 0;font-size:14px;line-height:1.6;color:#737373;">This link expires in <strong style="color:#262626;">{{expires_in}}</strong>. After that, you'll need to request a new one.</p>
25+
<p style="margin:0;font-size:14px;line-height:1.6;color:#737373;">If the button doesn't work, copy and paste this URL into your browser:</p>
26+
<p style="margin:8px 0 0 0;font-size:13px;line-height:1.5;color:#525252;word-break:break-all;font-family:'SF Mono',Menlo,Monaco,Consolas,monospace;">{{reset_url}}</p>
27+
</td>
28+
</tr>
29+
<tr>
30+
<td style="padding:20px 40px 40px 40px;border-top:1px solid #f5f5f4;">
31+
<p style="margin:0;font-size:13px;line-height:1.6;color:#a3a3a3;">If you didn't request this, you can safely ignore this email. Your password won't change unless you click the link above and choose a new one.</p>
32+
</td>
33+
</tr>
34+
</table>
35+
</td>
36+
</tr>
37+
</table>
38+
</body>
39+
</html>

‎templates/password-reset.png‎

28.2 KB
Loading

0 commit comments

Comments
 (0)