diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index bdfaa515..873c14c8 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -39,7 +39,7 @@
   );
 </script>
 
-<p style="margin-bottom: var(--bx-layout-02)">
+<p style="margin-bottom: var(--bx-spacing-06)">
   Source code:
   <OutboundLink size="lg" inline href="{source}">
     {component.filePath}
@@ -231,13 +231,13 @@
   }
 
   :global(.my-layout-01-03) {
-    margin-top: var(--bx-layout-01);
-    margin-bottom: var(--bx-layout-03);
+    margin-top: var(--bx-spacing-05);
+    margin-bottom: var(--bx-spacing-07);
   }
 
   :global(.overflow .bx--structured-list) {
-    margin-top: var(--bx-layout-01);
-    margin-bottom: var(--bx-layout-04);
+    margin-top: var(--bx-spacing-05);
+    margin-bottom: var(--bx-spacing-09);
   }
 
   code {
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index 0f26bfdb..c8d91e58 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -47,7 +47,7 @@
 
 <style>
   .preview {
-    margin-bottom: var(--bx-layout-04);
+    margin-bottom: var(--bx-spacing-09);
     margin-left: -1rem;
     margin-right: -1rem;
     max-width: 66rem;
diff --git a/docs/src/global.css b/docs/src/global.css
index a004fc10..cb7799da 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -113,7 +113,7 @@ html[theme="g90"] .code-override {
 }
 
 .prose .toc {
-  margin-bottom: var(--bx-layout-01);
+  margin-bottom: var(--bx-spacing-05);
 }
 
 .table {
@@ -164,7 +164,7 @@ html[theme="g90"] .code-override {
 }
 
 .prose .toc {
-  margin-bottom: var(--bx-layout-01);
+  margin-bottom: var(--bx-spacing-05);
 }
 
 .table {
@@ -196,7 +196,7 @@ html[theme="g90"] .code-override {
   font-weight: var(--bx-expressive-heading-05-font-weight);
   letter-spacing: var(--bx-expressive-heading-05-letter-spacing);
   line-height: var(--bx-expressive-heading-05-line-height);
-  margin-bottom: var(--bx-layout-01);
+  margin-bottom: var(--bx-spacing-05);
 }
 
 .big-paragraph {
@@ -204,8 +204,8 @@ html[theme="g90"] .code-override {
   font-weight: var(--bx-expressive-heading-03-font-weight);
   letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
   line-height: var(--bx-expressive-heading-03-line-height);
-  margin-top: var(--bx-layout-03);
-  margin-bottom: var(--bx-layout-06);
+  margin-top: var(--bx-spacing-07);
+  margin-bottom: var(--bx-spacing-12);
 }
 
 .big-link,
@@ -236,8 +236,8 @@ html[theme="g90"] .code-override {
   font-weight: var(--bx-expressive-heading-04-font-weight);
   letter-spacing: var(--bx-expressive-heading-04-letter-spacing);
   line-height: var(--bx-expressive-heading-04-line-height);
-  padding-top: var(--bx-layout-03);
-  margin-bottom: var(--bx-layout-01);
+  padding-top: var(--bx-spacing-07);
+  margin-bottom: var(--bx-spacing-05);
 }
 
 .bx--col > h4 {
@@ -245,8 +245,8 @@ html[theme="g90"] .code-override {
   font-weight: var(--bx-expressive-heading-02-font-weight);
   letter-spacing: var(--bx-expressive-heading-02-letter-spacing);
   line-height: var(--bx-expressive-heading-02-line-height);
-  padding-top: var(--bx-layout-04);
-  margin-bottom: var(--bx-layout-01);
+  padding-top: var(--bx-spacing-09);
+  margin-bottom: var(--bx-spacing-05);
 }
 
 .bx--col > h2,
@@ -257,5 +257,5 @@ html[theme="g90"] .code-override {
 }
 
 .bx--col > p {
-  margin-bottom: var(--bx-layout-02);
+  margin-bottom: var(--bx-spacing-06);
 }
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 954add9f..ab0abc59 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -169,7 +169,7 @@
   .bar {
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--bx-layout-02);
+    margin-bottom: var(--bx-spacing-06);
     border-bottom: 1px solid var(--bx-ui-03);
   }
 
diff --git a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
index 97796b22..1956984d 100644
--- a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
+++ b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
@@ -6,7 +6,7 @@
 
 <Checkbox labelText="Label text" bind:checked />
 
-<div style="margin: var(--bx-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   <Button on:click="{() => (checked = !checked)}">Toggle</Button>
 </div>
 
diff --git a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
index 42330984..1d4ad87f 100644
--- a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
+++ b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
@@ -9,7 +9,7 @@
   <Checkbox bind:group labelText="{value}" value="{value}" />
 {/each}
 
-<div style="margin: var(--bx-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
 </div>
 
diff --git a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
index 6c7cec93..e3ff71be 100644
--- a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@@ -37,6 +37,6 @@
 
 <style>
   div {
-    margin: var(--bx-layout-01) 0 var(--bx-layout-03);
+    margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
   }
 </style>
diff --git a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
index bb1bb5f3..7acca94b 100644
--- a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
+++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
@@ -37,6 +37,6 @@
 
 <style>
   div {
-    margin: var(--bx-layout-01) 0 var(--bx-layout-03);
+    margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
   }
 </style>
diff --git a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
index e4199d48..b6e743e9 100644
--- a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
@@ -39,6 +39,6 @@
 
 <style>
   div {
-    margin: var(--bx-layout-01) 0 var(--bx-layout-03);
+    margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
   }
 </style>
diff --git a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
index b714efc5..4ae55bce 100644
--- a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
+++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
@@ -6,7 +6,7 @@
 
 <NumberInput allowEmpty bind:value />
 
-<div style="margin: var(--bx-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   <Button on:click="{() => (value = null)}">Set to null</Button>
   <Button on:click="{() => (value = 0)}">Set to 0</Button>
 </div>
diff --git a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
index c8e51b10..69362557 100644
--- a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
+++ b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
@@ -6,7 +6,7 @@
 
 <PaginationNav bind:page />
 
-<div style="margin: var(--cds-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
     Set page to 1
   </Button>
diff --git a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
index fb66719b..3ddac7f0 100644
--- a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
+++ b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
@@ -32,7 +32,7 @@
   />
 </ProgressIndicator>
 
-<div style="margin: var(--bx-layout-02) 0">
+<div style="margin: var(--bx-spacing-06) 0">
   <Button
     kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
     on:click="{() => {
diff --git a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
index 36d05457..f6c23bf0 100644
--- a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
+++ b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
@@ -16,7 +16,7 @@
   {/each}
 </RadioButtonGroup>
 
-<div style="margin: var(--bx-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   {#each plans as value}
     <Button
       kind="secondary"
diff --git a/docs/src/pages/framed/Select/SelectReactive.svelte b/docs/src/pages/framed/Select/SelectReactive.svelte
index 02e8a930..96b7dc50 100644
--- a/docs/src/pages/framed/Select/SelectReactive.svelte
+++ b/docs/src/pages/framed/Select/SelectReactive.svelte
@@ -12,7 +12,7 @@
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-<div style="margin: var(--bx-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   Selected: <strong>{selected}</strong>
 </div>
 
diff --git a/docs/src/pages/framed/Tabs/TabsReactive.svelte b/docs/src/pages/framed/Tabs/TabsReactive.svelte
index 93747f3c..762e1b83 100644
--- a/docs/src/pages/framed/Tabs/TabsReactive.svelte
+++ b/docs/src/pages/framed/Tabs/TabsReactive.svelte
@@ -15,7 +15,7 @@
   </svelte:fragment>
 </Tabs>
 
-<div style="margin: var(--bx-layout-01) 0">
+<div style="margin: var(--bx-spacing-05) 0">
   <Button on:click="{() => (selected = 1)}">Set index to 1</Button>
 </div>
 
diff --git a/docs/src/pages/framed/UIShell/HeaderSearch.svelte b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
index eed6dc11..a943b281 100644
--- a/docs/src/pages/framed/UIShell/HeaderSearch.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderSearch.svelte
@@ -116,7 +116,7 @@
         </p>
         <div style="overflow-x: scroll;">
           {#each events as { type, ...rest }}
-            <div style="display: block; margin-bottom: var(--bx-layout-01)">
+            <div style="display: block; margin-bottom: var(--bx-spacing-05)">
               <div><strong>on:{type}</strong></div>
               {#if Object.keys(rest).length > 0}
                 <pre>{JSON.stringify(rest, null, 2)}</pre>
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index f8a47800..56bbe10b 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -88,12 +88,12 @@
         </p>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--bx-layout-02)">
+    <Row style="margin-bottom: var(--bx-spacing-06)">
       <Column max="{10}" xlg="{10}">
-        <h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
+        <h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--bx-layout-02)">
+    <Row style="margin-bottom: var(--bx-spacing-06)">
       <Column noGutter>
         <Tabs>
           <Tab label="Yarn" />
@@ -113,7 +113,7 @@
         </Tabs>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--bx-layout-04)">
+    <Row style="margin-bottom: var(--bx-spacing-09)">
       <Column>
         <h2>Styling</h2>
         <p>
@@ -212,7 +212,7 @@
       </Column>
     </Row>
 
-    <Row style="margin-bottom: var(--bx-layout-02)">
+    <Row style="margin-bottom: var(--bx-spacing-06)">
       <Column>
         <h2>Dynamic theming</h2>
         <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@@ -244,7 +244,7 @@
       </Column>
     </Row>
 
-    <Row style="margin-bottom: var(--bx-layout-02)">
+    <Row style="margin-bottom: var(--bx-spacing-06)">
       <Column>
         <h2>Portfolio</h2>
         <p>