diff --git a/apps/site/src/content/design-system/foundation/grid/accessibility/accessibility-features/content.mdoc b/apps/site/src/content/design-system/foundation/layout/breakpoints/accessibility/accessibility-features/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/accessibility/accessibility-features/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/breakpoints/accessibility/accessibility-features/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/grid/accessibilityDemo.mdoc b/apps/site/src/content/design-system/foundation/layout/breakpoints/accessibilityDemo.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/accessibilityDemo.mdoc
rename to apps/site/src/content/design-system/foundation/layout/breakpoints/accessibilityDemo.mdoc
diff --git a/apps/site/src/content/design-system/foundation/layout/breakpoints/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/layout/breakpoints/code/development-examples/content.mdoc
new file mode 100644
index 000000000..76066c2f8
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/layout/breakpoints/code/development-examples/content.mdoc
@@ -0,0 +1,38 @@
+```jsx
+() => <Table>
+    <TableHeader>
+      <TableHeaderRow>
+        <TableHeaderCell>Token</TableHeaderCell>
+        <TableHeaderCell>Value</TableHeaderCell>
+        <TableHeaderCell>Tailwind prefix</TableHeaderCell>
+      </TableHeaderRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>xsl</TableCell>
+        <TableCell>0px and up</TableCell>
+        <TableCell>xsl:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>sm</TableCell>
+        <TableCell>768px and up</TableCell>
+        <TableCell>sm:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>md</TableCell>
+        <TableCell>992 and up</TableCell>
+        <TableCell>md:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>lg</TableCell>
+        <TableCell>1200 and up</TableCell>
+        <TableCell>lg:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>xl</TableCell>
+        <TableCell>1900 and up</TableCell>
+        <TableCell>xl:</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+```
diff --git a/apps/site/src/content/design-system/foundation/layout/breakpoints/design/breakpoint-tokens/content.mdoc b/apps/site/src/content/design-system/foundation/layout/breakpoints/design/breakpoint-tokens/content.mdoc
new file mode 100644
index 000000000..76066c2f8
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/layout/breakpoints/design/breakpoint-tokens/content.mdoc
@@ -0,0 +1,38 @@
+```jsx
+() => <Table>
+    <TableHeader>
+      <TableHeaderRow>
+        <TableHeaderCell>Token</TableHeaderCell>
+        <TableHeaderCell>Value</TableHeaderCell>
+        <TableHeaderCell>Tailwind prefix</TableHeaderCell>
+      </TableHeaderRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>xsl</TableCell>
+        <TableCell>0px and up</TableCell>
+        <TableCell>xsl:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>sm</TableCell>
+        <TableCell>768px and up</TableCell>
+        <TableCell>sm:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>md</TableCell>
+        <TableCell>992 and up</TableCell>
+        <TableCell>md:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>lg</TableCell>
+        <TableCell>1200 and up</TableCell>
+        <TableCell>lg:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>xl</TableCell>
+        <TableCell>1900 and up</TableCell>
+        <TableCell>xl:</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+```
diff --git a/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml b/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml
new file mode 100644
index 000000000..36ccaa914
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml
@@ -0,0 +1,26 @@
+name: Breakpoints
+description: >-
+  Breakpoints are a set of predefined viewport widths that can be used to change
+  the layout of a page to ensure it accommodates different devices. 
+namedExport:
+  discriminant: false
+excludeFromNavbar: false
+design:
+  - title:
+      name: Breakpoint tokens
+      slug: breakpoint-tokens
+    noTitle: false
+accessibility:
+  - title:
+      name: Accessibility features
+      slug: accessibility-features
+relatedComponents:
+  - title: Grid
+    slug: foundation/layout/grid
+  - title: Spacing
+    slug: foundation/layout/spacing
+code:
+  - title:
+      name: Development examples
+      slug: development-examples
+    noTitle: false
diff --git a/apps/site/src/content/design-system/foundation/spacing/accessibilityDemo.mdoc b/apps/site/src/content/design-system/foundation/layout/breakpoints/relatedArticles.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/spacing/accessibilityDemo.mdoc
rename to apps/site/src/content/design-system/foundation/layout/breakpoints/relatedArticles.mdoc
diff --git a/apps/site/src/content/design-system/foundation/spacing/accessibility/accessibility-features/content.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/accessibility/accessibility-features/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/spacing/accessibility/accessibility-features/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/accessibility/accessibility-features/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/layout/grid/accessibilityDemo.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/foundation/grid/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/code/development-examples/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/code/development-examples/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/code/development-examples/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/grid/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/design/dos-and-donts/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/design/dos-and-donts/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/design/dos-and-donts/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/grid/design/grid-examples/content.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/design/grid-examples/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/design/grid-examples/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/design/grid-examples/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/grid/design/user-experience/content.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/design/user-experience/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/design/user-experience/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/design/user-experience/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/grid/design/visual-design/content.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/design/visual-design/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/design/visual-design/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/design/visual-design/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/grid/index.yaml b/apps/site/src/content/design-system/foundation/layout/grid/index.yaml
similarity index 87%
rename from apps/site/src/content/design-system/foundation/grid/index.yaml
rename to apps/site/src/content/design-system/foundation/layout/grid/index.yaml
index 3d8d0eb6c..b8a83137f 100644
--- a/apps/site/src/content/design-system/foundation/grid/index.yaml
+++ b/apps/site/src/content/design-system/foundation/layout/grid/index.yaml
@@ -28,8 +28,10 @@ accessibility:
       name: Accessibility features
       slug: accessibility-features
 relatedComponents:
