diff --git a/apps/web/src/app/editor/email-theming/example.tsx b/apps/web/src/app/editor/email-theming/example.tsx
index b4d87936f1..6525e04ef5 100644
--- a/apps/web/src/app/editor/email-theming/example.tsx
+++ b/apps/web/src/app/editor/email-theming/example.tsx
@@ -17,15 +17,20 @@ const initialContent = {
   content: [
     {
       type: 'heading',
-      attrs: { level: 2 },
+      attrs: { level: 1 },
       content: [{ type: 'text', text: 'Welcome to our newsletter' }],
     },
+    {
+      type: 'heading',
+      attrs: { level: 2 },
+      content: [{ type: 'text', text: 'The new release is live' }],
+    },
     {
       type: 'paragraph',
       content: [
         {
           type: 'text',
-          text: 'This is a themed email editor. Toggle between Basic, Minimal, and Custom themes to see how styles change.',
+          text: 'This editor showcases the built-in themes abstracted from the react-email demo templates (Barebone, Matte, Protocol, Arcane, Studio) alongside the original Basic, Minimal, and a Custom example.',
         },
       ],
     },
@@ -34,10 +39,15 @@ const initialContent = {
       content: [
         {
           type: 'text',
-          text: 'Try editing this content and switching themes to see the difference.',
+          text: 'Switch between themes to see how the container, typography, links, and buttons change.',
         },
       ],
     },
+    {
+      type: 'button',
+      attrs: { url: 'https://react.email' },
+      content: [{ type: 'text', text: 'Read the docs' }],
+    },
   ],
 };
 
@@ -55,16 +65,40 @@ const customTheme = extendTheme('basic', {
   },
 });
 
-type ThemeOption = 'basic' | 'minimal' | 'custom';
+type ThemeOption =
+  | 'basic'
+  | 'minimal'
+  | 'barebone'
+  | 'matte'
+  | 'protocol'
+  | 'arcane'
+  | 'studio'
+  | 'custom';
 
 const themeMap: Record<ThemeOption, EditorThemeInput> = {
   basic: 'basic',
   minimal: 'minimal',
+  barebone: 'barebone',
+  matte: 'matte',
+  protocol: 'protocol',
+  arcane: 'arcane',
+  studio: 'studio',
   custom: customTheme,
 };
 
