diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index aa5a0770..2af65059 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -63,12 +63,6 @@ export const parameters = {
             'Intro',
             'Typography',
             '*',
-            'Layout', [
-              'Main',
-              'Spacers',
-              'Flexbox',
-              '*',
-            ],
           ],
         ],
         'Actions',
diff --git a/src/actions/resizeObserver/index.js b/src/actions/resizeObserver/index.js
index 616257ee..b3de9bf2 100644
--- a/src/actions/resizeObserver/index.js
+++ b/src/actions/resizeObserver/index.js
@@ -3,23 +3,23 @@ let observer;
 let callbacks;
 
 export default (element, onResize) => {
-   if (!observer) {
-      callbacks = new WeakMap();
-      observer = new ResizeObserver(entries => {
-         for (const entry of entries) {
-            const onResize = callbacks.get(entry.target);
-            if (onResize) onResize(entry.target);
-         }
-      });
-   }
+  if (!observer) {
+    callbacks = new WeakMap();
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const onResize = callbacks.get(entry.target);
+        if (onResize) onResize(entry.target);
+      }
+    });
+  }
 
-   callbacks.set(element, onResize);
-   observer.observe(element);
+  callbacks.set(element, onResize);
+  observer.observe(element);
 
-   return {
-      destroy: () => {
-         callbacks.delete(element);
-         observer.unobserve(element);
-      },
-   };
-}
+  return {
+    destroy: () => {
+      callbacks.delete(element);
+      observer.unobserve(element);
+    },
+  };
+};
diff --git a/src/actions/resizeObserver/resizeObserver.stories.mdx b/src/actions/resizeObserver/resizeObserver.stories.mdx
new file mode 100644
index 00000000..3b379d44
--- /dev/null
+++ b/src/actions/resizeObserver/resizeObserver.stories.mdx
@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# `resizeObserver`
+
+An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this:
+
+```svelte
+<script>
+  import { resizeObserver } from '@reuters-graphics/graphics-components';
+
+  let elementWidth = 0;
+</script>
+
+<div use:resizeObserver="{(element) => (elementWidth = element.clientWidth)}">
+  My width is: {elementWidth}
+</div>
+```
diff --git a/src/components/Analytics/Analytics.stories.svelte b/src/components/Analytics/Analytics.stories.svelte
index 4c316c78..3cd2390c 100644
--- a/src/components/Analytics/Analytics.stories.svelte
+++ b/src/components/Analytics/Analytics.stories.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <Meta
-  title="Utilities/Analytics"
+  title="Components/Analytics"
   component="{Analytics}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
index 79b1cad7..c5fa6174 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/EmbedPreviewerLink"
+  title="Components/EmbedPreviewerLink"
   component="{EmbedPreviewerLink}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/components/Framer/Framer.stories.svelte b/src/components/Framer/Framer.stories.svelte
index c71834ca..1b7e042f 100644
--- a/src/components/Framer/Framer.stories.svelte
+++ b/src/components/Framer/Framer.stories.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/Framer"
+  title="Components/Framer"
   component="{Framer}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
index 02178a4e..65d61969 100644
--- a/src/components/PaddingReset/PaddingReset.stories.svelte
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Meta
-  title="Utilities/PaddingReset"
+  title="Components/PaddingReset"
   component="{PaddingReset}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
index bca6672e..7241dc56 100644
--- a/src/components/PymChild/PymChild.stories.svelte
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/PymChild"
+  title="Components/PymChild"
   component="{PymChild}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/components/Sharer/Sharer.stories.svelte b/src/components/Sharer/Sharer.stories.svelte
index 0290b411..97ac14e2 100644
--- a/src/components/Sharer/Sharer.stories.svelte
+++ b/src/components/Sharer/Sharer.stories.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Meta
-  title="Utilities/Sharer"
+  title="Components/Sharer"
   component="{Sharer}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte
index cd2251ec..777d5723 100644
--- a/src/components/ToolsHeader/ToolsHeader.stories.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Meta
-  title="Utilities/ToolsHeader"
+  title="Components/ToolsHeader"
   component="{ToolsHeader}"
   {...withComponentDocs(componentDocs)}
 />
diff --git a/src/docs/styles/tokens/layout/flexbox.stories.mdx b/src/docs/styles/tokens/flexbox/main.stories.mdx
similarity index 97%
rename from src/docs/styles/tokens/layout/flexbox.stories.mdx
rename to src/docs/styles/tokens/flexbox/main.stories.mdx
index a88522ee..3e3252ef 100644
--- a/src/docs/styles/tokens/layout/flexbox.stories.mdx
+++ b/src/docs/styles/tokens/flexbox/main.stories.mdx
@@ -36,7 +36,7 @@ import justifyItems from '$lib/scss/tokens/layout/flex/\_justify-items.scss?raw'
 {/* @ts-ignore */}
 import justifySelf from '$lib/scss/tokens/layout/flex/\_justify-self.scss?raw';
 
-<Meta title="Styles/Tokens/Layout/Flexbox" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
diff --git a/src/docs/styles/tokens/layout/main.stories.mdx b/src/docs/styles/tokens/layout/main.stories.mdx
index 6a11f79a..c7f7b325 100644
--- a/src/docs/styles/tokens/layout/main.stories.mdx
+++ b/src/docs/styles/tokens/layout/main.stories.mdx
@@ -24,7 +24,7 @@ import overflow from '$lib/scss/tokens/layout/\_overflow.scss?raw';
 {/* @ts-ignore */}
 import position from '$lib/scss/tokens/layout/\_position.scss?raw';
 
-<Meta title="Styles/Tokens/Layout/Main" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
diff --git a/src/docs/styles/tokens/layout/spacers.stories.mdx b/src/docs/styles/tokens/spacers/main.stories.mdx
similarity index 97%
rename from src/docs/styles/tokens/layout/spacers.stories.mdx
rename to src/docs/styles/tokens/spacers/main.stories.mdx
index 2486314c..31ad9417 100644
--- a/src/docs/styles/tokens/layout/spacers.stories.mdx
+++ b/src/docs/styles/tokens/spacers/main.stories.mdx
@@ -15,7 +15,7 @@ import fluidMargin from '$lib/scss/tokens/spacers/\_fluid-margin.scss?inline';
 {/* @ts-ignore */}
 import fluidPadding from '$lib/scss/tokens/spacers/\_fluid-padding.scss?inline';
 
-<Meta title="Styles/Tokens/Layout/Spacers" parameters={{ ...parameters }} />
+<Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
diff --git a/src/docs/utilities/intro.stories.mdx b/src/docs/utilities/intro.stories.mdx
deleted file mode 100644
index 3550d1a3..00000000
--- a/src/docs/utilities/intro.stories.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
-
-<Meta title="Utilities/Intro" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
-# Utilities
-
-Utility components are a bit of a catch-all.
-
-They include components you're less likely to need to implement yourself, like development tools for the Graphics Kit.
-
-Either way, they're good to know about, even if they may not be the most common you'll use.
diff --git a/src/index.js b/src/index.js
index 7c7db081..e8823735 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,7 @@
+// Actions
+export { default as cssVariables } from './actions/cssVariables/index.js';
+export { default as resizeObserver } from './actions/resizeObserver/index.js';
+
 // Components
 export { default as Analytics, registerPageview } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';