From 4639514a3b3f3976ff867048daac4183e5c6d6f3 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 5 Apr 2023 11:07:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20email=20design=20customizat?=
 =?UTF-8?q?ion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes https://github.com/TryGhost/Team/issues/2671

Co-authored-by: Fabien 'egg' O'Carroll <fabien@allou.is>
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
---
 .../components/modals/newsletters/edit.hbs    |   12 +-
 .../modals/newsletters/edit/design-labs.hbs   |  301 ----
 .../modals/newsletters/edit/design-labs.js    |  105 --
 .../modals/newsletters/edit/design.hbs        |   46 +-
 .../modals/newsletters/edit/design.js         |   68 +
 .../modals/newsletters/edit/preview-labs.hbs  |  137 --
 .../modals/newsletters/edit/preview-labs.js   |  137 --
 .../modals/newsletters/edit/preview.hbs       |  223 +--
 .../modals/newsletters/edit/preview.js        |   76 +
 ghost/email-service/lib/email-renderer.js     |   19 +-
 .../email-templates/partials/styles-old.hbs   | 1532 -----------------
 .../lib/email-templates/template-old.hbs      |  240 ---
 12 files changed, 306 insertions(+), 2590 deletions(-)
 delete mode 100644 ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
 delete mode 100644 ghost/admin/app/components/modals/newsletters/edit/design-labs.js
 delete mode 100644 ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
 delete mode 100644 ghost/admin/app/components/modals/newsletters/edit/preview-labs.js
 delete mode 100644 ghost/email-service/lib/email-templates/partials/styles-old.hbs
 delete mode 100644 ghost/email-service/lib/email-templates/template-old.hbs

diff --git a/ghost/admin/app/components/modals/newsletters/edit.hbs b/ghost/admin/app/components/modals/newsletters/edit.hbs
index 3a14690983..cdf5a90ee1 100644
--- a/ghost/admin/app/components/modals/newsletters/edit.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit.hbs
@@ -8,11 +8,7 @@
                 <div class="modal-fullsettings-body-labs">
                     <div class="modal-fullsettings-top">
                         <Modals::Newsletters::Edit::Settings @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
