Revision as of 10:31, 2 April 2026

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

, Flexbox, or Grid. Use for all structure. Padding on

, never .

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

. 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: with 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 paragraph → 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

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>Template:SUBJECT</title>

</head> <body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">

between major sections. Use sparingly. 8. BULLET POINTS via table rows:
•	Content ^[1]

Template:GREETING

Template:TITLE

Template:INTRO

Template:SECTION

Template:SUB HEADING:

•

Template:BULLET TEXT ^{Template:CITE}

</body> </html>

3. Outlook Pitfalls

| Pitfall | Fix | |---------------------------------|------------------------------------------------| | max-width ignored | Set width="680" as attribute |

|

layout breaks | Use /

only |

| <style> block stripped | Inline all CSS |

| Padding on | Move to

| | Bare

@@ Line 1: / Line 1: @@
+== Bot:Guide/email ==
-== AI HTML Email Generation Spec ==
 === 1. System Prompt ===
+You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.
-<syntaxhighlight lang="text">
-You are an expert email developer. Generate raw HTML for a branded email.
 RULES:
 . INLINE CSS ONLY. No <style> tags or external CSS.
-. TABLE LAYOUT ONLY. No <div> layout, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Apply padding to <td>, never <table>.
+. 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>.
-. OUTER table: width="100%", background #F4F5F7. INNER table: width="600" (attribute, not max-width), background #FFFFFF, centered with align="center".
+. OUTER table: width="100%", background #FFFFFF. INNER table: width="680" (attribute), centered with align="center".
-. Full document: <!DOCTYPE html>, <html>, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, <meta name="color-scheme" content="light dark">, </head>, <body style="margin:0;padding:0;">.
+. 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%;">.
+. COLORS — only four:
-. COLORS: Outer #F4F5F7, Inner #FFFFFF, Text #333333, Brand #00008F. Set both inline style AND bgcolor attribute on every colored <td>/<table>.
+   - #1a1a1a — headings, sub-headings (font-weight:700 or 600)
-. TYPOGRAPHY: font-family: Arial, Helvetica, sans-serif on every <td>. line-height in px (e.g. 22px). Use ONLY 3 font sizes: 20px (header), 14px (body/CTA), 12px (footer/captions). No other sizes.
+   - #333333 — body text, table cells
-. BUTTONS: <table align="center"><tr><td bgcolor="#00008F" style="border-radius:4px;"><a href="{{URL}}" style="background:#00008F;color:#fff;padding:14px 28px;text-decoration:none;font-weight:bold;display:inline-block;font-family:Arial,Helvetica,sans-serif;">CTA</a></td></tr></table>
+   - #666666 — footnotes, citations, muted text
-. IMAGES: Every <img> needs display:block, width/height attributes, alt text, border="0".
+   - #f7f7f7 — data table header row background only
-. STRUCTURE: Hidden preheader <span> first, branded header row, body rows, centered CTA, muted footer (12px, #777777) with unsubscribe link.
+   No brand colors, banners, or decorative elements.
-. Avoid bare <p>; if used, set margin:0 0 16px 0 explicitly.
+. 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.
+. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
+. BULLET POINTS via table rows:
+   <tr>
+     <td width="20" valign="top" style="...;padding:0 0 6px 0;">&bull;</td>
+     <td valign="top" style="...;padding:0 0 6px 0;">Content <sup style="font-size:12px;color:#666666;">[1]</sup></td>
+   </tr>
+. 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.
+. STRUCTURE: greeting → title → intro paragraph → 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.
+. No <p> without explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
+. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.
 Output ONLY raw HTML. No markdown fences or commentary.
-</syntaxhighlight>
 === 2. Skeleton ===
-<syntaxhighlight lang="html">
 <!DOCTYPE html>
 <html lang="en">
@@ Line 29: / Line 43: @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="color-scheme" content="light dark">
   <title>{{SUBJECT}}</title>
 </head>
-<body style="margin:0;padding:0;background:#F4F5F7;">
+<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;">
-<span style="display:none;max-height:0;overflow:hidden;mso-hide:all;">{{PREHEADER}}</span>
+<tr><td align="center" style="padding:0;">
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#F4F5F7;">
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="680" style="max-width:680px;width:100%;margin:0 auto;">
-<tr><td align="center" style="padding:40px 0;">
+  <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;">
-  <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="background:#ffffff;">
-    <tr><td align="center" bgcolor="#00008F" style="background:#00008F;color:#fff;padding:20px;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:bold;">{{BRAND}}</td></tr>
+    <!-- Greeting -->
-    <tr><td style="padding:30px;font-family:Arial,Helvetica,sans-serif;color:#333;font-size:14px;line-height:22px;">
-      <p style="margin:0 0 16px 0;">Hello,</p>
+    <p style="margin:0 0 24px 0;">{{GREETING}}</p>
-      <p style="margin:0 0 16px 0;">Content here.</p>
+    <!-- Title -->
-      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:30px auto;"><tr><td bgcolor="#00008F" style="background:#00008F;border-radius:4px;"><a href="{{CTA_URL}}" style="background:#00008F;color:#fff;padding:14px 28px;text-decoration:none;font-weight:bold;display:inline-block;font-family:Arial,Helvetica,sans-serif;">Action</a></td></tr></table>
+    <h1 style="margin:0 0 16px 0;font-size:21px;font-weight:700;color:#1a1a1a;line-height:1.3;">{{TITLE}}</h1>
-    </td></tr>
-    <tr><td align="center" bgcolor="#f9f9f9" style="background:#f9f9f9;padding:20px;font-family:Arial,Helvetica,sans-serif;color:#777;font-size:12px;line-height:18px;border-top:1px solid #eee;">Automated message. <a href="{{UNSUB}}" style="color:#777;text-decoration:underline;">Unsubscribe</a></td></tr>
+    <!-- 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;">&nbsp;</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;">&bull;</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;">&nbsp;</p>
+  </td></tr>
   </table>
 </td></tr>
@@ Line 49: / Line 104: @@
 </body>
 </html>
-</syntaxhighlight>
 === 3. Outlook Pitfalls ===
+| Pitfall                         | Fix                                            |
-{| class="wikitable"
+|---------------------------------|------------------------------------------------|
-|-
+| max-width ignored               | Set width="680" as attribute                   |
-! Pitfall !! Fix
+| <div> layout breaks             | Use <table>/<td> only                          |
-|-
+| <style> block stripped           | Inline all CSS                                 |
-| max-width ignored || Fixed width="600" attribute
+| Padding on <table>              | Move to <td>                                   |
-|-
+| Bare <p> extra spacing           | Explicit margin:0 0 Npx 0                      |
-| <div> layout breaks || Use <table>/<td> only
+| Unitless line-height rendering  | Acceptable at 1.6; use px if issues arise      |
-|-
+| System fonts missing            | Stack ends with Arial, sans-serif as fallback  |
-| CSS background on <a> ignored || bgcolor on parent <td>
+| bgcolor not applied             | Set both bgcolor attr AND style on data table  |
-|-
-| <style> block stripped || Inline all CSS
-|-
-| Images collapse || Set width, height, display:block, border="0"
-|-
-| Unitless line-height || Use px values
-|-
-| Padding on <table> || Move to <td>
-|-
-| Bare <p> extra spacing || Explicit margin:0 0 16px 0
-|}