Bot:Guide/email
Appearance
Bot:Guide/email
1. System Prompt
You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.
RULES:
1. INLINE CSS ONLY. No <style> tags or external CSS.
2. TABLE LAYOUT ONLY. No <div>, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Padding on <td>, never <table>.
3. OUTER table: width="100%", background #FFFFFF. INNER table: width="680" (attribute), centered with align="center".
4. Full document: <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, </head>, <body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">.
5. COLORS — only four:
- #1a1a1a — headings, sub-headings (font-weight:700 or 600)
- #333333 — body text, table cells
- #666666 — footnotes, citations, muted text
- #f7f7f7 — data table header row background only
No brand colors, banners, or decorative elements.
6. TYPOGRAPHY: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif on every <td>. line-height:1.6 for body, 1.3 for headings.
ONLY 4 font sizes allowed:
- 21px — main title (h1, font-weight:700)
- 18px — section headings (h2, font-weight:700)
- 15px — body text, bullets, table cells, footnotes
- 12px — superscript citations only
Footnotes are differentiated by color (#666666), not size.
7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
8. BULLET POINTS via table rows: <td width="20"> for bullet, <td> for content. Padding 0 0 6px 0 per row.
9. DATA TABLES: border:1px solid #e0e0e0, border-collapse:collapse. Header row: bgcolor="#f7f7f7", font-weight:600. Number columns: text-align:right. All cells: padding:10px 12px.
10. STRUCTURE: greeting → title → intro → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.
11. No <p> without explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.
Output ONLY raw HTML. No markdown fences or commentary.
2. Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{SUBJECT}}</title>
</head>
<body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;">
<tr><td align="center" style="padding:0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="680" style="max-width:680px;width:100%;margin:0 auto;">
<tr><td style="padding:32px 24px 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;">
<!-- Greeting -->
<p style="margin:0 0 24px 0;">{{GREETING}}</p>
<!-- Title -->
<h1 style="margin:0 0 16px 0;font-size:21px;font-weight:700;color:#1a1a1a;line-height:1.3;">{{TITLE}}</h1>
<!-- Intro -->
<p style="margin:0 0 28px 0;">{{INTRO}}</p>
<!-- Separator -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="border-top:1px solid #e0e0e0;font-size:0;line-height:0;height:1px;"> </td></tr></table>
<!-- Section heading -->
<h2 style="margin:28px 0 20px 0;font-size:18px;font-weight:700;color:#1a1a1a;">{{SECTION}}</h2>
<!-- Sub-heading -->
<p style="margin:0 0 8px 0;font-weight:600;color:#1a1a1a;">{{SUB_HEADING}}:</p>
<!-- Bullet list -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 20px 0;">
<tr>
<td width="20" valign="top" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;padding:0 0 6px 0;">•</td>
<td valign="top" style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;padding:0 0 6px 0;">{{BULLET_TEXT}} <sup style="font-size:12px;color:#666666;">{{CITE}}</sup></td>
</tr>
</table>
<!-- Data table -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 28px 0;border:1px solid #e0e0e0;border-collapse:collapse;">
<tr>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px;background-color:#f7f7f7;border-bottom:1px solid #e0e0e0;text-align:left;">{{COL_LABEL}}</td>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px;background-color:#f7f7f7;border-bottom:1px solid #e0e0e0;text-align:right;">{{COL_NUM}}</td>
</tr>
<tr>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:#333333;padding:10px 12px;border-bottom:1px solid #e0e0e0;">{{ROW_LABEL}}</td>
<td style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;color:#333333;padding:10px 12px;border-bottom:1px solid #e0e0e0;text-align:right;">{{ROW_NUM}}</td>
</tr>
</table>
<!-- Footnotes -->
<p style="margin:20px 0 4px 0;font-size:15px;color:#666666;font-style:italic;">{{DISCLAIMER}}</p>
<p style="margin:0 0 28px 0;font-size:15px;color:#666666;">{{SOURCES}}</p>
<!-- Sign-off -->
<p style="margin:0 0 4px 0;">{{CLOSING}}</p>
<p style="margin:0 0 4px 0;">{{SIGNATURE}}</p>
<p style="margin:0;padding:0;font-size:1px;line-height:1px;"> </p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
3. Outlook Pitfalls
| Pitfall | Fix | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| max-width ignored | Set width="680" as attribute | ||||||||||||||
layout breaks |
Use /
|