-                        {{#if (feature 'makingItRain')}}
-                            <Modals::Newsletters::Edit::DesignLabs @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
-                        {{else}}
-                            <Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
-                        {{/if}}
+                        <Modals::Newsletters::Edit::Design @newsletter={{@data.newsletter}} @openSection={{this.openSection}} @toggleSection={{this.toggleSection}} />
                     </div>
                     <div class="modal-fullsettings-bottom">
                         <div class="modal-fullsettings-footer">
@@ -61,11 +57,7 @@
                         data-test-button="save-newsletter"
                     />
                 </div>
-                {{#if (feature 'makingItRain')}}
-                    <Modals::Newsletters::Edit::PreviewLabs @newsletter={{@data.newsletter}} />
-                {{else}}
-                    <Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
-                {{/if}}
+                <Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
             </div>
         </div>
     </div>
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
deleted file mode 100644
index 2c6b10e4ea..0000000000
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
+++ /dev/null
@@ -1,301 +0,0 @@
-<fieldset class="modal-fullsettings-form-labs email-design">
-    <h4 class="modal-fullsettings-section-title">Design</h4>
-
-    <div class="modal-fullsettings-section-labs">
-
-        {{#let (eq @openSection "design-header") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-header")}} data-test-nav-toggle="design.header">
-                {{svg-jar "email-header"}} Header
-                <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
-            </button>
-            {{#liquid-if isOpen}}
-                <div class="modal-fullsettings-tab-expanded">
-                    <div class="gh-stack">
-                        <GhFormGroup class="gh-stack-item">
-                            <GhUploader
-                                @extensions={{this.imageExtensions}}
-                                @paramsHash={{hash purpose="image"}}
-                                @onComplete={{fn this.imageUploaded "headerImage"}}
-                                as |uploader|
-                            >
-                                <div class="modal-fullsettings-uploader">
-                                    <div class="gh-header-img-desc">
-                                        <label class="modal-fullsettings-title">Header image</label>
-                                        <p>Optional, recommended size 1200x600</p>
-                                    </div>
-                                    {{#if uploader.isUploading}}
-                                        <div class="gh-header-img-container">
-                                            <div class="gh-loading-spinner"></div>
-                                        </div>
-                                    {{else if @newsletter.headerImage}}
-                                        <div class="gh-header-img">
-                                            <img
-                                                class="gh-header-img-thumbnail"
-                                                src={{@newsletter.headerImage}}
-                                                alt=""
-                                                role="presentation"
-                                                data-test-img="header"
-                                            >
-                                            <button type="button" class="gh-btn gh-header-img-deleteicon" {{on "click" (fn this.changeSetting "headerImage" null)}}>
-                                                <span> {{svg-jar "trash" class="w5 h5"}} </span>
-                                            </button>
-                                        </div>
-                                    {{else}}
-                                        <button type="button" class="gh-btn gh-header-img-uploadicon" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="header-image">
-                                            <span>{{svg-jar "upload-fill" class="w5 h5"}}</span>
-                                        </button>
-                                        <div style="display:none">
-                                            <GhFileInput
-                                                @multiple={{false}}
-                                                @action={{uploader.setFiles}}
-                                                @accept={{uploader.imageMimeTypes}}
-                                                @onInsert={{uploader.registerFileInput}}
-                                                data-test-file-input="icon" />
-                                        </div>
-                                    {{/if}}
-                                </div>
-                            </GhUploader>
-                        </GhFormGroup>
-
-                        {{#if this.settings.icon}}
-                            <GhFormGroup class="gh-stack-item row">
-                                <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
-                                <div class="for-switch x-small {{unless this.settings.icon "disabled"}}">
-                                    <label class="switch" for="show-header">
-                                        <input
-                                            type="checkbox"
-                                            checked={{and @newsletter.showHeaderIcon this.settings.icon}}
-                                            id="show-header"
-                                            name="show-header"
-                                            disabled={{not this.settings.icon}}
-                                            {{on "click" (fn this.toggleSetting "showHeaderIcon")}}
-                                        >
-                                        <span class="input-toggle-component"></span>
-                                    </label>
-                                </div>
-                            </GhFormGroup>
-                        {{/if}}
-
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Publication title</label>
-                            <div class="for-switch x-small">
-                                <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
-                                    <input
-                                        type="checkbox"
-                                        checked={{@newsletter.showHeaderTitle}}
-                                        id="show-title"
-                                        name="show-title"
-                                        {{on "click" (fn this.toggleSetting "showHeaderTitle")}}
-                                    >
-                                    <span class="input-toggle-component"></span>
-                                </label>
-                            </div>
-                        </GhFormGroup>
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Newsletter name</label>
-                            <div class="for-switch x-small">
-                                <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
-                                    <input
-                                        type="checkbox"
-                                        checked={{@newsletter.showHeaderName}}
-                                        id="show-header-name"
-                                        name="show-header-name"
-                                        {{on "click" (fn this.toggleSetting "showHeaderName")}}
-                                    >
-                                    <span class="input-toggle-component"></span>
-                                </label>
-                            </div>
-                        </GhFormGroup>
-                    </div>
-                </div>
-            {{/liquid-if}}
-        {{/let}}
-
-        {{#let (eq @openSection "design-body") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-body")}} data-test-nav-toggle="design.body">
-                {{svg-jar "email-body"}} Body
-                <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
-            </button>
-            {{#liquid-if isOpen class="show-overflow"}}
-                <div class="modal-fullsettings-tab-expanded">
-                    <div class="gh-stack">
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Background color</label>
-                            <Modals::Newsletters::Components::ColorPicker
-                                @color={{@newsletter.backgroundColor}}
-                                @presetColors={{this.backgroundPresetColors}}
-                                @onColorChange={{fn this.changeSetting "backgroundColor"}}
-                            />
-                        </GhFormGroup>
-
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Border color</label>
-                            <Modals::Newsletters::Components::ColorPicker
-                                @color={{@newsletter.borderColor}}
-                                @presetColors={{this.borderPresetColors}}
-                                @onColorChange={{fn this.changeSetting "borderColor"}}
-                            />
-                        </GhFormGroup>
-
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Post title</label>
-                            <div class="for-switch x-small">
-                                <label class="switch" for="show-post-title">
-                                    <input
-                                        type="checkbox"
-                                        checked={{@newsletter.showPostTitleSection}}
-                                        id="show-post-title"
-                                        name="show-post-title"
-                                        {{on "click" (fn this.toggleSetting "showPostTitleSection")}}
-                                    >
-                                    <span class="input-toggle-component"></span>
-                                </label>
-                            </div>
-                        </GhFormGroup>
-
-                        {{#if @newsletter.showPostTitleSection}}
-                            <GhFormGroup class="gh-stack-item">
-                                <label class="modal-fullsettings-title">Post title style</label>
-                                <div class="gh-email-design-typography-wrapper header">
-                                    <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
-                                        <GhFontSelector
-                                            @selected={{@newsletter.titleFontCategory}}
-                                            @onChange={{fn this.changeSetting "titleFontCategory"}}
-                                        />
-                                    </div>
-                                    <div class="gh-btn-group icons" id="newsletter-title-alignment">
-                                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
-                                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
-                                    </div>
-                                </div>
-                            </GhFormGroup>
-                        {{/if}}
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Heading color</label>
-                            <Modals::Newsletters::Components::ColorPicker
-                                @color={{@newsletter.titleColor}}
-                                @presetColors={{this.titlePresetColors}}
-                                @onColorChange={{fn this.changeSetting "titleColor"}}
-                            />
-                        </GhFormGroup>
-
-                        <GhFormGroup class="gh-stack-item row">
-                            <label class="modal-fullsettings-title">Feature image</label>
-                            <div class="for-switch x-small">
-                                <label class="switch" for="show-feature-image">
-                                    <input
-                                        type="checkbox"
-                                        checked={{@newsletter.showFeatureImage}}
-                                        id="show-feature-image"
-                                        name="show-feature-image"
-                                        {{on "click" (fn this.toggleSetting "showFeatureImage")}}
-                                    >
-                                    <span class="input-toggle-component"></span>
-                                </label>
-                            </div>
-                        </GhFormGroup>
-                        <GhFormGroup class="gh-stack-item">
-                            <label class="modal-fullsettings-title">Body style</label>
-                            <div class="gh-email-design-typography-wrapper">
-                                <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="bodyFontCategory">
-                                    <GhFontSelector
-                                        @selected={{@newsletter.bodyFontCategory}}
-                                        @onChange={{fn this.changeSetting "bodyFontCategory"}}
-                                    />
-                                </div>
-                            </div>
-                        </GhFormGroup>
-                    </div>
-                </div>
-            {{/liquid-if}}
-        {{/let}}
-
-        {{#let (eq @openSection "design-footer") as |isOpen|}}
-            <button class="modal-fullsettings-tab {{if isOpen "active"}}" type="button" {{on "click" (fn @toggleSection "design-footer")}} data-test-nav-toggle="design.footer">
-                {{svg-jar "email-footer"}} Footer
-                <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
-            </button>
-            {{#liquid-if isOpen}}
-                <div class="modal-fullsettings-tab-expanded">
-                    <div class="gh-stack">
-
-                        {{#if (feature "audienceFeedback")}}
-                            <GhFormGroup class="gh-stack-item row">
-                                <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
-                                <div class="for-switch x-small">
-                                    <div class="container">
-                                        <input
-                                            type="checkbox"
-                                            id="capture-feedback"
-                                            checked={{@newsletter.feedbackEnabled}}
-                                            {{on "change" (fn this.onCheckboxChange "feedbackEnabled")}}
-                                        >
-                                        <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "feedbackEnabled")}}></button>
-                                    </div>
-                                </div>
-                            </GhFormGroup>
-                        {{/if}}
-
-                        {{#unless (eq this.settings.commentsEnabled 'off') }}
-                            <GhFormGroup class="gh-stack-item row">
-                                <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
-                                <div class="for-switch x-small">
-                                    <div class="container">
-                                        <input
-                                            type="checkbox"
-                                            id="comments-link"
-                                            checked={{@newsletter.showCommentCta}}
-                                            {{on "change" (fn this.onCheckboxChange "showCommentCta")}}
-                                        >
-                                        <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showCommentCta")}}></button>
-                                    </div>
-                                </div>
-                            </GhFormGroup>
-                        {{/unless}}
-
-                        <GhFormGroup class="gh-stack-item row">
-                            <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
-                            <div class="for-switch x-small">
-                                <div class="container">
-                                    <input
-                                        type="checkbox"
-                                        id="latest-posts"
-                                        checked={{@newsletter.showLatestPosts}}
-                                        {{on "change" (fn this.onCheckboxChange "showLatestPosts")}}
-                                    >
-                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showLatestPosts")}}></button>
-                                </div>
-                            </div>
-                        </GhFormGroup>
-
-                        <GhFormGroup class="gh-stack-item row">
-                            <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
-                            <div class="for-switch x-small">
-                                <div class="container">
-                                    <input
-                                        type="checkbox"
-                                        id="capture-feedback"
-                                        checked={{@newsletter.showSubscriptionDetails}}
-                                        {{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
-                                    >
-                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></button>
-                                </div>
-                            </div>
-                        </GhFormGroup>
-
-                        <GhFormGroup class="gh-stack-item">
-                            <label class="modal-fullsettings-title">Email footer</label>
-                            <KoenigBasicHtmlInput
-                                @name="footer"
-                                @html={{@newsletter.footerContent}}
-                                @class="miw-100 form-text gh-members-emailsettings-footer-input"
-                                @onChange={{fn this.changeSetting "footerContent"}}
-                            />
-                            <p>Any extra information or legal text</p>
-                        </GhFormGroup>
-                    </div>
-                </div>
-            {{/liquid-if}}
-        {{/let}}
-    </div>
-</fieldset>
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.js b/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
deleted file mode 100644
index 10054fbe7e..0000000000
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import Component from '@glimmer/component';
-import {IMAGE_EXTENSIONS} from 'ghost-admin/components/gh-image-uploader';
-import {action} from '@ember/object';
-import {inject as service} from '@ember/service';
-import {textColorForBackgroundColor} from '@tryghost/color-utils';
-
-export default class EditNewsletterDesignForm extends Component {
-    @service settings;
-
-    imageExtensions = IMAGE_EXTENSIONS;
-
-    @action
-    onCheckboxChange(property, event) {
-        this.args.newsletter[property] = event.target.checked;
-    }
-
-    @action
-    toggleProperty(property) {
-        this.args.newsletter[property] = !this.args.newsletter[property];
-    }
-
-    @action
-    imageUploaded(property, images) {
-        if (images[0]) {
-            this.args.newsletter[property] = images[0].url;
-        }
-    }
-
-    @action
-    changeSetting(property, value) {
-        this.args.newsletter[property] = value;
-    }
-
-    @action
-    toggleSetting(property, event) {
-        this.args.newsletter[property] = event.target.checked;
-    }
-
-    get backgroundColorIsDark() {
-        if (this.args.newsletter.backgroundColor === 'dark') {
-            return true;
-        }
-        if (this.args.newsletter.backgroundColor === 'light') {
-            return false;
-        }
-        return textColorForBackgroundColor(this.args.newsletter.backgroundColor).hex().toLowerCase() === '#ffffff';
-    }
-
-    get backgroundPresetColors() {
-        return [
-            {
-                value: '#f0f0f0',
-                name: 'Lightgrey',
-                class: '',
-                style: 'background: #f0f0f0 !important;'
-            },
-            {
-                value: 'light',
-                name: 'White',
-                class: 'white',
-                style: ''
-            }
-        ];
-    }
-
-    get borderPresetColors() {
-        return [
-            {
-                value: 'accent',
-                name: 'Accent',
-                class: 'accent',
-                style: ''
-            },
-            {
-                value: 'auto',
-                name: 'Auto',
-                class: this.backgroundColorIsDark ? 'white' : 'black',
-                style: ''
-            },
-            {
-                value: null,
-                name: 'Transparent',
-                class: 'transparent',
-                style: ''
-            }
-        ];
-    }
-
-    get titlePresetColors() {
-        return [
-            {
-                value: 'accent',
-                name: 'Accent',
-                class: 'accent',
-                style: ''
-            },
-            {
-                value: null,
-                name: 'Auto',
-                class: this.backgroundColorIsDark ? 'white' : 'black',
-                style: ''
-            }
-        ];
-    }
-}
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design.hbs b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
index a2676d1ef9..2c6b10e4ea 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
@@ -60,7 +60,7 @@
                         {{#if this.settings.icon}}
                             <GhFormGroup class="gh-stack-item row">
                                 <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
-                                <div class="for-switch small {{unless this.settings.icon "disabled"}}">
+                                <div class="for-switch x-small {{unless this.settings.icon "disabled"}}">
                                     <label class="switch" for="show-header">
                                         <input
                                             type="checkbox"
@@ -78,7 +78,7 @@
 
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Publication title</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
                                     <input
                                         type="checkbox"
@@ -93,7 +93,7 @@
                         </GhFormGroup>
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Newsletter name</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
                                     <input
                                         type="checkbox"
@@ -119,9 +119,27 @@
             {{#liquid-if isOpen class="show-overflow"}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Background color</label>
+                            <Modals::Newsletters::Components::ColorPicker
+                                @color={{@newsletter.backgroundColor}}
+                                @presetColors={{this.backgroundPresetColors}}
+                                @onColorChange={{fn this.changeSetting "backgroundColor"}}
+                            />
+                        </GhFormGroup>
+
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Border color</label>
+                            <Modals::Newsletters::Components::ColorPicker
+                                @color={{@newsletter.borderColor}}
+                                @presetColors={{this.borderPresetColors}}
+                                @onColorChange={{fn this.changeSetting "borderColor"}}
+                            />
+                        </GhFormGroup>
+
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Post title</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-post-title">
                                     <input
                                         type="checkbox"
@@ -137,6 +155,7 @@
 
                         {{#if @newsletter.showPostTitleSection}}
                             <GhFormGroup class="gh-stack-item">
+                                <label class="modal-fullsettings-title">Post title style</label>
                                 <div class="gh-email-design-typography-wrapper header">
                                     <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
                                         <GhFontSelector
@@ -151,9 +170,18 @@
                                 </div>
                             </GhFormGroup>
                         {{/if}}
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Heading color</label>
+                            <Modals::Newsletters::Components::ColorPicker
+                                @color={{@newsletter.titleColor}}
+                                @presetColors={{this.titlePresetColors}}
+                                @onColorChange={{fn this.changeSetting "titleColor"}}
+                            />
+                        </GhFormGroup>
+
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Feature image</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-feature-image">
                                     <input
                                         type="checkbox"
@@ -194,7 +222,7 @@
                         {{#if (feature "audienceFeedback")}}
                             <GhFormGroup class="gh-stack-item row">
                                 <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
-                                <div class="for-switch small">
+                                <div class="for-switch x-small">
                                     <div class="container">
                                         <input
                                             type="checkbox"
@@ -211,7 +239,7 @@
                         {{#unless (eq this.settings.commentsEnabled 'off') }}
                             <GhFormGroup class="gh-stack-item row">
                                 <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
-                                <div class="for-switch small">
+                                <div class="for-switch x-small">
                                     <div class="container">
                                         <input
                                             type="checkbox"
@@ -227,7 +255,7 @@
 
                         <GhFormGroup class="gh-stack-item row">
                             <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <div class="container">
                                     <input
                                         type="checkbox"
@@ -242,7 +270,7 @@
 
                         <GhFormGroup class="gh-stack-item row">
                             <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <div class="container">
                                     <input
                                         type="checkbox"
diff --git a/ghost/admin/app/components/modals/newsletters/edit/design.js b/ghost/admin/app/components/modals/newsletters/edit/design.js
index 19228e75b1..10054fbe7e 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design.js
+++ b/ghost/admin/app/components/modals/newsletters/edit/design.js
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import {IMAGE_EXTENSIONS} from 'ghost-admin/components/gh-image-uploader';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {textColorForBackgroundColor} from '@tryghost/color-utils';
 
 export default class EditNewsletterDesignForm extends Component {
     @service settings;
@@ -34,4 +35,71 @@ export default class EditNewsletterDesignForm extends Component {
     toggleSetting(property, event) {
         this.args.newsletter[property] = event.target.checked;
     }
+
+    get backgroundColorIsDark() {
+        if (this.args.newsletter.backgroundColor === 'dark') {
+            return true;
+        }
+        if (this.args.newsletter.backgroundColor === 'light') {
+            return false;
+        }
+        return textColorForBackgroundColor(this.args.newsletter.backgroundColor).hex().toLowerCase() === '#ffffff';
+    }
+
+    get backgroundPresetColors() {
+        return [
+            {
+                value: '#f0f0f0',
+                name: 'Lightgrey',
+                class: '',
+                style: 'background: #f0f0f0 !important;'
+            },
+            {
+                value: 'light',
+                name: 'White',
+                class: 'white',
+                style: ''
+            }
+        ];
+    }
+
+    get borderPresetColors() {
+        return [
+            {
+                value: 'accent',
+                name: 'Accent',
+                class: 'accent',
+                style: ''
+            },
+            {
+                value: 'auto',
+                name: 'Auto',
+                class: this.backgroundColorIsDark ? 'white' : 'black',
+                style: ''
+            },
+            {
+                value: null,
+                name: 'Transparent',
+                class: 'transparent',
+                style: ''
+            }
+        ];
+    }
+
+    get titlePresetColors() {
+        return [
+            {
+                value: 'accent',
+                name: 'Accent',
+                class: 'accent',
+                style: ''
+            },
+            {
+                value: null,
+                name: 'Auto',
+                class: this.backgroundColorIsDark ? 'white' : 'black',
+                style: ''
+            }
+        ];
+    }
 }
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
deleted file mode 100644
index 5346b2cbea..0000000000
--- a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs
+++ /dev/null
@@ -1,137 +0,0 @@
-<div class="gh-members-emailpreview gh-members-emailpreview-labs">
-    <div class="gh-members-emailpreview-container">
-        <div class="gh-members-emailpreview-faux">
-            <p>
-                <span class="strong">{{or @newsletter.senderName this.settings.title}}</span> &lt;{{full-email-address (or @newsletter.senderEmail "noreply")}}&gt;
-            </p>
-            <p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
-        </div>
-
-        <div class="gh-members-emailpreview-contents" style={{html-safe (concat "background: " this.backgroundColor)}}>
-            <div class="gh-members-emailpreview-border" style={{html-safe (concat "border-color: " this.borderColor)}}>
-                {{#if @newsletter.headerImage}}
-                    <div class="gh-members-emailpreview-header-image">
-                        <img src={{@newsletter.headerImage}} alt="" role="presentation">
-                    </div>
-                {{/if}}
-                {{#if this.showHeader}}
-                    <div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}} style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
-                        {{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
-                            <img src={{this.settings.icon}} alt="" role="presentation" />
-                        {{/if}}
-                        {{#if this.headerTitle}}
-                            <h4 style={{html-safe (concat "color: " this.textColor)}}>{{this.headerTitle}}</h4>
-                        {{/if}}
-                        {{#if this.headerSubtitle}}
-                            <h5 style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.headerSubtitle}}</h5>
-                        {{/if}}
-                    </div>
-                {{/if}}
-                {{#if @newsletter.showPostTitleSection}}
-                    <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
-                        <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}" style={{html-safe (concat "color: " this.titleColor)}}>Your email newsletter</h2>
-                        <div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
-                            <p style={{html-safe (concat "color: " this.secondaryTextColor)}}>By {{or this.session.user.name this.session.user.email}}
-                                <span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
-                                {{#if this.showCommentCta}}
-                                    <span style={{html-safe (concat "color: " this.secondaryTextColor)}}><a href="javascript:" class="gh-members-emailpreview-comment-link" 
-                                    style={{html-safe (if this.backgroundColorIsDark "filter: brightness(2)")}}> {{svg-jar "comment"}}</a></span>
-                                {{/if}}
-                            </p>
-                            <p>
-                                <a href="javascript:" class="gh-members-emailpreview-view-online" style={{html-safe (concat "color: " this.secondaryTextColor)}}>View in browser</a>
-                            </p>
-                        </div>
-                    </div>
-                {{/if}}
-                {{#if @newsletter.showFeatureImage}}
-                    <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
-                    <div class="gh-members-emailpreview-featureimage-caption" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Feature image caption</div>
-                {{/if}}
-                <div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
-                    <p style={{html-safe (concat "color: " this.textColor)}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
-                    <p style={{html-safe (concat "color: " this.textColor)}}>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
-                    <p style={{html-safe (concat "color: " this.textColor)}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
-                </div>
-
-                {{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
-                    <div class="gh-members-emailpreview-feedback" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
-                        <div class="gh-members-emailpreview-feedback-buttons-group">
-                            {{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
-                                <Modals::Newsletters::Components::FeedbackButton
-                                    @text="More like this"
-                                    @icon="thumbs-up"
-                                    @textColor={{html-safe this.textColor}} />
-
-                                <Modals::Newsletters::Components::FeedbackButton
-                                    @text="Less like this"
-                                    @icon="thumbs-down"
-                                    @textColor={{html-safe this.textColor}} />
-                            {{/if}}
-
-                            {{#if this.showCommentCta}}
-                                <Modals::Newsletters::Components::FeedbackButton
-                                    @text="Comment"
-                                    @icon="comment"
-                                    @textColor={{html-safe this.textColor}} />
-                            {{/if}}
-                        </div>
-                    </div>
-                {{/if}}
-
-                {{#if @newsletter.showLatestPosts}}
-                    <div class="gh-members-emailpreview-latest-posts" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
-                        <h3 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Keep reading</h3>
-                        <Modals::Newsletters::Components::LatestPost
-                            @imgPath="assets/img/latest-posts-1.png"
-                            @postTitle="The three latest posts published on your site"
-                            @postExcerpt="Posts sent as an email only will never be shown here."
-                            @textColor={{html-safe this.textColor}}
-                            @secondaryTextColor={{html-safe this.secondaryTextColor}} />
-                        <Modals::Newsletters::Components::LatestPost
-                            @imgPath="assets/img/latest-posts-2.png"
-                            @postTitle="Displayed at the bottom of each newsletter"
-                            @postExcerpt="Giving your readers one more place to discover your stories."
-                            @textColor={{html-safe this.textColor}}
-                            @secondaryTextColor={{html-safe this.secondaryTextColor}} />
-                        <Modals::Newsletters::Components::LatestPost
-                            @imgPath="assets/img/latest-posts-3.png"
-                            @postTitle="To keep your work front and center"
-                            @postExcerpt="Making sure that your audience stays engaged."
-                            @textColor={{html-safe this.textColor}}
-                            @secondaryTextColor={{html-safe this.secondaryTextColor}} />
-                    </div>
-                {{/if}}
-
-                {{#if @newsletter.showSubscriptionDetails}}
-                    <div class="gh-members-emailpreview-subscription-details" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
-                        <h4 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Subscription details</h4>
-                        <p class="pb4" style={{html-safe (concat "color: " this.textColor)}}>You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <p style={{html-safe (concat "color: " this.textColor)}}>Name: Jamie Larson</p>
-                                <p style={{html-safe (concat "color: " this.textColor)}}>Email: jamie@example.com</p>
-                                <p style={{html-safe (concat "color: " this.textColor)}}>Member since: {{this.todayString}}</p>
-                            </div>
-                            <a href="#" class="gh-members-emailpreview-subscription-link" style={{html-safe (if this.backgroundColorIsDark "color: #FFF; text-decoration: underline;")}}>Manage subscription &rarr;</a>
-                        </div>
-                    </div>
-                {{/if}}
-
-                <div class="gh-members-emailpreview-footer">
-                    <div class="gh-members-emailpreview-footercontent" style={{html-safe (concat "color: " this.secondaryTextColor)}}>
-                        {{html-safe @newsletter.footerContent}}
-                    </div>
-                    <div class="gh-members-emailpreview-footersite">
-                        <span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.settings.title}} &copy; {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Unsubscribe</a>
-                    </div>
-                </div>
-                <div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
-                    <a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
-                    </svg> <span>Powered by Ghost</span></a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.js b/ghost/admin/app/components/modals/newsletters/edit/preview-labs.js
deleted file mode 100644
index 67b0cf16ad..0000000000
--- a/ghost/admin/app/components/modals/newsletters/edit/preview-labs.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import Component from '@glimmer/component';
-import moment from 'moment-timezone';
-import {htmlSafe} from '@ember/template';
-import {inject as service} from '@ember/service';
-import {textColorForBackgroundColor} from '@tryghost/color-utils';
-
-export default class EditNewsletterPreview extends Component {
-    @service ghostPaths;
-    @service session;
-    @service settings;
-    @service membersUtils;
-
-    get accentColor() {
-        return this.settings.accentColor;
-    }
-
-    get backgroundColor() {
-        const value = this.args.newsletter.backgroundColor;
-
-        const validHex = /#([0-9a-f]{3}){1,2}$/i;
-
-        if (validHex.test(value)) {
-            return value;
-        }
-
-        if (value === 'dark') {
-            return '#15212a';
-        }
-
-        return '#ffffff';
-    }
-
-    get backgroundColorIsDark() {
-        return textColorForBackgroundColor(this.backgroundColor).hex().toLowerCase() === '#ffffff';
-    }
-
-    get borderColor() {
-        const value = this.args.newsletter.borderColor;
-
-        const validHex = /#([0-9a-f]{3}){1,2}$/i;
-
-        if (validHex.test(value)) {
-            return value;
-        }
-
-        if (value === 'auto') {
-            const backgroundColor = this.backgroundColor;
-            return textColorForBackgroundColor(backgroundColor).hex();
-        }
-
-        if (value === 'accent') {
-            return this.accentColor;
-        }
-
-        return null;
-    }
-
-    get secondaryBorderColor() {
-        return textColorForBackgroundColor(this.backgroundColor).alpha(0.12).toString();
-    }
-
-    get titleColor() {
-        const value = this.args.newsletter.titleColor;
-
-        const validHex = /#([0-9a-f]{3}){1,2}$/i;
-
-        if (validHex.test(value)) {
-            return value;
-        }
-
-        if (value === 'accent') {
-            return this.accentColor;
-        }
-
-        const backgroundColor = this.backgroundColor;
-        return textColorForBackgroundColor(backgroundColor).hex();
-    }
-    get textColor() {
-        return textColorForBackgroundColor(this.backgroundColor).hex();
-    }
-    get secondaryTextColor() {
-        return textColorForBackgroundColor(this.backgroundColor).alpha(0.5).toString();
-    }
-    get linkColor() {
-        return this.backgroundIsDark ? '#ffffff' : this.accentColor;
-    }
-
-    get showHeader() {
-        return (this.args.newsletter.showHeaderIcon && this.settings.icon)
-            || this.headerTitle;
-    }
-
-    get showHeaderTitle() {
-        return this.headerTitle || this.headerSubtitle;
-    }
-
-    get showCommentCta() {
-        return this.args.newsletter.showCommentCta && this.settings.commentsEnabled !== 'off';
-    }
-
-    get headerTitle() {
-        if (this.args.newsletter.showHeaderTitle) {
-            return this.settings.title;
-        } else if (this.args.newsletter.showHeaderName) {
-            return this.args.newsletter.name;
-        }
-
-        return null;
-    }
-
-    get headerSubtitle() {
-        if (this.args.newsletter.showHeaderTitle && this.args.newsletter.showHeaderName) {
-            return this.args.newsletter.name;
-        }
-
-        return null;
-    }
-
-    get featureImageUrl() {
-        // keep path separate so asset rewriting correctly picks it up
-        const imagePath = '/img/user-cover.png';
-        const fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath;
-        return fullPath;
-    }
-
-    get featureImageStyle() {
-        return htmlSafe(`background-image: url(${this.featureImageUrl})`);
-    }
-
-    get renewDateString() {
-        return moment().add(1, 'year').format('DD MMM YYYY');
-    }
-
-    get todayString() {
-        return moment().format('DD MMM YYYY');
-    }
-}
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
index b0c0318743..ef9ed264c0 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
@@ -1,4 +1,4 @@
-<div class="gh-members-emailpreview">
+<div class="gh-members-emailpreview gh-members-emailpreview-labs">
     <div class="gh-members-emailpreview-container">
         <div class="gh-members-emailpreview-faux">
             <p>
@@ -6,118 +6,131 @@
             </p>
             <p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
         </div>
-        <div class="gh-members-emailpreview-contents">
-            {{#if @newsletter.headerImage}}
-                <div class="gh-members-emailpreview-header-image">
-                    <img src={{@newsletter.headerImage}} alt="" role="presentation">
-                </div>
-            {{/if}}
-            {{#if this.showHeader}}
-                <div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
-                    {{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
-                        <img src={{this.settings.icon}} alt="" role="presentation" />
-                    {{/if}}
-                    {{#if this.headerTitle}}
-                        <h4>{{this.headerTitle}}</h4>
-                    {{/if}}
-                    {{#if this.headerSubtitle}}
-                        <h5>{{this.headerSubtitle}}</h5>
-                    {{/if}}
-                </div>
-            {{/if}}
-            {{#if @newsletter.showPostTitleSection}}
-                <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
-                    <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
-                    <div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
-                        <p>By {{or this.session.user.name this.session.user.email}}
-                            <span>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
-                            {{#if this.showCommentCta}}
-                                <span><a href="javascript:" class="gh-members-emailpreview-comment-link"> {{svg-jar "comment"}}</a></span>
-                            {{/if}}
-                        </p>
-                        <p>
-                            <a href="javascript:" class="gh-members-emailpreview-view-online">View in browser</a>
-                        </p>
+
+        <div class="gh-members-emailpreview-contents" style={{html-safe (concat "background: " this.backgroundColor)}}>
+            <div class="gh-members-emailpreview-border" style={{html-safe (concat "border-color: " this.borderColor)}}>
+                {{#if @newsletter.headerImage}}
+                    <div class="gh-members-emailpreview-header-image">
+                        <img src={{@newsletter.headerImage}} alt="" role="presentation">
                     </div>
-                </div>
-            {{/if}}
-            {{#if @newsletter.showFeatureImage}}
-                <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
-                <div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
-            {{/if}}
-            <div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}">
-                <p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
-                <p>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
-                <p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
-            </div>
-
-            {{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
-                <div class="gh-members-emailpreview-feedback">
-                    <div class="gh-members-emailpreview-feedback-buttons-group">
-                        {{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
-                            <Modals::Newsletters::Components::FeedbackButton
-                                @text="More like this"
-                                @icon="thumbs-up" />
-
-                            <Modals::Newsletters::Components::FeedbackButton
-                                @text="Less like this"
-                                @icon="thumbs-down" />
+                {{/if}}
+                {{#if this.showHeader}}
+                    <div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}} style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
+                        {{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
+                            <img src={{this.settings.icon}} alt="" role="presentation" />
                         {{/if}}
-
-                        {{#if this.showCommentCta}}
-                            <Modals::Newsletters::Components::FeedbackButton
-                                @text="Comment"
-                                @icon="comment" />
+                        {{#if this.headerTitle}}
+                            <h4 style={{html-safe (concat "color: " this.textColor)}}>{{this.headerTitle}}</h4>
+                        {{/if}}
+                        {{#if this.headerSubtitle}}
+                            <h5 style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.headerSubtitle}}</h5>
                         {{/if}}
                     </div>
-                </div>
-            {{/if}}
-
-            {{#if @newsletter.showLatestPosts}}
-                <div class="gh-members-emailpreview-latest-posts">
-                    <h3 class="pb2">Keep reading</h3>
-                    <Modals::Newsletters::Components::LatestPost
-                        @imgPath="assets/img/latest-posts-1.png"
-                        @postTitle="The three latest posts published on your site"
-                        @postExcerpt="Posts sent as an email only will never be shown here." />
-                    <Modals::Newsletters::Components::LatestPost
-                        @imgPath="assets/img/latest-posts-2.png"
-                        @postTitle="Displayed at the bottom of each newsletter"
-                        @postExcerpt="Giving your readers one more place to discover your stories." />
-                    <Modals::Newsletters::Components::LatestPost
-                        @imgPath="assets/img/latest-posts-3.png"
-                        @postTitle="To keep your work front and center"
-                        @postExcerpt="Making sure that your audience stays engaged." />
-                </div>
-            {{/if}}
-
-            {{#if @newsletter.showSubscriptionDetails}}
-                <div class="gh-members-emailpreview-subscription-details">
-                    <h4 class="pb2">Subscription details</h4>
-                    <p class="pb4">You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
-                    <div class="flex">
-                        <div class="flex-shrink-0">
-                            <p>Name: Jamie Larson</p>
-                            <p>Email: jamie@example.com</p>
-                            <p>Member since: {{this.todayString}}</p>
+                {{/if}}
+                {{#if @newsletter.showPostTitleSection}}
+                    <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
+                        <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}" style={{html-safe (concat "color: " this.titleColor)}}>Your email newsletter</h2>
+                        <div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
+                            <p style={{html-safe (concat "color: " this.secondaryTextColor)}}>By {{or this.session.user.name this.session.user.email}}
+                                <span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
+                                {{#if this.showCommentCta}}
+                                    <span style={{html-safe (concat "color: " this.secondaryTextColor)}}><a href="javascript:" class="gh-members-emailpreview-comment-link"
+                                    style={{html-safe (if this.backgroundColorIsDark "filter: brightness(2)")}}> {{svg-jar "comment"}}</a></span>
+                                {{/if}}
+                            </p>
+                            <p>
+                                <a href="javascript:" class="gh-members-emailpreview-view-online" style={{html-safe (concat "color: " this.secondaryTextColor)}}>View in browser</a>
+                            </p>
                         </div>
-                        <a href="#" class="gh-members-emailpreview-subscription-link">Manage subscription &rarr;</a>
+                    </div>
+                {{/if}}
+                {{#if @newsletter.showFeatureImage}}
+                    <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
+                    <div class="gh-members-emailpreview-featureimage-caption" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Feature image caption</div>
+                {{/if}}
+                <div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
+                    <p style={{html-safe (concat "color: " this.textColor)}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
+                    <p style={{html-safe (concat "color: " this.textColor)}}>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
+                    <p style={{html-safe (concat "color: " this.textColor)}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
+                </div>
+
+                {{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
+                    <div class="gh-members-emailpreview-feedback" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
+                        <div class="gh-members-emailpreview-feedback-buttons-group">
+                            {{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
+                                <Modals::Newsletters::Components::FeedbackButton
+                                    @text="More like this"
+                                    @icon="thumbs-up"
+                                    @textColor={{html-safe this.textColor}} />
+
+                                <Modals::Newsletters::Components::FeedbackButton
+                                    @text="Less like this"
+                                    @icon="thumbs-down"
+                                    @textColor={{html-safe this.textColor}} />
+                            {{/if}}
+
+                            {{#if this.showCommentCta}}
+                                <Modals::Newsletters::Components::FeedbackButton
+                                    @text="Comment"
+                                    @icon="comment"
+                                    @textColor={{html-safe this.textColor}} />
+                            {{/if}}
+                        </div>
+                    </div>
+                {{/if}}
+
+                {{#if @newsletter.showLatestPosts}}
+                    <div class="gh-members-emailpreview-latest-posts" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
+                        <h3 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Keep reading</h3>
+                        <Modals::Newsletters::Components::LatestPost
+                            @imgPath="assets/img/latest-posts-1.png"
+                            @postTitle="The three latest posts published on your site"
+                            @postExcerpt="Posts sent as an email only will never be shown here."
+                            @textColor={{html-safe this.textColor}}
+                            @secondaryTextColor={{html-safe this.secondaryTextColor}} />
+                        <Modals::Newsletters::Components::LatestPost
+                            @imgPath="assets/img/latest-posts-2.png"
+                            @postTitle="Displayed at the bottom of each newsletter"
+                            @postExcerpt="Giving your readers one more place to discover your stories."
+                            @textColor={{html-safe this.textColor}}
+                            @secondaryTextColor={{html-safe this.secondaryTextColor}} />
+                        <Modals::Newsletters::Components::LatestPost
+                            @imgPath="assets/img/latest-posts-3.png"
+                            @postTitle="To keep your work front and center"
+                            @postExcerpt="Making sure that your audience stays engaged."
+                            @textColor={{html-safe this.textColor}}
+                            @secondaryTextColor={{html-safe this.secondaryTextColor}} />
+                    </div>
+                {{/if}}
+
+                {{#if @newsletter.showSubscriptionDetails}}
+                    <div class="gh-members-emailpreview-subscription-details" style={{html-safe (concat "border-color: " this.secondaryBorderColor)}}>
+                        <h4 class="pb2" style={{html-safe (concat "color: " this.titleColor)}}>Subscription details</h4>
+                        <p class="pb4" style={{html-safe (concat "color: " this.textColor)}}>You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <p style={{html-safe (concat "color: " this.textColor)}}>Name: Jamie Larson</p>
+                                <p style={{html-safe (concat "color: " this.textColor)}}>Email: jamie@example.com</p>
+                                <p style={{html-safe (concat "color: " this.textColor)}}>Member since: {{this.todayString}}</p>
+                            </div>
+                            <a href="#" class="gh-members-emailpreview-subscription-link" style={{html-safe (if this.backgroundColorIsDark "color: #FFF; text-decoration: underline;")}}>Manage subscription &rarr;</a>
+                        </div>
+                    </div>
+                {{/if}}
+
+                <div class="gh-members-emailpreview-footer">
+                    <div class="gh-members-emailpreview-footercontent" style={{html-safe (concat "color: " this.secondaryTextColor)}}>
+                        {{html-safe @newsletter.footerContent}}
+                    </div>
+                    <div class="gh-members-emailpreview-footersite">
+                        <span style={{html-safe (concat "color: " this.secondaryTextColor)}}>{{this.settings.title}} &copy; {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:" style={{html-safe (concat "color: " this.secondaryTextColor)}}>Unsubscribe</a>
                     </div>
                 </div>
-            {{/if}}
-
-            <div class="gh-members-emailpreview-footer">
-                <div class="gh-members-emailpreview-footercontent">
-                    {{html-safe @newsletter.footerContent}}
+                <div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
+                    <a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
+                    </svg> <span>Powered by Ghost</span></a>
                 </div>
-                <div class="gh-members-emailpreview-footersite">
-                    <span>{{this.settings.title}} &copy; {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:">Unsubscribe</a>
-                </div>
-            </div>
-            <div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
-                <a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
-                </svg> <span>Powered by Ghost</span></a>
             </div>
         </div>
     </div>
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview.js b/ghost/admin/app/components/modals/newsletters/edit/preview.js
index a7172332b8..67b0cf16ad 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview.js
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview.js
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import moment from 'moment-timezone';
 import {htmlSafe} from '@ember/template';
 import {inject as service} from '@ember/service';
+import {textColorForBackgroundColor} from '@tryghost/color-utils';
 
 export default class EditNewsletterPreview extends Component {
     @service ghostPaths;
@@ -9,6 +10,81 @@ export default class EditNewsletterPreview extends Component {
     @service settings;
     @service membersUtils;
 
+    get accentColor() {
+        return this.settings.accentColor;
+    }
+
+    get backgroundColor() {
+        const value = this.args.newsletter.backgroundColor;
+
+        const validHex = /#([0-9a-f]{3}){1,2}$/i;
+
+        if (validHex.test(value)) {
+            return value;
+        }
+
+        if (value === 'dark') {
+            return '#15212a';
+        }
+
+        return '#ffffff';
+    }
+
+    get backgroundColorIsDark() {
+        return textColorForBackgroundColor(this.backgroundColor).hex().toLowerCase() === '#ffffff';
+    }
+
+    get borderColor() {
+        const value = this.args.newsletter.borderColor;
+
+        const validHex = /#([0-9a-f]{3}){1,2}$/i;
+
+        if (validHex.test(value)) {
+            return value;
+        }
+
+        if (value === 'auto') {
+            const backgroundColor = this.backgroundColor;
+            return textColorForBackgroundColor(backgroundColor).hex();
+        }
+
+        if (value === 'accent') {
+            return this.accentColor;
+        }
+
+        return null;
+    }
+
+    get secondaryBorderColor() {
+        return textColorForBackgroundColor(this.backgroundColor).alpha(0.12).toString();
+    }
+
+    get titleColor() {
+        const value = this.args.newsletter.titleColor;
+
+        const validHex = /#([0-9a-f]{3}){1,2}$/i;
+
+        if (validHex.test(value)) {
+            return value;
+        }
+
+        if (value === 'accent') {
+            return this.accentColor;
+        }
+
+        const backgroundColor = this.backgroundColor;
+        return textColorForBackgroundColor(backgroundColor).hex();
+    }
+    get textColor() {
+        return textColorForBackgroundColor(this.backgroundColor).hex();
+    }
+    get secondaryTextColor() {
+        return textColorForBackgroundColor(this.backgroundColor).alpha(0.5).toString();
+    }
+    get linkColor() {
+        return this.backgroundIsDark ? '#ffffff' : this.accentColor;
+    }
+
     get showHeader() {
         return (this.args.newsletter.showHeaderIcon && this.settings.icon)
             || this.headerTitle;
diff --git a/ghost/email-service/lib/email-renderer.js b/ghost/email-service/lib/email-renderer.js
index a2e9229d07..3b27a00d14 100644
--- a/ghost/email-service/lib/email-renderer.js
+++ b/ghost/email-service/lib/email-renderer.js
@@ -668,13 +668,8 @@ class EmailRenderer {
         });
 
         // Partials
-        if (this.#labs.isSet('makingItRain')) {
-            const cssPartialSource = await fs.readFile(path.join(__dirname, './email-templates/partials/', `styles.hbs`), 'utf8');
-            this.#handlebars.registerPartial('styles', cssPartialSource);
-        } else {
-            const cssPartialSource = await fs.readFile(path.join(__dirname, './email-templates/partials/', `styles-old.hbs`), 'utf8');
-            this.#handlebars.registerPartial('styles', cssPartialSource);
-        }
+        const cssPartialSource = await fs.readFile(path.join(__dirname, './email-templates/partials/', `styles.hbs`), 'utf8');
+        this.#handlebars.registerPartial('styles', cssPartialSource);
 
         const paywallPartial = await fs.readFile(path.join(__dirname, './email-templates/partials/', `paywall.hbs`), 'utf8');
         this.#handlebars.registerPartial('paywall', paywallPartial);
@@ -689,13 +684,9 @@ class EmailRenderer {
         this.#handlebars.registerPartial('latestPosts', latestPostsPartial);
 
         // Actual template
-        if (this.#labs.isSet('makingItRain')) {
-            const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template.hbs`), 'utf8');
-            this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString());
-        } else {
-            const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template-old.hbs`), 'utf8');
-            this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString());
-        }
+        const htmlTemplateSource = await fs.readFile(path.join(__dirname, './email-templates/', `template.hbs`), 'utf8');
+        this.#renderTemplate = this.#handlebars.compile(Buffer.from(htmlTemplateSource).toString());
+
         return this.#renderTemplate(data);
     }
 
diff --git a/ghost/email-service/lib/email-templates/partials/styles-old.hbs b/ghost/email-service/lib/email-templates/partials/styles-old.hbs
deleted file mode 100644
index b2a50fdf31..0000000000
--- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs
+++ /dev/null
@@ -1,1532 +0,0 @@
-<style>
-/* -------------------------------------
-    GLOBAL RESETS
-------------------------------------- */
-
-/*All the styling goes here*/
-
-img {
-    border: none;
-    -ms-interpolation-mode: bicubic;
-    max-width: 100%;
-}
-
-img.is-dark-background {
-        display: none !important;
-        mso-hide: all !important;
-}
-
-body {
-    background-color: #fff;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    -webkit-font-smoothing: antialiased;
-    font-size: 18px;
-    line-height: 1.4;
-    margin: 0;
-    padding: 0;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    color: #15212A;
-}
-
-table {
-    border-collapse: separate;
-    mso-table-lspace: 0pt;
-    mso-table-rspace: 0pt;
-    width: 100%;
-}
-
-table td {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    font-size: 18px;
-    vertical-align: top;
-    color: #15212A;
-}
-
-/* -------------------------------------
-    BODY & CONTAINER
-------------------------------------- */
-.body {
-    background-color: #fff;
-    width: 100%;
-}
-
-/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
-.container {
-    display: block;
-    margin: 0 auto !important;
-    /* makes it centered */
-    max-width: 600px;
-}
-
-/* This should also be a block element, so that it will fill 100% of the .container */
-.content {
-    box-sizing: border-box;
-    display: block;
-    margin: 0 auto;
-    max-width: 600px;
-}
-
-.content a {
-    overflow-wrap: anywhere;
-}
-
-/* -------------------------------------
-    POST CONTENT
-------------------------------------- */
-hr {
-    position: relative;
-    display: block;
-    width: 100%;
-    margin: 3em 0;
-    padding: 0;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #e5eff5;
-}
-
-p,
-ul,
-ol,
-dl,
-blockquote {
-    margin: 0 0 1.5em 0;
-    line-height: 1.6em;
-}
-
-ol,
-ul {
-    padding-left: 1.3em;
-    padding-right: 1.5em;
-}
-
-ol ol,
-ul ul,
-ul ol,
-ol ul {
-    margin: 0.5em 0 1em;
-}
-
-ul {
-    list-style: disc;
-}
-
-ol {
-    list-style: decimal;
-}
-
-ul,
-ol {
-    max-width: 100%;
-}
-
-li {
-    margin: 0.5em 0;
-    padding-left: 0.3em;
-    line-height: 1.6em;
-}
-
-dt {
-    float: left;
-    margin: 0 20px 0 0;
-    width: 120px;
-    color: #15212A;
-    font-weight: 500;
-    text-align: right;
-}
-
-dd {
-    margin: 0 0 5px 0;
-    text-align: left;
-}
-
-blockquote {
-    margin: 2em 0 2em 0;
-    padding: 0 25px 0 25px;
-    border-left: {{accentColor}} 2px solid;
-    font-size: 17px;
-    font-weight: 500;
-    line-height: 1.6em;
-    letter-spacing: -0.2px;
-}
-
-blockquote.kg-blockquote-alt {
-    border-left: 0 none;
-    padding: 0 50px 0 50px;
-    text-align: center;
-    font-size: 1.2em;
-    font-style: italic;
-    color: #999999;
-}
-
-blockquote p {
-    margin: 0.8em 0;
-    font-size: 1em;
-}
-
-blockquote small {
-    display: inline-block;
-    margin: 0.8em 0 0.8em 1.5em;
-    font-size: 0.9em;
-    opacity: 0.8;
-}
-
-blockquote cite {
-    font-weight: bold;
-}
-blockquote cite a {
-    font-weight: normal;
-}
-
-a {
-    color: {{accentColor}};
-    text-decoration: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin-top: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    line-height: 1.11em;
-    font-weight: 700;
-    text-rendering: optimizeLegibility;
-}
-
-h1 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 42px;
-    font-weight: 700;
-}
-
-h2 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 32px;
-}
-
-h3 {
-    margin: 1.5em 0 0.5em 0;
-    font-size: 26px;
-}
-
-h4 {
-    margin: 1.8em 0 0.5em 0;
-    font-size: 21px;
-    line-height: 1.2em;
-}
-
-h5 {
-    margin: 2em 0 0.5em 0;
-    font-size: 19px;
-    line-height: 1.3em;
-}
-
-h6 {
-    margin: 2em 0 0.5em 0;
-    font-size: 19px;
-    line-height: 1.3em;
-    font-weight: 700;
-}
-
-h1 strong,
-h2 strong,
-h3 strong,
-h4 strong,
-h5 strong,
-h6 strong {
-    font-weight: 800;
-}
-
-strong {
-    font-weight: 700;
-}
-
-figure {
-    margin: 0 0 1.5em;
-    padding: 0;
-}
-
-figcaption {
-    text-align: center;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    font-size: 14px;
-    padding-top: 5px;
-    line-height: 1.5em;
-}
-
-code {
-    font-size: 0.9em;
-}
-
-pre {
-    white-space: pre-wrap;
-    overflow: auto;
-    background: #15212A;
-    padding: 15px;
-    border-radius: 3px;
-    line-height: 1.2em;
-    color: #ffffff;
-}
-
-p code,
-li code {
-    background: #F2F7FA;
-    word-break: break-all;
-    padding: 1px 7px;
-    border-radius: 3px;
-    color: {{accentColor}};
-}
-
-figure blockquote p {
-    font-size: 1em;
-}
-
-.header-image {
-    padding-top: 24px;
-}
-
-.site-icon {
-    padding-bottom: 10px;
-    padding-top: 20px;
-    text-align: center;
-    border-radius: 3px;
-}
-
-.site-icon img {
-    width: 48px;
-    height: 48px;
-    border-radius: 3px;
-}
-
-.site-info {
-    padding-top: 50px;
-}
-
-.site-info-bordered {
-    padding-top: 50px;
-    border-bottom: 1px solid #e5eff5;
-}
-
-.site-url {
-    color: #15212A;
-    font-size: 16px;
-    letter-spacing: -0.1px;
-    font-weight: 700;
-    text-transform: uppercase;
-    text-align: center;
-}
-
-.site-url-bottom-padding {
-    padding-bottom: 50px;
-}
-
-.site-title {
-    color: #15212A;
-}
-
-.site-subtitle {
-    color: #8695a4;
-    font-size: 14px;
-    font-weight: 400;
-    text-transform: none;
-}
-
-.post-title {
-    padding-bottom: 16px;
-    font-size: 42px;
-    line-height: 1.1em;
-    font-weight: 700;
-    text-align: center;
-}
-.post-title-serif {
-    font-family: Georgia, serif;
-    letter-spacing: -0.01em;
-}
-.post-title-left {
-    text-align: left;
-}
-
-.post-title-link {
-    color: #15212A;
-    display: block;
-    text-align: center;
-    margin-top: 50px;
-}
-.post-title-link-left {
-    text-align: left;
-}
-
-.post-meta,
-.view-online {
-    color: #738a94;
-    font-size: 13px;
-    letter-spacing: 0.1px;
-    text-align: center;
-}
-
-.post-meta-left {
-    text-align: left;
-}
-
-.post-meta-left.view-online-mobile {
-    display: none !important;
-}
-
-.post-meta-left.view-online {
-    text-align: right;
-}
-
-.post-meta-center.view-online {
-    display: none !important;
-}
-
-.post-meta-center .view-online,
-.post-meta-center .view-online a {
-    text-decoration: underline !important;
-}
-
-.post-meta-date {
-    white-space: nowrap;
-}
-
-.comment-link {
-    color: #738a94;
-    font-size: 13px;
-    letter-spacing: 0.1px;
-}
-
-.comment-link img {
-    width: 16px;
-    height: 16px;
-    margin-bottom: 1px;
-    vertical-align: middle;
-}
-
-.view-online-link {
-    word-wrap: none;
-    white-space: nowrap;
-    color: #738a94;
-}
-
-.feature-image-row:first-child > td {
-    padding-top: 24px;
-}
-
-.feature-image {
-    padding-bottom: 30px;
-    width: 100%;
-}
-
-.feature-image-with-caption {
-    padding-bottom: 10px;
-}
-
-.feature-image-caption {
-    width: 100%;
-    padding-bottom: 30px;
-    text-align: center;
-    font-size: 13px;
-    color: #738a94;
-}
-
-/* -------------------------------------
-    FEEDBACK BUTTONS
-------------------------------------- */
-
-.feedback-buttons {
-    width: auto !important;
-    margin: auto;
-}
-
-.feedback-buttons-mobile {
-    display: none !important;
-    mso-hide: all !important;
-}
-
-.feedback-button-mobile-text {
-    color: #15212A;
-    font-size: 13px !important;
-    font-weight: 500;
-    margin-bottom: 0;
-}
-
-/* -------------------------------------
-    LATEST POSTS TABLE
-------------------------------------- */
-
-.latest-posts-header {
-    margin: 0;
-    padding: 8px 0 16px;
-    color: #15212A;
-    font-size: 14px;
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-.latest-post {
-    padding: 8px 0;
-}
-
-.latest-post a {
-    text-decoration: none !important;
-}
-
-.latest-post-img a {
-    display: block;
-    height: 100px;
-    overflow: hidden;
-    color: inherit;
-    text-decoration: none;
-}
-
-.latest-post-img img,
-.latest-post-img-mobile img {
-    object-fit: cover;
-}
-
-.latest-post-img-mobile {
-    display: none;
-}
-
-.latest-post-img-mobile img {
-    width: 100% !important;
-    height: auto !important; /* Make sure CSS ignores the height that is defined in HTML, but keep the aspect ratio from the width/height in HTML */
-}
-
-.latest-post-title {
-    padding-right: 12px;
-}
-
-.latest-post h4 {
-    margin: 0;
-    padding: 2px 0 4px;
-    font-size: 19px;
-    font-weight: 700;
-}
-
-.latest-post h4.no-image {
-    padding: 12px 0 4px;
-}
-
-.latest-post h4 a {
-    color: #15212A !important;
-}
-
-.latest-post p {
-    margin: 0;
-    padding: 0;
-    color: #738a94;
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.latest-post p a {
-    color: #738a94 !important;
-}
-
-/* -------------------------------------
-    SUBSCRIPTION DETAILS BOX
-------------------------------------- */
-
-.subscription-box {
-    padding: 32px 0;
-    border-bottom: 1px solid #e5eff5;
-    color: #15212A;
-}
-
-.subscription-box h3 {
-    font-size: 14px;
-    font-weight: 700;
-    text-transform: uppercase;
-    margin: 0 0 18px;
-}
-
-.subscription-box p {
-    margin-bottom: 0;
-    color: #15212A !important;
-    font-size: 15px;
-    font-weight: 400;
-    line-height: 1.45em;
-    text-decoration: none;
-}
-
-.subscription-box p a {
-    color: #15212A !important;
-    text-decoration: none;
-}
-
-.manage-subscription {
-    white-space: nowrap;
-    font-size: 15px;
-    font-weight: 600;
-    text-align: right;
-    line-height: 1.45em;
-    vertical-align: bottom;
-    color: {{accentColor}};
-}
-
-/* -------------------------------------
-    POST CONTENT
-------------------------------------- */
-
-.post-content {
-    max-width: 600px !important;
-    font-family: Georgia, serif;
-    font-size: 18px;
-    line-height: 1.5em;
-    color: #15212A;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #e5eff5;
-}
-
-.post-content-sans-serif {
-    max-width: 600px !important;
-    font-size: 17px;
-    line-height: 1.5em;
-    color: #15212A;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #e5eff5;
-}
-
-.post-content-row:first-child > td, .header-image-row + .post-content-row > td {
-    padding-top: 52px;
-}
-
-.post-content a,
-.post-content-sans-serif a {
-    color: {{accentColor}};
-    text-decoration: underline;
-}
-
-a[data-flickr-embed] img {
-    height: auto;
-}
-
-.kg-bookmark-card {
-    width: 100%;
-    background: #ffffff;
-}
-
-.kg-bookmark-card a {
-    text-decoration: none;
-}
-
-.kg-card + .kg-bookmark-card {
-    margin-top: 0;
-}
-
-.kg-image-card img {
-    display: block;
-    margin: 0 auto;
-    width: auto;
-    height: auto !important;
-}
-
-.kg-bookmark-container {
-    display: flex;
-    min-height: 148px;
-    color: #15212A;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    text-decoration: none;
-    border-radius: 3px;
-    border: 1px solid #e5eff5;
-}
-
-.kg-bookmark-content {
-    display: inline-block;
-    width: 100%;
-    padding: 20px;
-}
-
-.kg-bookmark-title {
-    color: #15212A;
-    font-size: 15px;
-    line-height: 1.5em;
-    font-weight: 600;
-}
-
-.kg-bookmark-description {
-    display: -webkit-box;
-    overflow-y: hidden;
-    margin-top: 12px;
-    max-height: 40px;
-    color: #738a94;
-    font-size: 13px;
-    line-height: 1.5em;
-    font-weight: 400;
-
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-.kg-bookmark-thumbnail {
-    min-width: 140px;
-    max-width: 180px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 0 2px 2px 0;
-}
-
-.kg-bookmark-thumbnail img {
-    display: none;
-}
-
-.kg-bookmark-metadata {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-top: 14px;
-    color: #15212A;
-    font-size: 13px;
-    font-weight: 400;
-}
-
-.kg-bookmark-icon {
-    margin-right: 8px;
-    width: 22px;
-    height: 22px;
-}
-
-.kg-bookmark-icon[src$=".svg"] {
-    display: none;
-}
-
-.kg-bookmark-author {
-    line-height: 1.5em;
-}
-
-.kg-bookmark-publisher {
-    overflow: hidden;
-    max-width: 240px;
-    line-height: 1.5em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.kg-bookmark-publisher:before {
-    content: "•";
-    margin: 0 6px;
-}
-
-.kg-gallery-container {
-    margin-top: -20px;
-}
-
-.kg-gallery-image img {
-    width: 100% !important;
-    height: auto !important;
-    padding-top: 20px;
-}
-
-.kg-video-preview {
-    background-color: #1d1f21;
-    background-image: radial-gradient(circle at center, #5b5f66, #1d1f21);
-    display: block;
-    text-decoration: none !important;
-}
-
-.kg-video-preview table {
-    background-size: cover;
-    min-height: 200px; /* for when images aren't loaded */
-}
-
-.kg-video-play-button {
-    height: 2em;
-    width: 3em;
-    margin: 0 auto;
-    border-radius: 10px;
-    padding: 1em 0.8em 0.6em 1em;
-    font-size: 1em; /* change this to resize */
-    background-color: rgba(0,0,0,0.85);
-}
-
-.kg-video-play-button div {
-    display: block;
-    width: 0;
-    height: 0;
-    margin: 0 auto;
-    line-height: 0px; /* fix for Yahoo Mail */
-    border-color: transparent transparent transparent white;
-    border-style: solid;
-    border-width: 0.8em 0 0.8em 1.5em;
-}
-
-.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-audio-thumbnail.placeholder {
-    background: {{accentColor}} !important;
-}
-
-.kg-callout-card {
-    display: flex;
-    margin: 0 0 1.5em 0;
-    padding: 20px 28px;
-    border-radius: 3px;
-}
-
-.kg-callout-card p {
-    margin: 0
-}
-
-.kg-callout-card-grey {
-    background: #eef0f2;
-}
-
-.kg-callout-card-white {
-    background: #fff;
-    box-shadow: inset 0 0 0 1px #dddedf;
-}
-
-.kg-callout-card-blue {
-    background: #E9F6FB;
-}
-
-.kg-callout-card-green {
-    background: #E8F8EA;
-}
-
-.kg-callout-card-yellow {
-    background: #FCF4E3;
-}
-
-.kg-callout-card-red {
-    background: #FBE9E9;
-}
-
-.kg-callout-card-pink {
-    background: #FCEEF8;
-}
-
-.kg-callout-card-purple {
-    background: #F2EDFC;
-}
-
-.kg-callout-card-accent {
-    background: {{accentColor}};
-    color: #fff;
-}
-
-.kg-callout-card-accent a {
-    color: #fff;
-}
-
-.kg-callout-emoji {
-    padding-right: 12px;
-    font-size: 20px;
-}
-
-.kg-header-card {
-    margin: 0 0 1.5em 0;
-    padding: 110px 35px 110px 35px;
-    text-align: center;
-}
-
-.kg-header-card.kg-size-small {
-    padding-top: 75px;
-    padding-bottom: 75px;
-}
-
-.kg-header-card.kg-size-large {
-    padding-top: 140px;
-    padding-bottom: 140px;
-}
-
-.kg-header-card.kg-align-left {
-    text-align: left;
-}
-
-.kg-header-card.kg-style-dark {
-    background: #15171a;
-    color: #ffffff;
-}
-
-.kg-header-card.kg-style-light {
-    background-color: #F9F9FA;
-}
-
-.kg-header-card.kg-style-accent {
-    background: {{accentColor}};
-    color: #ffffff;
-}
-
-.kg-header-card.kg-style-image {
-    background-color: #e7e7eb;
-    background-size: cover;
-    background-position: center center;
-    color: #ffffff;
-}
-
-.kg-header-card h2 {
-    font-size: 3em;
-    font-weight: 700;
-    line-height: 1.1em;
-    margin: 0 0 0.125em;
-}
-
-.kg-header-card h2 strong {
-    font-weight: 800;
-}
-
-.kg-header-card.kg-size-small h2 {
-    font-size: 2.5em;
-}
-
-.kg-header-card.kg-size-large h2 {
-    font-size: 3.5em;
-}
-
-.kg-header-card h3 {
-    font-size: 1.125em;
-    font-weight: 500;
-    line-height: 1.3em;
-    margin: 0;
-}
-
-.kg-header-card h3 strong {
-    font-weight: 700;
-}
-
-.kg-header-card.kg-size-large h3 {
-    font-size: 1.25em;
-}
-
-.kg-header-card.kg-size-small h3 {
-    font-size: 1em;
-}
-
-.kg-header-card-button {
-    margin-top: 1.75em;
-    background: #ffffff;
-    border-radius: 5px;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 0;
-    padding: 8px 16px;
-    text-decoration: none !important;
-    color: #15171A !important;
-}
-
-.kg-size-large .kg-header-card-button {
-    margin-top: 2em;
-}
-
-.kg-size-small .kg-header-card-button {
-    margin-top: 1.5em;
-}
-
-.kg-style-light .kg-header-card-button {
-    background: {{accentColor}} !important;
-    color: #ffffff !important;
-}
-
-.kg-product-card {
-    width: 100%;
-    margin: 0 0 1.5em; 
-    padding: 20px;
-    border-radius: 3px; 
-    border: 1px solid #e5eff5;
-}
-.kg-product-rating img {
-    width: 96px;
-    border: none;
-}
-.kg-audio-card {
-    width: auto; 
-    width: 100%;
-    margin: 0 auto 1.5em;
-    border-radius: 3px; 
-    border: 1px solid #e5eff5;
-}
-.kg-audio-title {
-    display: block; 
-    padding-right: 20px; 
-    padding-bottom: 4px; 
-    padding-top: 4px; 
-    font-size: 16px; 
-    font-weight: 600; 
-    line-height: 18px; 
-    text-decoration: none !important; 
-    color: #15212A !important;
-}
-.kg-audio-play-button {
-    display: block; 
-    box-sizing: border-box; 
-    width: 16px; 
-    height: 16px; 
-    color: #15212A !important; 
-    border-style: solid; 
-    border-width: 8px 0px 8px 16px; 
-    border-color: transparent transparent transparent currentColor;
-}
-.kg-audio-duration {
-    display: block; 
-    text-decoration: none !important; 
-    font-size: 13px; 
-    color: #15171A !important;
-}
-.kg-audio-link {
-    color: #738a94 !important; 
-}
-.kg-file-card {
-    width: auto;
-    width: 100%;
-    margin: 0 0 1.5em 0;
-    border-radius: 3px; 
-    border: 1px solid #e5eff5;
-}
-.kg-file-title {
-    display: block; 
-    width: 100%; 
-    padding-left: 12px; 
-    padding-top: 8px; 
-    font-size: 17px; 
-    font-weight: bold; 
-    line-height: 1.3em; 
-    text-decoration: none !important;
-    color: #15212A !important; 
-}
-.kg-file-description {
-    display: block; 
-    width: 100%; 
-    padding-left: 12px; 
-    padding-top: 2px; 
-    font-size: 15px; 
-    line-height: 1.4em; 
-    text-decoration: none !important;
-    color: #738a94 !important; 
-}
-.kg-file-meta {
-    display: block;
-    width: 100%; 
-    padding-left: 12px; 
-    padding-top: 4px; 
-    padding-bottom: 8px;
-    font-size: 13px; 
-    line-height: 1.4em; 
-    text-decoration: none !important;
-    color: #738a94 !important; 
-}
-.kg-file-name {
-    font-weight: 500; 
-    color: #15212A !important;
-}
-.kg-file-thumbnail {
-    position: relative; 
-    vertical-align: middle; 
-    text-align: center; 
-    border-radius: 2px;
-    background: #F7F7F7; 
-}
-.kg-twitter-card {
-    width: auto; 
-    width: 100%
-    margin: 0 auto;
-    border-radius: 12px; 
-    border: 1px solid #e5eff5;
-}
-
-.kg-toggle-card {
-    background: transparent;
-    padding: 20px; 
-    margin-bottom: 1.5em;
-    border-radius: 4px; 
-    border: 1px solid {{secondaryBorderColor}}; 
-}
-
-
-/* -------------------------------------
-    HEADER, FOOTER, MAIN
-------------------------------------- */
-.main {
-    background: #ffffff;
-    border-radius: 3px;
-    border-spacing: 20px 0;
-    width: 100%;
-}
-
-.wrapper {
-    box-sizing: border-box;
-}
-
-.content-block {
-    padding-bottom: 10px;
-    padding-top: 10px;
-}
-
-.footer {
-    color: #738a94;
-    margin-top: 20px;
-    text-align: center;
-    font-size: 13px;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    padding-left: 30px;
-    padding-right: 30px;
-    line-height: 1.5em;
-}
-
-.footer a {
-    color: #738a94;
-    text-decoration: underline;
-}
-
-/* -------------------------------------
-    BUTTONS
-------------------------------------- */
-.btn {
-    box-sizing: border-box;
-    width: 100%;
-    display: table;
-}
-
-.btn>tbody>tr>td {
-    padding-bottom: 15px;
-}
-
-.btn table {
-    width: auto;
-}
-
-.btn table td {
-    background-color: #ffffff;
-    border-radius: 5px;
-    text-align: center;
-}
-
-.btn a {
-    background-color: #ffffff;
-    border: solid 1px #3498db;
-    border-radius: 5px;
-    box-sizing: border-box;
-    color: #3498db;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 0;
-    padding: 12px 25px;
-    text-decoration: none;
-}
-
-.btn-primary table td {
-    background-color: #3498db;
-}
-
-.btn-primary a {
-    background-color: #3498db;
-    border-color: #3498db;
-    color: #ffffff;
-}
-
-.btn-accent table td {
-    background-color: {{adjustedAccentColor}};
-}
-
-.btn-accent a {
-    background-color: {{adjustedAccentColor}};
-    border-color: {{adjustedAccentColor}};
-    color: {{adjustedAccentContrastColor}};
-}
-
-/* -------------------------------------
-    OTHER STYLES THAT MIGHT BE USEFUL
-------------------------------------- */
-.last {
-    margin-bottom: 0;
-}
-
-.first {
-    margin-top: 0;
-}
-
-.align-center {
-    text-align: center;
-}
-
-.align-right {
-    text-align: right;
-}
-
-.align-left {
-    text-align: left;
-}
-
-.clear {
-    clear: both;
-}
-
-.mt0 {
-    margin-top: 0;
-}
-
-.mb0 {
-    margin-bottom: 0;
-}
-
-.preheader {
-    color: transparent;
-    display: none;
-    height: 0;
-    max-height: 0;
-    max-width: 0;
-    opacity: 0;
-    overflow: hidden;
-    mso-hide: all;
-    visibility: hidden;
-    width: 0;
-}
-
-.mobile-only {
-    display: none;
-}
-
-/* -------------------------------------
-    RESPONSIVE AND MOBILE FRIENDLY STYLES
-------------------------------------- */
-@media only screen and (max-width: 620px) {
-
-    table.body {
-        width: 100%;
-        min-width: 100%;
-    }
-
-    .hide-mobile {
-        display: none;
-    }
-
-    .mobile-only {
-        display: initial !important;
-    }
-
-    table.body p,
-    table.body ul,
-    table.body ol,
-    table.body td,
-    table.body span {
-        font-size: 16px !important;
-    }
-
-    table.body pre {
-        white-space: pre-wrap !important;
-        word-break: break-word !important;
-    }
-
-    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 .btn table {
-        width: 100% !important;
-    }
-
-    table.body .btn a {
-        width: 100% !important;
-    }
-
-    table.body .img-responsive {
-        height: auto !important;
-        max-width: 100% !important;
-        width: auto !important;
-    }
-
-    table.body .site-icon img {
-        width: 40px !important;
-        height: 40px !important;
-    }
-
-    table.body .site-url a {
-        font-size: 14px !important;
-        padding-bottom: 15px !important;
-    }
-
-    table.body .post-meta,
-    table.body .post-meta-date {
-        white-space: normal !important;
-        font-size: 12px !important;
-        line-height: 1.5em;
-    }
-
-    table.body .post-meta,
-    table.body .view-online {
-        width: 100% !important;
-    }
-
-    table.body .post-meta-left,
-    table.body .post-meta-left.view-online {
-        width: 100% !important;
-        text-align: left !important;
-    }
-
-    table.body .post-meta.view-online-mobile {
-        display: table-row !important;
-    }
-
-    table.body .post-meta-left.view-online-mobile,
-    table.body .post-meta-left.view-online-mobile .view-online {
-        text-align: left !important;
-    }
-
-    table.body .post-meta.view-online.desktop {
-        display: none !important;
-    }
-
-    table.body .view-online {
-        text-decoration: underline;
-    }
-
-
-    table.body .view-online-link,
-    table.body .comment-link,
-    table.body .footer,
-    table.body .footer a {
-        font-size: 12px !important;
-    }
-
-    table.body .post-title a {
-        font-size: 32px !important;
-        line-height: 1.15em !important;
-    }
-
-    table.feedback-buttons {
-        display: none !important;
-    }
-
-    table.feedback-buttons-mobile {
-        display: table !important;
-        width: 100% !important;
-        max-width: 390px;
-    }
-
-    table.body .feedback-button-mobile-text {
-        font-size: 13px !important;
-    }
-
-    table.body .latest-posts-header {
-        font-size: 14px !important;
-    }
-
-    table.body .latest-post-img {
-        display: none !important;
-    }
-
-    table.body .latest-post-img-mobile {
-        display: inline-block !important;
-        width: 100%;
-    }
-
-    table.body .latest-post-title {
-        display: inline-block !important;
-        width: 100%;
-        padding-right: 0 !important;
-        padding-bottom: 8px !important;
-    }
-
-    table.body .latest-post h4, table.body .latest-post h4 span {
-        padding: 4px 0 !important;
-        font-size: 18px !important;
-    }
-
-    table.body .latest-post p, table.body .latest-post p span {
-        font-size: 13px !important;
-        line-height: 1.25em;
-    }
-
-    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 .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 h1 {
-        font-size: 32px !important;
-        line-height: 1.3em !important;
-    }
-
-    table.body h2 {
-        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: 17px;
-        line-height: 1.6em;
-        margin-bottom: 0;
-        padding-left: 15px;
-    }
-
-    table.body blockquote.kg-blockquote-alt {
-        border-left: 0 none !important;
-        margin: 0 0 2.5em 0 !important;
-        padding: 0 50px 0 50px !important;
-        font-size: 1.2em;
-    }
-
-    table.body blockquote + * {
-        margin-top: 1.5em !important;
-    }
-
-    table.body hr {
-        margin: 2em 0 !important;
-    }
-
-    table.body figcaption,
-    table.body figcaption a {
-        font-size: 13px !important;
-    }
-
-}
-
-/* -------------------------------------
-    PRESERVE THESE STYLES IN THE HEAD
-------------------------------------- */
-@media all {
-    .subscription-details p.hidden {
-        display: none !important;
-    }
-
-    .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;
-    }
-
-    .btn-primary table td:hover {
-        background-color: #34495e !important;
-    }
-
-    .btn-primary a:hover {
-        background-color: #34495e !important;
-        border-color: #34495e !important;
-    }
-}
-
-{{#if showBadge}}
-    .footer-powered {
-        text-align: center;
-        padding-top: 70px;
-        padding-bottom: 40px;
-    }
-
-    .gh-powered {
-        width: 142px;
-        height: 30px;
-    }
-{{/if}}
-
-</style>
diff --git a/ghost/email-service/lib/email-templates/template-old.hbs b/ghost/email-service/lib/email-templates/template-old.hbs
deleted file mode 100644
index 94cd9decb9..0000000000
--- a/ghost/email-service/lib/email-templates/template-old.hbs
+++ /dev/null
@@ -1,240 +0,0 @@
-<!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>{{post.title}}</title>
-        {{>styles}}
-    </head>
-    <body>
-        <span class="preheader">{{preheader}}</span>
-        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">
-            <!-- 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>&nbsp;</td>
-                <td class="container">
-                    <div class="content">
-                        <!-- START CENTERED WHITE CONTAINER -->
-                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">
-
-                            <!-- START MAIN CONTENT AREA -->
-                            <tr>
-                                <td class="wrapper">
-                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-                                        {{#if headerImage}}
-                                            <tr class="header-image-row">
-                                                <td class="header-image" width="100%" align="center">
-                                                    <img
-                                                        src="{{headerImage}}"
-                                                        {{#if headerImageWidth}}
-                                                            width="{{headerImageWidth}}"
-                                                        {{/if}}
-                                                    >
-                                                </td>
-                                            </tr>
-                                        {{/if}}
-
-                                        {{#if (or showHeaderIcon showHeaderTitle showHeaderName) }}
-                                            <tr>
-                                                <td class="{{#if (and newsletter.showPostTitleSection showHeaderTitle) }}site-info-bordered{{else}}site-info{{/if}}" width="100%" align="center">
-                                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-                                                        {{#if (and showHeaderIcon site.iconUrl) }}
-                                                            <tr>
-                                                                <td class="site-icon"><a href="{{site.url}}"><img src="{{site.iconUrl}}" alt="{{site.title}}" border="0"></a></td>
-                                                            </tr>
-                                                        {{/if}}
-                                                        {{#if showHeaderTitle }}
-                                                            <tr>
-                                                                <td class="site-url {{#unless showHeaderName}}site-url-bottom-padding{{/unless}}"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{site.title}}</a></div></td>
-                                                            </tr>
-                                                        {{/if}}
-                                                        {{#if (and showHeaderName showHeaderTitle) }}
-                                                            <tr>
-                                                                <td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-subtitle">{{newsletter.name}}</a></div></td>
-                                                            </tr>
-                                                        {{/if}}
-                                                        {{#if (and showHeaderName (not showHeaderTitle)) }}
-                                                            <tr>
-                                                                <td class="site-url site-url-bottom-padding"><div style="width: 100% !important;"><a href="{{site.url}}" class="site-title">{{newsletter.name}}</a></div></td>
-                                                            </tr>
-                                                        {{/if}}
-
-                                                    </table>
-                                                </td>
-                                            </tr>
-                                        {{/if}}
-
-                                        {{#if newsletter.showPostTitleSection}}
-                                            <tr>
-                                                <td class="{{classes.title}}">
-                                                    <a href="{{post.url}}" class="{{classes.titleLink}}">{{post.title}}</a>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td style="width: 100%">
-                                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
-                                                        <tr>
-                                                            <td height="20" class="{{classes.meta}}" style="padding: 0;">
-                                                                By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
-                                                                {{#if newsletter.showCommentCta}}
-                                                                    <a href="{{post.commentUrl}}" class="comment-link" valign="middle">
-                                                                        • <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
-                                                                    </a>
-                                                                {{/if}}
-                                                            </td>
-                                                            <td class="{{classes.meta}} view-online desktop">
-                                                                <a href="{{post.url}}" class="view-online-link">View in browser</a>
-                                                            </td>
-                                                        </tr>
-                                                        <tr class="{{classes.meta}} view-online-mobile">
-                                                            <td height="20" class="view-online">
-                                                                <a href="{{post.url}}" class="view-online-link">View in browser</a>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                </td>
-                                            </tr>
-                                        {{/if}}
-
-                                        {{#if showFeatureImage }}
-                                            <tr class="feature-image-row">
-                                                <td class="feature-image
-                                                    {{#if post.feature_image_caption }}
-                                                        feature-image-with-caption
-                                                    {{/if}}
-                                                "><img
-                                                    src="{{post.feature_image}}"
-                                                    {{#if post.feature_image_width }}
-                                                        width="{{post.feature_image_width}}"
-                                                    {{/if}}
-                                                    {{#if post.feature_image_alt }}
-                                                        alt="{{post.feature_image_alt}}"
-                                                    {{/if}}
-                                                ></td>
-                                            </tr>
-                                            {{#if post.feature_image_caption }}
-                                                <tr>
-                                                    <td class="feature-image-caption" align="center">{{{post.feature_image_caption}}}</td>
-                                                </tr>
-                                            {{/if}}
-                                        {{/if}}
-                                        <tr class="post-content-row">
-                                            <td class="{{classes.body}}">
-                                                <!-- POST CONTENT START -->
-                                                {{{html}}}
-                                                <!-- POST CONTENT END -->
-
-                                                {{#if paywall}}
-                                                    {{>paywall}}
-                                                {{/if}}
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </td>
-                            </tr>
-
-                            <!-- END MAIN CONTENT AREA -->
-
-                            {{#if (or feedbackButtons newsletter.showCommentCta) }}
-                                <tr>
-                                    <td dir="ltr" width="100%" style="background-color: #ffffff; text-align: center; padding: 32px 0 24px; border-bottom: 1px solid #e5eff5;" align="center">
-                                        <table class="feedback-buttons" role="presentation" border="0" cellpadding="0" cellspacing="0">
-                                            <tr>
-                                                {{#if feedbackButtons }}
-                                                    {{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" width="145" height="36" }}
-                                                    {{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" width="142" height="36" }}
-                                                {{/if}}
-                                                {{#if newsletter.showCommentCta}}
-                                                    {{> feedbackButton href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment.png" width="122" height="36" }}
-                                                {{/if}}
-                                            </tr>
-                                        </table>
-                                        <table class="feedback-buttons-mobile" role="presentation" border="0" cellpadding="0" cellspacing="0">
-                                            <tr>
-                                                {{#if feedbackButtons }}
-                                                    {{> feedbackButtonMobile feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this-mobile.png" width="42" height="42" }}
-                                                    {{> feedbackButtonMobile feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this-mobile.png" width="42" height="42" }}
-                                                {{/if}}
-                                                {{#if newsletter.showCommentCta}}
-                                                    {{> feedbackButtonMobile href=post.commentUrl buttonText='Comment' iconUrl="https://static.ghost.org/v5.0.0/images/comment-mobile.png" width="42" height="42" }}
-                                                {{/if}}
-                                            </tr>
-                                        </table>
-                                    </td>
-                                </tr>
-                            {{/if}}
-
-                             {{#if latestPosts.length}}
-                                <tr>
-                                    <td style="padding: 24px 0; border-bottom: 1px solid #e5eff5;">
-                                        <h3 class="latest-posts-header">Keep reading</h3>
-                                        {{> latestPosts}}
-                                    </td>
-                                </tr>
-                            {{/if}}
-
-                            {{#if newsletter.showSubscriptionDetails}}
-                                <tr>
-                                    <td class="subscription-box">
-                                        <h3>Subscription details</h3>
-                                        <p style="margin-bottom: 16px;">
-                                            <span>You are receiving this because you are a <strong>%%{status}%% subscriber</strong> to {{site.title}}.</span> %%{status_text}%%
-                                        </p>
-                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-                                            <tr>
-                                                <td class="subscription-details">
-                                                    <p class="%%{name_class}%%">Name: %%{name, "not provided"}%%</p>
-                                                    <p>Email: <a href="#">%%{email}%%</a></p>
-                                                    <p>Member since: %%{created_at}%%</p>
-                                                </td>
-                                                <td align="right" valign="bottom" class="manage-subscription">
-                                                    <a href="%%{manage_account_url}%%"> Manage subscription &rarr;</a>
-                                                </td>
-                                            </tr>
-                                        </table>
-                                    </td>
-                                </tr>
-                            {{/if}}
-
-                            <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">{{site.title}} &copy; {{year}} – <a href="%%{unsubscribe_url}%%">Unsubscribe</a></td>
-                                        </tr>
-
-                                        {{#if showBadge }}
-                                            <tr>
-                                                <td class="footer-powered"><a href="https://ghost.org/"><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>
-
-                        </table>
-                        <!-- END CENTERED WHITE CONTAINER -->
-                    </div>
-                </td>
-                <td>&nbsp;</td>
-            </tr>
-
-            <!--[if mso]>
-                            </table>
-                        </center>
-                    </td>
-                </tr>
-            <![endif]-->
-        </table>
-    </body>
-</html>