diff --git a/.changeset/giant-bulldogs-chew.md b/.changeset/giant-bulldogs-chew.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/giant-bulldogs-chew.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.gitignore b/.gitignore
index 99e32f22162..4bfb1f57ab7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 node_modules
 docs/storybook-static
-docs/.storybook/preview.css
+docs/.storybook/tailwind-build.css
 .DS_Store
 dist
 .turbo
diff --git a/.stylelintignore b/.stylelintignore
index 770e446ebba..ae30be28a33 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -4,4 +4,3 @@ packages/components/dist/*
 packages/components/locales/*
 docs/storybook-static/*
 docs/tailwind.css
-docs/preview.css
diff --git a/docs/.storybook/preview.css b/docs/.storybook/preview.css
new file mode 100644
index 00000000000..7252487611c
--- /dev/null
+++ b/docs/.storybook/preview.css
@@ -0,0 +1,109 @@
+pre code {
+  font-family: ui-monospace, Menlo, Monaco, 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
+    'Source Code Pro', 'Droid Sans Mono', 'Courier New', monospace !important;
+  font-size: 13px !important;
+  line-height: 19px;
+  border: 1px solid hsla(203, 50%, 30%, 0.15);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+  border-radius: 4px;
+  padding: 20px !important;
+  font-weight: 300 !important;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sbdocs-wrapper {
+  padding: 2.5rem;
+}
+
+.sbdocs.sbdocs-content {
+  max-width: unset;
+
+  :where(:not(.sb-anchor, .sb-unstyled, .sb-unstyled *)) {
+    color: var(--color-purple-800);
+  }
+
+  :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
+    font-family: var(--typography-display-0-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
+    font-family: var(--typography-heading-2-font-family);
+    font-weight: var(--typography-heading-2-font-weight);
+    font-size: var(--typography-heading-2-font-size);
+    line-height: var(--typography-heading-2-line-height);
+    letter-spacing: var(--typography-heading-2-letter-spacing);
+    border-bottom: 0;
+    text-decoration: none;
+  }
+
+  :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
+    font-family: var(--typography-heading-3-font-family);
+    font-weight: var(--typography-heading-3-font-weight);
+    font-size: var(--typography-heading-3-font-size);
+    line-height: var(--typography-heading-3-line-height);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
+
+  :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+  }
+
+  :where(h5:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+
+  :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+    margin: 0 0 var(--spacing-16);
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+
+    code {
+      font-size: 0.9em;
+      margin: var(--spacing-2);
+      padding: var(--spacing-4) var(--spacing-6);
+    }
+  }
+
+  :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    color: var(--color-blue-500);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
+  :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+    margin: 0;
+    padding: 0;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}
diff --git a/docs/.storybook/preview.tsx b/docs/.storybook/preview.tsx
index 0d8d7350eff..26455372c7d 100644
--- a/docs/.storybook/preview.tsx
+++ b/docs/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import '../../packages/components/styles/global.css'
 import 'highlight.js/styles/a11y-light.css'
 import './preview.css'
+import './tailwind-build.css'
 
 import React, { useEffect } from 'react'
 import { decorators as bgDecorators } from '@storybook/addon-backgrounds/preview'
diff --git a/docs/components/LinkTo/LinkTo.tsx b/docs/components/LinkTo/LinkTo.tsx
index 66e5f7ac53c..b5ff560d94d 100644
--- a/docs/components/LinkTo/LinkTo.tsx
+++ b/docs/components/LinkTo/LinkTo.tsx
@@ -18,7 +18,7 @@ export const LinkTo = ({
     type="button"
     onClick={linkTo(pageId, sectionName)}
     className={classnames(
-      'bg-transparent border-none text-blue-400 hover:underline cursor-pointer p-0',
+      'bg-transparent border-none text-blue-500 hover:underline cursor-pointer p-0',
       className,
     )}
     {...restButtonAttributes}
diff --git a/docs/components/ResourceLinks/ResourceLinks.tsx b/docs/components/ResourceLinks/ResourceLinks.tsx
index e8c2d52d000..a36ad949ded 100644
--- a/docs/components/ResourceLinks/ResourceLinks.tsx
+++ b/docs/components/ResourceLinks/ResourceLinks.tsx
@@ -15,7 +15,7 @@ const ResourceLink = ({ href, text }: ResourceLinkProps): JSX.Element => (
       href={href}
       target="_blank"
       rel="noopener noreferrer nofollow"
-      className="border rounded inline-flex gap-4 items-center p-8 text-blue-400 no-underline"
+      className="border rounded inline-flex gap-4 items-center p-8 text-blue-500 no-underline"
     >
       <Text variant="small" tag="span" classNameOverride="text-inherit">
         {text}
diff --git a/docs/components/SbContent/SbContent.module.scss b/docs/components/SbContent/SbContent.module.scss
deleted file mode 100644
index 9bca38e65bc..00000000000
--- a/docs/components/SbContent/SbContent.module.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-
-// duplicated some of the RTE styles to act as a baseline
-@mixin content-styles {
-  position: relative;
-  box-sizing: content-box;
-  color: $color-purple-800;
-
-  h1 {
-    font-family: $typography-heading-1-font-family;
-    font-weight: $typography-heading-1-font-weight;
-    font-size: $typography-heading-1-font-size;
-    line-height: $typography-heading-1-line-height;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
-
-  h2 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-    border-bottom: 0;
-    text-decoration: none;
-  }
-
-  h3 {
-    font-family: $typography-heading-3-font-family;
-    font-weight: $typography-heading-3-font-weight;
-    font-size: $typography-heading-3-font-size;
-    line-height: $typography-heading-3-line-height;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-
-  h4 {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-  }
-
-  h5 {
-    font-family: $typography-heading-5-font-family;
-    font-weight: $typography-heading-5-font-weight;
-    font-size: $typography-heading-5-font-size;
-    line-height: $typography-heading-5-line-height;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-
-  p,
-  a,
-  li {
-    font-family: $typography-paragraph-body-font-family;
-    font-weight: $typography-paragraph-body-font-weight;
-    font-size: $typography-paragraph-body-font-size;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    line-height: $typography-paragraph-body-line-height;
-  }
-
-  li {
-    margin: 0;
-    padding: 0;
-    font-family: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-  }
-
-  > p {
-    margin: 0 0 $spacing-16;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-
-    > li:last-of-type {
-      p {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  > *:first-child {
-    margin-top: 0;
-
-    > li:first-of-type {
-      p {
-        margin-top: 0;
-      }
-    }
-  }
-
-  a {
-    color: $color-blue-500;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  @include nested-list-styles {
-    @include nested-list-styles;
-  }
-}
-
-@mixin nested-list-styles {
-  ul,
-  ol {
-    padding: 0;
-    margin: 0;
-    line-height: 1;
-    padding-inline-start: $spacing-40; // default browser styling
-  }
-
-  ol {
-    list-style-type: decimal;
-
-    ol {
-      list-style-type: lower-alpha;
-
-      ol {
-        list-style-type: lower-roman;
-        @content;
-      }
-    }
-  }
-
-  ul {
-    list-style-type: disc;
-
-    ul {
-      list-style-type: circle;
-
-      ul {
-        list-style-type: square;
-        @content;
-      }
-    }
-  }
-}
-
-.SbContent {
-  @include content-styles;
-}
diff --git a/docs/components/SbContent/SbContent.tsx b/docs/components/SbContent/SbContent.tsx
deleted file mode 100644
index e070f55c8b5..00000000000
--- a/docs/components/SbContent/SbContent.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { type HTMLAttributes } from 'react'
-import { Unstyled } from '@storybook/blocks'
-import classNames from 'classnames'
-import styles from './SbContent.module.scss'
-
-/** A sensible default and convenience wrapper for Storybook text so we don't have to wrap it in an unstyled all the time */
-export const SbContent = ({
-  className,
-  ...otherProps
-}: HTMLAttributes<HTMLDivElement>): JSX.Element => (
-  <Unstyled>
-    <div {...otherProps} className={classNames(styles.SbContent, className)} />
-  </Unstyled>
-)
-
-SbContent.displayName = 'SbContent'
diff --git a/docs/components/SbContent/index.ts b/docs/components/SbContent/index.ts
deleted file mode 100644
index 0ef31001a9e..00000000000
--- a/docs/components/SbContent/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SbContent'
diff --git a/docs/components/index.ts b/docs/components/index.ts
index c07aa17da52..8f7434d029c 100644
--- a/docs/components/index.ts
+++ b/docs/components/index.ts
@@ -5,4 +5,3 @@ export * from './LinkTo'
 export * from './NoClipCanvas'
 export * from './ResourceLinks'
 export * from './SbReleaseNotification'
