diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts
index b60ce1c54c59e..99fa2abf84841 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts
@@ -9,47 +9,63 @@
 
 import { css } from '@emotion/react';
 import { layoutVar, layoutLevels } from '@kbn/core-chrome-layout-constants';
-import { euiOverflowScroll, euiShadow } from '@elastic/eui';
+import { euiOverflowScroll, euiShadow, type UseEuiTheme } from '@elastic/eui';
 import { getHighContrastBorder } from '@kbn/core-chrome-layout-utils';
+import type { ChromeStyle } from '@kbn/core-chrome-browser';
 import type { EmotionFn } from '../types';
 
-const root: EmotionFn = (useEuiTheme) =>
-  css`
-    grid-area: application;
+const root = (chromeStyle: ChromeStyle = 'classic'): EmotionFn => {
+  const isProjectStyle = chromeStyle === 'project';
 
-    height: calc(100% - ${layoutVar('application.marginBottom')});
-    width: calc(100% - ${layoutVar('application.marginRight')});
-    margin-bottom: ${layoutVar('application.marginBottom')};
-    margin-right: ${layoutVar('application.marginRight')};
+  return (useEuiTheme: UseEuiTheme) => {
+    return css`
+      grid-area: application;
 
-    z-index: ${layoutLevels.content};
+      height: calc(100% - ${layoutVar('application.marginBottom')});
+      width: calc(100% - ${layoutVar('application.marginRight')});
+      margin-bottom: ${layoutVar('application.marginBottom')};
+      margin-right: ${layoutVar('application.marginRight')};
 
-    position: relative;
-    display: flex;
-    flex-direction: column;
+      z-index: ${layoutLevels.content};
 
-    background-color: ${useEuiTheme.euiTheme.colors.backgroundBasePlain};
-    border-radius: ${useEuiTheme.euiTheme.border.radius.medium};
-    border: ${getHighContrastBorder(useEuiTheme)};
-    ${euiShadow(useEuiTheme, 'xs', { border: 'none' })};
+      position: relative;
+      display: flex;
+      flex-direction: column;
 
-    &:focus-visible {
-      border: 2px solid ${useEuiTheme.euiTheme.colors.textParagraph};
-    }
+      // Only apply distinguished background styling for "project" chrome style
+      ${isProjectStyle &&
+      css`
+        background-color: ${useEuiTheme.euiTheme.colors.backgroundBasePlain};
+        border-radius: ${useEuiTheme.euiTheme.border.radius.medium};
+        border: ${getHighContrastBorder(useEuiTheme)};
+        ${euiShadow(useEuiTheme, 'xs', { border: 'none' })};
+      `}
+      ${!isProjectStyle &&
+      css`
+        background-color: transparent;
+        border-radius: 0;
+        border: none;
+      `}
 
