email-marketing

1# Email Marketing Skill
2 
3Produce a single HTML email — centered, single column, no chrome around the
4email body. Treat it like a marketing artifact: one big idea, one CTA.
5 
6## Workflow
7 
81. **Read the active DESIGN.md** (injected above). Email leans on the display
9   font more than any other surface — pick the loudest type token in the DS
10   for the headline lockup.
112. **Pick the brand + product** from the brief. Generate a real wordmark, a
12   real product name, and one real benefit sentence — no placeholders.
133. **Layout**, in order, all centered inside a 600–680px column on a tinted
14   page background (so the email body looks like an email, not the page):
15   - **Masthead** — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
16     MEMBERS) on the right. Thin underline.
17   - **Hero block** — a 16:9 product image placeholder. Use a DS-tinted
18     gradient or a stylized SVG silhouette of the product (shoe, bottle,
19     headphones, whatever the brief implies). Add a tiny brand stamp on the
20     top-left and a colorway tag on the bottom-left.
21   - **Eyebrow** — small caps, accent color, separated by `·` characters
22     (e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
23   - **Headline lockup** — 2–3 line headline using the display font, all caps,
24     extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on
25     one accent word to give it a sporty parallelogram feel.
26   - **Body** — 2–3 sentence paragraph, left-aligned, body font.
27…