diff --git a/src/docs/components/docs-color/docs-color.css b/src/docs/components/docs-color/docs-color.css
index e16d6abef6..9a3676f06d 100644
--- a/src/docs/components/docs-color/docs-color.css
+++ b/src/docs/components/docs-color/docs-color.css
@@ -27,7 +27,7 @@
   align-items: center;
   overflow: hidden;
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ld-sp-1);
   color: var(--ld-col-rblck-default);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
diff --git a/src/docs/components/docs-example/docs-example.css b/src/docs/components/docs-example/docs-example.css
index 7f78cf5958..c37a889154 100644
--- a/src/docs/components/docs-example/docs-example.css
+++ b/src/docs/components/docs-example/docs-example.css
@@ -69,7 +69,7 @@
   display: flex;
   width: 100%;
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ld-sp-1);
   border-bottom-left-radius: var(--ld-br-l);
   border-bottom-right-radius: var(--ld-br-l);
 }
@@ -101,7 +101,7 @@
 .docs-example__show {
   background-color: var(--ld-col-bg-lg);
   color: var(--ld-col-rblck-default);
-  border: 1px solid var(--ld-col-rblck1);
+  border: var(--ld-sp-1) solid var(--ld-col-rblck1);
   border-bottom-width: 0;
   border-top-left-radius: var(--ld-br-l);
   border-top-right-radius: var(--ld-br-l);
diff --git a/src/docs/components/docs-main/docs-main.css b/src/docs/components/docs-main/docs-main.css
index b02a846078..28fcf555e5 100644
--- a/src/docs/components/docs-main/docs-main.css
+++ b/src/docs/components/docs-main/docs-main.css
@@ -10,7 +10,7 @@
       > #events + table,
       > #slots + table {
         code {
-          box-shadow: inset 0 0 0 1px var(--ld-col-rblck1);
+          box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rblck1);
           background-color: var(--ld-col-bg-lg);
         }
       }
@@ -23,7 +23,7 @@
             &:not(:last-child) {
               color: var(--ld-col-rb1);
               background-color: var(--ld-col-rb-default);
-              box-shadow: inset 0 0 0 1px var(--ld-col-rb6);
+              box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rb6);
             }
           }
         }
@@ -76,7 +76,7 @@
       > #events + table,
       > #slots + table {
         code {
-          box-shadow: inset 0 0 0 1px var(--ld-col-rblck3);
+          box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rblck3);
           background-color: var(--ld-col-rblck4);
         }
       }
@@ -89,7 +89,7 @@
             &:not(:last-child) {
               color: var(--ld-col-rb1);
               background-color: var(--ld-col-rb-default);
-              box-shadow: inset 0 0 0 1px var(--ld-col-rb3);
+              box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-col-rb3);
             }
           }
         }
