diff --git a/ghost/admin/app/components/gh-brand-settings-form.hbs b/ghost/admin/app/components/gh-brand-settings-form.hbs
index a7a5474d37..db98317888 100644
--- a/ghost/admin/app/components/gh-brand-settings-form.hbs
+++ b/ghost/admin/app/components/gh-brand-settings-form.hbs
@@ -1,11 +1,14 @@
 <div class="gh-stack" ...attributes>
-    <div class="gh-stack-item gh-setting-first">
+    <div class="gh-stack-item gh-setting-first gh-accent-color">
         <div class="gh-setting-content">
             <div class="gh-setting-title">Accent color</div>
             <div class="gh-setting-desc">Primary color used in your publication theme</div>
             {{#each uploader.errors as |error|}}
                 <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
             {{/each}}
+            <div class="w-100 flex flex-column flex-row-ns">
+                <GhErrorMessage @errors={{settings.errors}} @property="accentColor" class="w-100 red"/>
+            </div>
         </div>
 
         <div class="gh-setting-action" data-test-setting="accentColor">
@@ -18,7 +21,7 @@
                 <div class="input-color">
                     <input
                         type="text"
-                        placeholder="abcdef"
+                        placeholder="15171A"
                         name="accent-color"
                         autocorrect="off"
                         maxlength="6"
diff --git a/ghost/admin/app/components/gh-brand-settings-form.js b/ghost/admin/app/components/gh-brand-settings-form.js
index b4c27ca919..6cfc6005a6 100644
--- a/ghost/admin/app/components/gh-brand-settings-form.js
+++ b/ghost/admin/app/components/gh-brand-settings-form.js
@@ -56,6 +56,7 @@ export default class GhBrandSettingsFormComponent extends Component {
     }
 
     willDestroy() {
+        this.settings.errors.remove('accentColor');
         this.settings.rollbackAttributes();
     }
 
@@ -92,9 +93,9 @@ export default class GhBrandSettingsFormComponent extends Component {
                 return;
             }
 
-            // clear out the accent color
-            this.settings.set('accentColor', '');
-            this.updatePreviewTask.perform();
+            // Don't allow empty accent color
+            this.settings.errors.add('accentColor', 'Please select an accent color');
+            this.settings.hasValidated.pushObject('accentColor');
             return;
         }
 
@@ -115,7 +116,7 @@ export default class GhBrandSettingsFormComponent extends Component {
             this.settings.set('accentColor', newColor);
             this.updatePreviewTask.perform();
         } else {
-            this.settings.errors.add('accentColor', 'The colour should be in valid hex format');
+            this.settings.errors.add('accentColor', 'Please enter a color in hex format');
             this.settings.hasValidated.pushObject('accentColor');
         }
     }
diff --git a/ghost/admin/app/components/gh-launch-wizard/customise-design.js b/ghost/admin/app/components/gh-launch-wizard/customise-design.js
index 330bf5b158..ab1b24173b 100644
--- a/ghost/admin/app/components/gh-launch-wizard/customise-design.js
+++ b/ghost/admin/app/components/gh-launch-wizard/customise-design.js
@@ -8,11 +8,15 @@ export default class GhLaunchWizardCustomiseDesignComponent extends Component {
 
     willDestroy() {
         this.settings.rollbackAttributes();
+        this.settings.errors.remove('accentColor');
     }
 
     @task
     *saveAndContinueTask() {
         try {
+            if (this.settings.errors && this.settings.errors.length !== 0) {
+                return;
+            }
             yield this.settings.save();
             this.args.nextStep();
         } catch (error) {
diff --git a/ghost/admin/app/components/modal-branding.js b/ghost/admin/app/components/modal-branding.js
index 1d5ed60952..d078ab702a 100644
--- a/ghost/admin/app/components/modal-branding.js
+++ b/ghost/admin/app/components/modal-branding.js
@@ -27,6 +27,9 @@ export default ModalComponent.extend({
 
     saveTask: task(function* () {
         try {
+            if (this.get('settings.errors').length !== 0) {
+                return;
+            }
             yield this.settings.save();
             this.closeModal();
             return true;
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 20a873a3f0..bedb3f352d 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1344,3 +1344,13 @@ p.theme-validation-details {
     width: 50px;
     height: 50px;
 }
+
+.gh-branding-settings .gh-accent-color .gh-setting-action {
+    align-self: flex-start;
+    margin-top: 22px;
+}
+
+.gh-branding-settings .gh-accent-color .response {
+    margin: -8px 0 0;
+    font-size: 1.3rem;
+}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index de26f9c99b..9495905a95 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -149,13 +149,13 @@ fieldset[disabled] .gh-btn {
 
 .gh-btn-red:hover {
     color: #fff;
-    background: color-mod(var(--red) l(-4%));
+    background: color-mod(var(--red) l(-4%)) !important;
 }
 
 /* When clicked or focused with keyboard */
 .gh-btn-red:active,
 .gh-btn-red:focus {
-    background: color-mod(var(--red) l(-7%));
+    background: color-mod(var(--red) l(-7%)) !important;
 }
 
 /* Outline button