@opendirectory.dev/skills 0.1.51 → 0.1.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/registry.json +11 -0
- package/skills/email-newsletter/README.md +98 -0
- package/skills/email-newsletter/SKILL.md +395 -0
- package/skills/email-newsletter/evals/evals.json +35 -0
- package/skills/email-newsletter/references/design-system.md +390 -0
- package/skills/email-newsletter/references/html-email-guide.md +235 -0
- package/skills/email-newsletter/references/platform-compat.md +154 -0
- package/skills/email-newsletter/references/subject-line-formulas.md +207 -0
- package/skills/email-newsletter/templates/dark-newsletter.html +307 -0
- package/skills/email-newsletter/templates/light-newsletter.html +166 -0
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# Platform Compatibility
|
|
2
|
+
|
|
3
|
+
Per-platform quirks, variable syntax, and paste instructions.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Loops
|
|
8
|
+
|
|
9
|
+
**Variable syntax:** Handlebars `{{ }}`
|
|
10
|
+
|
|
11
|
+
| Placeholder | Loops variable |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `[UNSUBSCRIBE_URL]` | `{{unsubscribe_url}}` |
|
|
14
|
+
| `[FIRST_NAME]` | `{{first_name}}` |
|
|
15
|
+
| `[EMAIL]` | `{{email}}` |
|
|
16
|
+
|
|
17
|
+
**How to use:**
|
|
18
|
+
- Open Loops dashboard > New Email > Custom HTML
|
|
19
|
+
- Paste the full HTML directly into the custom HTML editor
|
|
20
|
+
- Loops supports most standard email HTML including table layouts
|
|
21
|
+
|
|
22
|
+
**Notes:**
|
|
23
|
+
- Loops strips some `<head>` content -- the email still renders correctly
|
|
24
|
+
- Test with a preview send before publishing to subscribers
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Mailchimp
|
|
29
|
+
|
|
30
|
+
**Variable syntax:** Merge tags `*| |*`
|
|
31
|
+
|
|
32
|
+
| Placeholder | Mailchimp merge tag |
|
|
33
|
+
|---|---|
|
|
34
|
+
| `[UNSUBSCRIBE_URL]` | `*\|UNSUB\|*` |
|
|
35
|
+
| `[FIRST_NAME]` | `*\|FNAME\|*` |
|
|
36
|
+
| `[EMAIL]` | `*\|EMAIL\|*` |
|
|
37
|
+
| `[COMPANY NAME]` | `*\|COMPANY\|*` (if merge field exists) |
|
|
38
|
+
|
|
39
|
+
**How to use:**
|
|
40
|
+
- Create Campaign > Email > Code your own
|
|
41
|
+
- Paste HTML into the code editor
|
|
42
|
+
|
|
43
|
+
**Additional: mc:edit regions**
|
|
44
|
+
Mailchimp lets editors modify sections in their visual builder if you add `mc:edit` attributes:
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<td mc:edit="main-content" style="padding:24px 32px;">
|
|
48
|
+
<!-- editable content here -->
|
|
49
|
+
</td>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Add `mc:edit="[section-name]"` to any `<td>` that the Mailchimp team should be able to edit visually. Use descriptive names: `mc:edit="hero"`, `mc:edit="body"`, `mc:edit="footer"`.
|
|
53
|
+
|
|
54
|
+
**Notes:**
|
|
55
|
+
- Inline styles are required -- Mailchimp strips `<style>` blocks in some plans
|
|
56
|
+
- Mailchimp has its own image hosting -- you can upload images during setup
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Beehiiv
|
|
61
|
+
|
|
62
|
+
**Variable syntax:** Double percent `%% %%`
|
|
63
|
+
|
|
64
|
+
| Placeholder | Beehiiv variable |
|
|
65
|
+
|---|---|
|
|
66
|
+
| `[UNSUBSCRIBE_URL]` | `%%unsubscribe_url%%` |
|
|
67
|
+
| `[FIRST_NAME]` | `%%first_name%%` |
|
|
68
|
+
| `[EMAIL]` | `%%email%%` |
|
|
69
|
+
|
|
70
|
+
**How to use:**
|
|
71
|
+
- Post > New post > Switch to custom HTML block
|
|
72
|
+
- Paste HTML into the HTML block editor
|
|
73
|
+
- Table-based layouts are fully supported in Beehiiv
|
|
74
|
+
|
|
75
|
+
**Notes:**
|
|
76
|
+
- Beehiiv wraps your HTML in their outer template -- you do not need to add their header/footer chrome
|
|
77
|
+
- Some users paste only the inner content (hero + body + CTA) and let Beehiiv handle the wrapper
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Resend
|
|
82
|
+
|
|
83
|
+
**Variable syntax:** JSX-style curly braces `{ }`
|
|
84
|
+
|
|
85
|
+
| Placeholder | Resend variable |
|
|
86
|
+
|---|---|
|
|
87
|
+
| `[UNSUBSCRIBE_URL]` | `{unsubscribeUrl}` |
|
|
88
|
+
| `[FIRST_NAME]` | `{firstName}` |
|
|
89
|
+
|
|
90
|
+
**How to use (Standard HTML):**
|
|
91
|
+
- Resend accepts raw HTML via their API: `html: yourHtmlString`
|
|
92
|
+
- Or use the Resend dashboard > Broadcasts > Custom HTML
|
|
93
|
+
|
|
94
|
+
**React Email option:**
|
|
95
|
+
Resend supports React Email natively -- if the team is developer-focused, request React Email `.tsx` output instead:
|
|
96
|
+
- Each section becomes a React Email component
|
|
97
|
+
- Styled with inline styles via the `style=` prop
|
|
98
|
+
- Compatible with the `@react-email/components` package
|
|
99
|
+
|
|
100
|
+
**React Email component structure:**
|
|
101
|
+
```tsx
|
|
102
|
+
import { Html, Head, Body, Container, Section, Text, Button, Hr } from '@react-email/components';
|
|
103
|
+
|
|
104
|
+
export default function NewsletterEmail({ firstName = 'there' }: { firstName?: string }) {
|
|
105
|
+
return (
|
|
106
|
+
<Html>
|
|
107
|
+
<Head />
|
|
108
|
+
<Body style={{ backgroundColor: '#F4F4F4', margin: '0', padding: '0' }}>
|
|
109
|
+
<Container style={{ maxWidth: '600px', margin: '0 auto', backgroundColor: '#FFFFFF' }}>
|
|
110
|
+
{/* sections here */}
|
|
111
|
+
</Container>
|
|
112
|
+
</Body>
|
|
113
|
+
</Html>
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Install: `npm install @react-email/components`
|
|
119
|
+
Preview: `npx react-email dev`
|
|
120
|
+
|
|
121
|
+
**Notes:**
|
|
122
|
+
- Resend's HTML-to-email rendering is more modern than Outlook -- less table wrestling needed
|
|
123
|
+
- Still use inline styles in React Email for maximum compatibility
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## Generic / Other ESPs
|
|
128
|
+
|
|
129
|
+
Use these placeholders and instruct the user to replace manually before sending:
|
|
130
|
+
|
|
131
|
+
| Placeholder | What to replace with |
|
|
132
|
+
|---|---|
|
|
133
|
+
| `[UNSUBSCRIBE_URL]` | Your ESP's unsubscribe URL or merge tag |
|
|
134
|
+
| `[FIRST_NAME]` | Your ESP's first name merge tag |
|
|
135
|
+
| `[CTA_URL]` | Actual destination URL |
|
|
136
|
+
| `[COMPANY NAME]` | Your company name |
|
|
137
|
+
| `[CITY, COUNTRY]` | Your registered address |
|
|
138
|
+
|
|
139
|
+
Add HTML comment above footer:
|
|
140
|
+
```html
|
|
141
|
+
<!-- Replace [UNSUBSCRIBE_URL] with your ESP's unsubscribe variable before sending -->
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## Platform Comparison Quick Reference
|
|
147
|
+
|
|
148
|
+
| Feature | Loops | Mailchimp | Beehiiv | Resend |
|
|
149
|
+
|---|---|---|---|---|
|
|
150
|
+
| Variable syntax | `{{var}}` | `*\|VAR\|*` | `%%var%%` | `{var}` or JSX |
|
|
151
|
+
| Custom HTML | Yes, native | Yes, "Code your own" | Yes, HTML block | Yes, API or dashboard |
|
|
152
|
+
| Table layouts | Full support | Full support | Full support | Full support |
|
|
153
|
+
| React Email | No | No | No | Yes, native |
|
|
154
|
+
| Unsubscribe var | `{{unsubscribe_url}}` | `*\|UNSUB\|*` | `%%unsubscribe_url%%` | `{unsubscribeUrl}` |
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
# Subject Line Formulas
|
|
2
|
+
|
|
3
|
+
10 proven formulas for email subject lines. Each formula is matched to the tone and audience type where it performs best.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## The Fundamentals
|
|
8
|
+
|
|
9
|
+
A subject line does one thing: earn the open. It does not summarize the email. It creates tension, curiosity, or a direct promise that only gets resolved inside.
|
|
10
|
+
|
|
11
|
+
Rules:
|
|
12
|
+
- 40-60 characters ideal (preview cuts off around 60 on mobile)
|
|
13
|
+
- No all-caps
|
|
14
|
+
- Avoid spam triggers: "FREE", "!", "$$", "urgent", "click now"
|
|
15
|
+
- Test the preview text alongside -- first line of email shows in many clients
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Formula 1: Curiosity Gap
|
|
20
|
+
|
|
21
|
+
**Pattern:** "What [audience] gets wrong about [topic]"
|
|
22
|
+
|
|
23
|
+
Creates an information asymmetry -- the reader assumes they might be making a mistake.
|
|
24
|
+
|
|
25
|
+
**Examples:**
|
|
26
|
+
- "What most founders get wrong about pricing"
|
|
27
|
+
- "What 90% of devs miss in code reviews"
|
|
28
|
+
- "The B2B sales mistake killing your pipeline"
|
|
29
|
+
|
|
30
|
+
**Best for:** Educational newsletters, thought leadership, warm audiences
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## Formula 2: Direct Benefit
|
|
35
|
+
|
|
36
|
+
**Pattern:** "How to [outcome] in [timeframe or condition]"
|
|
37
|
+
|
|
38
|
+
No ambiguity. Tells the reader exactly what they get.
|
|
39
|
+
|
|
40
|
+
**Examples:**
|
|
41
|
+
- "How to write a cold email in 10 minutes"
|
|
42
|
+
- "How to cut your deploy time by 40%"
|
|
43
|
+
- "How to find your first 10 B2B customers"
|
|
44
|
+
|
|
45
|
+
**Best for:** How-to content, tutorials, conversion-focused newsletters
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Formula 3: Number / List
|
|
50
|
+
|
|
51
|
+
**Pattern:** "[N] [topic] [patterns/lessons/rules/mistakes]"
|
|
52
|
+
|
|
53
|
+
Numbers create expectation of structure. Readers know they'll get discrete items.
|
|
54
|
+
|
|
55
|
+
**Examples:**
|
|
56
|
+
- "7 pricing patterns from 50 SaaS companies"
|
|
57
|
+
- "3 things we learned building in public"
|
|
58
|
+
- "5 cold email mistakes killing response rates"
|
|
59
|
+
|
|
60
|
+
**Best for:** Curated content, research-based newsletters, practical advice
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Formula 4: Question
|
|
65
|
+
|
|
66
|
+
**Pattern:** "Is [common belief] actually true?"
|
|
67
|
+
|
|
68
|
+
Challenges assumptions. Works best when the reader holds the belief being questioned.
|
|
69
|
+
|
|
70
|
+
**Examples:**
|
|
71
|
+
- "Is product-led growth right for your company?"
|
|
72
|
+
- "Are long cold emails actually killing your reply rate?"
|
|
73
|
+
- "Is your onboarding flow losing customers?"
|
|
74
|
+
|
|
75
|
+
**Best for:** Contrarian takes, research-backed content, audiences with strong priors
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Formula 5: Insider Access
|
|
80
|
+
|
|
81
|
+
**Pattern:** "What I/we learned from [credible source/experience]"
|
|
82
|
+
|
|
83
|
+
Implies firsthand knowledge. The reader gets access to something they could not learn on their own.
|
|
84
|
+
|
|
85
|
+
**Examples:**
|
|
86
|
+
- "What I learned from 200 failed cold emails"
|
|
87
|
+
- "What YC founders say about their first 100 customers"
|
|
88
|
+
- "What we learned building this in 30 days"
|
|
89
|
+
|
|
90
|
+
**Best for:** Founder newsletters, experience-based content, personal brand audiences
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Formula 6: Specific Stat
|
|
95
|
+
|
|
96
|
+
**Pattern:** "[Specific number or stat] changed how I think about [topic]"
|
|
97
|
+
|
|
98
|
+
Specificity signals credibility. Vague stats ("some companies see improvement") are ignored; specific ones stop the scroll.
|
|
99
|
+
|
|
100
|
+
**Examples:**
|
|
101
|
+
- "43% open rate from one subject line change"
|
|
102
|
+
- "1 in 3 B2B buyers decides before talking to sales"
|
|
103
|
+
- "We cut churn by 28% -- here's how"
|
|
104
|
+
|
|
105
|
+
**Best for:** Data-driven content, credibility-building, results-focused audiences
|
|
106
|
+
|
|
107
|
+
**Rule:** Only use if the stat appears in the email and comes from real data. Do not invent.
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
## Formula 7: Contrarian
|
|
112
|
+
|
|
113
|
+
**Pattern:** "Why [popular opinion] is wrong" or "Stop [common behavior]"
|
|
114
|
+
|
|
115
|
+
High open rate, high risk. Only use when you can back up the contrarian position in the email.
|
|
116
|
+
|
|
117
|
+
**Examples:**
|
|
118
|
+
- "Why your pricing page is costing you sales"
|
|
119
|
+
- "Stop writing product updates nobody reads"
|
|
120
|
+
- "The SEO advice that's actually hurting you"
|
|
121
|
+
|
|
122
|
+
**Best for:** Bold/direct tone, engaged audiences, newsletters where trust is already built
|
|
123
|
+
|
|
124
|
+
**Warning:** Use sparingly -- works once, then loses potency.
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## Formula 8: Personal Story Hook
|
|
129
|
+
|
|
130
|
+
**Pattern:** "I [did thing]. Here's what happened."
|
|
131
|
+
|
|
132
|
+
Simple, human. Works because it promises a narrative arc.
|
|
133
|
+
|
|
134
|
+
**Examples:**
|
|
135
|
+
- "I sent 500 cold emails. Here's what worked."
|
|
136
|
+
- "We pivoted twice in 6 months. Here's what we learned."
|
|
137
|
+
- "I hired wrong 3 times. Here's the pattern I missed."
|
|
138
|
+
|
|
139
|
+
**Best for:** Conversational tone, personal brand, founder/operator audiences
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## Formula 9: Name Drop
|
|
144
|
+
|
|
145
|
+
**Pattern:** "How [known company/person] [achieved outcome]"
|
|
146
|
+
|
|
147
|
+
Borrowed credibility. The reader clicks to learn the method, not just to read about the person.
|
|
148
|
+
|
|
149
|
+
**Examples:**
|
|
150
|
+
- "How Notion grew to 30M users without ads"
|
|
151
|
+
- "The Stripe playbook for developer adoption"
|
|
152
|
+
- "How Linear built cult loyalty in a crowded market"
|
|
153
|
+
|
|
154
|
+
**Best for:** GTM, growth, and operator audiences. High CTR on professional topics.
|
|
155
|
+
|
|
156
|
+
**Rule:** Only use if the content actually covers that company. Do not bait-and-switch.
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
## Formula 10: Urgency / Time-Bound
|
|
161
|
+
|
|
162
|
+
**Pattern:** "[Event or thing] [ends/starts/closes] [specific time]"
|
|
163
|
+
|
|
164
|
+
Only use when it is true. Fake urgency destroys trust fast.
|
|
165
|
+
|
|
166
|
+
**Examples:**
|
|
167
|
+
- "Webinar tomorrow: pricing your B2B SaaS"
|
|
168
|
+
- "Last chance: early access closes Friday"
|
|
169
|
+
- "The window for this is closing"
|
|
170
|
+
|
|
171
|
+
**Best for:** Event-driven sends, waitlists, limited-time offers
|
|
172
|
+
|
|
173
|
+
**Rule:** If it is not actually time-limited, do not use this formula.
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
## Picking the Right Formula
|
|
178
|
+
|
|
179
|
+
| Newsletter type | Top formulas |
|
|
180
|
+
|---|---|
|
|
181
|
+
| B2B SaaS / GTM | 1, 3, 6, 9 |
|
|
182
|
+
| Founder / operator | 5, 8, 1, 7 |
|
|
183
|
+
| Consumer / lifestyle | 2, 4, 10, 8 |
|
|
184
|
+
| Developer / technical | 3, 6, 2, 4 |
|
|
185
|
+
| Educational / media | 1, 3, 4, 6 |
|
|
186
|
+
| Product launch | 10, 2, 9 |
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## Preview Text
|
|
191
|
+
|
|
192
|
+
The preview text (preheader) shows alongside the subject in most email clients. Treat it as a second subject line.
|
|
193
|
+
|
|
194
|
+
Pattern: Subject creates curiosity; preview text resolves just enough to confirm the click is worth it.
|
|
195
|
+
|
|
196
|
+
```html
|
|
197
|
+
<!-- Add to <head> -- renders as preview text in most clients -->
|
|
198
|
+
<span style="display:none;max-height:0;overflow:hidden;opacity:0;font-size:1px;color:#FAFAFA;">[PREVIEW TEXT HERE]</span>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
Good preview text:
|
|
202
|
+
- Subject: "What most founders get wrong about pricing"
|
|
203
|
+
- Preview: "We analyzed 50 SaaS pricing pages -- here's the pattern"
|
|
204
|
+
|
|
205
|
+
Bad preview text (just repeats subject):
|
|
206
|
+
- Subject: "What most founders get wrong about pricing"
|
|
207
|
+
- Preview: "Mistakes founders make with their pricing"
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="color-scheme" content="dark">
|
|
8
|
+
<meta name="supported-color-schemes" content="dark">
|
|
9
|
+
<title>[SUBJECT]</title>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
11
|
+
<!--[if mso]>
|
|
12
|
+
<noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
|
|
13
|
+
<![endif]-->
|
|
14
|
+
<style>
|
|
15
|
+
@media only screen and (max-width: 600px) {
|
|
16
|
+
.container { width: 100% !important; }
|
|
17
|
+
.hero-h1 { font-size: 32px !important; line-height: 1.1 !important; }
|
|
18
|
+
.h2 { font-size: 30px !important; }
|
|
19
|
+
.h2-cta { font-size: 30px !important; }
|
|
20
|
+
.pad { padding-left: 24px !important; padding-right: 24px !important; }
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body style="margin:0;padding:0;background-color:#050505;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
|
|
25
|
+
|
|
26
|
+
<!-- ═══════════════════════════════════════════════════════════════
|
|
27
|
+
PREVIEW TEXT — edit this line, keep the hidden span intact
|
|
28
|
+
════════════════════════════════════════════════════════════════ -->
|
|
29
|
+
<span style="display:none;max-height:0;overflow:hidden;opacity:0;font-size:1px;color:#050505;">[PREVIEW TEXT — one sentence teaser that complements the subject line]</span>
|
|
30
|
+
|
|
31
|
+
<!-- ═══════════════════════════════════════════ OUTER WRAPPER -->
|
|
32
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#050505;">
|
|
33
|
+
<tr>
|
|
34
|
+
<td align="center" style="padding:32px 16px;">
|
|
35
|
+
|
|
36
|
+
<!-- ══════════════════════════════ 600px CONTAINER -->
|
|
37
|
+
<table class="container" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;background-color:#111111;">
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
<!-- ══════════════════════════════════════════════════════
|
|
41
|
+
SECTION: HEADER
|
|
42
|
+
Brand name left — issue number / date right
|
|
43
|
+
═══════════════════════════════════════════════════════ -->
|
|
44
|
+
<tr>
|
|
45
|
+
<td bgcolor="#0A0A0A" style="background-color:#0A0A0A;padding:20px 40px;">
|
|
46
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
47
|
+
<tr>
|
|
48
|
+
<td style="font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:20px;font-weight:400;color:#F2F2F2;letter-spacing:-0.01em;">[BRAND NAME]</td>
|
|
49
|
+
<td align="right" style="font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:500;color:#555555;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;">Issue #[N] | [DATE]</td>
|
|
50
|
+
</tr>
|
|
51
|
+
</table>
|
|
52
|
+
</td>
|
|
53
|
+
</tr>
|
|
54
|
+
|
|
55
|
+
<!-- ══════════════════════════════════════════════════════
|
|
56
|
+
BRAND COLOR STRIP — 2px accent line
|
|
57
|
+
Replace #D8F90A with brand color if provided
|
|
58
|
+
═══════════════════════════════════════════════════════ -->
|
|
59
|
+
<tr>
|
|
60
|
+
<td bgcolor="#D8F90A" style="background-color:#D8F90A;height:2px;font-size:1px;line-height:1px;"> </td>
|
|
61
|
+
</tr>
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
<!-- ══════════════════════════════════════════════════════
|
|
65
|
+
SECTION: HERO
|
|
66
|
+
Category label + big Instrument Serif headline
|
|
67
|
+
+ hook paragraph + pill CTA button
|
|
68
|
+
Tone: direct — keep headline short, declarative
|
|
69
|
+
═══════════════════════════════════════════════════════ -->
|
|
70
|
+
<tr>
|
|
71
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:64px 40px 56px;">
|
|
72
|
+
<!-- Category label (optional — delete if not needed) -->
|
|
73
|
+
<p style="margin:0 0 20px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:600;color:#D8F90A;letter-spacing:0.22em;text-transform:uppercase;">[CATEGORY LABEL]</p>
|
|
74
|
+
<!-- Hero headline — 8 words max, no I/We/Our -->
|
|
75
|
+
<h1 class="hero-h1" style="margin:0 0 24px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:52px;font-weight:400;line-height:1.02;color:#F2F2F2;letter-spacing:-0.02em;">[HERO HEADLINE]</h1>
|
|
76
|
+
<!-- Hook — 1-2 sentences, problem or curiosity gap -->
|
|
77
|
+
<p style="margin:0 0 40px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6;color:#AAAAAA;">[HERO HOOK — 1-2 sentences]</p>
|
|
78
|
+
<!-- Primary CTA — pill button, dark text on yellow -->
|
|
79
|
+
<table cellpadding="0" cellspacing="0" border="0">
|
|
80
|
+
<tr>
|
|
81
|
+
<td align="center" bgcolor="#D8F90A" style="background-color:#D8F90A;border-radius:100px;">
|
|
82
|
+
<a href="[CTA_URL]" target="_blank" style="display:inline-block;padding:14px 32px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;font-weight:600;color:#0A0A0A;text-decoration:none;letter-spacing:0.01em;">[CTA BUTTON TEXT] →</a>
|
|
83
|
+
</td>
|
|
84
|
+
</tr>
|
|
85
|
+
</table>
|
|
86
|
+
</td>
|
|
87
|
+
</tr>
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<!-- ══════════════════════════════════════════════════════
|
|
91
|
+
SECTION: INTRO
|
|
92
|
+
2-3 sentence personal framing or context
|
|
93
|
+
Remove if bold/direct tone doesn't need it
|
|
94
|
+
═══════════════════════════════════════════════════════ -->
|
|
95
|
+
<tr>
|
|
96
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:40px 40px 0;">
|
|
97
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65;color:#CCCCCC;">[INTRO TEXT — 2-3 sentences, personal, no corporate-speak]</p>
|
|
98
|
+
</td>
|
|
99
|
+
</tr>
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
<!-- ══════════════════════════════════════════════════════
|
|
103
|
+
DIVIDER — centered 96px rule
|
|
104
|
+
Use between major sections
|
|
105
|
+
═══════════════════════════════════════════════════════ -->
|
|
106
|
+
<tr>
|
|
107
|
+
<td bgcolor="#111111" style="background-color:#111111;padding:40px 40px 0;">
|
|
108
|
+
<table width="96" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
|
109
|
+
<tr>
|
|
110
|
+
<td bgcolor="#2A2A2A" style="background-color:#2A2A2A;height:1px;font-size:1px;line-height:1px;"> </td>
|
|
111
|
+
</tr>
|
|
112
|
+
</table>
|
|
113
|
+
</td>
|
|
114
|
+
</tr>
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
<!-- ══════════════════════════════════════════════════════
|
|
118
|
+
SECTION: MAIN CONTENT
|
|
119
|
+
Body text — 250-400 words, scannable
|
|
120
|
+
Bold callouts for key ideas
|
|
121
|
+
═══════════════════════════════════════════════════════ -->
|
|
122
|
+
<tr>
|
|
123
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:40px 40px 8px;">
|
|
124
|
+
|
|
125
|
+
<p style="margin:0 0 20px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7;color:#CCCCCC;"><strong style="color:#F2F2F2;font-weight:600;">[BOLD CALLOUT — first 3-4 words of idea]</strong> [rest of paragraph — 2-4 sentences max]</p>
|
|
126
|
+
|
|
127
|
+
<p style="margin:0 0 20px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7;color:#CCCCCC;"><strong style="color:#F2F2F2;font-weight:600;">[BOLD CALLOUT]</strong> [paragraph]</p>
|
|
128
|
+
|
|
129
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7;color:#CCCCCC;"><strong style="color:#F2F2F2;font-weight:600;">[BOLD CALLOUT]</strong> [paragraph]</p>
|
|
130
|
+
|
|
131
|
+
</td>
|
|
132
|
+
</tr>
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
<!-- ══════════════════════════════════════════════════════
|
|
136
|
+
SECTION: STAT CALLOUT
|
|
137
|
+
One stat or quote, brand-accent left border
|
|
138
|
+
Use when there's a compelling data point
|
|
139
|
+
═══════════════════════════════════════════════════════ -->
|
|
140
|
+
<tr>
|
|
141
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:32px 40px;">
|
|
142
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
143
|
+
<tr>
|
|
144
|
+
<td bgcolor="#1A1A1A" style="background-color:#1A1A1A;border-left:3px solid #D8F90A;padding:24px 28px;border-radius:0 8px 8px 0;">
|
|
145
|
+
<p style="margin:0 0 12px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:24px;font-weight:400;line-height:1.3;color:#F2F2F2;">"[STAT OR QUOTE — 20 words max]"</p>
|
|
146
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#555555;">[SOURCE / ATTRIBUTION]</p>
|
|
147
|
+
</td>
|
|
148
|
+
</tr>
|
|
149
|
+
</table>
|
|
150
|
+
</td>
|
|
151
|
+
</tr>
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
<!-- ══════════════════════════════════════════════════════
|
|
155
|
+
SECTION: H2 + STEP CARDS
|
|
156
|
+
Section headline + numbered list of 3-4 items
|
|
157
|
+
Use for "how it works", "what you'll learn", etc.
|
|
158
|
+
═══════════════════════════════════════════════════════ -->
|
|
159
|
+
<tr>
|
|
160
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:40px 40px 24px;text-align:center;">
|
|
161
|
+
<h2 class="h2" style="margin:0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:38px;font-weight:400;line-height:1.05;color:#F2F2F2;letter-spacing:-0.02em;">[SECTION HEADLINE]</h2>
|
|
162
|
+
</td>
|
|
163
|
+
</tr>
|
|
164
|
+
|
|
165
|
+
<tr>
|
|
166
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:8px 40px 40px;">
|
|
167
|
+
|
|
168
|
+
<!-- Step 1 -->
|
|
169
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:20px;">
|
|
170
|
+
<tr>
|
|
171
|
+
<td width="44" valign="top" style="padding-top:2px;">
|
|
172
|
+
<table cellpadding="0" cellspacing="0" border="0">
|
|
173
|
+
<tr>
|
|
174
|
+
<td bgcolor="#D8F90A" style="background-color:#D8F90A;width:28px;height:28px;border-radius:6px;">
|
|
175
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;color:#0A0A0A;line-height:28px;text-align:center;">1.</p>
|
|
176
|
+
</td>
|
|
177
|
+
</tr>
|
|
178
|
+
</table>
|
|
179
|
+
</td>
|
|
180
|
+
<td style="padding-left:4px;">
|
|
181
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#E8E8E8;">[STEP 1 TEXT]</p>
|
|
182
|
+
</td>
|
|
183
|
+
</tr>
|
|
184
|
+
</table>
|
|
185
|
+
|
|
186
|
+
<!-- Step 2 -->
|
|
187
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:20px;">
|
|
188
|
+
<tr>
|
|
189
|
+
<td width="44" valign="top" style="padding-top:2px;">
|
|
190
|
+
<table cellpadding="0" cellspacing="0" border="0">
|
|
191
|
+
<tr>
|
|
192
|
+
<td bgcolor="#D8F90A" style="background-color:#D8F90A;width:28px;height:28px;border-radius:6px;">
|
|
193
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;color:#0A0A0A;line-height:28px;text-align:center;">2.</p>
|
|
194
|
+
</td>
|
|
195
|
+
</tr>
|
|
196
|
+
</table>
|
|
197
|
+
</td>
|
|
198
|
+
<td style="padding-left:4px;">
|
|
199
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#E8E8E8;">[STEP 2 TEXT]</p>
|
|
200
|
+
</td>
|
|
201
|
+
</tr>
|
|
202
|
+
</table>
|
|
203
|
+
|
|
204
|
+
<!-- Step 3 -->
|
|
205
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:20px;">
|
|
206
|
+
<tr>
|
|
207
|
+
<td width="44" valign="top" style="padding-top:2px;">
|
|
208
|
+
<table cellpadding="0" cellspacing="0" border="0">
|
|
209
|
+
<tr>
|
|
210
|
+
<td bgcolor="#D8F90A" style="background-color:#D8F90A;width:28px;height:28px;border-radius:6px;">
|
|
211
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;color:#0A0A0A;line-height:28px;text-align:center;">3.</p>
|
|
212
|
+
</td>
|
|
213
|
+
</tr>
|
|
214
|
+
</table>
|
|
215
|
+
</td>
|
|
216
|
+
<td style="padding-left:4px;">
|
|
217
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#E8E8E8;">[STEP 3 TEXT]</p>
|
|
218
|
+
</td>
|
|
219
|
+
</tr>
|
|
220
|
+
</table>
|
|
221
|
+
|
|
222
|
+
<!-- Step 4 (remove if only 3 steps) -->
|
|
223
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
224
|
+
<tr>
|
|
225
|
+
<td width="44" valign="top" style="padding-top:2px;">
|
|
226
|
+
<table cellpadding="0" cellspacing="0" border="0">
|
|
227
|
+
<tr>
|
|
228
|
+
<td bgcolor="#D8F90A" style="background-color:#D8F90A;width:28px;height:28px;border-radius:6px;">
|
|
229
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;color:#0A0A0A;line-height:28px;text-align:center;">4.</p>
|
|
230
|
+
</td>
|
|
231
|
+
</tr>
|
|
232
|
+
</table>
|
|
233
|
+
</td>
|
|
234
|
+
<td style="padding-left:4px;">
|
|
235
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#E8E8E8;">[STEP 4 TEXT]</p>
|
|
236
|
+
</td>
|
|
237
|
+
</tr>
|
|
238
|
+
</table>
|
|
239
|
+
|
|
240
|
+
</td>
|
|
241
|
+
</tr>
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
<!-- ══════════════════════════════════════════════════════
|
|
245
|
+
SECTION: CTA CALLOUT CARD
|
|
246
|
+
Yellow card — the visual anchor of the email
|
|
247
|
+
Dark button inside for contrast
|
|
248
|
+
═══════════════════════════════════════════════════════ -->
|
|
249
|
+
<tr>
|
|
250
|
+
<td class="pad" bgcolor="#111111" style="background-color:#111111;padding:8px 32px 48px;">
|
|
251
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
252
|
+
<tr>
|
|
253
|
+
<td bgcolor="#D8F90A" style="background-color:#D8F90A;border-radius:14px;padding:52px 40px;text-align:center;">
|
|
254
|
+
<h2 class="h2-cta" style="margin:0 0 14px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:40px;font-weight:400;line-height:1.02;color:#1A1A1A;letter-spacing:-0.02em;">[CTA CALLOUT HEADLINE]</h2>
|
|
255
|
+
<p style="margin:0 0 28px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:17px;line-height:1.55;color:#2A2A2A;max-width:420px;margin-left:auto;margin-right:auto;margin-bottom:28px;">[CTA CALLOUT BODY — one punchy sentence]</p>
|
|
256
|
+
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
|
257
|
+
<tr>
|
|
258
|
+
<td align="center" bgcolor="#111111" style="background-color:#111111;border-radius:8px;">
|
|
259
|
+
<a href="[CTA_URL]" target="_blank" style="display:inline-block;padding:15px 36px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#F2F2F2;text-decoration:none;letter-spacing:0.01em;">[CTA BUTTON TEXT]</a>
|
|
260
|
+
</td>
|
|
261
|
+
</tr>
|
|
262
|
+
</table>
|
|
263
|
+
</td>
|
|
264
|
+
</tr>
|
|
265
|
+
</table>
|
|
266
|
+
</td>
|
|
267
|
+
</tr>
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
<!-- ══════════════════════════════════════════════════════
|
|
271
|
+
SECTION: FOOTER
|
|
272
|
+
Brand name + company info + divider + unsubscribe
|
|
273
|
+
═══════════════════════════════════════════════════════ -->
|
|
274
|
+
<tr>
|
|
275
|
+
<td bgcolor="#080808" style="background-color:#080808;border-top:1px solid #1E1E1E;padding:44px 40px 52px;">
|
|
276
|
+
<!-- Brand name -->
|
|
277
|
+
<p style="margin:0 0 8px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;color:#F2F2F2;text-align:center;letter-spacing:-0.01em;">[BRAND NAME]</p>
|
|
278
|
+
<!-- Company address -->
|
|
279
|
+
<p style="margin:0 0 32px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#555555;text-align:center;">[COMPANY NAME] · [CITY, COUNTRY]</p>
|
|
280
|
+
<!-- Rule -->
|
|
281
|
+
<table width="96" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto 28px;">
|
|
282
|
+
<tr>
|
|
283
|
+
<td bgcolor="#2A2A2A" style="background-color:#2A2A2A;height:1px;font-size:1px;line-height:1px;"> </td>
|
|
284
|
+
</tr>
|
|
285
|
+
</table>
|
|
286
|
+
<!-- Disclaimer (remove if not needed) -->
|
|
287
|
+
<p style="margin:0 0 16px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;line-height:1.6;color:#444444;text-align:center;">[DISCLAIMER — remove this line if not applicable]</p>
|
|
288
|
+
<!-- Unsubscribe links — replace variable with platform syntax -->
|
|
289
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#555555;text-align:center;">
|
|
290
|
+
<a href="[UNSUBSCRIBE_URL]" style="color:#777777;text-decoration:underline;">Unsubscribe</a>
|
|
291
|
+
|
|
|
292
|
+
<a href="[PREFERENCES_URL]" style="color:#777777;text-decoration:underline;">Manage preferences</a>
|
|
293
|
+
</p>
|
|
294
|
+
</td>
|
|
295
|
+
</tr>
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
</table>
|
|
299
|
+
<!-- ══════════════════════════════ end 600px container -->
|
|
300
|
+
|
|
301
|
+
</td>
|
|
302
|
+
</tr>
|
|
303
|
+
</table>
|
|
304
|
+
<!-- ═══════════════════════════════════════════ end outer wrapper -->
|
|
305
|
+
|
|
306
|
+
</body>
|
|
307
|
+
</html>
|