-  - title: Grid
-    slug: /foundation/grid
+  - title: Breakpoints
+    slug: foundation/layout/breakpoints
+  - title: Spacing
+    slug: foundation/layout/spacing
 code:
   - title:
       name: Development examples
diff --git a/apps/site/src/content/design-system/foundation/grid/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/relatedArticles.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/grid/relatedArticles.mdoc
rename to apps/site/src/content/design-system/foundation/layout/grid/relatedArticles.mdoc
diff --git a/apps/site/src/content/design-system/foundation/layout/spacing/accessibility/accessibility-features/content.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/accessibility/accessibility-features/content.mdoc
new file mode 100644
index 000000000..2f70c880e
--- /dev/null
+++ b/apps/site/src/content/design-system/foundation/layout/spacing/accessibility/accessibility-features/content.mdoc
@@ -0,0 +1 @@
+No specific accessibility features required.
diff --git a/apps/site/src/content/design-system/foundation/layout/spacing/accessibilityDemo.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/accessibilityDemo.mdoc
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/site/src/content/design-system/foundation/spacing/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/code/development-examples/content.mdoc
similarity index 92%
rename from apps/site/src/content/design-system/foundation/spacing/code/development-examples/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/spacing/code/development-examples/content.mdoc
index 06fcefa82..e51ebbe69 100644
--- a/apps/site/src/content/design-system/foundation/spacing/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/layout/spacing/code/development-examples/content.mdoc
@@ -5,9 +5,6 @@
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>margin</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
@@ -44,9 +41,6 @@
 () => {
   const SPACING_UNIT = 6;
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>padding</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
@@ -83,9 +77,6 @@
 () => {
   const SPACING_UNIT = 6;
   return <Table>
-      <TableCaption>
-        GEL spacing classes for <strong>gap</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
diff --git a/apps/site/src/content/design-system/foundation/spacing/design/spacing-for-gap/content.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/design/gap-spacing/content.mdoc
similarity index 92%
rename from apps/site/src/content/design-system/foundation/spacing/design/spacing-for-gap/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/spacing/design/gap-spacing/content.mdoc
index 56fcf3ce1..6f0f46244 100644
--- a/apps/site/src/content/design-system/foundation/spacing/design/spacing-for-gap/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/layout/spacing/design/gap-spacing/content.mdoc
@@ -3,9 +3,6 @@ The gap property defines the size of the gap between the rows and between the co
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing classes for <strong>gap</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
diff --git a/apps/site/src/content/design-system/foundation/spacing/design/spacing-for-margin/content.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/design/margin-spacing/content.mdoc
similarity index 93%
rename from apps/site/src/content/design-system/foundation/spacing/design/spacing-for-margin/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/spacing/design/margin-spacing/content.mdoc
index b3bdff1d9..0d73e8422 100644
--- a/apps/site/src/content/design-system/foundation/spacing/design/spacing-for-margin/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/layout/spacing/design/margin-spacing/content.mdoc
@@ -3,9 +3,6 @@ The margin properties are used to create space around elements, outside of any d
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>margin</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
diff --git a/apps/site/src/content/design-system/foundation/spacing/design/spacing-for-padding/content.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/design/padding-spacing/content.mdoc
similarity index 93%
rename from apps/site/src/content/design-system/foundation/spacing/design/spacing-for-padding/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/spacing/design/padding-spacing/content.mdoc
index 2b0d97261..ca1cd1652 100644
--- a/apps/site/src/content/design-system/foundation/spacing/design/spacing-for-padding/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/layout/spacing/design/padding-spacing/content.mdoc
@@ -3,9 +3,6 @@ The padding properties are used to generate space around an element's content, i
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>padding</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
diff --git a/apps/site/src/content/design-system/foundation/spacing/design/user-experience/content.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/design/user-experience/content.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/spacing/design/user-experience/content.mdoc
rename to apps/site/src/content/design-system/foundation/layout/spacing/design/user-experience/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/spacing/index.yaml b/apps/site/src/content/design-system/foundation/layout/spacing/index.yaml
similarity index 72%
rename from apps/site/src/content/design-system/foundation/spacing/index.yaml
rename to apps/site/src/content/design-system/foundation/layout/spacing/index.yaml
index a84807952..d89b07dce 100644
--- a/apps/site/src/content/design-system/foundation/spacing/index.yaml
+++ b/apps/site/src/content/design-system/foundation/layout/spacing/index.yaml
@@ -4,23 +4,23 @@ description: >-
   and heights of the spaces used around and within components.
 namedExport:
   discriminant: false
-excludeFromNavbar: true
+excludeFromNavbar: false
 design:
   - title:
       name: Design system spacing tokens
       slug: user-experience
     noTitle: false
   - title:
-      name: Spacing for margin
-      slug: spacing-for-margin
+      name: Margin spacing
+      slug: margin-spacing
     noTitle: false
   - title:
-      name: Spacing for padding
-      slug: spacing-for-padding
+      name: Padding spacing
+      slug: padding-spacing
     noTitle: false
   - title:
-      name: Spacing for gap
-      slug: spacing-for-gap
+      name: Gap spacing
+      slug: gap-spacing
     noTitle: false
 accessibility:
   - title:
@@ -29,6 +29,8 @@ accessibility:
 relatedComponents:
   - title: Grid
     slug: foundation/grid
+  - title: Breakpoints
+    slug: foundation/layout/breakpoints
 code:
   - title:
       name: Development examples
diff --git a/apps/site/src/content/design-system/foundation/spacing/relatedArticles.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/relatedArticles.mdoc
similarity index 100%
rename from apps/site/src/content/design-system/foundation/spacing/relatedArticles.mdoc
rename to apps/site/src/content/design-system/foundation/layout/spacing/relatedArticles.mdoc