diff --git a/ghost/core/core/server/services/member-welcome-emails/email-templates/wrapper.hbs b/ghost/core/core/server/services/member-welcome-emails/email-templates/wrapper.hbs
index d9b86760f66..18de7061f65 100644
--- a/ghost/core/core/server/services/member-welcome-emails/email-templates/wrapper.hbs
+++ b/ghost/core/core/server/services/member-welcome-emails/email-templates/wrapper.hbs
@@ -2,8 +2,8 @@
               <tr>
                 <td class="wrapper">
                   <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-                    <tr>
-                      <td>
+                    <tr class="post-content-row">
+                      <td class="post-content">
                         {{{content}}}
                       </td>
                     </tr>
@@ -13,11 +13,21 @@
               <tr>
                 <td class="wrapper" align="center">
                   <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-top: 40px; padding-bottom: 30px;">
+                    {{#if footerContent }}
+                      <tr>
+                        <td class="footer">{{{footerContent}}}</td>
+                      </tr>
+                    {{/if}}
                     <tr>
                       <td class="footer">
                         {{siteTitle}} &copy; {{year}} &mdash; <a href="{{managePreferencesUrl}}">{{t "Manage your preferences"}}</a>
                       </td>
                     </tr>
+                    {{#if showBadge }}
+                      <tr>
+                        <td class="footer-powered"><a href="https://ghost.org/?via=pbg-newsletter"><img src="https://static.ghost.org/v4.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Powered by Ghost"></a></td>
+                      </tr>
+                    {{/if}}
                   </table>
                 </td>
               </tr>
diff --git a/ghost/core/core/server/services/member-welcome-emails/member-welcome-email-renderer.js b/ghost/core/core/server/services/member-welcome-emails/member-welcome-email-renderer.js
index 34251d03364..7cf8bdff9c1 100644
--- a/ghost/core/core/server/services/member-welcome-emails/member-welcome-email-renderer.js
+++ b/ghost/core/core/server/services/member-welcome-emails/member-welcome-email-renderer.js
@@ -1,25 +1,50 @@
 const fs = require('fs');
 const path = require('path');
 const lexicalLib = require('../../lib/lexical');
+const labs = require('../../../shared/labs');
 const {finalize} = require('../email-rendering/finalize');
 const errors = require('@tryghost/errors');
 const {MESSAGES} = require('./constants');
 const {wrapReplacementStrings} = require('../koenig/render-utils/replacement-strings');
 const linkReplacer = require('../lib/link-replacer');
 const {getEmailDesign} = require('../email-rendering/email-design');
+const {registerHelpers} = require('../email-service/helpers/register-helpers');
 
 const REPLACEMENT_REGEX = /%%\{(\w+?)(?:,? *"(.*?)")?\}%%/g;
 const UNMATCHED_TOKEN_REGEX = /%%\{.*?\}%%/g;
+const DEFAULT_DESIGN_SETTINGS = {
+    background_color: '#ffffff',
+    button_color: 'accent',
+    button_corners: null,
+    button_style: null,
+    divider_color: null,
+    footer_content: null,
+    header_background_color: null,
+    header_image: null,
+    image_corners: null,
+    link_color: 'accent',
+    link_style: null,
+    section_title_color: null,
+    show_badge: true,
+    show_header_title: true,
+    title_font_weight: 'bold'
+};
 
 class MemberWelcomeEmailRenderer {
     #wrapperTemplate;
 
     constructor({t}) {
         this.Handlebars = require('handlebars').create();
-        this.Handlebars.registerHelper('t', function (key, options) {
-            let hash = options?.hash;
-            return t(key, hash || options || {});
-        });
+        const useDesignCustomization = labs.isSet('welcomeEmailsDesignCustomization');
+
+        if (useDesignCustomization) {
+            registerHelpers(this.Handlebars, labs, t);
+        } else {
+            this.Handlebars.registerHelper('t', function (key, options) {
+                let hash = options?.hash;
+                return t(key, hash || options || {});
+            });
+        }
         const baseStylesSource = fs.readFileSync(
             path.join(__dirname, '../email-rendering/partials/base-styles.hbs'),
             'utf8'
@@ -35,9 +60,17 @@ class MemberWelcomeEmailRenderer {
         this.Handlebars.registerPartial('baseStyles', baseStylesSource);
         this.Handlebars.registerPartial('contentStyles', contentStylesSource);
         this.Handlebars.registerPartial('cardStyles', cardStylesSource);
-        this.Handlebars.registerPartial('styles',
-            '<style>\n{{>baseStyles}}\n{{>contentStyles}}\n{{>cardStyles}}\n</style>'
-        );
+        if (useDesignCustomization) {
+            const emailStylesSource = fs.readFileSync(
+                path.join(__dirname, '../email-service/email-templates/partials/styles.hbs'),
+                'utf8'
+            );
+            this.Handlebars.registerPartial('styles', emailStylesSource);
+        } else {
+            this.Handlebars.registerPartial('styles',
+                '<style>\n{{>baseStyles}}\n{{>contentStyles}}\n{{>cardStyles}}\n</style>'
+            );
+        }
         const emailWrapperSource = fs.readFileSync(
             path.join(__dirname, '../email-rendering/partials/email-wrapper.hbs'),
             'utf8'
@@ -108,25 +141,33 @@ class MemberWelcomeEmailRenderer {
      * @param {Object} options
      * @param {string} options.lexical - Lexical JSON string to render
      * @param {string} options.subject - Email subject (may contain template variables)
+     * @param {Object} [options.designSettings] - Email design settings loaded from the database
      * @param {Object} options.member - Member data (name, email)
      * @param {Object} options.siteSettings - Site settings (title, url, accentColor)
      * @returns {Promise<{html: string, text: string, subject: string}>}
      */
-    async render({lexical, subject, member, siteSettings}) {
+    async render({lexical, subject, designSettings = {}, member, siteSettings}) {
+        const useDesignCustomization = labs.isSet('welcomeEmailsDesignCustomization');
+
+        designSettings = useDesignCustomization ? {
+            ...DEFAULT_DESIGN_SETTINGS,
+            ...designSettings
+        } : DEFAULT_DESIGN_SETTINGS;
+
         const design = getEmailDesign({
             accentColor: siteSettings.accentColor,
-            backgroundColor: '#ffffff',
-            buttonColor: 'accent',
-            buttonCorners: null,
-            buttonStyle: null,
-            dividerColor: null,
-            headerBackgroundColor: null,
-            imageCorners: null,
-            linkColor: 'accent',
-            linkStyle: null,
+            backgroundColor: designSettings.background_color,
+            buttonColor: designSettings.button_color,
+            buttonCorners: designSettings.button_corners,
+            buttonStyle: designSettings.button_style,
+            dividerColor: designSettings.divider_color,
+            headerBackgroundColor: designSettings.header_background_color,
+            imageCorners: designSettings.image_corners,
+            linkColor: designSettings.link_color,
+            linkStyle: designSettings.link_style,
             postTitleColor: null,
-            sectionTitleColor: null,
-            titleFontWeight: 'bold'
+            sectionTitleColor: designSettings.section_title_color,
+            titleFontWeight: designSettings.title_font_weight
         });
 
         let content;
@@ -158,15 +199,39 @@ class MemberWelcomeEmailRenderer {
 
         const managePreferencesUrl = new URL('#/portal/account/newsletters', siteSettings.url).href;
         const year = new Date().getFullYear();
+        const headerImage = useDesignCustomization ? (designSettings.header_image || null) : null;
+        const showHeaderTitle = useDesignCustomization ? designSettings.show_header_title !== false : false;
+        const showBadge = useDesignCustomization ? designSettings.show_badge !== false : false;
 
         const html = this.#wrapperTemplate({
             content: contentWithAbsoluteLinks,
             emailTitle: subjectWithReplacements,
             subject: subjectWithReplacements,
+            footerContent: useDesignCustomization ? designSettings.footer_content : null,
+            hasHeaderContent: Boolean(headerImage || showHeaderTitle),
+            headerImage,
+            showBadge,
+            showHeaderIcon: false,
+            showHeaderName: false,
+            showHeaderTitle,
+            site: {
+                title: siteSettings.title,
+                url: siteSettings.url
+            },
             siteTitle: siteSettings.title,
             siteUrl: siteSettings.url,
             managePreferencesUrl,
             year,
+            ctaBgColors: [
+                'grey',
+                'blue',
+                'green',
+                'yellow',
+                'red',
+                'pink',
+                'purple',
+                'white'
+            ],
             ...design,
             classes: {
                 container: 'container'
diff --git a/ghost/core/core/server/services/member-welcome-emails/service.js b/ghost/core/core/server/services/member-welcome-emails/service.js
index 85a78d3ca91..2c0db536095 100644
--- a/ghost/core/core/server/services/member-welcome-emails/service.js
+++ b/ghost/core/core/server/services/member-welcome-emails/service.js
@@ -1,5 +1,6 @@
 const logging = require('@tryghost/logging');
 const errors = require('@tryghost/errors');
+const labs = require('../../../shared/labs');
 const urlUtils = require('../../../shared/url-utils');
 const settingsCache = require('../../../shared/settings-cache');
 const emailAddressService = require('../email-address');
@@ -93,21 +94,30 @@ class MemberWelcomeEmailService {
         return this.#defaultNewsletterSenderOptions;
     }
 
+    #useDesignCustomization() {
+        return labs.isSet('welcomeEmailsDesignCustomization');
+    }
+
     async loadMemberWelcomeEmails() {
         this.#defaultNewsletterSenderOptions = await this.#getDefaultNewsletterSenderOptions();
 
         for (const [memberStatus, slug] of Object.entries(MEMBER_WELCOME_EMAIL_SLUGS)) {
-            const row = await AutomatedEmail.findOne({slug});
+            const row = this.#useDesignCustomization()
+                ? await AutomatedEmail.findOne({slug}, {withRelated: ['emailDesignSetting']})
+                : await AutomatedEmail.findOne({slug});
 
             if (!row || !row.get('lexical')) {
                 this.#memberWelcomeEmails[memberStatus] = null;
                 continue;
             }
 
+            const designSettings = this.#useDesignCustomization() ? row.related('emailDesignSetting') : null;
+
             this.#memberWelcomeEmails[memberStatus] = {
                 lexical: row.get('lexical'),
                 subject: row.get('subject'),
                 status: row.get('status'),
+                designSettings: designSettings?.id ? designSettings.toJSON() : null,
                 senderName: row.get('sender_name'),
                 senderEmail: row.get('sender_email'),
                 senderReplyTo: row.get('sender_reply_to')
@@ -147,6 +157,7 @@ class MemberWelcomeEmailService {
         const {html, text, subject} = await this.#renderer.render({
             lexical: memberWelcomeEmail.lexical,
             subject: memberWelcomeEmail.subject,
+            designSettings: memberWelcomeEmail.designSettings,
             member: {
                 name: member.name,
                 email: member.email,
@@ -181,7 +192,9 @@ class MemberWelcomeEmailService {
 
     async sendTestEmail({email, subject, lexical, automatedEmailId}) {
         // Still validate the automated email exists (for permission purposes)
-        const automatedEmail = await AutomatedEmail.findOne({id: automatedEmailId});
+        const automatedEmail = this.#useDesignCustomization()
+            ? await AutomatedEmail.findOne({id: automatedEmailId}, {withRelated: ['emailDesignSetting']})
+            : await AutomatedEmail.findOne({id: automatedEmailId});
 
         if (!automatedEmail) {
             throw new errors.NotFoundError({
@@ -207,9 +220,12 @@ class MemberWelcomeEmailService {
             uuid: '00000000-0000-4000-8000-000000000000'
         };
 
+        const designSettings = this.#useDesignCustomization() ? automatedEmail.related('emailDesignSetting') : null;
+
         const {html, text, subject: renderedSubject} = await this.#renderer.render({
             lexical,
             subject,
+            designSettings: designSettings?.id ? designSettings.toJSON() : null,
             member: testMember,
             siteSettings: this.#getSiteSettings()
         });
@@ -230,20 +246,25 @@ class MemberWelcomeEmailService {
 
 class MemberWelcomeEmailServiceWrapper {
     init() {
-        if (this.api) {
+        const useDesignCustomization = labs.isSet('welcomeEmailsDesignCustomization');
+
+        if (this.api && this.useDesignCustomization === useDesignCustomization) {
             return;
         }
 
-        const i18nLib = require('@tryghost/i18n');
-        const events = require('../../lib/common/events');
+        if (!this.i18n) {
+            const i18nLib = require('@tryghost/i18n');
+            const events = require('../../lib/common/events');
 
-        const i18n = i18nLib(settingsCache.get('locale') || 'en', 'ghost');
+            this.i18n = i18nLib(settingsCache.get('locale') || 'en', 'ghost');
 
-        events.on('settings.locale.edited', (model) => {
-            i18n.changeLanguage(model.get('value'));
-        });
+            events.on('settings.locale.edited', (model) => {
+                this.i18n.changeLanguage(model.get('value'));
+            });
+        }
 
-        this.api = new MemberWelcomeEmailService({t: i18n.t});
+        this.useDesignCustomization = useDesignCustomization;
+        this.api = new MemberWelcomeEmailService({t: this.i18n.t});
     }
 }
 
diff --git a/ghost/core/test/integration/services/__snapshots__/member-welcome-emails-snapshot.test.js.snap b/ghost/core/test/integration/services/__snapshots__/member-welcome-emails-snapshot.test.js.snap
index 6b06864395f..d11f0afee04 100644
--- a/ghost/core/test/integration/services/__snapshots__/member-welcome-emails-snapshot.test.js.snap
+++ b/ghost/core/test/integration/services/__snapshots__/member-welcome-emails-snapshot.test.js.snap
@@ -1,5 +1,3082 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Member Welcome Email Renderer Snapshots labs flag on renders a simple paragraph welcome email 1 1`] = `
+Object {
+  "html": "<!doctype html>
+<html>
+    <head>
+        <meta name=\\"viewport\\" content=\\"width=device-width\\">
+        <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+        <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
+        <title>Welcome to Test Site</title>
+        <style>
+@media only screen and (max-width: 620px) {
+  table.body {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  table.body .content {
+    padding: 0 !important;
+  }
+
+  table.body .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table.body .main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.body .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .apple-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+@media only screen and (max-width: 620px) {
+  table[class=body] h1 {
+    font-size: 28px !important;
+    margin-bottom: 10px !important;
+  }
+
+  table[class=body] p,
+table[class=body] ul,
+table[class=body] ol,
+table[class=body] td,
+table[class=body] span,
+table[class=body] a {
+    font-size: 16px !important;
+  }
+
+  table[class=body] .wrapper,
+table[class=body] .article {
+    padding: 10px !important;
+  }
+
+  table[class=body] .content {
+    padding: 0 !important;
+  }
+
+  table[class=body] .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table[class=body] .main {
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table[class=body] .btn table {
+    width: 100% !important;
+  }
+
+  table[class=body] .btn a {
+    width: 100% !important;
+  }
+
+  table[class=body] .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+
+  table[class=body] p[class=small],
+table[class=body] a[class=small] {
+    font-size: 11px !important;
+  }
+}
+.kg-nft-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 14px;
+  line-height: 1.3em;
+  padding-top: 4px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 4px;
+}
+.kg-twitter-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 15px;
+  padding: 8px;
+  line-height: 1.3em;
+}
+.kg-cta-link-accent .kg-cta-sponsor-label a {
+  color: #15212A !important;
+}
+.kg-cta-text a:not(.kg-cta-link-accent .kg-cta-text a) {
+  color: #15212A;
+  text-decoration: underline;
+}
+.kg-cta-link-accent .kg-cta-text a {
+  color: #15212A !important;
+}
+@media only screen and (max-width: 620px) {
+  table.body .kg-bookmark-card {
+    width: 90vw;
+  }
+
+  table.body .kg-bookmark-thumbnail {
+    display: none !important;
+  }
+
+  table.body .kg-bookmark-metadata span {
+    font-size: 13px !important;
+  }
+
+  table.body .kg-embed-card {
+    max-width: 90vw !important;
+  }
+
+  table.body .kg-cta-card {
+    padding: 0 20px;
+  }
+
+  table.body .kg-cta-card.kg-cta-bg-none {
+    padding: 0;
+  }
+
+  table.body .kg-cta-sponsor-label {
+    padding: 10px 0;
+  }
+
+  table.body table.kg-cta-content-wrapper:not(.kg-cta-bg-none.kg-cta-no-dividers table.kg-cta-content-wrapper) {
+    padding: 20px 0;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-has-img:not(.kg-cta-bg-none):not(.kg-cta-no-label) table.kg-cta-content-wrapper {
+    padding-top: 0;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    padding-right: 20px;
+  }
+
+  table.body .kg-cta-immersive .kg-cta-image-container {
+    padding-bottom: 20px;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-no-text .kg-cta-image-container {
+    padding-bottom: 0;
+  }
+
+  table.body .kg-cta-button-container {
+    padding-top: 16px;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+    padding-bottom: 16px !important;
+    padding-right: 0 !important;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-content-inner {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  table.body .kg-cta-minimal img.kg-cta-image {
+    width: 52px !important;
+    height: 52px !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .recipient-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+.post-title-link {
+  display: block;
+  margin-top: 32px;
+  color: #15212A;
+  text-align: center;
+  line-height: 1.1em;
+}
+.post-title-link-left {
+  text-align: left;
+}
+.view-online-link {
+  word-wrap: none;
+  white-space: nowrap;
+  color: #15212a;
+  color: rgba(0, 0, 0, 0.6);
+  text-decoration: underline !important;
+}
+.kg-audio-link {
+  color: #15212a !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+@media only screen and (max-width: 620px) {
+  .hide-mobile {
+    display: none;
+  }
+
+  .mobile-only {
+    display: initial !important;
+  }
+
+  .hide-desktop {
+    display: initial !important;
+  }
+
+  .desktop-only {
+    display: none !important;
+  }
+
+  table.body p,
+table.body ul,
+table.body ol,
+table.body td {
+    font-size: 16px;
+  }
+
+  table.header .post-excerpt {
+    font-size: 16px !important;
+  }
+
+  table.body .kg-callout-card {
+    padding: 16px 24px !important;
+  }
+
+  table.body .kg-callout-text {
+    font-size: 16px !important;
+    line-height: 1.5em !important;
+  }
+
+  table.body pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+
+  table.body .main,
+table.header .header-main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.header .site-icon {
+    padding-top: 0 !important;
+  }
+
+  table.header .site-info {
+    padding-top: 24px !important;
+  }
+
+  table.header .post-title-link {
+    margin-top: 24px !important;
+  }
+
+  table.header .post-meta-wrapper {
+    padding-bottom: 24px !important;
+  }
+
+  table.header .site-icon img {
+    width: 36px !important;
+    height: 36px !important;
+  }
+
+  table.header .site-url a {
+    font-size: 13px !important;
+    padding-bottom: 16px !important;
+  }
+
+  table.header .post-meta,
+table.header .post-meta-date {
+    white-space: normal !important;
+    font-size: 13px !important;
+    line-height: 1.2em;
+  }
+
+  table.header .post-meta,
+table.header .view-online {
+    width: 100% !important;
+  }
+
+  table.header .post-meta-left,
+table.header .post-meta-left.view-online {
+    width: 100% !important;
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online-mobile {
+    display: table-row !important;
+  }
+
+  table.header .post-meta-left.view-online-mobile,
+table.header .post-meta-left.view-online-mobile .view-online {
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online.desktop {
+    display: none !important;
+  }
+
+  table.header .view-online {
+    text-decoration: underline;
+  }
+
+  table.body .footer p,
+table.body .footer p span {
+    font-size: 13px !important;
+  }
+
+  table.header .view-online-link,
+table.body .footer,
+table.body .footer a {
+    font-size: 13px !important;
+  }
+
+  table.header .post-title a {
+    font-size: 26px !important;
+    line-height: 1.1em !important;
+  }
+
+  table.feedback-buttons {
+    display: table !important;
+    width: 100% !important;
+    max-width: 390px;
+  }
+
+  table.feedback-buttons img {
+    display: inherit !important;
+  }
+
+  table.body .feedback-button-text {
+    display: none!important;
+  }
+
+  table.body .latest-posts-header {
+    font-size: 12px !important;
+  }
+
+  table.body .latest-post-title {
+    padding-right: 8px !important;
+  }
+
+  table.body .latest-post h4,
+table.body .latest-post h4 span {
+    padding: 4px 0 6px !important;
+    font-size: 15px !important;
+  }
+
+  table.body .latest-post-excerpt,
+table.body .latest-post-excerpt a,
+table.body .latest-post-excerpt span {
+    font-size: 13px !important;
+    line-height: 1.2 !important;
+  }
+
+  table.body .subscription-box h3 {
+    font-size: 14px !important;
+  }
+
+  table.body .subscription-box p,
+table.body .subscription-box p span {
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details,
+table.body .manage-subscription {
+    display: inline-block;
+    width: 100%;
+    text-align: left !important;
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details {
+    padding-bottom: 12px;
+  }
+
+  table.body h1 {
+    font-size: 32px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h2,
+table.body h2 span {
+    font-size: 26px !important;
+    line-height: 1.22em !important;
+  }
+
+  table.body h3 {
+    font-size: 21px !important;
+    line-height: 1.25em !important;
+  }
+
+  table.body h4 {
+    font-size: 19px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h5 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body h6 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote {
+    font-size: 16px !important;
+    line-height: 1.6em;
+    margin-bottom: 0;
+  }
+
+  table.body blockquote p {
+    margin-right: 15px !important;
+    margin-left: 15px !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt {
+    border-left: 0 none !important;
+    margin: 0 !important;
+    font-size: 18px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt p {
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+  }
+
+  table.body hr {
+    margin: 2em 0 !important;
+  }
+
+  .feature-image-caption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption p,
+.kg-card-figcaption p span {
+    font-size: 13px!important;
+  }
+}
+@media all {
+  .subscription-details p.hidden {
+    display: none !important;
+  }
+}
+</style>
+        <!--[if mso]>
+        <style type=\\"text/css\\">
+            ul, ol { margin-left: 1.5em !important; } 
+        </style>
+        <![endif]-->
+    </head>
+    <body data-testid=\\"email-preview-body\\" style=\\"background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 0; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #15212A;\\">
+        <span class=\\"preheader\\" style=\\"color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;\\"></span>
+        <!-- SPACING TO AVOID BODY TEXT BEING DUPLICATED IN PREVIEW TEXT -->
+        <div style=\\"display:none; max-height:0; overflow:hidden; mso-hide: all;\\" aria-hidden=\\"true\\" role=\\"presentation\\">
+            
+        </div>
+
+        <!-- HEADER WITH FULL-WIDTH BACKGROUND -->
+            <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header\\" width=\\"100%\\" style=\\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; line-height: 1.4; background-color: #ffffff; width: 100%; border-spacing: 0; border-collapse: collapse;\\" bgcolor=\\"#ffffff\\">
+                <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+                <!--[if mso]>
+                <tr>
+                    <td>
+                        <center>
+                            <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+                <![endif]-->
+                <tr>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                    <td class=\\"container\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                        <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <!-- Header content constrained to 600px -->
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header-main\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: transparent;\\" width=\\"100%\\" bgcolor=\\"transparent\\">
+                            <tr>
+                                <td class=\\"header-content\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding: 0; margin: 0 auto;\\" valign=\\"top\\">
+                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+
+                                            <tr class=\\"site-info-row\\">
+                                                <td class=\\"site-info\\" width=\\"100%\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding-top: 32px; padding-bottom: 32px;\\" valign=\\"top\\">
+                                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\" width=\\"100%\\">
+                                                            <tr>
+                                                                <td class=\\"site-url site-url-bottom-padding\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212A; font-size: 16px; letter-spacing: -0.1px; font-weight: 700; text-transform: uppercase; text-align: center; padding-bottom: 12px;\\" valign=\\"top\\" align=\\"center\\"><div style=\\"width: 100% !important;\\"><a href=\\"http://example.com\\" class=\\"site-title\\" style=\\"text-decoration: none; color: #15212A; overflow-wrap: anywhere;\\">Test Site</a></div></td>
+                                                            </tr>
+
+                                                    </table>
+                                                </td>
+                                            </tr>
+
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                        </div>
+                    </td>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                </tr>
+                <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+                <![endif]-->
+            </table>
+
+        <!-- MAIN CONTENT AREA -->
+        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"body\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; line-height: 1.4; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+            <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+            <!--[if mso]>
+            <tr>
+                <td>
+                    <center>
+                        <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+            <![endif]-->
+            <tr>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                <td class=\\"container\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; display: block; max-width: 600px; margin: 0 auto;\\" valign=\\"top\\">
+                    <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"main\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+                                          <tr>
+                                            <td class=\\"wrapper\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+                                                <tr>
+                                                  <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                                                    <p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Welcome to our site!</p>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class=\\"wrapper\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-top: 40px; padding-bottom: 30px;\\">
+                                                <tr>
+                                                  <td class=\\"footer\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212a; color: rgba(0, 0, 0, 0.6); margin-top: 20px; text-align: center; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; padding-right: 30px; line-height: 1.5em; font-size: 13px;\\" valign=\\"top\\" align=\\"center\\">
+                                                    Test Site &copy; 2020 &mdash; <a href=\\"http://example.com/#/portal/account/newsletters\\" style=\\"overflow-wrap: anywhere; color: #15212a; color: rgba(0, 0, 0, 0.6); text-decoration: underline; font-size: 13px;\\">Manage your preferences</a>
+                                                  </td>
+                                                </tr>
+                                                  <tr>
+                                                    <td class=\\"footer-powered\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; text-align: center; padding-top: 70px; padding-bottom: 40px;\\" valign=\\"top\\" align=\\"center\\"><a href=\\"https://ghost.org/?via=pbg-newsletter\\" style=\\"color: #15212A; text-decoration: none; overflow-wrap: anywhere;\\"><img src=\\"https://static.ghost.org/v4.0.0/images/powered.png\\" border=\\"0\\" width=\\"142\\" height=\\"30\\" class=\\"gh-powered\\" alt=\\"Powered by Ghost\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; width: 142px; height: 30px;\\"></a></td>
+                                                  </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                        </table>
+                        <!-- END CENTERED WHITE CONTAINER -->
+                    </div>
+                </td>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+            </tr>
+
+            <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+            <![endif]-->
+        </table>
+    </body>
+</html>
+",
+  "plaintext": "
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site [http://example.com]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Welcome to our site!
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site © 2020 — Manage your preferences [http://example.com/#/portal/account/newsletters]
+
+
+
+https://ghost.org/?via=pbg-newsletter
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+",
+}
+`;
+
+exports[`Member Welcome Email Renderer Snapshots labs flag on renders fallback values when member has no name 1 1`] = `
+Object {
+  "html": "<!doctype html>
+<html>
+    <head>
+        <meta name=\\"viewport\\" content=\\"width=device-width\\">
+        <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+        <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
+        <title>Welcome!</title>
+        <style>
+@media only screen and (max-width: 620px) {
+  table.body {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  table.body .content {
+    padding: 0 !important;
+  }
+
+  table.body .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table.body .main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.body .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .apple-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+@media only screen and (max-width: 620px) {
+  table[class=body] h1 {
+    font-size: 28px !important;
+    margin-bottom: 10px !important;
+  }
+
+  table[class=body] p,
+table[class=body] ul,
+table[class=body] ol,
+table[class=body] td,
+table[class=body] span,
+table[class=body] a {
+    font-size: 16px !important;
+  }
+
+  table[class=body] .wrapper,
+table[class=body] .article {
+    padding: 10px !important;
+  }
+
+  table[class=body] .content {
+    padding: 0 !important;
+  }
+
+  table[class=body] .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table[class=body] .main {
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table[class=body] .btn table {
+    width: 100% !important;
+  }
+
+  table[class=body] .btn a {
+    width: 100% !important;
+  }
+
+  table[class=body] .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+
+  table[class=body] p[class=small],
+table[class=body] a[class=small] {
+    font-size: 11px !important;
+  }
+}
+.kg-nft-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 14px;
+  line-height: 1.3em;
+  padding-top: 4px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 4px;
+}
+.kg-twitter-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 15px;
+  padding: 8px;
+  line-height: 1.3em;
+}
+.kg-cta-link-accent .kg-cta-sponsor-label a {
+  color: #15212A !important;
+}
+.kg-cta-text a:not(.kg-cta-link-accent .kg-cta-text a) {
+  color: #15212A;
+  text-decoration: underline;
+}
+.kg-cta-link-accent .kg-cta-text a {
+  color: #15212A !important;
+}
+@media only screen and (max-width: 620px) {
+  table.body .kg-bookmark-card {
+    width: 90vw;
+  }
+
+  table.body .kg-bookmark-thumbnail {
+    display: none !important;
+  }
+
+  table.body .kg-bookmark-metadata span {
+    font-size: 13px !important;
+  }
+
+  table.body .kg-embed-card {
+    max-width: 90vw !important;
+  }
+
+  table.body .kg-cta-card {
+    padding: 0 20px;
+  }
+
+  table.body .kg-cta-card.kg-cta-bg-none {
+    padding: 0;
+  }
+
+  table.body .kg-cta-sponsor-label {
+    padding: 10px 0;
+  }
+
+  table.body table.kg-cta-content-wrapper:not(.kg-cta-bg-none.kg-cta-no-dividers table.kg-cta-content-wrapper) {
+    padding: 20px 0;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-has-img:not(.kg-cta-bg-none):not(.kg-cta-no-label) table.kg-cta-content-wrapper {
+    padding-top: 0;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    padding-right: 20px;
+  }
+
+  table.body .kg-cta-immersive .kg-cta-image-container {
+    padding-bottom: 20px;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-no-text .kg-cta-image-container {
+    padding-bottom: 0;
+  }
+
+  table.body .kg-cta-button-container {
+    padding-top: 16px;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+    padding-bottom: 16px !important;
+    padding-right: 0 !important;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-content-inner {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  table.body .kg-cta-minimal img.kg-cta-image {
+    width: 52px !important;
+    height: 52px !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .recipient-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+.post-title-link {
+  display: block;
+  margin-top: 32px;
+  color: #15212A;
+  text-align: center;
+  line-height: 1.1em;
+}
+.post-title-link-left {
+  text-align: left;
+}
+.view-online-link {
+  word-wrap: none;
+  white-space: nowrap;
+  color: #15212a;
+  color: rgba(0, 0, 0, 0.6);
+  text-decoration: underline !important;
+}
+.kg-audio-link {
+  color: #15212a !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+@media only screen and (max-width: 620px) {
+  .hide-mobile {
+    display: none;
+  }
+
+  .mobile-only {
+    display: initial !important;
+  }
+
+  .hide-desktop {
+    display: initial !important;
+  }
+
+  .desktop-only {
+    display: none !important;
+  }
+
+  table.body p,
+table.body ul,
+table.body ol,
+table.body td {
+    font-size: 16px;
+  }
+
+  table.header .post-excerpt {
+    font-size: 16px !important;
+  }
+
+  table.body .kg-callout-card {
+    padding: 16px 24px !important;
+  }
+
+  table.body .kg-callout-text {
+    font-size: 16px !important;
+    line-height: 1.5em !important;
+  }
+
+  table.body pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+
+  table.body .main,
+table.header .header-main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.header .site-icon {
+    padding-top: 0 !important;
+  }
+
+  table.header .site-info {
+    padding-top: 24px !important;
+  }
+
+  table.header .post-title-link {
+    margin-top: 24px !important;
+  }
+
+  table.header .post-meta-wrapper {
+    padding-bottom: 24px !important;
+  }
+
+  table.header .site-icon img {
+    width: 36px !important;
+    height: 36px !important;
+  }
+
+  table.header .site-url a {
+    font-size: 13px !important;
+    padding-bottom: 16px !important;
+  }
+
+  table.header .post-meta,
+table.header .post-meta-date {
+    white-space: normal !important;
+    font-size: 13px !important;
+    line-height: 1.2em;
+  }
+
+  table.header .post-meta,
+table.header .view-online {
+    width: 100% !important;
+  }
+
+  table.header .post-meta-left,
+table.header .post-meta-left.view-online {
+    width: 100% !important;
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online-mobile {
+    display: table-row !important;
+  }
+
+  table.header .post-meta-left.view-online-mobile,
+table.header .post-meta-left.view-online-mobile .view-online {
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online.desktop {
+    display: none !important;
+  }
+
+  table.header .view-online {
+    text-decoration: underline;
+  }
+
+  table.body .footer p,
+table.body .footer p span {
+    font-size: 13px !important;
+  }
+
+  table.header .view-online-link,
+table.body .footer,
+table.body .footer a {
+    font-size: 13px !important;
+  }
+
+  table.header .post-title a {
+    font-size: 26px !important;
+    line-height: 1.1em !important;
+  }
+
+  table.feedback-buttons {
+    display: table !important;
+    width: 100% !important;
+    max-width: 390px;
+  }
+
+  table.feedback-buttons img {
+    display: inherit !important;
+  }
+
+  table.body .feedback-button-text {
+    display: none!important;
+  }
+
+  table.body .latest-posts-header {
+    font-size: 12px !important;
+  }
+
+  table.body .latest-post-title {
+    padding-right: 8px !important;
+  }
+
+  table.body .latest-post h4,
+table.body .latest-post h4 span {
+    padding: 4px 0 6px !important;
+    font-size: 15px !important;
+  }
+
+  table.body .latest-post-excerpt,
+table.body .latest-post-excerpt a,
+table.body .latest-post-excerpt span {
+    font-size: 13px !important;
+    line-height: 1.2 !important;
+  }
+
+  table.body .subscription-box h3 {
+    font-size: 14px !important;
+  }
+
+  table.body .subscription-box p,
+table.body .subscription-box p span {
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details,
+table.body .manage-subscription {
+    display: inline-block;
+    width: 100%;
+    text-align: left !important;
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details {
+    padding-bottom: 12px;
+  }
+
+  table.body h1 {
+    font-size: 32px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h2,
+table.body h2 span {
+    font-size: 26px !important;
+    line-height: 1.22em !important;
+  }
+
+  table.body h3 {
+    font-size: 21px !important;
+    line-height: 1.25em !important;
+  }
+
+  table.body h4 {
+    font-size: 19px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h5 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body h6 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote {
+    font-size: 16px !important;
+    line-height: 1.6em;
+    margin-bottom: 0;
+  }
+
+  table.body blockquote p {
+    margin-right: 15px !important;
+    margin-left: 15px !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt {
+    border-left: 0 none !important;
+    margin: 0 !important;
+    font-size: 18px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt p {
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+  }
+
+  table.body hr {
+    margin: 2em 0 !important;
+  }
+
+  .feature-image-caption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption p,
+.kg-card-figcaption p span {
+    font-size: 13px!important;
+  }
+}
+@media all {
+  .subscription-details p.hidden {
+    display: none !important;
+  }
+}
+</style>
+        <!--[if mso]>
+        <style type=\\"text/css\\">
+            ul, ol { margin-left: 1.5em !important; } 
+        </style>
+        <![endif]-->
+    </head>
+    <body data-testid=\\"email-preview-body\\" style=\\"background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 0; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #15212A;\\">
+        <span class=\\"preheader\\" style=\\"color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;\\"></span>
+        <!-- SPACING TO AVOID BODY TEXT BEING DUPLICATED IN PREVIEW TEXT -->
+        <div style=\\"display:none; max-height:0; overflow:hidden; mso-hide: all;\\" aria-hidden=\\"true\\" role=\\"presentation\\">
+            
+        </div>
+
+        <!-- HEADER WITH FULL-WIDTH BACKGROUND -->
+            <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header\\" width=\\"100%\\" style=\\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; line-height: 1.4; background-color: #ffffff; width: 100%; border-spacing: 0; border-collapse: collapse;\\" bgcolor=\\"#ffffff\\">
+                <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+                <!--[if mso]>
+                <tr>
+                    <td>
+                        <center>
+                            <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+                <![endif]-->
+                <tr>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                    <td class=\\"container\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                        <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <!-- Header content constrained to 600px -->
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header-main\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: transparent;\\" width=\\"100%\\" bgcolor=\\"transparent\\">
+                            <tr>
+                                <td class=\\"header-content\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding: 0; margin: 0 auto;\\" valign=\\"top\\">
+                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+
+                                            <tr class=\\"site-info-row\\">
+                                                <td class=\\"site-info\\" width=\\"100%\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding-top: 32px; padding-bottom: 32px;\\" valign=\\"top\\">
+                                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\" width=\\"100%\\">
+                                                            <tr>
+                                                                <td class=\\"site-url site-url-bottom-padding\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212A; font-size: 16px; letter-spacing: -0.1px; font-weight: 700; text-transform: uppercase; text-align: center; padding-bottom: 12px;\\" valign=\\"top\\" align=\\"center\\"><div style=\\"width: 100% !important;\\"><a href=\\"http://example.com\\" class=\\"site-title\\" style=\\"text-decoration: none; color: #15212A; overflow-wrap: anywhere;\\">Test Site</a></div></td>
+                                                            </tr>
+
+                                                    </table>
+                                                </td>
+                                            </tr>
+
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                        </div>
+                    </td>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                </tr>
+                <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+                <![endif]-->
+            </table>
+
+        <!-- MAIN CONTENT AREA -->
+        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"body\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; line-height: 1.4; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+            <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+            <!--[if mso]>
+            <tr>
+                <td>
+                    <center>
+                        <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+            <![endif]-->
+            <tr>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                <td class=\\"container\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; display: block; max-width: 600px; margin: 0 auto;\\" valign=\\"top\\">
+                    <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"main\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+                                          <tr>
+                                            <td class=\\"wrapper\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+                                                <tr>
+                                                  <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                                                    <p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Hello friend, welcome!</p>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class=\\"wrapper\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-top: 40px; padding-bottom: 30px;\\">
+                                                <tr>
+                                                  <td class=\\"footer\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212a; color: rgba(0, 0, 0, 0.6); margin-top: 20px; text-align: center; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; padding-right: 30px; line-height: 1.5em; font-size: 13px;\\" valign=\\"top\\" align=\\"center\\">
+                                                    Test Site &copy; 2020 &mdash; <a href=\\"http://example.com/#/portal/account/newsletters\\" style=\\"overflow-wrap: anywhere; color: #15212a; color: rgba(0, 0, 0, 0.6); text-decoration: underline; font-size: 13px;\\">Manage your preferences</a>
+                                                  </td>
+                                                </tr>
+                                                  <tr>
+                                                    <td class=\\"footer-powered\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; text-align: center; padding-top: 70px; padding-bottom: 40px;\\" valign=\\"top\\" align=\\"center\\"><a href=\\"https://ghost.org/?via=pbg-newsletter\\" style=\\"color: #15212A; text-decoration: none; overflow-wrap: anywhere;\\"><img src=\\"https://static.ghost.org/v4.0.0/images/powered.png\\" border=\\"0\\" width=\\"142\\" height=\\"30\\" class=\\"gh-powered\\" alt=\\"Powered by Ghost\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; width: 142px; height: 30px;\\"></a></td>
+                                                  </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                        </table>
+                        <!-- END CENTERED WHITE CONTAINER -->
+                    </div>
+                </td>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+            </tr>
+
+            <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+            <![endif]-->
+        </table>
+    </body>
+</html>
+",
+  "plaintext": "
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site [http://example.com]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Hello friend, welcome!
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site © 2020 — Manage your preferences [http://example.com/#/portal/account/newsletters]
+
+
+
+https://ghost.org/?via=pbg-newsletter
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+",
+}
+`;
+
+exports[`Member Welcome Email Renderer Snapshots labs flag on renders template variable replacements 1 1`] = `
+Object {
+  "html": "<!doctype html>
+<html>
+    <head>
+        <meta name=\\"viewport\\" content=\\"width=device-width\\">
+        <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+        <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
+        <title>Welcome to Test Site, Jamie Larson</title>
+        <style>
+@media only screen and (max-width: 620px) {
+  table.body {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  table.body .content {
+    padding: 0 !important;
+  }
+
+  table.body .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table.body .main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.body .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .apple-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+@media only screen and (max-width: 620px) {
+  table[class=body] h1 {
+    font-size: 28px !important;
+    margin-bottom: 10px !important;
+  }
+
+  table[class=body] p,
+table[class=body] ul,
+table[class=body] ol,
+table[class=body] td,
+table[class=body] span,
+table[class=body] a {
+    font-size: 16px !important;
+  }
+
+  table[class=body] .wrapper,
+table[class=body] .article {
+    padding: 10px !important;
+  }
+
+  table[class=body] .content {
+    padding: 0 !important;
+  }
+
+  table[class=body] .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table[class=body] .main {
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table[class=body] .btn table {
+    width: 100% !important;
+  }
+
+  table[class=body] .btn a {
+    width: 100% !important;
+  }
+
+  table[class=body] .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+
+  table[class=body] p[class=small],
+table[class=body] a[class=small] {
+    font-size: 11px !important;
+  }
+}
+.kg-nft-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 14px;
+  line-height: 1.3em;
+  padding-top: 4px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 4px;
+}
+.kg-twitter-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 15px;
+  padding: 8px;
+  line-height: 1.3em;
+}
+.kg-cta-link-accent .kg-cta-sponsor-label a {
+  color: #15212A !important;
+}
+.kg-cta-text a:not(.kg-cta-link-accent .kg-cta-text a) {
+  color: #15212A;
+  text-decoration: underline;
+}
+.kg-cta-link-accent .kg-cta-text a {
+  color: #15212A !important;
+}
+@media only screen and (max-width: 620px) {
+  table.body .kg-bookmark-card {
+    width: 90vw;
+  }
+
+  table.body .kg-bookmark-thumbnail {
+    display: none !important;
+  }
+
+  table.body .kg-bookmark-metadata span {
+    font-size: 13px !important;
+  }
+
+  table.body .kg-embed-card {
+    max-width: 90vw !important;
+  }
+
+  table.body .kg-cta-card {
+    padding: 0 20px;
+  }
+
+  table.body .kg-cta-card.kg-cta-bg-none {
+    padding: 0;
+  }
+
+  table.body .kg-cta-sponsor-label {
+    padding: 10px 0;
+  }
+
+  table.body table.kg-cta-content-wrapper:not(.kg-cta-bg-none.kg-cta-no-dividers table.kg-cta-content-wrapper) {
+    padding: 20px 0;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-has-img:not(.kg-cta-bg-none):not(.kg-cta-no-label) table.kg-cta-content-wrapper {
+    padding-top: 0;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    padding-right: 20px;
+  }
+
+  table.body .kg-cta-immersive .kg-cta-image-container {
+    padding-bottom: 20px;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-no-text .kg-cta-image-container {
+    padding-bottom: 0;
+  }
+
+  table.body .kg-cta-button-container {
+    padding-top: 16px;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+    padding-bottom: 16px !important;
+    padding-right: 0 !important;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-content-inner {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  table.body .kg-cta-minimal img.kg-cta-image {
+    width: 52px !important;
+    height: 52px !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .recipient-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+.post-title-link {
+  display: block;
+  margin-top: 32px;
+  color: #15212A;
+  text-align: center;
+  line-height: 1.1em;
+}
+.post-title-link-left {
+  text-align: left;
+}
+.view-online-link {
+  word-wrap: none;
+  white-space: nowrap;
+  color: #15212a;
+  color: rgba(0, 0, 0, 0.6);
+  text-decoration: underline !important;
+}
+.kg-audio-link {
+  color: #15212a !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+@media only screen and (max-width: 620px) {
+  .hide-mobile {
+    display: none;
+  }
+
+  .mobile-only {
+    display: initial !important;
+  }
+
+  .hide-desktop {
+    display: initial !important;
+  }
+
+  .desktop-only {
+    display: none !important;
+  }
+
+  table.body p,
+table.body ul,
+table.body ol,
+table.body td {
+    font-size: 16px;
+  }
+
+  table.header .post-excerpt {
+    font-size: 16px !important;
+  }
+
+  table.body .kg-callout-card {
+    padding: 16px 24px !important;
+  }
+
+  table.body .kg-callout-text {
+    font-size: 16px !important;
+    line-height: 1.5em !important;
+  }
+
+  table.body pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+
+  table.body .main,
+table.header .header-main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.header .site-icon {
+    padding-top: 0 !important;
+  }
+
+  table.header .site-info {
+    padding-top: 24px !important;
+  }
+
+  table.header .post-title-link {
+    margin-top: 24px !important;
+  }
+
+  table.header .post-meta-wrapper {
+    padding-bottom: 24px !important;
+  }
+
+  table.header .site-icon img {
+    width: 36px !important;
+    height: 36px !important;
+  }
+
+  table.header .site-url a {
+    font-size: 13px !important;
+    padding-bottom: 16px !important;
+  }
+
+  table.header .post-meta,
+table.header .post-meta-date {
+    white-space: normal !important;
+    font-size: 13px !important;
+    line-height: 1.2em;
+  }
+
+  table.header .post-meta,
+table.header .view-online {
+    width: 100% !important;
+  }
+
+  table.header .post-meta-left,
+table.header .post-meta-left.view-online {
+    width: 100% !important;
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online-mobile {
+    display: table-row !important;
+  }
+
+  table.header .post-meta-left.view-online-mobile,
+table.header .post-meta-left.view-online-mobile .view-online {
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online.desktop {
+    display: none !important;
+  }
+
+  table.header .view-online {
+    text-decoration: underline;
+  }
+
+  table.body .footer p,
+table.body .footer p span {
+    font-size: 13px !important;
+  }
+
+  table.header .view-online-link,
+table.body .footer,
+table.body .footer a {
+    font-size: 13px !important;
+  }
+
+  table.header .post-title a {
+    font-size: 26px !important;
+    line-height: 1.1em !important;
+  }
+
+  table.feedback-buttons {
+    display: table !important;
+    width: 100% !important;
+    max-width: 390px;
+  }
+
+  table.feedback-buttons img {
+    display: inherit !important;
+  }
+
+  table.body .feedback-button-text {
+    display: none!important;
+  }
+
+  table.body .latest-posts-header {
+    font-size: 12px !important;
+  }
+
+  table.body .latest-post-title {
+    padding-right: 8px !important;
+  }
+
+  table.body .latest-post h4,
+table.body .latest-post h4 span {
+    padding: 4px 0 6px !important;
+    font-size: 15px !important;
+  }
+
+  table.body .latest-post-excerpt,
+table.body .latest-post-excerpt a,
+table.body .latest-post-excerpt span {
+    font-size: 13px !important;
+    line-height: 1.2 !important;
+  }
+
+  table.body .subscription-box h3 {
+    font-size: 14px !important;
+  }
+
+  table.body .subscription-box p,
+table.body .subscription-box p span {
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details,
+table.body .manage-subscription {
+    display: inline-block;
+    width: 100%;
+    text-align: left !important;
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details {
+    padding-bottom: 12px;
+  }
+
+  table.body h1 {
+    font-size: 32px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h2,
+table.body h2 span {
+    font-size: 26px !important;
+    line-height: 1.22em !important;
+  }
+
+  table.body h3 {
+    font-size: 21px !important;
+    line-height: 1.25em !important;
+  }
+
+  table.body h4 {
+    font-size: 19px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h5 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body h6 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote {
+    font-size: 16px !important;
+    line-height: 1.6em;
+    margin-bottom: 0;
+  }
+
+  table.body blockquote p {
+    margin-right: 15px !important;
+    margin-left: 15px !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt {
+    border-left: 0 none !important;
+    margin: 0 !important;
+    font-size: 18px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt p {
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+  }
+
+  table.body hr {
+    margin: 2em 0 !important;
+  }
+
+  .feature-image-caption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption p,
+.kg-card-figcaption p span {
+    font-size: 13px!important;
+  }
+}
+@media all {
+  .subscription-details p.hidden {
+    display: none !important;
+  }
+}
+</style>
+        <!--[if mso]>
+        <style type=\\"text/css\\">
+            ul, ol { margin-left: 1.5em !important; } 
+        </style>
+        <![endif]-->
+    </head>
+    <body data-testid=\\"email-preview-body\\" style=\\"background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 0; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #15212A;\\">
+        <span class=\\"preheader\\" style=\\"color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;\\"></span>
+        <!-- SPACING TO AVOID BODY TEXT BEING DUPLICATED IN PREVIEW TEXT -->
+        <div style=\\"display:none; max-height:0; overflow:hidden; mso-hide: all;\\" aria-hidden=\\"true\\" role=\\"presentation\\">
+            
+        </div>
+
+        <!-- HEADER WITH FULL-WIDTH BACKGROUND -->
+            <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header\\" width=\\"100%\\" style=\\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; line-height: 1.4; background-color: #ffffff; width: 100%; border-spacing: 0; border-collapse: collapse;\\" bgcolor=\\"#ffffff\\">
+                <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+                <!--[if mso]>
+                <tr>
+                    <td>
+                        <center>
+                            <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+                <![endif]-->
+                <tr>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                    <td class=\\"container\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                        <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <!-- Header content constrained to 600px -->
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header-main\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: transparent;\\" width=\\"100%\\" bgcolor=\\"transparent\\">
+                            <tr>
+                                <td class=\\"header-content\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding: 0; margin: 0 auto;\\" valign=\\"top\\">
+                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+
+                                            <tr class=\\"site-info-row\\">
+                                                <td class=\\"site-info\\" width=\\"100%\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding-top: 32px; padding-bottom: 32px;\\" valign=\\"top\\">
+                                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\" width=\\"100%\\">
+                                                            <tr>
+                                                                <td class=\\"site-url site-url-bottom-padding\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212A; font-size: 16px; letter-spacing: -0.1px; font-weight: 700; text-transform: uppercase; text-align: center; padding-bottom: 12px;\\" valign=\\"top\\" align=\\"center\\"><div style=\\"width: 100% !important;\\"><a href=\\"http://example.com\\" class=\\"site-title\\" style=\\"text-decoration: none; color: #15212A; overflow-wrap: anywhere;\\">Test Site</a></div></td>
+                                                            </tr>
+
+                                                    </table>
+                                                </td>
+                                            </tr>
+
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                        </div>
+                    </td>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                </tr>
+                <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+                <![endif]-->
+            </table>
+
+        <!-- MAIN CONTENT AREA -->
+        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"body\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; line-height: 1.4; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+            <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+            <!--[if mso]>
+            <tr>
+                <td>
+                    <center>
+                        <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+            <![endif]-->
+            <tr>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                <td class=\\"container\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; display: block; max-width: 600px; margin: 0 auto;\\" valign=\\"top\\">
+                    <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"main\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+                                          <tr>
+                                            <td class=\\"wrapper\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+                                                <tr>
+                                                  <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                                                    <p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Hello Jamie, welcome to Test Site! Your email is jamie@example.com.</p>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class=\\"wrapper\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-top: 40px; padding-bottom: 30px;\\">
+                                                <tr>
+                                                  <td class=\\"footer\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212a; color: rgba(0, 0, 0, 0.6); margin-top: 20px; text-align: center; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; padding-right: 30px; line-height: 1.5em; font-size: 13px;\\" valign=\\"top\\" align=\\"center\\">
+                                                    Test Site &copy; 2020 &mdash; <a href=\\"http://example.com/#/portal/account/newsletters\\" style=\\"overflow-wrap: anywhere; color: #15212a; color: rgba(0, 0, 0, 0.6); text-decoration: underline; font-size: 13px;\\">Manage your preferences</a>
+                                                  </td>
+                                                </tr>
+                                                  <tr>
+                                                    <td class=\\"footer-powered\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; text-align: center; padding-top: 70px; padding-bottom: 40px;\\" valign=\\"top\\" align=\\"center\\"><a href=\\"https://ghost.org/?via=pbg-newsletter\\" style=\\"color: #15212A; text-decoration: none; overflow-wrap: anywhere;\\"><img src=\\"https://static.ghost.org/v4.0.0/images/powered.png\\" border=\\"0\\" width=\\"142\\" height=\\"30\\" class=\\"gh-powered\\" alt=\\"Powered by Ghost\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; width: 142px; height: 30px;\\"></a></td>
+                                                  </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                        </table>
+                        <!-- END CENTERED WHITE CONTAINER -->
+                    </div>
+                </td>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+            </tr>
+
+            <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+            <![endif]-->
+        </table>
+    </body>
+</html>
+",
+  "plaintext": "
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site [http://example.com]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Hello Jamie, welcome to Test Site! Your email is jamie@example.com.
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site © 2020 — Manage your preferences [http://example.com/#/portal/account/newsletters]
+
+
+
+https://ghost.org/?via=pbg-newsletter
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+",
+  "subject": "Welcome to Test Site, Jamie Larson",
+}
+`;
+
+exports[`Member Welcome Email Renderer Snapshots labs flag on renders with a custom accent color 1 1`] = `
+Object {
+  "html": "<!doctype html>
+<html>
+    <head>
+        <meta name=\\"viewport\\" content=\\"width=device-width\\">
+        <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+        <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
+        <title>Welcome</title>
+        <style>
+@media only screen and (max-width: 620px) {
+  table.body {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  table.body .content {
+    padding: 0 !important;
+  }
+
+  table.body .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table.body .main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.body .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .apple-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+@media only screen and (max-width: 620px) {
+  table[class=body] h1 {
+    font-size: 28px !important;
+    margin-bottom: 10px !important;
+  }
+
+  table[class=body] p,
+table[class=body] ul,
+table[class=body] ol,
+table[class=body] td,
+table[class=body] span,
+table[class=body] a {
+    font-size: 16px !important;
+  }
+
+  table[class=body] .wrapper,
+table[class=body] .article {
+    padding: 10px !important;
+  }
+
+  table[class=body] .content {
+    padding: 0 !important;
+  }
+
+  table[class=body] .container {
+    padding: 0 !important;
+    width: 100% !important;
+  }
+
+  table[class=body] .main {
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table[class=body] .btn table {
+    width: 100% !important;
+  }
+
+  table[class=body] .btn a {
+    width: 100% !important;
+  }
+
+  table[class=body] .img-responsive {
+    height: auto !important;
+    max-width: 100% !important;
+    width: auto !important;
+  }
+
+  table[class=body] p[class=small],
+table[class=body] a[class=small] {
+    font-size: 11px !important;
+  }
+}
+.kg-nft-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 14px;
+  line-height: 1.3em;
+  padding-top: 4px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 4px;
+}
+.kg-twitter-link {
+  display: block;
+  text-decoration: none !important;
+  color: #15212A !important;
+  font-family: inherit !important;
+  font-size: 15px;
+  padding: 8px;
+  line-height: 1.3em;
+}
+.kg-cta-link-accent .kg-cta-sponsor-label a {
+  color: #FF0000 !important;
+}
+.kg-cta-text a:not(.kg-cta-link-accent .kg-cta-text a) {
+  color: #15212A;
+  text-decoration: underline;
+}
+.kg-cta-link-accent .kg-cta-text a {
+  color: #FF0000 !important;
+}
+@media only screen and (max-width: 620px) {
+  table.body .kg-bookmark-card {
+    width: 90vw;
+  }
+
+  table.body .kg-bookmark-thumbnail {
+    display: none !important;
+  }
+
+  table.body .kg-bookmark-metadata span {
+    font-size: 13px !important;
+  }
+
+  table.body .kg-embed-card {
+    max-width: 90vw !important;
+  }
+
+  table.body .kg-cta-card {
+    padding: 0 20px;
+  }
+
+  table.body .kg-cta-card.kg-cta-bg-none {
+    padding: 0;
+  }
+
+  table.body .kg-cta-sponsor-label {
+    padding: 10px 0;
+  }
+
+  table.body table.kg-cta-content-wrapper:not(.kg-cta-bg-none.kg-cta-no-dividers table.kg-cta-content-wrapper) {
+    padding: 20px 0;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-has-img:not(.kg-cta-bg-none):not(.kg-cta-no-label) table.kg-cta-content-wrapper {
+    padding-top: 0;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    padding-right: 20px;
+  }
+
+  table.body .kg-cta-immersive .kg-cta-image-container {
+    padding-bottom: 20px;
+  }
+
+  table.body .kg-cta-immersive.kg-cta-no-text .kg-cta-image-container {
+    padding-bottom: 0;
+  }
+
+  table.body .kg-cta-button-container {
+    padding-top: 16px;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-image-container {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+    padding-bottom: 16px !important;
+    padding-right: 0 !important;
+  }
+
+  table.body .kg-cta-minimal .kg-cta-content-inner {
+    display: inline-block !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  table.body .kg-cta-minimal img.kg-cta-image {
+    width: 52px !important;
+    height: 52px !important;
+  }
+}
+@media all {
+  .ExternalClass {
+    width: 100%;
+  }
+
+  .ExternalClass,
+.ExternalClass p,
+.ExternalClass span,
+.ExternalClass font,
+.ExternalClass td,
+.ExternalClass div {
+    line-height: 100%;
+  }
+
+  .recipient-link a {
+    color: inherit !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+    text-decoration: none !important;
+  }
+
+  #MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+}
+.post-title-link {
+  display: block;
+  margin-top: 32px;
+  color: #15212A;
+  text-align: center;
+  line-height: 1.1em;
+}
+.post-title-link-left {
+  text-align: left;
+}
+.view-online-link {
+  word-wrap: none;
+  white-space: nowrap;
+  color: #15212a;
+  color: rgba(0, 0, 0, 0.6);
+  text-decoration: underline !important;
+}
+.kg-audio-link {
+  color: #15212a !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+@media only screen and (max-width: 620px) {
+  .hide-mobile {
+    display: none;
+  }
+
+  .mobile-only {
+    display: initial !important;
+  }
+
+  .hide-desktop {
+    display: initial !important;
+  }
+
+  .desktop-only {
+    display: none !important;
+  }
+
+  table.body p,
+table.body ul,
+table.body ol,
+table.body td {
+    font-size: 16px;
+  }
+
+  table.header .post-excerpt {
+    font-size: 16px !important;
+  }
+
+  table.body .kg-callout-card {
+    padding: 16px 24px !important;
+  }
+
+  table.body .kg-callout-text {
+    font-size: 16px !important;
+    line-height: 1.5em !important;
+  }
+
+  table.body pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+
+  table.body .main,
+table.header .header-main {
+    border-spacing: 10px 0 !important;
+    border-left-width: 0 !important;
+    border-radius: 0 !important;
+    border-right-width: 0 !important;
+  }
+
+  table.header .site-icon {
+    padding-top: 0 !important;
+  }
+
+  table.header .site-info {
+    padding-top: 24px !important;
+  }
+
+  table.header .post-title-link {
+    margin-top: 24px !important;
+  }
+
+  table.header .post-meta-wrapper {
+    padding-bottom: 24px !important;
+  }
+
+  table.header .site-icon img {
+    width: 36px !important;
+    height: 36px !important;
+  }
+
+  table.header .site-url a {
+    font-size: 13px !important;
+    padding-bottom: 16px !important;
+  }
+
+  table.header .post-meta,
+table.header .post-meta-date {
+    white-space: normal !important;
+    font-size: 13px !important;
+    line-height: 1.2em;
+  }
+
+  table.header .post-meta,
+table.header .view-online {
+    width: 100% !important;
+  }
+
+  table.header .post-meta-left,
+table.header .post-meta-left.view-online {
+    width: 100% !important;
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online-mobile {
+    display: table-row !important;
+  }
+
+  table.header .post-meta-left.view-online-mobile,
+table.header .post-meta-left.view-online-mobile .view-online {
+    text-align: left !important;
+  }
+
+  table.header .post-meta.view-online.desktop {
+    display: none !important;
+  }
+
+  table.header .view-online {
+    text-decoration: underline;
+  }
+
+  table.body .footer p,
+table.body .footer p span {
+    font-size: 13px !important;
+  }
+
+  table.header .view-online-link,
+table.body .footer,
+table.body .footer a {
+    font-size: 13px !important;
+  }
+
+  table.header .post-title a {
+    font-size: 26px !important;
+    line-height: 1.1em !important;
+  }
+
+  table.feedback-buttons {
+    display: table !important;
+    width: 100% !important;
+    max-width: 390px;
+  }
+
+  table.feedback-buttons img {
+    display: inherit !important;
+  }
+
+  table.body .feedback-button-text {
+    display: none!important;
+  }
+
+  table.body .latest-posts-header {
+    font-size: 12px !important;
+  }
+
+  table.body .latest-post-title {
+    padding-right: 8px !important;
+  }
+
+  table.body .latest-post h4,
+table.body .latest-post h4 span {
+    padding: 4px 0 6px !important;
+    font-size: 15px !important;
+  }
+
+  table.body .latest-post-excerpt,
+table.body .latest-post-excerpt a,
+table.body .latest-post-excerpt span {
+    font-size: 13px !important;
+    line-height: 1.2 !important;
+  }
+
+  table.body .subscription-box h3 {
+    font-size: 14px !important;
+  }
+
+  table.body .subscription-box p,
+table.body .subscription-box p span {
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details,
+table.body .manage-subscription {
+    display: inline-block;
+    width: 100%;
+    text-align: left !important;
+    font-size: 13px !important;
+  }
+
+  table.body .subscription-details {
+    padding-bottom: 12px;
+  }
+
+  table.body h1 {
+    font-size: 32px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h2,
+table.body h2 span {
+    font-size: 26px !important;
+    line-height: 1.22em !important;
+  }
+
+  table.body h3 {
+    font-size: 21px !important;
+    line-height: 1.25em !important;
+  }
+
+  table.body h4 {
+    font-size: 19px !important;
+    line-height: 1.3em !important;
+  }
+
+  table.body h5 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body h6 {
+    font-size: 16px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote {
+    font-size: 16px !important;
+    line-height: 1.6em;
+    margin-bottom: 0;
+  }
+
+  table.body blockquote p {
+    margin-right: 15px !important;
+    margin-left: 15px !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt {
+    border-left: 0 none !important;
+    margin: 0 !important;
+    font-size: 18px !important;
+    line-height: 1.4em !important;
+  }
+
+  table.body blockquote.kg-blockquote-alt p {
+    margin-right: 20px !important;
+    margin-left: 20px !important;
+  }
+
+  table.body hr {
+    margin: 2em 0 !important;
+  }
+
+  .feature-image-caption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption {
+    font-size: 13px!important;
+  }
+
+  .kg-card-figcaption p,
+.kg-card-figcaption p span {
+    font-size: 13px!important;
+  }
+}
+@media all {
+  .subscription-details p.hidden {
+    display: none !important;
+  }
+}
+</style>
+        <!--[if mso]>
+        <style type=\\"text/css\\">
+            ul, ol { margin-left: 1.5em !important; } 
+        </style>
+        <![endif]-->
+    </head>
+    <body data-testid=\\"email-preview-body\\" style=\\"background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 0; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #15212A;\\">
+        <span class=\\"preheader\\" style=\\"color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;\\"></span>
+        <!-- SPACING TO AVOID BODY TEXT BEING DUPLICATED IN PREVIEW TEXT -->
+        <div style=\\"display:none; max-height:0; overflow:hidden; mso-hide: all;\\" aria-hidden=\\"true\\" role=\\"presentation\\">
+            
+        </div>
+
+        <!-- HEADER WITH FULL-WIDTH BACKGROUND -->
+            <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header\\" width=\\"100%\\" style=\\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; line-height: 1.4; background-color: #ffffff; width: 100%; border-spacing: 0; border-collapse: collapse;\\" bgcolor=\\"#ffffff\\">
+                <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+                <!--[if mso]>
+                <tr>
+                    <td>
+                        <center>
+                            <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+                <![endif]-->
+                <tr>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                    <td class=\\"container\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                        <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <!-- Header content constrained to 600px -->
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"header-main\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: transparent;\\" width=\\"100%\\" bgcolor=\\"transparent\\">
+                            <tr>
+                                <td class=\\"header-content\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding: 0; margin: 0 auto;\\" valign=\\"top\\">
+                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+
+                                            <tr class=\\"site-info-row\\">
+                                                <td class=\\"site-info\\" width=\\"100%\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; padding-top: 32px; padding-bottom: 32px;\\" valign=\\"top\\">
+                                                    <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\" width=\\"100%\\">
+                                                            <tr>
+                                                                <td class=\\"site-url site-url-bottom-padding\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212A; font-size: 16px; letter-spacing: -0.1px; font-weight: 700; text-transform: uppercase; text-align: center; padding-bottom: 12px;\\" valign=\\"top\\" align=\\"center\\"><div style=\\"width: 100% !important;\\"><a href=\\"http://example.com\\" class=\\"site-title\\" style=\\"text-decoration: none; color: #15212A; overflow-wrap: anywhere;\\">Test Site</a></div></td>
+                                                            </tr>
+
+                                                    </table>
+                                                </td>
+                                            </tr>
+
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                        </div>
+                    </td>
+                    <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                </tr>
+                <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+                <![endif]-->
+            </table>
+
+        <!-- MAIN CONTENT AREA -->
+        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"body\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; line-height: 1.4; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+            <!-- Outlook doesn't respect max-width so we need an extra centered table -->
+            <!--[if mso]>
+            <tr>
+                <td>
+                    <center>
+                        <table border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"600\\">
+            <![endif]-->
+            <tr>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+                <td class=\\"container\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; display: block; max-width: 600px; margin: 0 auto;\\" valign=\\"top\\">
+                    <div class=\\"content\\" style=\\"box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px;\\">
+                        <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"main\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 20px 0; width: 100%; max-width: 600px; background: #ffffff; background-color: #ffffff;\\" bgcolor=\\"#ffffff\\">
+                                          <tr>
+                                            <td class=\\"wrapper\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
+                                                <tr>
+                                                  <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
+                                                    <p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Welcome!</p>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class=\\"wrapper\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; box-sizing: border-box;\\" valign=\\"top\\">
+                                              <table role=\\"presentation\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-top: 40px; padding-bottom: 30px;\\">
+                                                <tr>
+                                                  <td class=\\"footer\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; vertical-align: top; color: #15212a; color: rgba(0, 0, 0, 0.6); margin-top: 20px; text-align: center; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; padding-right: 30px; line-height: 1.5em; font-size: 13px;\\" valign=\\"top\\" align=\\"center\\">
+                                                    Test Site &copy; 2020 &mdash; <a href=\\"http://example.com/#/portal/account/newsletters\\" style=\\"overflow-wrap: anywhere; color: #15212a; color: rgba(0, 0, 0, 0.6); text-decoration: underline; font-size: 13px;\\">Manage your preferences</a>
+                                                  </td>
+                                                </tr>
+                                                  <tr>
+                                                    <td class=\\"footer-powered\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; text-align: center; padding-top: 70px; padding-bottom: 40px;\\" valign=\\"top\\" align=\\"center\\"><a href=\\"https://ghost.org/?via=pbg-newsletter\\" style=\\"color: #FF0000; text-decoration: none; overflow-wrap: anywhere;\\"><img src=\\"https://static.ghost.org/v4.0.0/images/powered.png\\" border=\\"0\\" width=\\"142\\" height=\\"30\\" class=\\"gh-powered\\" alt=\\"Powered by Ghost\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; width: 142px; height: 30px;\\"></a></td>
+                                                  </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                        </table>
+                        <!-- END CENTERED WHITE CONTAINER -->
+                    </div>
+                </td>
+                <td style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">&nbsp;</td>
+            </tr>
+
+            <!--[if mso]>
+                            </table>
+                        </center>
+                    </td>
+                </tr>
+            <![endif]-->
+        </table>
+    </body>
+</html>
+",
+  "plaintext": "
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site [http://example.com]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Welcome!
+
+
+
+
+
+
+
+
+
+
+
+
+Test Site © 2020 — Manage your preferences [http://example.com/#/portal/account/newsletters]
+
+
+
+https://ghost.org/?via=pbg-newsletter
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+",
+}
+`;
+
 exports[`Member Welcome Email Renderer Snapshots renders a simple paragraph welcome email 1 1`] = `
 Object {
   "html": "<!doctype html>
diff --git a/ghost/core/test/integration/services/member-welcome-emails-snapshot.test.js b/ghost/core/test/integration/services/member-welcome-emails-snapshot.test.js
index 0369d7ad1b1..d2c094b338e 100644
--- a/ghost/core/test/integration/services/member-welcome-emails-snapshot.test.js
+++ b/ghost/core/test/integration/services/member-welcome-emails-snapshot.test.js
@@ -132,4 +132,88 @@ describe('Member Welcome Email Renderer Snapshots', function () {
             plaintext: result.text
         });
     });
+
+    describe('labs flag on', function () {
+        beforeEach(function () {
+            labs.isSet.restore();
+            sinon.stub(labs, 'isSet').callsFake((flag) => {
+                if (flag === 'welcomeEmailsDesignCustomization') {
+                    return true;
+                }
+
+                return originalLabsIsSet(flag);
+            });
+
+            const i18n = i18nLib('en', 'ghost');
+            renderer = new MemberWelcomeEmailRenderer({t: i18n.t});
+        });
+
+        it('renders a simple paragraph welcome email', async function () {
+            const result = await renderer.render({
+                lexical: makeLexical([makeParagraph('Welcome to our site!')]),
+                subject: 'Welcome to Test Site',
+                member: defaultMember,
+                siteSettings: defaultSiteSettings
+            });
+
+            assertMatchSnapshot({
+                html: result.html,
+                plaintext: result.text
+            });
+        });
+
+        it('renders template variable replacements', async function () {
+            const result = await renderer.render({
+                lexical: makeLexical([
+                    makeParagraph('Hello {first_name}, welcome to {site_title}! Your email is {email}.')
+                ]),
+                subject: 'Welcome to {site_title}, {name}',
+                member: defaultMember,
+                siteSettings: defaultSiteSettings
+            });
+
+            assertMatchSnapshot({
+                html: result.html,
+                plaintext: result.text,
+                subject: result.subject
+            });
+        });
+
+        it('renders fallback values when member has no name', async function () {
+            const result = await renderer.render({
+                lexical: makeLexical([
+                    makeParagraph('Hello {first_name, "friend"}, welcome!')
+                ]),
+                subject: 'Welcome!',
+                member: {
+                    name: '',
+                    email: 'anonymous@example.com',
+                    uuid: '00000000-0000-4000-8000-000000000001'
+                },
+                siteSettings: defaultSiteSettings
+            });
+
+            assertMatchSnapshot({
+                html: result.html,
+                plaintext: result.text
+            });
+        });
+
+        it('renders with a custom accent color', async function () {
+            const result = await renderer.render({
+                lexical: makeLexical([makeParagraph('Welcome!')]),
+                subject: 'Welcome',
+                member: defaultMember,
+                siteSettings: {
+                    ...defaultSiteSettings,
+                    accentColor: '#FF0000'
+                }
+            });
+
+            assertMatchSnapshot({
+                html: result.html,
+                plaintext: result.text
+            });
+        });
+    });
 });
diff --git a/ghost/core/test/integration/services/member-welcome-emails.test.js b/ghost/core/test/integration/services/member-welcome-emails.test.js
index a86dbb1a045..4c74323b9da 100644
--- a/ghost/core/test/integration/services/member-welcome-emails.test.js
+++ b/ghost/core/test/integration/services/member-welcome-emails.test.js
@@ -7,6 +7,7 @@ const {OUTBOX_STATUSES} = require('../../../core/server/models/outbox');
 const db = require('../../../core/server/data/db');
 const mailService = require('../../../core/server/services/mail');
 const {MEMBER_WELCOME_EMAIL_SLUGS} = require('../../../core/server/services/member-welcome-emails/constants');
+const memberWelcomeEmailService = require('../../../core/server/services/member-welcome-emails/service');
 const processOutbox = require('../../../core/server/services/outbox/jobs/lib/process-outbox');
 const labs = require('../../../core/shared/labs');
 
@@ -410,9 +411,6 @@ describe('Member Welcome Emails Integration', function () {
         });
 
         it('uses mock member UUID when sending test welcome emails', async function () {
-            const memberWelcomeEmailService = require('../../../core/server/services/member-welcome-emails/service');
-            memberWelcomeEmailService.init();
-
             const automatedEmail = await db.knex('automated_emails')
                 .where('slug', MEMBER_WELCOME_EMAIL_SLUGS.free)
                 .first();
@@ -431,6 +429,9 @@ describe('Member Welcome Emails Integration', function () {
                 }
             });
 
+            memberWelcomeEmailService.api = null;
+            memberWelcomeEmailService.init();
+
             await memberWelcomeEmailService.api.sendTestEmail({
                 email: 'test-member@example.com',
                 subject: 'Welcome test',
@@ -445,4 +446,74 @@ describe('Member Welcome Emails Integration', function () {
             assert(!sendCall.args[0].html.includes('%7Buuid%7D'));
         });
     });
+
+    describe('labs flag on', function () {
+        beforeEach(function () {
+            labs.isSet.restore();
+            sinon.stub(labs, 'isSet').callsFake((flag) => {
+                if (flag === 'welcomeEmailsDesignCustomization') {
+                    return true;
+                }
+
+                return originalLabsIsSet(flag);
+            });
+            memberWelcomeEmailService.api = null;
+            memberWelcomeEmailService.init();
+            sinon.stub(mailService.GhostMailer.prototype, 'send').resolves('Mail sent');
+        });
+
+        it('reinitializes the service when the labs mode changes', function () {
+            labs.isSet.restore();
+            sinon.stub(labs, 'isSet').callsFake((flag) => {
+                if (flag === 'welcomeEmailsDesignCustomization') {
+                    return false;
+                }
+
+                return originalLabsIsSet(flag);
+            });
+
+            memberWelcomeEmailService.api = null;
+            memberWelcomeEmailService.useDesignCustomization = undefined;
+            memberWelcomeEmailService.init();
+            const labsOffApi = memberWelcomeEmailService.api;
+
+            labs.isSet.restore();
+            sinon.stub(labs, 'isSet').callsFake((flag) => {
+                if (flag === 'welcomeEmailsDesignCustomization') {
+                    return true;
+                }
+
+                return originalLabsIsSet(flag);
+            });
+
+            memberWelcomeEmailService.init();
+
+            assert.notEqual(memberWelcomeEmailService.api, labsOffApi);
+        });
+
+        it('uses cached design settings after welcome emails are loaded', async function () {
+            await memberWelcomeEmailService.api.loadMemberWelcomeEmails();
+
+            await db.knex('email_design_settings')
+                .where('id', defaultEmailDesignSettingId)
+                .update({
+                    footer_content: '<p>Fresh footer content</p>',
+                    show_badge: false
+                });
+
+            await memberWelcomeEmailService.api.send({
+                member: {
+                    email: 'fresh-design@example.com',
+                    name: 'Fresh Design',
+                    uuid: '77777777-7777-4777-8777-777777777777'
+                },
+                memberStatus: 'free'
+            });
+
+            sinon.assert.calledOnce(mailService.GhostMailer.prototype.send);
+            const sendCall = mailService.GhostMailer.prototype.send.firstCall;
+            assert.equal(sendCall.args[0].html.includes('Fresh footer content</p>'), false);
+            assert.equal(sendCall.args[0].html.includes('https://ghost.org/?via=pbg-newsletter'), true);
+        });
+    });
 });
diff --git a/ghost/core/test/unit/server/services/member-welcome-emails/member-welcome-email-renderer.test.js b/ghost/core/test/unit/server/services/member-welcome-emails/member-welcome-email-renderer.test.js
index 054a438b5d8..b6208bdf548 100644
--- a/ghost/core/test/unit/server/services/member-welcome-emails/member-welcome-email-renderer.test.js
+++ b/ghost/core/test/unit/server/services/member-welcome-emails/member-welcome-email-renderer.test.js
@@ -77,6 +77,46 @@ describe('MemberWelcomeEmailRenderer', function () {
             }});
         });
 
+        it('falls back to the legacy welcome email design when the labs flag is off', async function () {
+            const getEmailDesignStub = sinon.stub().returns({accentColor: '#123456'});
+            MemberWelcomeEmailRenderer.__set__('getEmailDesign', getEmailDesignStub);
+
+            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+
+            const result = await renderer.render({
+                lexical: '{}',
+                subject: 'Welcome!',
+                designSettings: {
+                    background_color: '#111111',
+                    header_image: 'https://example.com/header.png',
+                    show_badge: true,
+                    show_header_title: true
+                },
+                member: {name: 'John', email: 'john@example.com'},
+                siteSettings: defaultSiteSettings
+            });
+
+            sinon.assert.calledOnceWithExactly(getEmailDesignStub, {
+                accentColor: '#ff0000',
+                backgroundColor: '#ffffff',
+                buttonColor: 'accent',
+                buttonCorners: null,
+                buttonStyle: null,
+                dividerColor: null,
+                headerBackgroundColor: null,
+                imageCorners: null,
+                linkColor: 'accent',
+                linkStyle: null,
+                postTitleColor: null,
+                sectionTitleColor: null,
+                titleFontWeight: 'bold'
+            });
+
+            assert(!result.html.includes('https://example.com/header.png'));
+            assert(!result.html.includes('https://ghost.org/?via=pbg-newsletter'));
+            assert(!result.html.includes('class="header"'));
+        });
+
         it('substitutes member template variables', async function () {
             lexicalRenderStub.resolves('<p>Hello {name}, or {first_name}! Contact: {email}</p>');
             const renderer = new MemberWelcomeEmailRenderer({t: key => key});
@@ -457,338 +497,471 @@ describe('MemberWelcomeEmailRenderer', function () {
             assert(!result.html.includes('Manage your preferences'));
         });
 
-        it('applies shared Koenig card styles used by newsletters', async function () {
-            lexicalRenderStub.resolves(`
-                <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td class="kg-card-spacing">
-                                <table class="btn" border="0" cellspacing="0" cellpadding="0" align="center">
-                                    <tbody>
-                                        <tr>
-                                            <td align="center">
-                                                <a href="https://example.com">Click me</a>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <div class="kg-card kg-callout-card kg-callout-card-blue">
-                    <div class="kg-callout-emoji">💡</div>
-                    <div class="kg-callout-text">Shared styles</div>
-                </div>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+        describe('labs flag on', function () {
+            beforeEach(function () {
+                labs.isSet.restore();
+                sinon.stub(labs, 'isSet').callsFake((flag) => {
+                    if (flag === 'welcomeEmailsDesignCustomization') {
+                        return true;
+                    }
+
+                    return originalLabsIsSet(flag);
+                });
+            });
+
+            it('builds the email design from database-backed design settings', async function () {
+                const getEmailDesignStub = sinon.stub().returns({accentColor: '#123456'});
+                MemberWelcomeEmailRenderer.__set__('getEmailDesign', getEmailDesignStub);
+
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                const designSettings = {
+                    background_color: '#111111',
+                    button_color: '#222222',
+                    button_corners: 'pill',
+                    button_style: 'outline',
+                    divider_color: '#333333',
+                    header_background_color: '#444444',
+                    image_corners: 'rounded',
+                    link_color: '#555555',
+                    link_style: 'bold',
+                    section_title_color: '#666666',
+                    title_font_weight: 'medium'
+                };
+
+                await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    designSettings,
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
+
+                sinon.assert.calledOnceWithExactly(getEmailDesignStub, {
+                    accentColor: '#ff0000',
+                    backgroundColor: '#111111',
+                    buttonColor: '#222222',
+                    buttonCorners: 'pill',
+                    buttonStyle: 'outline',
+                    dividerColor: '#333333',
+                    headerBackgroundColor: '#444444',
+                    imageCorners: 'rounded',
+                    linkColor: '#555555',
+                    linkStyle: 'bold',
+                    postTitleColor: null,
+                    sectionTitleColor: '#666666',
+                    titleFontWeight: 'medium'
+                });
+
+                sinon.assert.calledWith(lexicalRenderStub, '{}', {target: 'email', design: {accentColor: '#123456'}});
+            });
+
+            it('passes header and footer settings through to the wrapper template', async function () {
+                lexicalRenderStub.resolves('<p>Content</p>');
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Test Subject',
+                    designSettings: {
+                        footer_content: '<p>Custom footer</p>',
+                        header_image: 'https://example.com/header.png',
+                        show_badge: true,
+                        show_header_title: false
+                    },
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                assert(result.html.includes('src="https://example.com/header.png"'));
+                assert(result.html.includes('Custom footer</p>'));
+                assert(result.html.includes('https://ghost.org/?via=pbg-newsletter'));
             });
 
-            assert(result.html.includes('kg-callout-card'));
-            assert(result.html.includes('padding: 24px'));
-            assert(result.html.includes('table class="btn"'));
-            assert(result.html.includes('background-color: #ff0000'));
-        });
+            it('uses the newsletter content-shell class when design customization is enabled', async function () {
+                lexicalRenderStub.resolves('<p>Content</p>');
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-        it('applies transistor card styles in welcome emails', async function () {
-            lexicalRenderStub.resolves(`
-                <table class="kg-card kg-transistor-card" cellspacing="0" cellpadding="0" border="0" width="100%">
-                    <tr>
-                        <td style="padding: 24px; text-align: center;">
-                            <a href="https://partner.transistor.fm/ghost/%%{uuid}%%" class="kg-transistor-title">
-                                Listen to your podcasts
-                            </a>
-                            <a href="https://partner.transistor.fm/ghost/%%{uuid}%%" class="kg-transistor-description">
-                                Subscribe and listen to your personal podcast feed in your favorite app.
-                            </a>
-                        </td>
-                    </tr>
-                </table>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Test Subject',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com', uuid: 'abc-123-def'},
-                siteSettings: defaultSiteSettings
+                assert.match(result.html, /<tr class="post-content-row">/);
+                assert(result.html.includes('class="post-content"'));
             });
 
-            assert.match(result.html, /class="kg-card kg-transistor-card"[^>]*style="[^"]*border-radius: 10px/);
-            assert.match(result.html, /class="kg-card kg-transistor-card"[^>]*style="[^"]*border: 1px solid rgba\(0, 0, 0, 0.12\)/);
-            assert.match(result.html, /class="kg-transistor-title"[^>]*style="[^"]*display: block/);
-            assert.match(result.html, /class="kg-transistor-title"[^>]*style="[^"]*text-decoration: none/);
-            assert.match(result.html, /class="kg-transistor-description"[^>]*style="[^"]*max-width: 400px/);
-            assert.match(result.html, /href="https:\/\/partner\.transistor\.fm\/ghost\/abc-123-def"/);
-            assert(!result.html.includes('%%abc-123-def%%'));
-        });
+            it('applies custom link colors when design customization is enabled', async function () {
+                lexicalRenderStub.resolves('<p><a href="https://example.com">Custom link</a></p>');
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-        it('applies bookmark and YouTube embed card styles', async function () {
-            lexicalRenderStub.resolves(`
-                <figure class="kg-card kg-bookmark-card">
-                    <a class="kg-bookmark-container" href="https://example.com">
-                        <div class="kg-bookmark-content">
-                            <div class="kg-bookmark-title">Example title</div>
-                            <div class="kg-bookmark-description">Example description</div>
-                            <div class="kg-bookmark-metadata">
-                                <span class="kg-bookmark-author">Example author</span>
-                            </div>
-                        </div>
-                        <div class="kg-bookmark-thumbnail">
-                            <img src="https://example.com/thumb.jpg" alt="">
-                        </div>
-                    </a>
-                </figure>
-                <figure class="kg-card kg-embed-card kg-card-hascaption">
-                    <a class="kg-video-preview" href="https://youtube.com/watch?v=abc123" aria-label="Play video">
-                        <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Test Subject',
+                    designSettings: {
+                        link_color: '#000000'
+                    },
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
+
+                assert(result.html.includes('class="post-content"'));
+                assert(result.html.includes('color: #000000'));
+            });
+
+            it('applies header image styles and preserves header background color', async function () {
+                lexicalRenderStub.resolves('<p>Content</p>');
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Test Subject',
+                    designSettings: {
+                        header_background_color: '#123456',
+                        header_image: 'https://example.com/header.png',
+                        show_badge: false,
+                        show_header_title: false
+                    },
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
+
+                assert.match(result.html, /class="header"[^>]*background-color:\s*#123456/i);
+                assert.match(result.html, /class="header-main"[^>]*background-color:\s*#123456/i);
+                assert.match(result.html, /class="header-image"/i);
+                assert.match(result.html, /src="https:\/\/example\.com\/header\.png"/);
+            });
+
+            it('applies shared Koenig card styles used by newsletters', async function () {
+                lexicalRenderStub.resolves(`
+                    <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
+                        <tbody>
                             <tr>
-                                <td width="50%" align="center" valign="middle">
-                                    <div class="kg-video-play-button"><div></div></div>
+                                <td class="kg-card-spacing">
+                                    <table class="btn" border="0" cellspacing="0" cellpadding="0" align="center">
+                                        <tbody>
+                                            <tr>
+                                                <td align="center">
+                                                    <a href="https://example.com">Click me</a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
                                 </td>
                             </tr>
-                        </table>
-                    </a>
-                    <figcaption>Embed note</figcaption>
-                </figure>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                        </tbody>
+                    </table>
+                    <div class="kg-card kg-callout-card kg-callout-card-blue">
+                        <div class="kg-callout-emoji">💡</div>
+                        <div class="kg-callout-text">Shared styles</div>
+                    </div>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                assert(result.html.includes('kg-callout-card'));
+                assert(result.html.includes('padding: 24px'));
+                assert(result.html.includes('table class="btn"'));
+                assert(result.html.includes('background-color: #ff0000'));
             });
 
-            assert.match(result.html, /class="kg-bookmark-container"[^>]*style="[^"]*display: flex/);
-            assert.match(result.html, /class="kg-video-preview"[^>]*style="[^"]*background-color: #1d1f21/);
-            assert(result.html.includes('Embed note'));
-        });
+            it('applies transistor card styles in welcome emails', async function () {
+                lexicalRenderStub.resolves(`
+                    <table class="kg-card kg-transistor-card" cellspacing="0" cellpadding="0" border="0" width="100%">
+                        <tr>
+                            <td style="padding: 24px; text-align: center;">
+                                <a href="https://partner.transistor.fm/ghost/%%{uuid}%%" class="kg-transistor-title">
+                                    Listen to your podcasts
+                                </a>
+                                <a href="https://partner.transistor.fm/ghost/%%{uuid}%%" class="kg-transistor-description">
+                                    Subscribe and listen to your personal podcast feed in your favorite app.
+                                </a>
+                            </td>
+                        </tr>
+                    </table>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-        it('applies call-to-action and product card styles', async function () {
-            lexicalRenderStub.resolves(`
-                <table class="kg-card kg-cta-card kg-cta-bg-none kg-cta-immersive kg-cta-link-accent" border="0" cellpadding="0" cellspacing="0" width="100%">
-                    <tr>
-                        <td class="kg-cta-sponsor-label"><p><a href="https://example.com/sponsor">Sponsor</a></p></td>
-                    </tr>
-                    <tr>
-                        <td class="kg-cta-content">
-                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="kg-cta-content-wrapper">
-                                <tr>
-                                    <td class="kg-cta-text"><p>CTA body with <a href="https://example.com/cta">link</a></p></td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-                <table class="kg-product-card" cellspacing="0" cellpadding="0" border="0">
-                    <tr>
-                        <td class="kg-product-card-container">
-                            <table cellspacing="0" cellpadding="0" border="0">
-                                <tr>
-                                    <td class="kg-product-image" align="center">
-                                        <img src="https://example.com/product.jpg" border="0"/>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td valign="top">
-                                        <h4 class="kg-product-title">Product title</h4>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class="kg-product-description-wrapper"><p>Product description</p></td>
-                                </tr>
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com', uuid: 'abc-123-def'},
+                    siteSettings: defaultSiteSettings
+                });
+
+                assert.match(result.html, /class="kg-card kg-transistor-card"[^>]*style="[^"]*border-radius: 10px/);
+                assert.match(result.html, /class="kg-card kg-transistor-card"[^>]*style="[^"]*border: 1px solid rgba\(0, 0, 0, 0.12\)/);
+                assert.match(result.html, /class="kg-transistor-title"[^>]*style="[^"]*display: block/);
+                assert.match(result.html, /class="kg-transistor-title"[^>]*style="[^"]*text-decoration: none/);
+                assert.match(result.html, /class="kg-transistor-description"[^>]*style="[^"]*max-width: 400px/);
+                assert.match(result.html, /href="https:\/\/partner\.transistor\.fm\/ghost\/abc-123-def"/);
+                assert(!result.html.includes('%%abc-123-def%%'));
+            });
+
+            it('applies bookmark and YouTube embed card styles', async function () {
+                lexicalRenderStub.resolves(`
+                    <figure class="kg-card kg-bookmark-card">
+                        <a class="kg-bookmark-container" href="https://example.com">
+                            <div class="kg-bookmark-content">
+                                <div class="kg-bookmark-title">Example title</div>
+                                <div class="kg-bookmark-description">Example description</div>
+                                <div class="kg-bookmark-metadata">
+                                    <span class="kg-bookmark-author">Example author</span>
+                                </div>
+                            </div>
+                            <div class="kg-bookmark-thumbnail">
+                                <img src="https://example.com/thumb.jpg" alt="">
+                            </div>
+                        </a>
+                    </figure>
+                    <figure class="kg-card kg-embed-card kg-card-hascaption">
+                        <a class="kg-video-preview" href="https://youtube.com/watch?v=abc123" aria-label="Play video">
+                            <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
                                 <tr>
-                                    <td class="kg-product-button-wrapper">
-                                        <table class="btn" border="0" cellspacing="0" cellpadding="0">
-                                            <tr>
-                                                <td align="center"><a href="https://example.com/buy">Buy now</a></td>
-                                            </tr>
-                                        </table>
+                                    <td width="50%" align="center" valign="middle">
+                                        <div class="kg-video-play-button"><div></div></div>
                                     </td>
                                 </tr>
                             </table>
-                        </td>
-                    </tr>
-                </table>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                        </a>
+                        <figcaption>Embed note</figcaption>
+                    </figure>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                assert.match(result.html, /class="kg-bookmark-container"[^>]*style="[^"]*display: flex/);
+                assert.match(result.html, /class="kg-video-preview"[^>]*style="[^"]*background-color: #1d1f21/);
+                assert(result.html.includes('Embed note'));
             });
 
-            assert.match(result.html, /class="kg-card kg-cta-card kg-cta-bg-none kg-cta-immersive kg-cta-link-accent"[^>]*style="[^"]*border-bottom: 1px solid #e0e7eb/);
-            assert.match(result.html, /class="kg-cta-sponsor-label"[^>]*style="[^"]*border-bottom: 1px solid #e0e7eb/);
-            assert.match(result.html, /class="kg-product-card"[^>]*style="[^"]*background-color: rgba\(255, 255, 255, 0.25\)/);
-
-            const productButtonTableMatch = result.html.match(/class="kg-product-button-wrapper"[\s\S]*?<table[^>]*class="btn"[^>]*style="([^"]*)"/);
-            assert(productButtonTableMatch, 'product button table should have inline styles');
-            assert(productButtonTableMatch[1].includes('width: 100%'), 'product button table should have width: 100%');
-        });
-
-        it('does not inline margin 0 auto on button tables that would override alignment', async function () {
-            lexicalRenderStub.resolves(`
-                <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
-                    <tbody>
+            it('applies call-to-action and product card styles', async function () {
+                lexicalRenderStub.resolves(`
+                    <table class="kg-card kg-cta-card kg-cta-bg-none kg-cta-immersive kg-cta-link-accent" border="0" cellpadding="0" cellspacing="0" width="100%">
+                        <tr>
+                            <td class="kg-cta-sponsor-label"><p><a href="https://example.com/sponsor">Sponsor</a></p></td>
+                        </tr>
                         <tr>
-                            <td class="kg-card-spacing">
-                                <table class="btn" border="0" cellspacing="0" cellpadding="0" align="left">
-                                    <tbody>
-                                        <tr>
-                                            <td align="center">
-                                                <a href="https://example.com">Left</a>
-                                            </td>
-                                        </tr>
-                                    </tbody>
+                            <td class="kg-cta-content">
+                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="kg-cta-content-wrapper">
+                                    <tr>
+                                        <td class="kg-cta-text"><p>CTA body with <a href="https://example.com/cta">link</a></p></td>
+                                    </tr>
                                 </table>
                             </td>
                         </tr>
-                    </tbody>
-                </table>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                    </table>
+                    <table class="kg-product-card" cellspacing="0" cellpadding="0" border="0">
+                        <tr>
+                            <td class="kg-product-card-container">
+                                <table cellspacing="0" cellpadding="0" border="0">
+                                    <tr>
+                                        <td class="kg-product-image" align="center">
+                                            <img src="https://example.com/product.jpg" border="0"/>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top">
+                                            <h4 class="kg-product-title">Product title</h4>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="kg-product-description-wrapper"><p>Product description</p></td>
+                                    </tr>
+                                    <tr>
+                                        <td class="kg-product-button-wrapper">
+                                            <table class="btn" border="0" cellspacing="0" cellpadding="0">
+                                                <tr>
+                                                    <td align="center"><a href="https://example.com/buy">Buy now</a></td>
+                                                </tr>
+                                            </table>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
+
+                assert.match(result.html, /class="kg-card kg-cta-card kg-cta-bg-none kg-cta-immersive kg-cta-link-accent"[^>]*style="[^"]*border-bottom: 1px solid #e0e7eb/);
+                assert.match(result.html, /class="kg-cta-sponsor-label"[^>]*style="[^"]*border-bottom: 1px solid #e0e7eb/);
+                assert.match(result.html, /class="kg-product-card"[^>]*style="[^"]*background-color: rgba\(255, 255, 255, 0.25\)/);
+
+                const productButtonTableMatch = result.html.match(/class="kg-product-button-wrapper"[\s\S]*?<table[^>]*class="btn"[^>]*style="([^"]*)"/);
+                assert(productButtonTableMatch, 'product button table should have inline styles');
+                assert(productButtonTableMatch[1].includes('width: 100%'), 'product button table should have width: 100%');
             });
 
-            assert.match(result.html, /<table[^>]*class="btn"[^>]*align="left"/);
+            it('does not inline margin 0 auto on button tables that would override alignment', async function () {
+                lexicalRenderStub.resolves(`
+                    <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
+                        <tbody>
+                            <tr>
+                                <td class="kg-card-spacing">
+                                    <table class="btn" border="0" cellspacing="0" cellpadding="0" align="left">
+                                        <tbody>
+                                            <tr>
+                                                <td align="center">
+                                                    <a href="https://example.com">Left</a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-            const btnMatch = result.html.match(/<table[^>]*class="btn"[^>]*>/);
-            assert(btnMatch, 'should have a btn table');
-            assert(!btnMatch[0].includes('margin: 0 auto'), 'button should not have margin: 0 auto');
-        });
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-        it('inlines figcaption styles for image card captions', async function () {
-            lexicalRenderStub.resolves(`
-                <figure class="kg-card kg-image-card kg-card-hascaption">
-                    <img src="https://example.com/photo.jpg" class="kg-image" alt="alt text" loading="lazy" width="600" height="400">
-                    <figcaption>A caption</figcaption>
-                </figure>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                assert.match(result.html, /<table[^>]*class="btn"[^>]*align="left"/);
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                const btnMatch = result.html.match(/<table[^>]*class="btn"[^>]*>/);
+                assert(btnMatch, 'should have a btn table');
+                assert(!btnMatch[0].includes('margin: 0 auto'), 'button should not have margin: 0 auto');
             });
 
-            // figcaption should have centered text and muted color inlined
-            assert(result.html.includes('A caption'));
-            const figcaptionMatch = result.html.match(/<figcaption[^>]*style="([^"]*)"[^>]*>/);
-            assert(figcaptionMatch, 'figcaption should have inline styles');
-            const figcaptionStyle = figcaptionMatch[1];
-            assert(figcaptionStyle.includes('text-align: center'), 'figcaption should be centered');
-            assert(figcaptionStyle.includes('font-size: 13px'), 'figcaption should have 13px font');
-        });
+            it('inlines figcaption styles for image card captions', async function () {
+                lexicalRenderStub.resolves(`
+                    <figure class="kg-card kg-image-card kg-card-hascaption">
+                        <img src="https://example.com/photo.jpg" class="kg-image" alt="alt text" loading="lazy" width="600" height="400">
+                        <figcaption>A caption</figcaption>
+                    </figure>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-        it('inlines figure margin and image max-width for image cards', async function () {
-            lexicalRenderStub.resolves(`
-                <figure class="kg-card kg-image-card">
-                    <img src="https://example.com/photo.jpg" class="kg-image" alt="alt text" loading="lazy" width="600" height="400">
-                </figure>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
+
+                assert(result.html.includes('A caption'));
+                const figcaptionMatch = result.html.match(/<figcaption[^>]*style="([^"]*)"[^>]*>/);
+                assert(figcaptionMatch, 'figcaption should have inline styles');
+                const figcaptionStyle = figcaptionMatch[1];
+                assert(figcaptionStyle.includes('text-align: center'), 'figcaption should be centered');
+                assert(figcaptionStyle.includes('font-size: 13px'), 'figcaption should have 13px font');
+            });
+
+            it('inlines figure margin and image max-width for image cards', async function () {
+                lexicalRenderStub.resolves(`
+                    <figure class="kg-card kg-image-card">
+                        <img src="https://example.com/photo.jpg" class="kg-image" alt="alt text" loading="lazy" width="600" height="400">
+                    </figure>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
-            });
+                const figureMatch = result.html.match(/<figure[^>]*style="([^"]*)"[^>]*>/);
+                assert(figureMatch, 'figure should have inline styles');
+                assert(figureMatch[1].includes('margin: 0 0 1.5em'), 'figure should have bottom margin');
 
-            // figure should have margin inlined
-            const figureMatch = result.html.match(/<figure[^>]*style="([^"]*)"[^>]*>/);
-            assert(figureMatch, 'figure should have inline styles');
-            assert(figureMatch[1].includes('margin: 0 0 1.5em'), 'figure should have bottom margin');
+                const imgMatch = result.html.match(/<img[^>]*style="([^"]*)"[^>]*>/);
+                assert(imgMatch, 'img should have inline styles');
+                assert(imgMatch[1].includes('max-width: 100%'), 'img should have max-width: 100%');
+            });
 
-            // img should have max-width
-            const imgMatch = result.html.match(/<img[^>]*style="([^"]*)"[^>]*>/);
-            assert(imgMatch, 'img should have inline styles');
-            assert(imgMatch[1].includes('max-width: 100%'), 'img should have max-width: 100%');
-        });
+            it('inlines width 100% on button card outer table', async function () {
+                lexicalRenderStub.resolves(`
+                    <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
+                        <tbody>
+                            <tr>
+                                <td class="kg-card-spacing">
+                                    <table class="btn" border="0" cellspacing="0" cellpadding="0" align="center">
+                                        <tbody>
+                                            <tr>
+                                                <td align="center">
+                                                    <a href="https://example.com">Click</a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-        it('inlines width 100% on button card outer table', async function () {
-            lexicalRenderStub.resolves(`
-                <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td class="kg-card-spacing">
-                                <table class="btn" border="0" cellspacing="0" cellpadding="0" align="center">
-                                    <tbody>
-                                        <tr>
-                                            <td align="center">
-                                                <a href="https://example.com">Click</a>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                const buttonCardMatch = result.html.match(/<table[^>]*class="kg-card kg-button-card"[^>]*style="([^"]*)"[^>]*>/);
+                assert(buttonCardMatch, 'button card table should have inline styles');
+                assert(buttonCardMatch[1].includes('width: 100%'), 'button card table should have width: 100%');
             });
 
-            // The outer kg-button-card table should have width: 100% inlined
-            const buttonCardMatch = result.html.match(/<table[^>]*class="kg-card kg-button-card"[^>]*style="([^"]*)"[^>]*>/);
-            assert(buttonCardMatch, 'button card table should have inline styles');
-            assert(buttonCardMatch[1].includes('width: 100%'), 'button card table should have width: 100%');
-        });
+            it('preserves explicit right alignment values', async function () {
+                lexicalRenderStub.resolves(`
+                    <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
+                        <tbody>
+                            <tr>
+                                <td class="kg-card-spacing">
+                                    <table class="btn" border="0" cellspacing="0" cellpadding="0" align="right">
+                                        <tbody>
+                                            <tr>
+                                                <td align="center">
+                                                    <a href="https://example.com">Right</a>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                `);
+                const renderer = new MemberWelcomeEmailRenderer({t: key => key});
 
-        it('preserves explicit right alignment values', async function () {
-            lexicalRenderStub.resolves(`
-                <table class="kg-card kg-button-card" border="0" cellpadding="0" cellspacing="0">
-                    <tbody>
-                        <tr>
-                            <td class="kg-card-spacing">
-                                <table class="btn" border="0" cellspacing="0" cellpadding="0" align="right">
-                                    <tbody>
-                                        <tr>
-                                            <td align="center">
-                                                <a href="https://example.com">Right</a>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            `);
-            const renderer = new MemberWelcomeEmailRenderer({t: key => key});
+                const result = await renderer.render({
+                    lexical: '{}',
+                    subject: 'Welcome!',
+                    member: {name: 'John', email: 'john@example.com'},
+                    siteSettings: defaultSiteSettings
+                });
 
-            const result = await renderer.render({
-                lexical: '{}',
-                subject: 'Welcome!',
-                member: {name: 'John', email: 'john@example.com'},
-                siteSettings: defaultSiteSettings
+                assert.match(result.html, /<table[^>]*class="btn"[^>]*align="right"/);
             });
-
-            assert.match(result.html, /<table[^>]*class="btn"[^>]*align="right"/);
         });
     });
 });