Email Marketing Skill
Produce a single HTML email — centered, single column, no chrome around the
email body. Treat it like a marketing artifact: one big idea, one CTA.
Workflow
- Read the active DESIGN.md (injected above). Email leans on the display
font more than any other surface — pick the loudest type token in the DS
for the headline lockup.
- Pick the brand + product from the brief. Generate a real wordmark, a
real product name, and one real benefit sentence — no placeholders.
- Layout, in order, all centered inside a 600–680px column on a tinted
page background (so the email body looks like an email, not the page):
- Masthead — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
MEMBERS) on the right. Thin underline.
- Hero block — a 16:9 product image placeholder. Use a DS-tinted
gradient or a stylized SVG silhouette of the product (shoe, bottle,
headphones, whatever the brief implies). Add a tiny brand stamp on the
top-left and a colorway tag on the bottom-left.
- Eyebrow — small caps, accent color, separated by
· characters
(e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
- Headline lockup — 2–3 line headline using the display font, all caps,
extra-tight tracking. Apply a slight skew (
transform: skew(-6deg)) on
one accent word to give it a sporty parallelogram feel.
- Body — 2–3 sentence paragraph, left-aligned, body font.
- Primary CTA — solid pill or block button. One only.
- Specs grid — 2×2 grid of (big number + unit + label) callouts using
the display font for the numbers.
- Footer — wordmark, address line, unsubscribe + view-in-browser links.
- Write a single HTML document:
<!doctype html> through </html>, CSS inline.- Center the column with
margin: 0 auto. Set body { background: <tint> }
so the email-on-page metaphor reads.
- No external images — use inline SVG or DS-tinted gradient blocks for the
product photo.
data-od-id on the masthead, hero, headline, CTA, specs.
- Self-check:
- Email reads top to bottom in 8–10 seconds.
- One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
- Looks legible on a 480px window (column reflows, type drops one step).
Output contract
Emit between <artifact> tags:
<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
1---2name: email-marketing3description: A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".4---5
6# Email Marketing Skill
7
8Produce a single HTML email — centered, single column, no chrome around the
9email body. Treat it like a marketing artifact: one big idea, one CTA.
10
11## Workflow
12
131. **Read the active DESIGN.md** (injected above). Email leans on the display
14 font more than any other surface — pick the loudest type token in the DS
15 for the headline lockup.
162. **Pick the brand + product** from the brief. Generate a real wordmark, a
17 real product name, and one real benefit sentence — no placeholders.
183. **Layout**, in order, all centered inside a 600–680px column on a tinted
19 page background (so the email body looks like an email, not the page):
20 - **Masthead** — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
21 MEMBERS) on the right. Thin underline.
22 - **Hero block** — a 16:9 product image placeholder. Use a DS-tinted
23 gradient or a stylized SVG silhouette of the product (shoe, bottle,
24 headphones, whatever the brief implies). Add a tiny brand stamp on the
25 top-left and a colorway tag on the bottom-left.
26 - **Eyebrow** — small caps, accent color, separated by `·` characters
27 (e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
28 - **Headline lockup** — 2–3 line headline using the display font, all caps,
29 extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on
30 one accent word to give it a sporty parallelogram feel.
31 - **Body** — 2–3 sentence paragraph, left-aligned, body font.
32 - **Primary CTA** — solid pill or block button. One only.
33 - **Specs grid** — 2×2 grid of (big number + unit + label) callouts using
34 the display font for the numbers.
35 - **Footer** — wordmark, address line, unsubscribe + view-in-browser links.
364. **Write** a single HTML document:
37 - `<!doctype html>` through `</html>`, CSS inline.
38 - Center the column with `margin: 0 auto`. Set `body { background: <tint> }`
39 so the email-on-page metaphor reads.
40 - No external images — use inline SVG or DS-tinted gradient blocks for the
41 product photo.
42 - `data-od-id` on the masthead, hero, headline, CTA, specs.
435. **Self-check**:
44 - Email reads top to bottom in 8–10 seconds.
45 - One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
46 - Looks legible on a 480px window (column reflows, type drops one step).
47
48## Output contract
49
50Emit between `<artifact>` tags:
51
52```
53<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
54<!doctype html>
55<html>...</html>
56</artifact>
57```
58
59One sentence before the artifact, nothing after.
gabrielmoreira