diff --git a/storybook/stories/foundations/layout.mdx b/storybook/stories/foundations/layout.mdx
new file mode 100644
index 00000000000000..d3ecf147c9b9fa
--- /dev/null
+++ b/storybook/stories/foundations/layout.mdx
@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import areas from './static/areas.svg';
+import pageLayoutExample1 from './static/page-layout-example-1.svg';
+import pageLayoutExample2 from './static/page-layout-example-2.svg';
+import pageLayoutExample3 from './static/page-layout-example-3.svg';
+import pageLayoutExample4 from './static/page-layout-example-4.svg';
+
+
+
+
+# Layout
+
+Layout defines the arrangement and structure of admin pages, content sections, and other visual elements.
+
+## Page areas
+
+At the highest level admin pages are comprised of _areas_, that can be arranged in different ways.
+
+
+
+1. **Sidebar** – Primary admin navigation UI including notifications and access to Command Palette. Always positioned on the left of the page (assuming LTR locale).
+2. **Content Frame** – A container for admin page content e.g. data views, settings forms, etc.
+3. **Preview Frame** – Displays a preview of the site homepage, a post or page in focus, or something more abstract like a template or Style Book. In many cases it can be clicked to open the editor.
+
+### Area compositions
+
+Areas can be combined in different ways depending on the use case. Here are some examples.
+
+
+
+
+ #### Sidebar, Content Frame and Preview Frame
+
+
+ A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
+
+
+ #### Sidebar and Preview Frame
+
+
+ A demonstration of this arrangement can be found in the Design section.
+
+
+
+
+ #### Sidebar and Content Frame
+
+
+ A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
+
+
+ #### Sidebar and multiple Content Frames
+
+
+ Multiple content frames can be utilised as required.
+
+
+
diff --git a/storybook/stories/foundations/static/areas.svg b/storybook/stories/foundations/static/areas.svg
new file mode 100644
index 00000000000000..9bf535e182411b
--- /dev/null
+++ b/storybook/stories/foundations/static/areas.svg
@@ -0,0 +1,78 @@
+
\ No newline at end of file
diff --git a/storybook/stories/foundations/static/page-layout-example-1.svg b/storybook/stories/foundations/static/page-layout-example-1.svg
new file mode 100644
index 00000000000000..5d7ded14e9285c
--- /dev/null
+++ b/storybook/stories/foundations/static/page-layout-example-1.svg
@@ -0,0 +1,72 @@
+
\ No newline at end of file
diff --git a/storybook/stories/foundations/static/page-layout-example-2.svg b/storybook/stories/foundations/static/page-layout-example-2.svg
new file mode 100644
index 00000000000000..66fce86101d159
--- /dev/null
+++ b/storybook/stories/foundations/static/page-layout-example-2.svg
@@ -0,0 +1,68 @@
+
\ No newline at end of file
diff --git a/storybook/stories/foundations/static/page-layout-example-3.svg b/storybook/stories/foundations/static/page-layout-example-3.svg
new file mode 100644
index 00000000000000..0eecead116e1a0
--- /dev/null
+++ b/storybook/stories/foundations/static/page-layout-example-3.svg
@@ -0,0 +1,39 @@
+
\ No newline at end of file
diff --git a/storybook/stories/foundations/static/page-layout-example-4.svg b/storybook/stories/foundations/static/page-layout-example-4.svg
new file mode 100644
index 00000000000000..7d5ace28927bb0
--- /dev/null
+++ b/storybook/stories/foundations/static/page-layout-example-4.svg
@@ -0,0 +1,72 @@
+
\ No newline at end of file