+const themeOrder: ThemeOption[] = [
+  'basic',
+  'minimal',
+  'barebone',
+  'matte',
+  'protocol',
+  'arcane',
+  'studio',
+  'custom',
+];
+
 export function EmailThemingExample() {
-  const [selected, setSelected] = useState<ThemeOption>('basic');
+  const [selected, setSelected] = useState<ThemeOption>('barebone');
   const contentRef = useRef<JSONContent>(initialContent);
   const theme = themeMap[selected];
 
@@ -83,10 +117,10 @@ export function EmailThemingExample() {
   return (
     <ExampleShell
       title="Email theming"
-      description="Switch between Basic, Minimal, and Custom themes to see how email styles change."
+      description="Switch between the built-in themes (including the five abstracted from the demo email templates) to see how email styles change."
     >
-      <div className="flex gap-2 mb-4">
-        {(['basic', 'minimal', 'custom'] as const).map((option) => (
+      <div className="flex flex-wrap gap-2 mb-4">
+        {themeOrder.map((option) => (
           <button
             key={option}
             type="button"
diff --git a/apps/web/src/app/editor/email-theming/page.tsx b/apps/web/src/app/editor/email-theming/page.tsx
index 049d6c0e9a..9b1cfa4a70 100644
--- a/apps/web/src/app/editor/email-theming/page.tsx
+++ b/apps/web/src/app/editor/email-theming/page.tsx
@@ -6,7 +6,7 @@ import { EmailThemingExample as Example } from './example';
 export const metadata: Metadata = {
   title: 'Email theming — Editor examples',
   description:
-    'Switch between Basic and Minimal themes to see how email styles change.',
+    'Switch between the built-in editor themes — Basic, Minimal, Barebone, Matte, Protocol, Arcane, Studio, and a Custom example — to see how email styles change.',
   alternates: { canonical: '/editor/email-theming' },
 };
 
diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 9dfccc32ce..1f8dcb170d 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -122,7 +122,7 @@ const sections: Section[] = [
         slug: 'email-theming',
         title: 'Email theming',
         description:
-          'Switch between Basic, Minimal, and Custom themes to see how email styles change.',
+          'Switch between the built-in themes — Basic, Minimal, Barebone, Matte, Protocol, Arcane, Studio, and Custom — to see how email styles change.',
         docsUrl: 'https://react.email/docs/editor/features/theming',
       },
       {
diff --git a/packages/editor/src/plugins/email-theming/extension.tsx b/packages/editor/src/plugins/email-theming/extension.tsx
index 6d8bed875b..f0474e1bb2 100644
--- a/packages/editor/src/plugins/email-theming/extension.tsx
+++ b/packages/editor/src/plugins/email-theming/extension.tsx
@@ -227,6 +227,10 @@ export function setGlobalCssInjected(editor: Editor, css: string): boolean {
   return editor.commands.setGlobalContent('css', css);
 }
 
+function isKnownEditorTheme(value: unknown): value is EditorTheme {
+  return typeof value === 'string' && value in EDITOR_THEMES;
+}
+
 function getEmailTheme(editor: Editor): EditorTheme {
   const extensionOptions = (
     editor.extensionManager.extensions.find(
@@ -238,12 +242,12 @@ function getEmailTheme(editor: Editor): EditorTheme {
     return extensionOptions.extends ?? 'minimal';
   }
 
-  if (extensionOptions === 'basic' || extensionOptions === 'minimal') {
+  if (isKnownEditorTheme(extensionOptions)) {
     return extensionOptions;
   }
 
-  const globalTheme = getGlobalContent('theme', editor) as EditorTheme | null;
-  if (globalTheme === 'basic' || globalTheme === 'minimal') {
+  const globalTheme = getGlobalContent('theme', editor);
+  if (isKnownEditorTheme(globalTheme)) {
     return globalTheme;
   }
 
diff --git a/packages/editor/src/plugins/email-theming/theme-config.spec.ts b/packages/editor/src/plugins/email-theming/theme-config.spec.ts
index d6e56c1bcf..ce015ec558 100644
--- a/packages/editor/src/plugins/email-theming/theme-config.spec.ts
+++ b/packages/editor/src/plugins/email-theming/theme-config.spec.ts
@@ -6,7 +6,8 @@ import {
   parseCssValue,
   themeStylesToPanelOverrides,
 } from './theme-config';
-import { EDITOR_THEMES } from './themes';
+import { EDITOR_THEMES, RESET_THEMES } from './themes';
+import type { EditorTheme } from './types';
 
 describe('parseCssValue', () => {
   it('parses pixel strings', () => {
@@ -210,3 +211,75 @@ describe('extendTheme', () => {
     expect(result.styles).toEqual({ link: { color: '#abc' } });
   });
 });
+
+describe('new design themes', () => {
+  const DESIGN_THEMES = [
+    'barebone',
+    'matte',
+    'protocol',
+    'arcane',
+    'studio',
+  ] as const satisfies readonly EditorTheme[];
+
+  const REQUIRED_PANEL_IDS = [
+    'body',
+    'container',
+    'typography',
+    'h1',
+    'h2',
+    'h3',
+    'paragraph',
+    'link',
+    'image',
+    'button',
+    'code-block',
+    'inline-code',
+  ];
+
+  for (const theme of DESIGN_THEMES) {
+    it(`${theme} is registered in EDITOR_THEMES with all required panels`, () => {
+      const panels = EDITOR_THEMES[theme];
+      expect(panels).toBeDefined();
+      const ids = panels.map((g) => g.id);
+      for (const id of REQUIRED_PANEL_IDS) {
+        expect(ids).toContain(id);
+      }
+    });
+
+    it(`${theme} is registered in RESET_THEMES with heading styles`, () => {
+      const reset = RESET_THEMES[theme];
+      expect(reset).toBeDefined();
+      expect(reset.h1.fontSize).toBeDefined();
+      expect(reset.h2.fontSize).toBeDefined();
+      expect(reset.h3.fontSize).toBeDefined();
+      expect(reset.button.backgroundColor).toBeDefined();
+      expect(reset.button.color).toBeDefined();
+    });
+
+    it(`${theme} can be used as extendTheme base`, () => {
+      const result = extendTheme(theme, { link: { color: '#abc' } });
+      expect(result.extends).toBe(theme);
+    });
+  }
+
+  it('barebone has a light body background', () => {
+    const bodyBg = EDITOR_THEMES.barebone
+      .find((g) => g.id === 'body')
+      ?.inputs.find((i) => i.prop === 'backgroundColor')?.value;
+    expect(bodyBg).toBe('#F3F4F6');
+  });
+
+  it('protocol is a dark theme', () => {
+    const containerBg = EDITOR_THEMES.protocol
+      .find((g) => g.id === 'container')
+      ?.inputs.find((i) => i.prop === 'backgroundColor')?.value;
+    expect(containerBg).toBe('#131313');
+  });
+
+  it('arcane has a dark maroon container', () => {
+    const containerBg = EDITOR_THEMES.arcane
+      .find((g) => g.id === 'container')
+      ?.inputs.find((i) => i.prop === 'backgroundColor')?.value;
+    expect(containerBg).toBe('#300610');
+  });
+});
diff --git a/packages/editor/src/plugins/email-theming/themes.ts b/packages/editor/src/plugins/email-theming/themes.ts
index c677fceb53..df57807a8a 100644
--- a/packages/editor/src/plugins/email-theming/themes.ts
+++ b/packages/editor/src/plugins/email-theming/themes.ts
@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import type {
   EditorTheme,
   PanelGroup,
@@ -618,6 +619,859 @@ const THEME_MINIMAL: PanelGroup[] = [
   },
 ];
 
+interface HeadingDef {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: number;
+  letterSpacing?: number;
+  paddingTop?: number;
+  color?: string;
+}
+
+interface ThemeDef {
+  fontFamily: string;
+  body: {
+    backgroundColor: string;
+    color: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  container: {
+    backgroundColor: string;
+    color: string;
+    width: number;
+    padding: [number, number, number, number];
+    borderRadius: number;
+    borderColor: string;
+    borderWidth: number;
+  };
+  h1: HeadingDef;
+  h2: HeadingDef;
+  h3: HeadingDef;
+  paragraph: {
+    fontSize: number;
+    lineHeight: number;
+    color?: string;
+  };
+  link: {
+    color: string;
+    textDecoration: 'underline' | 'none';
+  };
+  image: {
+    borderRadius: number;
+  };
+  button: {
+    backgroundColor: string;
+    color: string;
+    borderRadius: number;
+    padding: [number, number, number, number];
+    borderColor?: string;
+    borderWidth?: number;
+    fontWeight?: number;
+  };
+  codeBlock: {
+    backgroundColor: string;
+    color: string;
+    borderRadius: number;
+    padding: [number, number, number, number];
+  };
+  inlineCode: {
+    backgroundColor: string;
+    color: string;
+    borderRadius: number;
+  };
+}
+
+function buildThemePanels(def: ThemeDef): PanelGroup[] {
+  const [cpTop, cpRight, cpBottom, cpLeft] = def.container.padding;
+  const [bpTop, bpRight, bpBottom, bpLeft] = def.button.padding;
+  const [cbpTop, cbpRight, cbpBottom, cbpLeft] = def.codeBlock.padding;
+
+  return [
+    {
+      id: 'body',
+      title: 'Background',
+      classReference: 'body',
+      inputs: [
+        {
+          label: 'Background',
+          type: 'color',
+          value: def.body.backgroundColor,
+          prop: 'backgroundColor',
+          classReference: 'body',
+        },
+        {
+          label: 'Padding Top',
+          type: 'number',
+          value: undefined,
+          unit: 'px',
+          prop: 'paddingTop',
+          classReference: 'body',
+        },
+        {
+          label: 'Padding Right',
+          type: 'number',
+          value: undefined,
+          unit: 'px',
+          prop: 'paddingRight',
+          classReference: 'body',
+        },
+        {
+          label: 'Padding Bottom',
+          type: 'number',
+          value: undefined,
+          unit: 'px',
+          prop: 'paddingBottom',
+          classReference: 'body',
+        },
+        {
+          label: 'Padding Left',
+          type: 'number',
+          value: undefined,
+          unit: 'px',
+          prop: 'paddingLeft',
+          classReference: 'body',
+        },
+      ],
+    },
+    {
+      id: 'container',
+      title: 'Content',
+      classReference: 'container',
+      inputs: [
+        {
+          label: 'Align',
+          type: 'select',
+          value: 'left',
+          options: { left: 'Left', center: 'Center', right: 'Right' },
+          prop: 'align',
+          classReference: 'container',
+        },
+        {
+          label: 'Width',
+          type: 'number',
+          value: def.container.width,
+          unit: 'px',
+          prop: 'width',
+          classReference: 'container',
+        },
+        {
+          label: 'Height',
+          type: 'number',
+          unit: 'px',
+          prop: 'height',
+          classReference: 'container',
+        },
+        {
+          label: 'Text',
+          type: 'color',
+          value: def.container.color,
+          prop: 'color',
+          classReference: 'container',
+        },
+        {
+          label: 'Background',
+          type: 'color',
+          value: def.container.backgroundColor,
+          prop: 'backgroundColor',
+          classReference: 'container',
+        },
+        {
+          label: 'Padding Top',
+          type: 'number',
+          value: cpTop,
+          unit: 'px',
+          prop: 'paddingTop',
+          classReference: 'container',
+        },
+        {
+          label: 'Padding Right',
+          type: 'number',
+          value: cpRight,
+          unit: 'px',
+          prop: 'paddingRight',
+          classReference: 'container',
+        },
+        {
+          label: 'Padding Bottom',
+          type: 'number',
+          value: cpBottom,
+          unit: 'px',
+          prop: 'paddingBottom',
+          classReference: 'container',
+        },
+        {
+          label: 'Padding Left',
+          type: 'number',
+          value: cpLeft,
+          unit: 'px',
+          prop: 'paddingLeft',
+          classReference: 'container',
+        },
+        {
+          label: 'Corner radius',
+          type: 'number',
+          value: def.container.borderRadius,
+          unit: 'px',
+          prop: 'borderRadius',
+          classReference: 'container',
+        },
+        {
+          label: 'Border color',
+          type: 'color',
+          value: def.container.borderColor,
+          prop: 'borderColor',
+          classReference: 'container',
+        },
+      ],
+    },
+    {
+      id: 'typography',
+      title: 'Text',
+      classReference: 'body',
+      inputs: [
+        {
+          label: 'Font size',
+          type: 'number',
+          value: def.body.fontSize,
+          unit: 'px',
+          prop: 'fontSize',
+          classReference: 'body',
+        },
+        {
+          label: 'Line Height',
+          type: 'number',
+          value: Math.round(def.body.lineHeight * 100),
+          unit: '%',
+          prop: 'lineHeight',
+          classReference: 'container',
+        },
+      ],
+    },
+    { id: 'h1', title: 'Title', category: 'Text', classReference: 'h1', inputs: [] },
+    { id: 'h2', title: 'Subtitle', category: 'Text', classReference: 'h2', inputs: [] },
+    { id: 'h3', title: 'Heading', category: 'Text', classReference: 'h3', inputs: [] },
+    {
+      id: 'paragraph',
+      title: 'Paragraph',
+      category: 'Text',
+      classReference: 'paragraph',
+      inputs: [],
+    },
+    {
+      id: 'link',
+      title: 'Link',
+      classReference: 'link',
+      inputs: [
+        {
+          label: 'Color',
+          type: 'color',
+          value: def.link.color,
+          prop: 'color',
+          classReference: 'link',
+        },
+        {
+          label: 'Decoration',
+          type: 'select',
+          value: def.link.textDecoration,
+          prop: 'textDecoration',
+          options: { underline: 'Underline', none: 'None' },
+          classReference: 'link',
+        },
+      ],
+    },
+    {
+      id: 'image',
+      title: 'Image',
+      classReference: 'image',
+      inputs: [
+        {
+          label: 'Border radius',
+          type: 'number',
+          value: def.image.borderRadius,
+          unit: 'px',
+          prop: 'borderRadius',
+          classReference: 'image',
+        },
+      ],
+    },
+    {
+      id: 'button',
+      title: 'Button',
+      classReference: 'button',
+      inputs: [
+        {
+          label: 'Background',
+          type: 'color',
+          value: def.button.backgroundColor,
+          prop: 'backgroundColor',
+          classReference: 'button',
+        },
+        {
+          label: 'Text color',
+          type: 'color',
+          value: def.button.color,
+          prop: 'color',
+          classReference: 'button',
+        },
+        {
+          label: 'Radius',
+          type: 'number',
+          value: def.button.borderRadius,
+          unit: 'px',
+          prop: 'borderRadius',
+          classReference: 'button',
+        },
+        {
+          label: 'Padding Top',
+          type: 'number',
+          value: bpTop,
+          unit: 'px',
+          prop: 'paddingTop',
+          classReference: 'button',
+        },
+        {
+          label: 'Padding Right',
+          type: 'number',
+          value: bpRight,
+          unit: 'px',
+          prop: 'paddingRight',
+          classReference: 'button',
+        },
+        {
+          label: 'Padding Bottom',
+          type: 'number',
+          value: bpBottom,
+          unit: 'px',
+          prop: 'paddingBottom',
+          classReference: 'button',
+        },
+        {
+          label: 'Padding Left',
+          type: 'number',
+          value: bpLeft,
+          unit: 'px',
+          prop: 'paddingLeft',
+          classReference: 'button',
+        },
+      ],
+    },
+    {
+      id: 'code-block',
+      title: 'Code Block',
+      classReference: 'codeBlock',
+      inputs: [
+        {
+          label: 'Border Radius',
+          type: 'number',
+          value: def.codeBlock.borderRadius,
+          unit: 'px',
+          prop: 'borderRadius',
+          classReference: 'codeBlock',
+        },
+        {
+          label: 'Padding Top',
+          type: 'number',
+          value: cbpTop,
+          unit: 'px',
+          prop: 'paddingTop',
+          classReference: 'codeBlock',
+        },
+        {
+          label: 'Padding Bottom',
+          type: 'number',
+          value: cbpBottom,
+          unit: 'px',
+          prop: 'paddingBottom',
+          classReference: 'codeBlock',
+        },
+        {
+          label: 'Padding Left',
+          type: 'number',
+          value: cbpLeft,
+          unit: 'px',
+          prop: 'paddingLeft',
+          classReference: 'codeBlock',
+        },
+        {
+          label: 'Padding Right',
+          type: 'number',
+          value: cbpRight,
+          unit: 'px',
+          prop: 'paddingRight',
+          classReference: 'codeBlock',
+        },
+      ],
+    },
+    {
+      id: 'inline-code',
+      title: 'Inline Code',
+      classReference: 'inlineCode',
+      inputs: [
+        {
+          label: 'Background',
+          type: 'color',
+          value: def.inlineCode.backgroundColor,
+          prop: 'backgroundColor',
+          classReference: 'inlineCode',
+        },
+        {
+          label: 'Text color',
+          type: 'color',
+          value: def.inlineCode.color,
+          prop: 'color',
+          classReference: 'inlineCode',
+        },
+        {
+          label: 'Radius',
+          type: 'number',
+          value: def.inlineCode.borderRadius,
+          unit: 'px',
+          prop: 'borderRadius',
+          classReference: 'inlineCode',
+        },
+      ],
+    },
+  ];
+}
+
+function px(value: number): string {
+  return `${value}px`;
+}
+
+function headingReset(h: HeadingDef): React.CSSProperties {
+  const style: React.CSSProperties = {
+    fontSize: px(h.fontSize),
+    lineHeight: String(h.lineHeight),
+    fontWeight: h.fontWeight,
+  };
+  if (h.letterSpacing !== undefined) style.letterSpacing = px(h.letterSpacing);
+  if (h.paddingTop !== undefined) style.paddingTop = px(h.paddingTop);
+  if (h.color !== undefined) style.color = h.color;
+  return style;
+}
+
+function buildThemeReset(def: ThemeDef): ResetTheme {
+  const paragraph: React.CSSProperties = {
+    fontSize: px(def.paragraph.fontSize),
+    lineHeight: String(def.paragraph.lineHeight),
+    paddingTop: '0.5em',
+    paddingBottom: '0.5em',
+  };
+  if (def.paragraph.color) paragraph.color = def.paragraph.color;
+
+  const button: React.CSSProperties = {
+    backgroundColor: def.button.backgroundColor,
+    color: def.button.color,
+    borderRadius: px(def.button.borderRadius),
+    paddingTop: px(def.button.padding[0]),
+    paddingRight: px(def.button.padding[1]),
+    paddingBottom: px(def.button.padding[2]),
+    paddingLeft: px(def.button.padding[3]),
+    lineHeight: '100%',
+    display: 'inline-block',
+  };
+  if (def.button.borderColor && def.button.borderWidth) {
+    button.border = `${def.button.borderWidth}px solid ${def.button.borderColor}`;
+  }
+  if (def.button.fontWeight) button.fontWeight = def.button.fontWeight;
+
+  return {
+    reset: { margin: '0', padding: '0' },
+    body: {
+      fontFamily: def.fontFamily,
+      fontSize: px(def.body.fontSize),
+      lineHeight: String(def.body.lineHeight),
+      color: def.body.color,
+      minHeight: '100%',
+    },
+    container: {},
+    h1: headingReset(def.h1),
+    h2: headingReset(def.h2),
+    h3: headingReset(def.h3),
+    paragraph,
+    list: { paddingLeft: '1.1em', paddingBottom: '1em' },
+    nestedList: { paddingLeft: '1.1em', paddingBottom: '0' },
+    listItem: {
+      marginLeft: '1em',
+      marginBottom: '0.3em',
+      marginTop: '0.3em',
+    },
+    listParagraph: { padding: '0', margin: '0' },
+    blockquote: {
+      borderLeft: '3px solid #acb3be',
+      color: '#7e8a9a',
+      marginLeft: 0,
+      paddingLeft: '0.8em',
+      fontSize: '1.1em',
+      fontFamily: def.fontFamily,
+    },
+    link: {
+      color: def.link.color,
+      textDecoration: def.link.textDecoration,
+    },
+    footer: { fontSize: '0.8em' },
+    hr: { paddingBottom: '1em', borderWidth: '2px' },
+    image: {
+      maxWidth: '100%',
+      borderRadius: px(def.image.borderRadius),
+    },
+    button,
+    inlineCode: {
+      paddingTop: '0.25em',
+      paddingBottom: '0.25em',
+      paddingLeft: '0.4em',
+      paddingRight: '0.4em',
+      background: def.inlineCode.backgroundColor,
+      color: def.inlineCode.color,
+      borderRadius: px(def.inlineCode.borderRadius),
+    },
+    codeBlock: {
+      fontFamily: 'monospace',
+      fontWeight: '500',
+      fontSize: '.92em',
+      backgroundColor: def.codeBlock.backgroundColor,
+      color: def.codeBlock.color,
+      borderRadius: px(def.codeBlock.borderRadius),
+      paddingTop: px(def.codeBlock.padding[0]),
+      paddingRight: px(def.codeBlock.padding[1]),
+      paddingBottom: px(def.codeBlock.padding[2]),
+      paddingLeft: px(def.codeBlock.padding[3]),
+    },
+    codeTag: {
+      lineHeight: '130%',
+      fontFamily: 'monospace',
+      fontSize: '.92em',
+    },
+    section: {
+      padding: '10px 20px 10px 20px',
+      boxSizing: 'border-box' as const,
+    },
+  };
+}
+
+const SYSTEM_FONT_STACK =
+  "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+
+const BAREBONE_DEF: ThemeDef = {
+  fontFamily: `'Inter', ${SYSTEM_FONT_STACK}`,
+  body: {
+    backgroundColor: '#F3F4F6',
+    color: '#14171E',
+    fontSize: 16,
+    lineHeight: 1.5,
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    color: '#14171E',
+    width: 640,
+    padding: [24, 24, 24, 24],
+    borderRadius: 10,
+    borderColor: '#F0F0F0',
+    borderWidth: 0,
+  },
+  h1: {
+    fontSize: 40,
+    lineHeight: 1.1,
+    fontWeight: 600,
+    letterSpacing: -0.8,
+    color: '#14171E',
+  },
+  h2: {
+    fontSize: 32,
+    lineHeight: 1.25,
+    fontWeight: 600,
+    letterSpacing: -0.64,
+    color: '#14171E',
+  },
+  h3: {
+    fontSize: 28,
+    lineHeight: 1.3,
+    fontWeight: 600,
+    letterSpacing: -0.56,
+    color: '#14171E',
+  },
+  paragraph: { fontSize: 16, lineHeight: 1.5, color: '#43454B' },
+  link: { color: '#14171E', textDecoration: 'underline' },
+  image: { borderRadius: 12 },
+  button: {
+    backgroundColor: '#14171E',
+    color: '#FFFFFF',
+    borderRadius: 8,
+    padding: [16, 28, 16, 28],
+    fontWeight: 500,
+  },
+  codeBlock: {
+    backgroundColor: '#F3F4F6',
+    color: '#14171E',
+    borderRadius: 8,
+    padding: [12, 16, 12, 16],
+  },
+  inlineCode: {
+    backgroundColor: '#F3F4F6',
+    color: '#14171E',
+    borderRadius: 4,
+  },
+};
+
+const MATTE_DEF: ThemeDef = {
+  fontFamily: `Arial, Helvetica, sans-serif`,
+  body: {
+    backgroundColor: '#FBFCFB',
+    color: '#103B05',
+    fontSize: 14,
+    lineHeight: 1.5,
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    color: '#103B05',
+    width: 640,
+    padding: [64, 24, 24, 24],
+    borderRadius: 8,
+    borderColor: '#D8E1D4',
+    borderWidth: 1,
+  },
+  h1: {
+    fontSize: 48,
+    lineHeight: 1,
+    fontWeight: 600,
+    letterSpacing: -1.44,
+    color: '#103B05',
+  },
+  h2: {
+    fontSize: 32,
+    lineHeight: 1.2,
+    fontWeight: 600,
+    letterSpacing: -0.6,
+    color: '#103B05',
+  },
+  h3: {
+    fontSize: 20,
+    lineHeight: 1.2,
+    fontWeight: 500,
+    letterSpacing: -0.2,
+    color: '#103B05',
+  },
+  paragraph: { fontSize: 14, lineHeight: 1.5, color: '#194A07' },
+  link: { color: '#194A07', textDecoration: 'underline' },
+  image: { borderRadius: 0 },
+  button: {
+    backgroundColor: '#103B05',
+    color: '#FBFFF9',
+    borderRadius: 0,
+    padding: [14, 20, 14, 20],
+    fontWeight: 500,
+  },
+  codeBlock: {
+    backgroundColor: '#FBFCFB',
+    color: '#103B05',
+    borderRadius: 0,
+    padding: [12, 16, 12, 16],
+  },
+  inlineCode: {
+    backgroundColor: '#FBFCFB',
+    color: '#103B05',
+    borderRadius: 0,
+  },
+};
+
+const PROTOCOL_DEF: ThemeDef = {
+  fontFamily: `'Inter', ${SYSTEM_FONT_STACK}`,
+  body: {
+    backgroundColor: '#212121',
+    color: '#FFFFFF',
+    fontSize: 14,
+    lineHeight: 1.5,
+  },
+  container: {
+    backgroundColor: '#131313',
+    color: '#FFFFFF',
+    width: 640,
+    padding: [24, 24, 24, 24],
+    borderRadius: 0,
+    borderColor: '#2B2B2B',
+    borderWidth: 0,
+  },
+  h1: {
+    fontSize: 56,
+    lineHeight: 1,
+    fontWeight: 500,
+    letterSpacing: -1.68,
+    color: '#FFFFFF',
+  },
+  h2: {
+    fontSize: 32,
+    lineHeight: 0.9,
+    fontWeight: 500,
+    letterSpacing: 0.4,
+    color: '#FFFFFF',
+  },
+  h3: {
+    fontSize: 24,
+    lineHeight: 1.5,
+    fontWeight: 500,
+    letterSpacing: -0.072,
+    color: '#FFFFFF',
+  },
+  paragraph: { fontSize: 14, lineHeight: 1.5, color: '#C4C4C4' },
+  link: { color: '#C4C4C4', textDecoration: 'none' },
+  image: { borderRadius: 0 },
+  button: {
+    backgroundColor: '#FFFFFF',
+    color: '#131313',
+    borderRadius: 0,
+    padding: [14, 20, 14, 20],
+    fontWeight: 500,
+  },
+  codeBlock: {
+    backgroundColor: '#131313',
+    color: '#C4C4C4',
+    borderRadius: 0,
+    padding: [12, 16, 12, 16],
+  },
+  inlineCode: {
+    backgroundColor: '#2B2B2B',
+    color: '#C4C4C4',
+    borderRadius: 0,
+  },
+};
+
+const ARCANE_DEF: ThemeDef = {
+  fontFamily: `'Inter', ${SYSTEM_FONT_STACK}`,
+  body: {
+    backgroundColor: '#FFFFFF',
+    color: '#FCF3ED',
+    fontSize: 15,
+    lineHeight: 1.5,
+  },
+  container: {
+    backgroundColor: '#300610',
+    color: '#FCF3ED',
+    width: 640,
+    padding: [40, 40, 40, 40],
+    borderRadius: 0,
+    borderColor: '#3D151D',
+    borderWidth: 0,
+  },
+  h1: {
+    fontSize: 72,
+    lineHeight: 1,
+    fontWeight: 400,
+    letterSpacing: -0.52,
+    color: '#FCF3ED',
+  },
+  h2: {
+    fontSize: 32,
+    lineHeight: 1.4,
+    fontWeight: 500,
+    letterSpacing: 0.008,
+    color: '#FCF3ED',
+  },
+  h3: {
+    fontSize: 24,
+    lineHeight: 1.4,
+    fontWeight: 500,
+    letterSpacing: 0.008,
+    color: '#FCF3ED',
+  },
+  paragraph: { fontSize: 15, lineHeight: 1.5, color: '#EFE1D8' },
+  link: { color: '#FCF3ED', textDecoration: 'underline' },
+  image: { borderRadius: 0 },
+  button: {
+    backgroundColor: '#FCF3ED',
+    color: '#300610',
+    borderRadius: 0,
+    padding: [14, 20, 14, 20],
+    fontWeight: 500,
+  },
+  codeBlock: {
+    backgroundColor: '#431D26',
+    color: '#EFE1D8',
+    borderRadius: 0,
+    padding: [12, 16, 12, 16],
+  },
+  inlineCode: {
+    backgroundColor: '#431D26',
+    color: '#EFE1D8',
+    borderRadius: 0,
+  },
+};
+
+const STUDIO_DEF: ThemeDef = {
+  fontFamily: `'Inter', ${SYSTEM_FONT_STACK}`,
+  body: {
+    backgroundColor: '#DCE1E4',
+    color: '#332C2C',
+    fontSize: 14,
+    lineHeight: 1.6,
+  },
+  container: {
+    backgroundColor: '#FFFFFF',
+    color: '#332C2C',
+    width: 640,
+    padding: [32, 32, 32, 32],
+    borderRadius: 0,
+    borderColor: '#F0F0F0',
+    borderWidth: 0,
+  },
+  h1: {
+    fontSize: 48,
+    lineHeight: 1.15,
+    fontWeight: 700,
+    letterSpacing: -0.96,
+    color: '#332C2C',
+  },
+  h2: {
+    fontSize: 32,
+    lineHeight: 1.2,
+    fontWeight: 500,
+    letterSpacing: -0.64,
+    color: '#332C2C',
+  },
+  h3: {
+    fontSize: 22,
+    lineHeight: 1.4,
+    fontWeight: 500,
+    letterSpacing: -0.176,
+    color: '#332C2C',
+  },
+  paragraph: { fontSize: 14, lineHeight: 1.6, color: '#726A6A' },
+  link: { color: '#726A6A', textDecoration: 'none' },
+  image: { borderRadius: 0 },
+  button: {
+    backgroundColor: '#FFFFFF',
+    color: '#332C2C',
+    borderRadius: 8,
+    padding: [12, 20, 12, 20],
+    borderColor: '#E8E9E9',
+    borderWidth: 1,
+    fontWeight: 500,
+  },
+  codeBlock: {
+    backgroundColor: '#F6F6F6',
+    color: '#332C2C',
+    borderRadius: 8,
+    padding: [12, 16, 12, 16],
+  },
+  inlineCode: {
+    backgroundColor: '#F0F0F0',
+    color: '#332C2C',
+    borderRadius: 4,
+  },
+};
+
+const THEME_BAREBONE: PanelGroup[] = buildThemePanels(BAREBONE_DEF);
+const THEME_MATTE: PanelGroup[] = buildThemePanels(MATTE_DEF);
+const THEME_PROTOCOL: PanelGroup[] = buildThemePanels(PROTOCOL_DEF);
+const THEME_ARCANE: PanelGroup[] = buildThemePanels(ARCANE_DEF);
+const THEME_STUDIO: PanelGroup[] = buildThemePanels(STUDIO_DEF);
+
+const RESET_BAREBONE = buildThemeReset(BAREBONE_DEF);
+const RESET_MATTE = buildThemeReset(MATTE_DEF);
+const RESET_PROTOCOL = buildThemeReset(PROTOCOL_DEF);
+const RESET_ARCANE = buildThemeReset(ARCANE_DEF);
+const RESET_STUDIO = buildThemeReset(STUDIO_DEF);
+
 const RESET_BASIC: ResetTheme = {
   reset: {
     margin: '0',
@@ -734,6 +1588,11 @@ const RESET_MINIMAL: ResetTheme = {
 export const RESET_THEMES: Record<EditorTheme, ResetTheme> = {
   basic: RESET_BASIC,
   minimal: RESET_MINIMAL,
+  barebone: RESET_BAREBONE,
+  matte: RESET_MATTE,
+  protocol: RESET_PROTOCOL,
+  arcane: RESET_ARCANE,
+  studio: RESET_STUDIO,
 };
 
 export function resolveResetValue(
@@ -758,6 +1617,11 @@ export function resolveResetValue(
 export const EDITOR_THEMES: Record<EditorTheme, PanelGroup[]> = {
   minimal: THEME_MINIMAL,
   basic: THEME_BASIC,
+  barebone: THEME_BAREBONE,
+  matte: THEME_MATTE,
+  protocol: THEME_PROTOCOL,
+  arcane: THEME_ARCANE,
+  studio: THEME_STUDIO,
 };
 
 export function getThemeBodyFontSizePx(theme: EditorTheme): number {
diff --git a/packages/editor/src/plugins/email-theming/types.ts b/packages/editor/src/plugins/email-theming/types.ts
index f703cb7ea5..95cffab1c4 100644
--- a/packages/editor/src/plugins/email-theming/types.ts
+++ b/packages/editor/src/plugins/email-theming/types.ts
@@ -4,7 +4,14 @@ type InputType = 'color' | 'number' | 'select' | 'text' | 'textarea';
 type InputUnit = 'px' | '%';
 type Options = Record<string, string>;
 
-export type EditorTheme = 'basic' | 'minimal';
+export type EditorTheme =
+  | 'basic'
+  | 'minimal'
+  | 'barebone'
+  | 'matte'
+  | 'protocol'
+  | 'arcane'
+  | 'studio';
 export type PanelSectionId =
   | 'body'
   | 'container'
diff --git a/packages/editor/src/ui/inspector/document.tsx b/packages/editor/src/ui/inspector/document.tsx
index 93cbef412a..230a42e244 100644
--- a/packages/editor/src/ui/inspector/document.tsx
+++ b/packages/editor/src/ui/inspector/document.tsx
@@ -8,6 +8,7 @@ import {
   SUPPORTED_CSS_PROPERTIES,
 } from '../../plugins/email-theming/themes';
 import type {
+  EditorTheme,
   KnownCssProperties,
   KnownThemeComponents,
   PanelGroup,
@@ -69,7 +70,7 @@ function ensureAllProperties(
 
 function applyStyleChange(
   styles: PanelGroup[],
-  themeName: 'basic' | 'minimal',
+  themeName: EditorTheme,
   {
     classReference,
     prop,