-export * from './SbContent'
diff --git a/docs/package.json b/docs/package.json
index 65b1aed71c3..b5ad4089296 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,7 +10,7 @@
     "build:docs": "storybook build --docs",
     "build:test": "storybook build --test",
     "build:chromatic": "storybook build --webpack-stats-json",
-    "build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./.storybook/preview.css",
+    "build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./.storybook/tailwind-build.css",
     "test:storybook": "test-storybook --skipTags='skip-test' --url http://127.0.0.1:6006",
     "clean": "rimraf './storybook-static' './node_modules' '.turbo'"
   },
diff --git a/docs/tailwind.css b/docs/tailwind.css
index bd8db03d1c4..b5c61c95671 100644
--- a/docs/tailwind.css
+++ b/docs/tailwind.css
@@ -1,39 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-pre code {
-  font-family: ui-monospace, Menlo, Monaco, 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
-    'Source Code Pro', 'Droid Sans Mono', 'Courier New', monospace !important;
-  font-size: 13px !important;
-  line-height: 19px;
-  border: 1px solid hsla(203, 50%, 30%, 0.15);
-  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
-  border-radius: 4px;
-  padding: 20px !important;
-  font-weight: 300 !important;
-  -webkit-font-smoothing: antialiased;
-}
-
-#storybook-docs {
-  .sbdocs-wrapper {
-    padding: 2.5rem;
-  }
-
-  .sbdocs-content {
-    max-width: unset;
-  }
-
-  .sbdocs-a {
-    color: var(--color-blue-400);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    & code {
-      color: inherit;
-      text-decoration: underline;
-    }
-  }
-}
diff --git a/docs/turbo.json b/docs/turbo.json
index db4b195a4b9..b1325a49eff 100644
--- a/docs/turbo.json
+++ b/docs/turbo.json
@@ -4,7 +4,7 @@
     "build:tailwind": {
       "dependsOn": ["@kaizen/tailwind#build"],
       "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
-      "outputs": ["docs/.storybook/preview.css"],
+      "outputs": ["docs/.storybook/tailwind-build.css"],
       "cache": false
     },
     "build:docs": {
diff --git a/eslint.config.js b/eslint.config.js
index b8f7a03e5c4..09a48d5a482 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -197,7 +197,7 @@ export default tseslint.config(
       'import/no-unresolved': [
         'error',
         {
-          ignore: ['^@kaizen/', '/preview.css$'],
+          ignore: ['^@kaizen/', '/tailwind-build.css$'],
         },
       ],
     },
diff --git a/packages/components/src/__rc__/Menu/_docs/ApiSpecification.mdx b/packages/components/src/__rc__/Menu/_docs/Menu--api-specification.mdx
similarity index 100%
rename from packages/components/src/__rc__/Menu/_docs/ApiSpecification.mdx
rename to packages/components/src/__rc__/Menu/_docs/Menu--api-specification.mdx
diff --git a/packages/components/src/__rc__/Menu/_docs/Menu.mdx b/packages/components/src/__rc__/Menu/_docs/Menu--usage-guidelines.mdx
similarity index 94%
rename from packages/components/src/__rc__/Menu/_docs/Menu.mdx
rename to packages/components/src/__rc__/Menu/_docs/Menu--usage-guidelines.mdx
index 482e55cfbb2..7a2ea708974 100644
--- a/packages/components/src/__rc__/Menu/_docs/Menu.mdx
+++ b/packages/components/src/__rc__/Menu/_docs/Menu--usage-guidelines.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, Installation, DosAndDonts, DoOrDont } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as MenuDocsStories from './Menu.docs.stories'
 import * as MenuStories from './Menu.stories'
 
@@ -16,9 +16,10 @@ Updated July 6, 2024
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
 />
 
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { MenuTrigger, Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } from "@kaizen/components/v3/actions"'
+<KAIOInstallation
+  exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
+  family="actions"
+  version="3"
 />
 
 ## Overview
@@ -55,12 +56,12 @@ A menu displays a list of actions in a popover, toggled opened with a button.
 - Menu items may be organised into sections, with a heading for each section.
 - The menu trigger button, which may be any variation of a button.
 
-  ### When to use
+### When to use
 
 - When you have a group of related actions for a page or item on the page.
 - The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
 
-  ### When not to use
+### When not to use
 
 - When you want to persist a user selection.
   - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
@@ -69,6 +70,8 @@ A menu displays a list of actions in a popover, toggled opened with a button.
   - It's recommended that you avoid this because of the complexity it adds for accessibility.
 - Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
 
+### Specs
+
 #### Do use a menu for an overflow of actions
 
 Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.