version: "1.0.0" name: marketing-email-chrome description: Reuse the August 2026 Deltalytix marketing and product-news email chrome lock when sending via Resend or Zeno. Use for latest-release broadcasts, fluid 100% width, hosted images, full-width CTAs, and send/copy rules. Do not originate campaign copy.

Marketing / product-news email chrome

Lock for Zeno and anyone sending marketing or product-news mail through Resend.

This is the August 2026 latest-release chrome: Hugo reviewed it in Hotmail, then on live EN/FR (2026-08-22). Reuse it. Do not invent a new shell.

Do not originate campaign copy in this file or in a send. Copy is Shake (EN) / Dumas (FR). Chrome only.

Scope

Use this lock for Resend broadcasts (latest-release, product news, similar audience mail).

Do not copy width or CTA chrome from the weekly recap React Email. components/emails/weekly-recap.tsx still uses a 680px inner table and a green #EFF5EC CTA panel from the earlier PR439 Zeno look. That is a different product mail (newsletter@…, app unsubscribe URLs). Auth templates live under supabase/templates/ and are also out of scope.

Width / mobile

This is the important rule.

Hotmail and iOS scale the whole letter down when an inner table is locked at 680px or 800px. The result looks skinny. Do not set width="680", width="800", or max-width: 680px / 800px on the inner canvas.

• Shell is width="100%" / max-width: 100%.
• Outer pad is 0.
• Content pad is about 12px left and right.
• Desktop screenshots are huge. If img width is 760+ and the client ignores max-width, the canvas zooms out.

Head

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />

Optional mobile CSS

At max-width: 620px, target .email-shell, .email-pad, and .fluid-img.

@media only screen and (max-width: 620px) {
  .email-shell,
  .email-pad,
  .fluid-img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

Shell

Table layout only. Inline styles. No flex or grid.

<table class="dm-bg email-shell" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%; max-width:100%;">
  <tr>
    <td class="dm-bg" align="center" style="padding:0;">
      <table class="dm-bg" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%; max-width:100%;">
        <tr>
          <td class="email-pad" style="padding-left:12px; padding-right:12px;">
            <!-- content -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Images

Hosted HTTPS on https://www.deltalytix.app/ only. Never CID — MCP payloads are too large.

• Brand marks: https://www.deltalytix.app/brand/deltalytix-mark.png and https://www.deltalytix.app/brand/deltalytix-mark-light.png, 22px, dual light/dark swap.
• Screenshots: existing /updates/… shots already hosted on that origin. No version names in filenames or copy (no v5 / v6).
• Privacy is often text-only when there is no hosted crop. Do not invent a crop.

Content images:

• HTML width="600" (not 760+).
• Class fluid-img.
• Style: display:block; width:100%; max-width:100% !important; height:auto !important;
• 1px border #E5E5E5, radius 6px.
• Never lock height.

<img
  class="fluid-img dm-image"
  src="https://www.deltalytix.app/updates/…/existing-shot.png"
  width="600"
  alt=""
  style="display:block; width:100%; max-width:100% !important; height:auto !important; border:1px solid #E5E5E5; border-radius:6px;"
/>

Chrome / CTAs

• Font stack: Geist, Arial, Helvetica, sans-serif.
• Table layout, inline styles, no flex/grid.
• Dark mode classes: dm-bg, dm-heading, dm-text, dm-button, dm-button-link, dm-image, dm-border.

Buttons

Dark buttons #222722, white 14px / 700, radius 6px, full width (table width="100%", link display:block; text-align:center).

Do not wrap the last CTA in a green #EFF5EC panel (dm-surface-green).

Two identical CTAs:

1. After the first content block (after the first screenshot, not under the H1).
2. After the sign-off.

<table class="dm-button" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
  <tr>
    <td class="dm-button" align="center" bgcolor="#222722" style="background-color:#222722; border-radius:6px;">
      <a class="dm-button-link" href="https://www.deltalytix.app/" style="display:block; text-align:center; font-family:Geist, Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; color:#ffffff; text-decoration:none;">
        <!-- CTA label from approved copy -->
      </a>
    </td>
  </tr>
</table>

Send

• From: Deltalytix <updates@eu.updates.deltalytix.app>
• Reply-to: hugo.demenez@deltalytix.app <!-- pragma: allowlist secret -->
• Greeting EN: {{{FIRST_NAME|Trader}}}
• Greeting FR: {{{FIRST_NAME|trader}}}
• Unsubscribe: {{{RESEND_UNSUBSCRIBE_URL}}}

• Open/click tracking off on eu.updates.deltalytix.app unless Hugo says otherwise.
• Confirm with Hugo before any live audience send. Designed template + his review first.
• Subject should invite open, not restate the H1.

Weekly recap cron uses newsletter@eu.updates.deltalytix.app and app unsubscribe links. Do not mix those into this broadcast chrome.

Copy

• Shake writes EN. Dumas writes FR. Do not originate campaign copy.
• Match UI labels (FR Modifier / Ajouter, not Edit / Add).
• No version names in filenames or copy (no v5 / v6).