diff --git a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
index a25f788da5..f02b575eb3 100644
--- a/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
+++ b/mailpoet/assets/js/src/email-editor/engine/components/block-editor/block-editor.tsx
@@ -48,7 +48,7 @@ export function BlockEditor() {
     canUserEditMedia,
     hasFixedToolbar,
     focusMode,
-    layoutStyles,
+    styles,
     layout,
   } = useSelect(
     (select) => ({
@@ -63,7 +63,7 @@ export function BlockEditor() {
       canUserEditMedia: select(coreStore).canUser('create', 'media'),
       hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
       focusMode: select(storeName).isFeatureActive('focusMode'),
-      layoutStyles: select(storeName).getLayoutStyles(),
+      styles: select(storeName).getStyles(),
       layout: select(storeName).getLayout(),
     }),
     [],
@@ -86,7 +86,7 @@ export function BlockEditor() {
   );
 
   // This will be set by the user in the future in email or global styles.
-  const layoutBackground = layoutStyles.background;
+  const layoutBackground = styles.layout.background;
 
   let inlineStyles = useResizeCanvas(previewDeviceType);
   // UseResizeCanvas returns null if the previewDeviceType is Desktop.
@@ -94,7 +94,7 @@ export function BlockEditor() {
     inlineStyles = {
       height: 'auto',
       margin: '4rem auto', // 4em top/bottom to place the email document nicely vertically in canvas. Same value is used for title in WP Post editor.
-      width: layoutStyles.width,
+      width: styles.layout.width,
       display: 'flex',
       flexFlow: 'column',
     };
diff --git a/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts b/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts
index 3ad77df056..8168007133 100644
--- a/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts
@@ -1,10 +1,6 @@
 import { mainSidebarEmailTab } from './constants';
 import { State } from './types';
-import {
-  getEditorLayout,
-  getEditorSettings,
-  getEmailLayoutStyles,
-} from './settings';
+import { getEditorLayout, getEditorSettings, getEmailStyles } from './settings';
 
 export function getInitialState(): State {
   const searchParams = new URLSearchParams(window.location.search);
@@ -21,7 +17,7 @@ export function getInitialState(): State {
     },
     postId,
     editorSettings: getEditorSettings(),
-    layoutStyles: getEmailLayoutStyles(),
+    styles: getEmailStyles(),
     layout: getEditorLayout(),
     autosaveInterval: 60,
     preview: {
diff --git a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts b/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts
index 21c1a59a86..3b5996f448 100644
--- a/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/selectors.ts
@@ -125,8 +125,8 @@ export function getPreviewState(state: State): State['preview'] {
   return state.preview;
 }
 
-export function getLayoutStyles(state: State): State['layoutStyles'] {
-  return state.layoutStyles;
+export function getStyles(state: State): State['styles'] {
+  return state.styles;
 }
 
 export function getLayout(state: State): State['layout'] {
diff --git a/mailpoet/assets/js/src/email-editor/engine/store/settings.ts b/mailpoet/assets/js/src/email-editor/engine/store/settings.ts
index 9e3257ef14..748aa6ebf1 100644
--- a/mailpoet/assets/js/src/email-editor/engine/store/settings.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/settings.ts
@@ -1,15 +1,11 @@
-import {
-  EmailEditorSettings,
-  EmailLayoutStyles,
-  EmailEditorLayout,
-} from './types';
+import { EmailEditorSettings, EmailStyles, EmailEditorLayout } from './types';
 
 export function getEditorSettings(): EmailEditorSettings {
   return window.MailPoetEmailEditor.editor_settings as EmailEditorSettings;
 }
 
-export function getEmailLayoutStyles(): EmailLayoutStyles {
-  return window.MailPoetEmailEditor.email_layout_styles as EmailLayoutStyles;
+export function getEmailStyles(): EmailStyles {
+  return window.MailPoetEmailEditor.email_styles as EmailStyles;
 }
 
 export function getEditorLayout(): EmailEditorLayout {
diff --git a/mailpoet/assets/js/src/email-editor/engine/store/types.ts b/mailpoet/assets/js/src/email-editor/engine/store/types.ts
index e39b809dd1..bfa33c792e 100644
--- a/mailpoet/assets/js/src/email-editor/engine/store/types.ts
+++ b/mailpoet/assets/js/src/email-editor/engine/store/types.ts
@@ -25,14 +25,19 @@ export type ExperimentalSettings = {
 
 export type EmailEditorSettings = EditorSettings & ExperimentalSettings;
 
-export type EmailLayoutStyles = {
-  width: string;
-  background: string;
-  padding: {
-    bottom: string;
-    left: string;
-    right: string;
-    top: string;
+export type EmailStyles = {
+  layout: {
+    background: string;
+    padding: {
+      bottom: string;
+      left: string;
+      right: string;
+      top: string;
+    };
+    width: string;
+  };
+  colors: {
+    background: string;
   };
 };
 
@@ -53,7 +58,7 @@ export type State = {
   };
   postId: number;
   editorSettings: EmailEditorSettings;
-  layoutStyles: EmailLayoutStyles;
+  styles: EmailStyles;
   layout: EmailEditorLayout;
   autosaveInterval: number;
   preview: {
diff --git a/mailpoet/assets/js/src/email-editor/global.d.ts b/mailpoet/assets/js/src/email-editor/global.d.ts
index 15f1f1c3bd..17d8ee941b 100644
--- a/mailpoet/assets/js/src/email-editor/global.d.ts
+++ b/mailpoet/assets/js/src/email-editor/global.d.ts
@@ -5,7 +5,7 @@ interface Window {
     api_version: string;
     current_wp_user_email: string;
     editor_settings: unknown; // Can't import type in global.d.ts. Typed in getEditorSettings() in store/settings.ts
-    email_layout_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailLayoutStyles() in store/settings.ts
+    email_styles: unknown; // Can't import type in global.d.ts. Typed in getEmailStyles() in store/settings.ts
     editor_layout: unknown; // Can't import type in global.d.ts. Typed in getEmailLayout() in store/settings.ts
   };
 }
diff --git a/mailpoet/lib/AdminPages/Pages/EmailEditor.php b/mailpoet/lib/AdminPages/Pages/EmailEditor.php
index 936413f5d4..8be1b3258b 100644
--- a/mailpoet/lib/AdminPages/Pages/EmailEditor.php
+++ b/mailpoet/lib/AdminPages/Pages/EmailEditor.php
@@ -58,7 +58,7 @@ class EmailEditor {
         'api_version' => esc_js($apiVersion),
         'current_wp_user_email' => esc_js($currentUserEmail),
         'editor_settings' => $this->settingsController->getSettings(),
-        'email_layout_styles' => $this->settingsController->getEmailLayoutStyles(),
+        'email_styles' => $this->settingsController->getEmailStyles(),
         'editor_layout' => $this->settingsController->getLayout(),
       ]
     );
diff --git a/mailpoet/lib/EmailEditor/Engine/EmailApiController.php b/mailpoet/lib/EmailEditor/Engine/EmailApiController.php
index d1cbfa66eb..bef27065d2 100644
--- a/mailpoet/lib/EmailEditor/Engine/EmailApiController.php
+++ b/mailpoet/lib/EmailEditor/Engine/EmailApiController.php
@@ -19,7 +19,7 @@ class EmailApiController {
    */
   public function getEmailData(): array {
     return [
-      'layout_styles' => $this->settingsController->getEmailLayoutStyles(),
+      'layout_styles' => $this->settingsController->getEmailStyles(),
     ];
   }
 
diff --git a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
index fe5a1ecdc3..4ad6318413 100644
--- a/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
+++ b/mailpoet/lib/EmailEditor/Engine/Renderer/Renderer.php
@@ -42,7 +42,7 @@ class Renderer {
     $parser = new \WP_Block_Parser();
     $parsedBlocks = $parser->parse($post->post_content); // phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
 
-    $layoutStyles = $this->settingsController->getEmailLayoutStyles();
+    $layoutStyles = $this->settingsController->getEmailStyles()['layout'];
     $themeData = $this->settingsController->getTheme()->get_data();
     $contentBackground = $themeData['styles']['color']['background'] ?? $layoutStyles['background'];
     $contentFontFamily = $themeData['styles']['typography']['fontFamily'];
diff --git a/mailpoet/lib/EmailEditor/Engine/SettingsController.php b/mailpoet/lib/EmailEditor/Engine/SettingsController.php
index 8bdf343a2b..45379b9ce9 100644
--- a/mailpoet/lib/EmailEditor/Engine/SettingsController.php
+++ b/mailpoet/lib/EmailEditor/Engine/SettingsController.php
@@ -94,26 +94,37 @@ class SettingsController {
   }
 
   /**
-   * @return array{width: string, background: string, padding: array{bottom: string, left: string, right: string, top: string}}
+   * @return array{
+   *   layout: array{width: string,background: string,padding: array{bottom: string, left: string, right: string, top: string}},
+   *   colors: array{background: string},
+   *   typography: array[]
+   * }
    */
-  public function getEmailLayoutStyles(): array {
+  public function getEmailStyles(): array {
     return [
-      'width' => self::EMAIL_WIDTH,
-      'background' => self::EMAIL_LAYOUT_BACKGROUND,
-      'padding' => [
-        'bottom' => self::FLEX_GAP,
-        'left' => self::FLEX_GAP,
-        'right' => self::FLEX_GAP,
-        'top' => self::FLEX_GAP,
+      'layout' => [
+        'background' => self::EMAIL_LAYOUT_BACKGROUND,
+        'width' => self::EMAIL_WIDTH,
+        'padding' => [
+          'bottom' => self::FLEX_GAP,
+          'left' => self::FLEX_GAP,
+          'right' => self::FLEX_GAP,
+          'top' => self::FLEX_GAP,
+        ],
+      ],
+      'colors' => [
+        'background' => '#000000',
+      ],
+      'typography' => [
       ],
     ];
   }
 
   public function getLayoutWidthWithoutPadding(): string {
-    $layoutStyles = $this->getEmailLayoutStyles();
-    $width = $this->parseNumberFromStringWithPixels($layoutStyles['width']);
-    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['left']);
-    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['padding']['right']);
+    $layoutStyles = $this->getEmailStyles();
+    $width = $this->parseNumberFromStringWithPixels($layoutStyles['layout']['width']);
+    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['left']);
+    $width -= $this->parseNumberFromStringWithPixels($layoutStyles['layout']['padding']['right']);
     return "{$width}px";
   }
 
diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
index ed4ed22485..e942b613fb 100644
--- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
+++ b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Columns.php
@@ -51,8 +51,8 @@ class Columns implements BlockRenderer {
 
     $align = $parsedBlock['attrs']['align'] ?? null;
     if ($align !== 'full') {
-      $layoutPaddingLeft = $settingsController->getEmailLayoutStyles()['padding']['left'];
-      $layoutPaddingRight = $settingsController->getEmailLayoutStyles()['padding']['right'];
+      $layoutPaddingLeft = $settingsController->getEmailStyles()['layout']['padding']['left'];
+      $layoutPaddingRight = $settingsController->getEmailStyles()['layout']['padding']['right'];
     } else {
       $layoutPaddingLeft = '0px';
       $layoutPaddingRight = '0px';
diff --git a/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php b/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
index 8549bf1fa8..9e2a2b09a1 100644
--- a/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
+++ b/mailpoet/tests/integration/EmailEditor/Engine/Renderer/RendererTest.php
@@ -88,14 +88,16 @@ class RendererTest extends \MailPoetTest {
       ],
     ]);
     $settingsControllerMock = $this->createMock(SettingsController::class);
-    $settingsControllerMock->method('getEmailLayoutStyles')->willReturn([
-      'width' => '123px',
-      'background' => '#123456',
-      'padding' => [
-        'left' => '1px',
-        'right' => '2px',
-        'top' => '3px',
-        'bottom' => '4px',
+    $settingsControllerMock->method('getEmailStyles')->willReturn([
+      'layout' => [
+        'width' => '123px',
+        'background' => '#123456',
+        'padding' => [
+          'left' => '1px',
+          'right' => '2px',
+          'top' => '3px',
+          'bottom' => '4px',
+        ],
       ],
     ]);
     $settingsControllerMock->method('getTheme')->willReturn($themeJsonMock);
diff --git a/mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php b/mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php
index 1af98247f5..963ddc4dab 100644
--- a/mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php
+++ b/mailpoet/tests/unit/EmailEditor/Engine/SettingsControllerTest.php
@@ -8,10 +8,14 @@ use MailPoet\EmailEditor\Engine\ThemeController;
 class SettingsControllerTest extends \MailPoetUnitTest {
   public function testItGetsMainLayoutStyles(): void {
     $settingsController = new SettingsController($this->makeEmpty(ThemeController::class));
-    $layoutStyles = $settingsController->getEmailLayoutStyles();
-    verify($layoutStyles)->arrayHasKey('width');
+    $styles = $settingsController->getEmailStyles();
+    verify($styles)->arrayHasKey('layout');
+    verify($styles)->arrayHasKey('colors');
+    verify($styles)->arrayHasKey('typography');
+    $layoutStyles = $styles['layout'];
     verify($layoutStyles)->arrayHasKey('background');
     verify($layoutStyles)->arrayHasKey('padding');
+    verify($layoutStyles)->arrayHasKey('width');
   }
 
   public function testItGetsCorrectLayoutWidthWithoutPadding(): void {