@@ -189,7 +189,7 @@
 
     > hr {
       border: 0;
-      height: 1px;
+      height: var(--ld-sp-1);
 
       &:last-of-type + p {
         display: none;
@@ -469,7 +469,7 @@
     > pre {
       border-radius: var(--ld-br-l);
       border-style: solid;
-      border-width: 1px;
+      border-width: var(--ld-sp-1);
     }
   }
 
diff --git a/src/docs/components/docs-nav/docs-nav.css b/src/docs/components/docs-nav/docs-nav.css
index 735cca0578..10c980602c 100644
--- a/src/docs/components/docs-nav/docs-nav.css
+++ b/src/docs/components/docs-nav/docs-nav.css
@@ -1,7 +1,7 @@
 @define-mixin docs-nav-ui-light {
   .docs-nav__content {
     background-color: var(--ld-col-bg-lg);
-    box-shadow: 1px 0 0 0 var(--ld-col-rblck1);
+    box-shadow: var(--ld-sp-1) 0 0 0 var(--ld-col-rblck1);
   }
   .docs-nav::before {
     background-color: var(--ld-col-bg-lg);
@@ -13,7 +13,7 @@
 @define-mixin docs-nav-ui-dark {
   .docs-nav__content {
     background-color: var(--ld-col-rblck-default);
-    box-shadow: 1px 0 0 0 var(--ld-col-rblck4);
+    box-shadow: var(--ld-sp-1) 0 0 0 var(--ld-col-rblck4);
   }
   .docs-nav::before {
     background-color: var(--ld-col-rblck-default);
@@ -82,7 +82,7 @@
 .docs-nav__section {
   padding: var(--ld-sp-24) var(--ld-sp-8) var(--ld-sp-24) 0;
   border-bottom-style: solid;
-  border-bottom-width: 1px;
+  border-bottom-width: var(--ld-sp-1);
 
   &:first-of-type {
     padding-top: 0;
diff --git a/src/docs/components/docs-shadow/docs-shadow.css b/src/docs/components/docs-shadow/docs-shadow.css
index 72e5ba4fd6..da28984bf6 100644
--- a/src/docs/components/docs-shadow/docs-shadow.css
+++ b/src/docs/components/docs-shadow/docs-shadow.css
@@ -27,7 +27,7 @@
   align-items: center;
   overflow: hidden;
   border-style: solid;
-  border-width: 1px;
+  border-width: var(--ld-sp-1);
   color: var(--ld-col-rblck-default);
   background-color: var(--ld-col-wht);
   padding: var(--ld-sp-16) var(--ld-sp-16) 4rem;
diff --git a/src/docs/components/docs-spacing/docs-spacing.css b/src/docs/components/docs-spacing/docs-spacing.css
new file mode 100644
index 0000000000..bf32e8e0e4
--- /dev/null
+++ b/src/docs/components/docs-spacing/docs-spacing.css
@@ -0,0 +1,79 @@
+@define-mixin docs-spacing-ui-light {
+  .docs-spacing {
+    border-color: var(--ld-col-rblck1);
+  }
+}
+@define-mixin docs-spacing-ui-dark {
+  .docs-spacing {
+    border-color: var(--ld-col-rblck4);
+  }
+}
+
+@mixin docs-spacing-ui-light;
+
+@media (prefers-color-scheme: dark) {
+  @mixin docs-spacing-ui-dark;
+}
+.docs-ui-dark {
+  @mixin docs-spacing-ui-dark;
+}
+.docs-ui-light {
+  @mixin docs-spacing-ui-light;
+}
+
+.docs-spacing {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
+  border-style: solid;
+  border-width: var(--ld-sp-1);
+  color: var(--ld-col-rblck-default);
+  background-color: var(--ld-col-wht);
+  padding: var(--ld-sp-16) var(--ld-sp-16) var(--ld-sp-16) var(--ld-sp-8);
+  min-height: 6rem;
+
+  &:first-of-type {
+    border-top-left-radius: var(--ld-br-l);
+    border-top-right-radius: var(--ld-br-l);
+  }
+  &:last-of-type {
+    border-bottom-left-radius: var(--ld-br-l);
+    border-bottom-right-radius: var(--ld-br-l);
+  }
+  &:not(:first-of-type) {
+    border-top-width: 0;
+  }
+  &:not(:last-of-type) {
+    border-bottom-width: 0;
+  }
+}
+
+.docs-spacing__var,
+.docs-spacing__val {
+  display: flex;
+  border-radius: var(--ld-br-l);
+  align-items: center;
+  font: var(--ld-typo-body-s);
+  font-family: 'Source Code Pro', Consolas, Monaco, 'Ubuntu Mono', monospace;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  .docs-copy-to-cb {
+    margin-right: var(--ld-sp-8);
+  }
+}
+
+.docs-spacing__var {
+  width: 9rem;
+}
+
+.docs-spacing__val {
+  color: var(--ld-col-rblck3);
+  width: 6.5rem;
+}
+
+.docs-spacing__vis {
+  display: inline-flex;
+  background-color: var(--ld-col-vm-default);
+}
diff --git a/src/docs/components/docs-spacing/docs-spacing.tsx b/src/docs/components/docs-spacing/docs-spacing.tsx
new file mode 100644
index 0000000000..1b52890cb7
--- /dev/null
+++ b/src/docs/components/docs-spacing/docs-spacing.tsx
@@ -0,0 +1,32 @@
+import '../../../components' // type definitions for type checks and intelliSense
+import { Component, h, Host, Prop } from '@stencil/core'
+
+/** @internal **/
+@Component({
+  tag: 'docs-spacing',
+  styleUrl: 'docs-spacing.css',
+  shadow: false,
+})
+export class DocsSpacing {
+  /** CSS variable name */
+  @Prop() var: string
+
+  /** CSS variable value */
+  @Prop() val: string
+
+  render() {
+    return (
+      <Host class="docs-spacing">
+        <span class="docs-spacing__var">
+          <docs-copy-to-cb textToCopy={this.var} />
+          {this.var}
+        </span>
+        <span class="docs-spacing__val">{this.val}</span>
+        <span
+          class="docs-spacing__vis"
+          style={{ width: `var(${this.var})`, height: `var(${this.var})` }}
+        ></span>
+      </Host>
+    )
+  }
+}
diff --git a/src/docs/global/styles/code.css b/src/docs/global/styles/code.css
index 0c0f7a7ecb..0805a5d3c2 100644
--- a/src/docs/global/styles/code.css
+++ b/src/docs/global/styles/code.css
@@ -117,7 +117,7 @@ code .highlight-line:before {
     color: var(--ld-col-rp4);
   }
   code .highlight-line:before {
-    border-right: 1px solid var(--ld-col-rblck1);
+    border-right: var(--ld-sp-1) solid var(--ld-col-rblck1);
     color: var(--ld-col-rblck2);
   }
   .highlight-line.highlight-line-active {
@@ -170,7 +170,7 @@ code .highlight-line:before {
     color: var(--ld-col-rp2);
   }
   code .highlight-line:before {
-    border-right: 1px solid var(--ld-col-rblck5);
+    border-right: var(--ld-sp-1) solid var(--ld-col-rblck5);
     color: var(--ld-col-rblck4);
   }
   .highlight-line.highlight-line-active {
diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
index 270c4cfd31..b2ea23b706 100644
--- a/src/liquid/components/ld-button/readme.md
+++ b/src/liquid/components/ld-button/readme.md
@@ -436,25 +436,6 @@ You can align the text inside the button using the `align-text` propperty.
 | `target`         | `target`          | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute. | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                          | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-edit-on-github
- - docs-page-nav
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-button
-  docs-edit-on-github --> ld-button
-  docs-page-nav --> ld-button
-  docs-toggle-code --> ld-button
-  style ld-button fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-icon/readme.md b/src/liquid/components/ld-icon/readme.md
index 466fc4ef7a..a03d2f1d08 100644
--- a/src/liquid/components/ld-icon/readme.md
+++ b/src/liquid/components/ld-icon/readme.md
@@ -65,23 +65,6 @@ Liquid's icons use the [`currentColor`](https://developer.mozilla.org/en-US/docs
 |      | (optional) Custom SVG icon (only valid without name prop). |
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-edit-on-github
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-icon
-  docs-edit-on-github --> ld-icon
-  docs-toggle-code --> ld-icon
-  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md
index 31513ddd9f..6f08154e6e 100644
--- a/src/liquid/components/ld-input/readme.md
+++ b/src/liquid/components/ld-input/readme.md
@@ -722,19 +722,6 @@ The `ld-input` web component does not provide any properties or methods for vali
 | `"start"` | The purpose of this slot is to add icons or buttons to the input, __justifying the item to the end of the component__. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right.   |
 
 
-## Dependencies
-
-### Used by
-
- - docs-search
-
-### Graph
-```mermaid
-graph TD;
-  docs-search --> ld-input
-  style ld-input fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-sr-only/ld-sr-only.css b/src/liquid/components/ld-sr-only/ld-sr-only.css
index b53abda774..316ae7c04d 100644
--- a/src/liquid/components/ld-sr-only/ld-sr-only.css
+++ b/src/liquid/components/ld-sr-only/ld-sr-only.css
@@ -1,7 +1,7 @@
 .ld-sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: var(--ld-sp-1);
+  height: var(--ld-sp-1);
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
diff --git a/src/liquid/components/ld-sr-only/readme.md b/src/liquid/components/ld-sr-only/readme.md
index 2c59a205aa..384ba0ce35 100644
--- a/src/liquid/components/ld-sr-only/readme.md
+++ b/src/liquid/components/ld-sr-only/readme.md
@@ -28,25 +28,6 @@ The CSS class `ld-sr-only` works the same way as its web component counterpart,
 <!-- Auto Generated Below -->
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-pick-theme
- - docs-switch-web-css
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-sr-only
-  docs-pick-theme --> ld-sr-only
-  docs-switch-web-css --> ld-sr-only
-  docs-toggle-code --> ld-sr-only
-  style ld-sr-only fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/global/styles/spacings/index.md b/src/liquid/global/styles/spacings/index.md
index 8305a3b21a..7065d9a421 100644
--- a/src/liquid/global/styles/spacings/index.md
+++ b/src/liquid/global/styles/spacings/index.md
@@ -9,5 +9,17 @@ permalink: global/spacings/
 
 # Spacings
 
-> **Work in progress**<br>
-> TODO: Document available spacings.
+Spacings persisted in CSS custom properties help us to maintain a consisten layout, both in the design files as in the implemented components. Note that you are not forced to dogmatically use these custom properties everywhere. Instead, use them where it makes sense, for instance, if you wish to apply the same spacing between two elements as it is applied within an existing component.
+
+All spacings listed below are available as global CSS custom properties after [importing Liquid stylesheets](/liquid/getting-started/#import-stylesheets).
+
+<docs-spacing var="--ld-sp-1" val="0.0625rem"></docs-spacing>
+<docs-spacing var="--ld-sp-2" val="0.125rem"></docs-spacing>
+<docs-spacing var="--ld-sp-4" val="0.25rem"></docs-spacing>
+<docs-spacing var="--ld-sp-6" val="0.375rem"></docs-spacing>
+<docs-spacing var="--ld-sp-8" val="0.5rem"></docs-spacing>
+<docs-spacing var="--ld-sp-12" val="0.75rem"></docs-spacing>
+<docs-spacing var="--ld-sp-16" val="1rem"></docs-spacing>
+<docs-spacing var="--ld-sp-24" val="1.5rem"></docs-spacing>
+<docs-spacing var="--ld-sp-32" val="2rem"></docs-spacing>
+<docs-spacing var="--ld-sp-40" val="2.5rem"></docs-spacing>
\ No newline at end of file