-    // only restrict overflow scroll on screen (not print) to allow for full page printing
-    @media screen {
-      ${euiOverflowScroll(useEuiTheme, { direction: 'y' })};
-      // reset the height back to respect the margin bottom
-      height: calc(100% - ${layoutVar('application.marginBottom')});
+      &:focus-visible {
+        border: 2px solid ${useEuiTheme.euiTheme.colors.textParagraph};
+      }
 
-      // Hide scrollbar
-      scrollbar-width: none; /* Firefox */
-      &::-webkit-scrollbar {
-        display: none; /* Chrome, Safari, Edge */
+      // only restrict overflow scroll on screen (not print) to allow for full page printing
+      @media screen {
+        ${euiOverflowScroll(useEuiTheme, { direction: 'y' })};
+        // reset the height back to respect the margin bottom
+        height: calc(100% - ${layoutVar('application.marginBottom')});
+
+        // Hide scrollbar
+        scrollbar-width: none; /* Firefox */
+        &::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Edge */
+        }
       }
-    }
-  `;
+    `;
+  };
+};
 
 const content: EmotionFn = () => css`
   display: flex;
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx b/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx
index ef1a2ba7f2fff..0d171b1b50904 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx
@@ -13,6 +13,7 @@ import React from 'react';
 import { APP_MAIN_SCROLL_CONTAINER_ID } from '@kbn/core-chrome-layout-constants';
 
 import { styles } from './layout_application.styles';
+import { useLayoutConfig } from '../layout_config_context';
 
 /**
  * The application slot wrapper
@@ -29,9 +30,11 @@ export const LayoutApplication = ({
   topBar?: ReactNode;
   bottomBar?: ReactNode;
 }) => {
+  const { chromeStyle } = useLayoutConfig();
+
   return (
     <div
-      css={styles.root}
+      css={styles.root(chromeStyle)}
       id={APP_MAIN_SCROLL_CONTAINER_ID}
       className="kbnChromeLayoutApplication"
       data-test-subj="kbnChromeLayoutApplication"
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/index.ts b/src/core/packages/chrome/layout/core-chrome-layout-components/index.ts
index 6ed816c1fcb34..e46abbc96b1e5 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/index.ts
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/index.ts
@@ -15,5 +15,6 @@ export {
   type LayoutConfigProviderProps as ChromeLayoutConfigProviderProps,
   useLayoutUpdate,
 } from './layout_config_context';
+export type { ChromeStyle } from '@kbn/core-chrome-browser';
 export { SimpleDebugOverlay } from './debug/simple_debug_overlay';
 export { LayoutDebugOverlay } from './debug/layout_debug_overlay';
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx b/src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx
index 9e46daa6af0fc..4105c4813a2e8 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx
@@ -9,6 +9,7 @@
 
 import type { ReactNode } from 'react';
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import type { ChromeStyle } from '@kbn/core-chrome-browser';
 import type { LayoutDimensions } from './layout.types';
 
 /**
@@ -26,7 +27,9 @@ export type LayoutConfig = Pick<
   | 'applicationBottomBarHeight'
   | 'applicationMarginBottom'
   | 'applicationMarginRight'
->;
+> & {
+  chromeStyle?: ChromeStyle;
+};
 
 /**
  * Context interface including both the config and an update function
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/moon.yml b/src/core/packages/chrome/layout/core-chrome-layout-components/moon.yml
index ae35e9abe24fa..ae26680a0d82b 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/moon.yml
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/moon.yml
@@ -20,6 +20,7 @@ project:
 dependsOn:
   - '@kbn/core-chrome-layout-constants'
   - '@kbn/core-chrome-layout-utils'
+  - '@kbn/core-chrome-browser'
 tags:
   - shared-browser
   - package
diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/tsconfig.json b/src/core/packages/chrome/layout/core-chrome-layout-components/tsconfig.json
index d2ecadb871329..03399131d78a7 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout-components/tsconfig.json
+++ b/src/core/packages/chrome/layout/core-chrome-layout-components/tsconfig.json
@@ -22,5 +22,6 @@
   "kbn_references": [
     "@kbn/core-chrome-layout-constants",
     "@kbn/core-chrome-layout-utils",
+    "@kbn/core-chrome-browser",
   ]
 }
diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
index d52c0d66988df..f9d2547efb46b 100644
--- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
+++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx
@@ -28,6 +28,7 @@ import { APP_FIXED_VIEWPORT_ID } from '../../app_fixed_viewport';
 
 const layoutConfigs: { classic: ChromeLayoutConfig; project: ChromeLayoutConfig } = {
   classic: {
+    chromeStyle: 'classic',
     headerHeight: 96,
     bannerHeight: 32,
 
@@ -37,6 +38,7 @@ const layoutConfigs: { classic: ChromeLayoutConfig; project: ChromeLayoutConfig
     navigationWidth: 48,
   },
   project: {
+    chromeStyle: 'project',
     headerHeight: 48,
     bannerHeight: 32,