diff --git a/microsite-canon/app/page.module.css b/microsite-canon/app/page.module.css
index 53e7a2e8c3..7b2b9ab250 100644
--- a/microsite-canon/app/page.module.css
+++ b/microsite-canon/app/page.module.css
@@ -6,3 +6,28 @@
 .page {
   flex: 1;
 }
+
+.page p {
+  color: var(--canon-text-primary);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.content {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 64px 24px 64px;
+}
+
+.header {
+  width: 100%;
+  margin-bottom: 64px;
+}
+
+.header img {
+  width: 100%;
+  height: auto;
+}
diff --git a/microsite-canon/app/page.tsx b/microsite-canon/app/page.tsx
index 09b77144cf..0c11528d93 100644
--- a/microsite-canon/app/page.tsx
+++ b/microsite-canon/app/page.tsx
@@ -1,18 +1,12 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
 import styles from './page.module.css';
-
-export default function Home() {
-  const searchParams = useSearchParams();
-  const theme = searchParams.get('theme') === 'dark' ? 'Dark' : 'Light';
-  const chromaticId = '67584b7e8c2eb09c0422c27e-dmfbzicnkw';
-  const chromaticUrl = `https://${chromaticId}.chromatic.com/iframe.html`;
-  const iframeUrl = `${chromaticUrl}?globals=theme%3A${theme}&args=&id=components-button--primary`;
+export default async function Page() {
+  const { default: Post } = await import(`@/content/home.mdx`);
 
   return (
-    <div className={styles.page}>
-      <iframe src={iframeUrl} id="canon-iframe" />
+    <div className={styles.content}>
+      <Post />
     </div>
   );
 }
+
+export const dynamicParams = false;
diff --git a/microsite-canon/components/Banner/Banner.tsx b/microsite-canon/components/Banner/Banner.tsx
index 3199e65bc0..18aecba79f 100644
--- a/microsite-canon/components/Banner/Banner.tsx
+++ b/microsite-canon/components/Banner/Banner.tsx
@@ -14,17 +14,18 @@
  * limitations under the License.
  */
 import React from 'react';
+import styles from './styles.module.css';
 
 export const Banner = ({
-  children,
   variant = 'info',
+  text,
 }: {
-  children: React.ReactNode;
   variant?: 'info' | 'warning';
+  text?: string;
 }) => {
   return (
-    <div className={`banner ${variant}`}>
-      <div className="icon">
+    <div className={`${styles.banner} ${styles[variant]}`}>
+      <div className={styles.icon}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
@@ -35,7 +36,7 @@ export const Banner = ({
           <path d="M4.00001 20V14C4.00001 9.58172 7.58173 6 12 6C16.4183 6 20 9.58172 20 14V20H21V22H3.00001V20H4.00001ZM6.00001 20H18V14C18 10.6863 15.3137 8 12 8C8.6863 8 6.00001 10.6863 6.00001 14V20ZM11 2H13V5H11V2ZM19.7782 4.80761L21.1924 6.22183L19.0711 8.34315L17.6569 6.92893L19.7782 4.80761ZM2.80762 6.22183L4.22183 4.80761L6.34315 6.92893L4.92894 8.34315L2.80762 6.22183ZM7.00001 14C7.00001 11.2386 9.23858 9 12 9V11C10.3432 11 9.00001 12.3431 9.00001 14H7.00001Z"></path>
         </svg>
       </div>
-      {children}
+      <div className={styles.text}>{text}</div>
     </div>
   );
 };
diff --git a/microsite-canon/components/Banner/styles.css b/microsite-canon/components/Banner/styles.css
deleted file mode 100644
index d20e14ce0b..0000000000
--- a/microsite-canon/components/Banner/styles.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.banner {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  line-height: 28px;
-  padding: 16px;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  border: 1px solid #e0e0e0;
-
-  & > p {
-    margin: 0;
-  }
-
-  &.info {
-    background-color: #f2f2f2;
-    border-color: #cdcdcd;
-    color: #888888;
-  }
-
-  &.warning {
-    background-color: #fff2b9;
-    border-color: #ffd000;
-    color: #d79927;
-  }
-
-  & .icon {
-    width: 32px;
-    height: 32px;
-    background-color: rgba(215, 153, 39, 0.2);
-    border-radius: 6px;
-    margin-right: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
diff --git a/microsite-canon/components/Banner/styles.module.css b/microsite-canon/components/Banner/styles.module.css
new file mode 100644
index 0000000000..9666c5d521
--- /dev/null
+++ b/microsite-canon/components/Banner/styles.module.css
@@ -0,0 +1,41 @@
+.banner {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 28px;
+  padding: 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  border: 1px solid #e0e0e0;
+
+  & > p {
+    margin: 0;
+  }
+}
+
+.info {
+  background-color: #f2f2f2;
+  border-color: #cdcdcd;
+  color: #888888;
+}
+
+.warning {
+  background-color: #fff2b9;
+  border-color: #ffd000;
+  color: #d79927;
+}
+
+.icon {
+  width: 32px;
+  height: 32px;
+  background-color: rgba(215, 153, 39, 0.2);
+  border-radius: 6px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  line-height: 1.5;
+}
diff --git a/microsite-canon/components/CodeBlock/index.tsx b/microsite-canon/components/CodeBlock/index.tsx
index 1ed25902b9..bb2acced50 100644
--- a/microsite-canon/components/CodeBlock/index.tsx
+++ b/microsite-canon/components/CodeBlock/index.tsx
@@ -12,10 +12,10 @@ interface CodeBlockProps {
 
 export async function CodeBlock({ lang, title, code }: CodeBlockProps) {
   const out = await codeToHtml(code || '', {
-    lang: lang || 'ts',
+    lang: lang || 'tsx',
     themes: {
-      light: 'vitesse-light',
-      dark: 'vitesse-dark',
+      light: 'min-light',
+      dark: 'min-dark',
     },
   });
 
diff --git a/microsite-canon/components/ComponentStatus/ComponentStatus.tsx b/microsite-canon/components/ComponentStatus/ComponentStatus.tsx
index 0159e27b32..8c4e3b291e 100644
--- a/microsite-canon/components/ComponentStatus/ComponentStatus.tsx
+++ b/microsite-canon/components/ComponentStatus/ComponentStatus.tsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import styles from './styles.module.css';
 
 export const ComponentStatus = ({
   name,
@@ -28,15 +29,15 @@ export const ComponentStatus = ({
   link?: string;
 }) => {
   return (
-    <div className="component-status" style={style}>
+    <div className={styles.componentStatus} style={style}>
       {link ? (
-        <a href={link} className="title">
+        <a href={link} className={styles.title}>
           {name}
         </a>
       ) : (
-        <span className="title">{name}</span>
+        <span className={styles.title}>{name}</span>
       )}
-      <span className={`pill ${status}`}>
+      <span className={`${styles.pill} ${styles[status]}`}>
         {status === 'notStarted' && 'Not Started'}
         {status === 'inProgress' && 'In Progress'}
         {status === 'alpha' && 'Alpha'}
diff --git a/microsite-canon/components/ComponentStatus/styles.css b/microsite-canon/components/ComponentStatus/styles.css
deleted file mode 100644
index 6ef02ccf3f..0000000000
--- a/microsite-canon/components/ComponentStatus/styles.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.component-status {
-  display: flex;
-  justify-content: space-between;
-
-  & .title {
-    color: #3b59ff;
-    font-size: 16px;
-    font-weight: 400;
-    text-decoration: none;
-  }
-
-  & .pill {
-    display: inline-flex;
-    align-items: center;
-    color: #000;
-    border-radius: 40px;
-    padding: 0px 8px;
-    height: 24px;
-    font-size: 12px;
-    font-weight: 600;
-    border-style: solid;
-    border-width: 1px;
-    margin-left: 8px;
-
-    &.notStarted {
-      background-color: #f2f2f2;
-      border-color: #cdcdcd;
-      color: #888888;
-    }
-
-    &.inProgress {
-      background-color: #fff2b9;
-      border-color: #ffd000;
-      color: #d79927;
-    }
-
-    &.alpha {
-      background-color: #d7f9d7;
-      border-color: #4ed14a;
-      color: #3a9837;
-    }
-
-    &.beta {
-      background-color: #d7f9d7;
-      border-color: #4ed14a;
-      color: #3a9837;
-    }
-
-    &.stable {
-      background-color: #d7f9d7;
-      border-color: #4ed14a;
-      color: #3a9837;
-    }
-  }
-}
diff --git a/microsite-canon/components/ComponentStatus/styles.module.css b/microsite-canon/components/ComponentStatus/styles.module.css
new file mode 100644
index 0000000000..6124c5e437
--- /dev/null
+++ b/microsite-canon/components/ComponentStatus/styles.module.css
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.componentStatus {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+
+.title {
+  color: #3b59ff;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+& .pill {
+  display: inline-flex;
+  align-items: center;
+  color: #000;
+  border-radius: 40px;
+  padding: 0px 8px;
+  height: 24px;
+  font-size: 12px;
+  font-weight: 600;
+  border-style: solid;
+  border-width: 1px;
+  margin-left: 8px;
+
+  &.notStarted {
+    background-color: #f2f2f2;
+    border-color: #cdcdcd;
+    color: #888888;
+  }
+
+  &.inProgress {
+    background-color: #fff2b9;
+    border-color: #ffd000;
+    color: #d79927;
+  }
+
+  &.alpha {
+    background-color: #d7f9d7;
+    border-color: #4ed14a;
+    color: #3a9837;
+  }
+
+  &.beta {
+    background-color: #d7f9d7;
+    border-color: #4ed14a;
+    color: #3a9837;
+  }
+
+  &.stable {
+    background-color: #d7f9d7;
+    border-color: #4ed14a;
+    color: #3a9837;
+  }
+}
diff --git a/microsite-canon/components/Tabs/index.tsx b/microsite-canon/components/Tabs/index.tsx
index 6d095c1ad7..2eed1aa2a0 100644
--- a/microsite-canon/components/Tabs/index.tsx
+++ b/microsite-canon/components/Tabs/index.tsx
@@ -75,10 +75,22 @@ export const TabsPages = () => {
       onValueChange={onValueChange}
     >
       <Tabs.List className={styles.list}>
-        <Tabs.Tab className={styles.tab} value="docs">
+        <Tabs.Tab
+          className={styles.tab}
+          value="docs"
+          onClick={() => {
+            router.push('/');
+          }}
+        >
           Documentation
         </Tabs.Tab>
-        <Tabs.Tab className={styles.tab} value="playground">
+        <Tabs.Tab
+          className={styles.tab}
+          value="playground"
+          onClick={() => {
+            router.push('/playground');
+          }}
+        >
           Playground
         </Tabs.Tab>
         <Tabs.Indicator className={styles.indicator} />
diff --git a/microsite-canon/content/home.mdx b/microsite-canon/content/home.mdx
new file mode 100644
index 0000000000..e729989487
--- /dev/null
+++ b/microsite-canon/content/home.mdx
@@ -0,0 +1,74 @@
+import { Banner } from '@/components/Banner';
+import { ComponentStatus } from '@/components/ComponentStatus';
+
+<img src="header.png" style={{ width: '100%', marginBottom: '64px' }} />
+
+Welcome to the Canon, the new design library for Backstage plugins. This
+project is still under active development but we will make sure to document
+the API as we go. We are aiming to improve the general UI of Backstage and
+plugins across Backstage. This new library will take time to build but we are
+building it incrementally with not conflict with the existing theming system.
+
+<Banner
+  variant="warning"
+  text="This library is still under heavy construction. The API will change until we reach a stable release."
+/>
+
+## Component Status
+
+We are still in the process of documenting the API and building the
+components. You can use the statuses below to see what is ready and what is
+coming soon. If there is a component missing that you need, please let us know
+by opening an issue on GitHub.
+
+<div
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: '0px 64px',
+  }}
+>
+  <ComponentStatus
+    name="Box"
+    status="alpha"
+    link="/?path=/docs/components-box--docs"
+  />
+  <ComponentStatus
+    name="Button"
+    status="inProgress"
+    link="/?path=/docs/components-button--docs"
+  />
+  <ComponentStatus name="Checkbox" status="notStarted" />
+  <ComponentStatus
+    name="Container"
+    status="alpha"
+    link="/?path=/docs/components-container--docs"
+  />
+  <ComponentStatus
+    name="Grid"
+    status="alpha"
+    link="/?path=/story/components-grid--docs"
+  />
+  <ComponentStatus name="Header" status="notStarted" />
+  <ComponentStatus
+    name="Icon"
+    status="alpha"
+    link="/?path=/docs/components-icon--docs"
+  />
+  <ComponentStatus
+    name="Inline"
+    status="alpha"
+    link="/?path=/story/components-inline--default"
+  />
+  <ComponentStatus name="Input" status="notStarted" />
+  <ComponentStatus name="Radio" status="notStarted" />
+  <ComponentStatus name="Select" status="notStarted" />
+  <ComponentStatus
+    name="Stack"
+    status="alpha"
+    link="/?path=/docs/components-stack--default"
+  />
+  <ComponentStatus name="Switch" status="notStarted" />
+  <ComponentStatus name="Tabs" status="notStarted" />
+  <ComponentStatus name="Tooltip" status="notStarted" />
+</div>
diff --git a/microsite-canon/mdx-components.tsx b/microsite-canon/mdx-components.tsx
index 0feb798f22..4b87f859c9 100644
--- a/microsite-canon/mdx-components.tsx
+++ b/microsite-canon/mdx-components.tsx
@@ -1,8 +1,6 @@
 import type { MDXComponents } from 'mdx/types';
 import Image, { ImageProps } from 'next/image';
 import { ReactNode, ReactElement } from 'react';
-import type { BundledLanguage } from 'shiki';
-import { codeToHtml } from 'shiki';
 import React from 'react';
 import { CodeBlock } from '@/components/CodeBlock';
 
@@ -66,7 +64,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         ? (children.props as { children: string }).children
         : '';
 
-      return <CodeBlock lang="ts" code={codeContent} />;
+      return <CodeBlock lang="tsx" code={codeContent} />;
     },
     img: props => (
       <Image
diff --git a/microsite-canon/public/header.png b/microsite-canon/public/header.png
new file mode 100644
index 0000000000..507bd05ca7
Binary files /dev/null and b/microsite-canon/public/header.png differ
diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts
index cf7921268e..2e369475d6 100644
--- a/packages/canon/.storybook/main.ts
+++ b/packages/canon/.storybook/main.ts
@@ -10,7 +10,6 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: [
-    '../docs/**/*.mdx',
     '../src/components/**/*.mdx',
     '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx
index 1ac53acd86..867461818b 100644
--- a/packages/canon/.storybook/preview.tsx
+++ b/packages/canon/.storybook/preview.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import type { Preview, ReactRenderer } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
-// Storybook specific styles
-import '../docs/components/styles.css';
-
 // Canon specific styles
 import '../src/css/core.css';
 import '../src/css/components.css';
diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx
deleted file mode 100644
index 5b85ab15ad..0000000000
--- a/packages/canon/docs/Home.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Unstyled } from '@storybook/blocks';
-import {
-  Columns,
-  Text,
-  ComponentStatus,
-  Banner,
-  Title,
-  Roadmap,
-} from './components';
-import { list } from './components/Roadmap/list';
-
-<Unstyled>
-
-<img src="header.png" style={{ width: '100%', marginTop: '-16px' }} />
-
-<Text style={{ marginTop: '64px', marginBottom: '24px' }}>
-  Welcome to the Canon, the new design library for Backstage plugins. This
-  project is still under active development but we will make sure to document
-  the API as we go. We are aiming to improve the general UI of Backstage and
-  plugins across Backstage. This new library will take time to build but we are
-  building it incrementally with not conflict with the existing theming system.
-</Text>
-
-<Banner variant="warning">
-  This library is still under heavy construction. Please be aware that the API
-  will change until we reach a stable release.
-</Banner>
-
-<Title style={{ marginTop: '48px' }} type="h2">
-  Component Status
-</Title>
-<Text>
-  We are still in the process of documenting the API and building the
-  components. You can use the statuses below to see what is ready and what is
-  coming soon. If there is a component missing that you need, please let us know
-  by opening an issue on GitHub.
-</Text>
-
-<Columns style={{ marginTop: '32px' }}>
-  <ComponentStatus
-    name="Box"
-    status="alpha"
-    link="/?path=/docs/components-box--docs"
-  />
-  <ComponentStatus
-    name="Button"
-    status="inProgress"
-    link="/?path=/docs/components-button--docs"
-  />
-  <ComponentStatus name="Checkbox" status="notStarted" />
-  <ComponentStatus
-    name="Container"
-    status="alpha"
-    link="/?path=/docs/components-container--docs"
-  />
-  <ComponentStatus
-    name="Grid"
-    status="alpha"
-    link="/?path=/story/components-grid--docs"
-  />
-  <ComponentStatus name="Header" status="notStarted" />
-  <ComponentStatus
-    name="Icon"
-    status="alpha"
-    link="/?path=/docs/components-icon--docs"
-  />
-  <ComponentStatus
-    name="Inline"
-    status="alpha"
-    link="/?path=/story/components-inline--default"
-  />
-  <ComponentStatus name="Input" status="notStarted" />
-  <ComponentStatus name="Radio" status="notStarted" />
-  <ComponentStatus name="Select" status="notStarted" />
-  <ComponentStatus
-    name="Stack"
-    status="alpha"
-    link="/?path=/docs/components-stack--default"
-  />
-  <ComponentStatus name="Switch" status="notStarted" />
-  <ComponentStatus name="Tabs" status="notStarted" />
-  <ComponentStatus name="Tooltip" status="notStarted" />
-</Columns>
-
-<Title style={{ marginTop: '48px' }} type="h2">
-  Roadmap
-</Title>
-
-<Roadmap list={list} />
-
-</Unstyled>
diff --git a/packages/canon/docs/Iconography.mdx b/packages/canon/docs/Iconography.mdx
deleted file mode 100644
index 83d181af12..0000000000
--- a/packages/canon/docs/Iconography.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Unstyled, Source, Meta } from '@storybook/blocks';
-import { Title, Text, IconLibrary } from './components';
-
-<Meta title="Core Concepts/Iconography" />
-
-<Unstyled>
-
-<Title type="h1">Iconography</Title>
-
-<Text>
-  All our default icons are provided by [Remix Icon](https://remixicon.com/). We
-  don't import all icons to reduce the bundle size but we cherry pick a nice
-  selection for you to use in your application. The list of names is set down
-  below. To use an icon, you can use the `Icon` component and pass the name of
-  the icon you want to use.
-</Text>
-
-<Source code={`<Icon name="heart" />`} language="tsx" dark />
-
-<IconLibrary />
-
-</Unstyled>
diff --git a/packages/canon/docs/Layout.mdx b/packages/canon/docs/Layout.mdx
deleted file mode 100644
index 9145f71aed..0000000000
--- a/packages/canon/docs/Layout.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Unstyled, Source, Meta } from '@storybook/blocks';
-import { Title, Text, LayoutComponents } from './components';
-import * as Table from './components/Table';
-
-<Meta title="Core Concepts/Layout" />
-
-<Unstyled>
-
-<Title type="h1">Layout</Title>
-<Text>
-  Canon is made for extensibility. We built this library to make it easy for any
-  Backstage plugin creator to be able to build their ideas at speed ensuring
-  consistency across the rest of your ecosystem. Each component is designed to
-  be editable to match your need but sometimes you want to have more control
-  over the layout of your page. To help you with that, we created a set of
-  layout components that you can use to build your own layouts. All of these
-  components are built to extend on our theming system, making it easy for you
-  to build your own layouts. Sometimes these components are not enough so we
-  created a set of helpers to be used with any CSS-in-JS library.
-</Text>
-
-<Title type="h2">Layout Components</Title>
-
-<Text>
-  We built a couple of layout components to help you build responsive elements
-  that will be consistent with the rest of your Backstage instance. These
-  components are opinionated and use TypeScript to ensure that the props you
-  provide are the ones coming from the theme.
-</Text>
-
-<Source
-  code={`<Stack direction="column" gap="md">
-  <Box>Hello World</Box>
-  <Inline gap="sm">
-    <Box>Project 1</Box>
-    <Box>Project 2</Box>
-  </Inline>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<LayoutComponents />
-
-<Title type="h2">Layout Helpers</Title>
-
-<Text>
-  Sometimes you want to use global tokens dynamically outside of React
-  components. To help you with that we would like to provide a set of helpers
-  that you can use in your code. These helpers are not available just yet but we
-  are working on it.
-</Text>
-
-</Unstyled>
diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx
deleted file mode 100644
index 85292ee555..0000000000
--- a/packages/canon/docs/Responsive.mdx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { Unstyled, Meta, Canvas, Source } from '@storybook/blocks';
-import {
-  Columns,
-  Text,
-  ComponentStatus,
-  Banner,
-  Title,
-  Roadmap,
-} from './components';
-import { list } from './components/Roadmap/list';
-import * as HeadingStories from '../src/components/Heading/Heading.stories';
-import * as TextStories from '../src/components/Text/Text.stories';
-import * as Table from './components/Table';
-import { Chip } from './components/Chip';
-
-<Meta title="Core Concepts/Responsive" />
-
-<Unstyled>
-
-<Title type="h1">Responsive</Title>
-<Text>
-  Canon is built on a responsive design system, meaning that the components are
-  designed to adapt to different screen sizes. By default we offer a set of
-  breakpoints that you can use to create responsive components.
-</Text>
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  Breakpoints
-</Title>
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Breakpoint prefix</Table.HeaderCell>
-      <Table.HeaderCell>Minimum width</Table.HeaderCell>
-      <Table.HeaderCell>CSS</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>xs</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>0px</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>{`{ ... }`}</Chip>
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>sm</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>640px</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>{`@media (min-width: 640px) { ... }`}</Chip>
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>md</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>768px</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>{`@media (min-width: 768px) { ... }`}</Chip>
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>lg</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>1024px</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>{`@media (min-width: 1024px) { ... }`}</Chip>
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>xl</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>1280px</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>{`@media (min-width: 1280px) { ... }`}</Chip>
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>2xl</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>1536px</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        <Chip>{`@media (min-width: 1536px) { ... }`}</Chip>
-      </Table.Cell>
-    </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-<Title type="h2">Responsive components</Title>
-
-<Text>
-  Canon components are designed to be responsive, meaning that they will adapt
-  to different screen sizes. Not every component is responsive, but the ones
-  that are will have a prop to control the responsive behavior.
-</Text>
-
-<Text>
-  The behaviour is the same for each component. For each prop, instead of adding
-  the value, you add an object with the value and the breakpoint prefix.
-</Text>
-
-<Source
-  code={`// Fixed value
-
-<Button size="small">Button</Button>
-
-// Responsive value
-
-<Button size={{ xs: 'small', md: 'medium' }}>Button</Button>`} dark />
-
-<Title type="h2">How to update breakpoints</Title>
-
-<Text>
-  The set of keys are not to be changed, but you can update the minimum width of
-  each breakpoint in the theme provider.
-</Text>
-
-<Source
-  code={`<CanonProvider breakpoints={{
-  xs: 0,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  '2xl': 1536,
-}} />`}
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx
deleted file mode 100644
index 1ea7c5c4c6..0000000000
--- a/packages/canon/docs/Theme.mdx
+++ /dev/null
@@ -1,231 +0,0 @@
-import { Unstyled, Source, Meta } from '@storybook/blocks';
-import { Title, Text, Chip } from './components';
-import * as Table from './components/Table';
-
-<Meta title="Core Concepts/Theming" />{' '}
-
-<Unstyled>
-
-<Title type="h1">Theming</Title>
-<Text>
-  Backstage ships with a default theme with a light and dark mode variant. The
-  themes are provided as a part of the `@backstage/canon` package, which also
-  includes utilities for customizing the default theme, or creating completely
-  new themes.
-</Text>
-
-<Title type="h2">Light & Dark modes</Title>
-<Text>
-  By default we are supporting both light and dark modes. Each user can opt to
-  choose what theme they want to use or to use their system decide what theme to
-  use. If you want to create your own theme, you will have to set both light and
-  dark themes following the instructions below. If you only set one of them, the
-  other mode will fallback to the default theme.
-</Text>
-
-<Title type="h2">How to create your own theme</Title>
-<Text>
-  To create your own theme, you will have to define the variables below. To do
-  that, create a theme.css file and import it in your application. Here's an
-  example below on how to set your light and dark mode.
-</Text>
-<Source
-  code={`/** Light theme **/
-[data-theme='light'] {
-  --canon-accent: #1ed760;
-  --canon-bg: #fff;
-  --canon-surface-1: #f5f5f5;
-  --canon-surface-2: #000;
-  --canon-outline: #666;
-  --canon-outline-focus: #ccc;
-  --canon-text-primary: #f0f0f0;
-  --canon-text-secondary: #666;
-  --canon-font-regular: 'Geist', serif;
-  --canon-font-mono: 'Monospace', monospace;
-  /* ... other values */
-}
-  
-/** Dark theme **/
-[data-theme='dark'] {
-  --canon-accent: #1ed760;
-  --canon-bg: #000;
-  --canon-surface-1: #f5f5f5;
-  --canon-surface-2: #000;
-  --canon-outline: #666;
-  --canon-outline-focus: #ccc;
-  --canon-text-primary: #fff;
-  --canon-text-secondary: #666;
-  --canon-font-regular: 'Geist', serif;
-  --canon-font-mono: 'Monospace', monospace;
-  /* ... other values */
-}
-`}
-  language="css"
-  dark
-/>
-
-<Title type="h2">Colors</Title>
-<Text>
-  We provide a set of generic colours tokens that we use across Canon. By
-  changing these colours you can easily change the look and feel of your
-  application to match your brand.
-</Text>
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-accent</Chip>
-      </Table.Cell>
-      <Table.Cell>The accent color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-bg</Chip>
-      </Table.Cell>
-      <Table.Cell>The background color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-surface-1</Chip>
-      </Table.Cell>
-      <Table.Cell>The first surface color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-surface-2</Chip>
-      </Table.Cell>
-      <Table.Cell>The second surface color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-outline</Chip>
-      </Table.Cell>
-      <Table.Cell>The outline color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-outline-focus</Chip>
-      </Table.Cell>
-      <Table.Cell>The outline focus color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-text-primary</Chip>
-      </Table.Cell>
-      <Table.Cell>The primary text color for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-text-secondary</Chip>
-      </Table.Cell>
-      <Table.Cell>The secondary text color for the theme.</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-<Title type="h2">Typography</Title>
-<Text>
-  We have two fonts that we use across Canon. The first one is the sans-serif
-  font that we use for the body of the application. The second one is the
-  monospace font that we use for code blocks and tables.
-</Text>
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-font-regular</Chip>
-      </Table.Cell>
-      <Table.Cell>The sans-serif font for the theme.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-font-mono</Chip>
-      </Table.Cell>
-      <Table.Cell>The monospace font for the theme.</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-<Title type="h2">Spacing</Title>
-<Text>
-  Our default spacing system is made to work in most scenarios. We have 7 scale
-  values from `xxs` to `xxl`. We use the values on padding and margin in our
-  layout components mostly. If you prefer to use a different spacing system, you
-  can do that by changing the values below.
-</Text>
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-unit</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        The base unit for the spacing system. Default value is `1em`
-      </Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-xxs</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `0.25 x space unit`</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-xs</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `0.5 x space unit`</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-sm</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `0.75 x space unit`</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-md</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `1.25 x space unit`</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-lg</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `2 x space unit`</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-xl</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `3.25 x space unit`</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-space-xxl</Chip>
-      </Table.Cell>
-      <Table.Cell>Default value is `5.25 x space unit`</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-</Unstyled>
diff --git a/packages/canon/docs/Typography.mdx b/packages/canon/docs/Typography.mdx
deleted file mode 100644
index 802b9881be..0000000000
--- a/packages/canon/docs/Typography.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Unstyled, Meta, Canvas } from '@storybook/blocks';
-import {
-  Columns,
-  Text,
-  ComponentStatus,
-  Banner,
-  Title,
-  Roadmap,
-} from './components';
-import { list } from './components/Roadmap/list';
-import * as HeadingStories from '../src/components/Heading/Heading.stories';
-import * as TextStories from '../src/components/Text/Text.stories';
-
-<Meta title="Core Concepts/Typography" />
-
-<Unstyled>
-
-<Title type="h1">Typography</Title>
-<Text>
-  Canon offers a suite of typography components designed to seamlessly align
-  with the rest of your Backstage instance. While you can customize their
-  appearance to match your brand, the underlying API remains consistent and
-  unchanged. Each component is built on a responsive structure, allowing you to
-  define different typography values for various breakpoints.
-</Text>
-
-<Title type="h2">Heading</Title>
-<Text>
-  Headings are used to structure the content of your page. They are used to
-  create a hierarchy of information and to make the content more readable. The
-  best way to use add these headings to your page is to import the [Heading
-  component](?path=/docs/components-heading--docs).
-</Text>
-
-<Canvas of={HeadingStories.AllVariants} />
-
-<Title type="h2">Text</Title>
-<Text>
-  Canon provides four distinct text variants, each offering different font sizes
-  carefully designed to cover the majority of use cases. These variants are
-  versatile and can be paired with regular and bold of font weights. You can use
-  the [Text component](?path=/docs/components-text--docs) to add text to your
-  page.
-</Text>
-
-<Canvas of={TextStories.AllVariants} />
-
-</Unstyled>
diff --git a/packages/canon/docs/components/Banner/Banner.tsx b/packages/canon/docs/components/Banner/Banner.tsx
deleted file mode 100644
index 3199e65bc0..0000000000
--- a/packages/canon/docs/components/Banner/Banner.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const Banner = ({
-  children,
-  variant = 'info',
-}: {
-  children: React.ReactNode;
-  variant?: 'info' | 'warning';
-}) => {
-  return (
-    <div className={`banner ${variant}`}>
-      <div className="icon">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="18"
-          height="18"
-          fill="currentColor"
-        >
-          <path d="M4.00001 20V14C4.00001 9.58172 7.58173 6 12 6C16.4183 6 20 9.58172 20 14V20H21V22H3.00001V20H4.00001ZM6.00001 20H18V14C18 10.6863 15.3137 8 12 8C8.6863 8 6.00001 10.6863 6.00001 14V20ZM11 2H13V5H11V2ZM19.7782 4.80761L21.1924 6.22183L19.0711 8.34315L17.6569 6.92893L19.7782 4.80761ZM2.80762 6.22183L4.22183 4.80761L6.34315 6.92893L4.92894 8.34315L2.80762 6.22183ZM7.00001 14C7.00001 11.2386 9.23858 9 12 9V11C10.3432 11 9.00001 12.3431 9.00001 14H7.00001Z"></path>
-        </svg>
-      </div>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/Banner/index.ts b/packages/canon/docs/components/Banner/index.ts
deleted file mode 100644
index 31f4aa88b0..0000000000
--- a/packages/canon/docs/components/Banner/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Banner } from './Banner';
diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css
deleted file mode 100644
index d20e14ce0b..0000000000
--- a/packages/canon/docs/components/Banner/styles.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.banner {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  line-height: 28px;
-  padding: 16px;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  border: 1px solid #e0e0e0;
-
-  & > p {
-    margin: 0;
-  }
-
-  &.info {
-    background-color: #f2f2f2;
-    border-color: #cdcdcd;
-    color: #888888;
-  }
-
-  &.warning {
-    background-color: #fff2b9;
-    border-color: #ffd000;
-    color: #d79927;
-  }
-
-  & .icon {
-    width: 32px;
-    height: 32px;
-    background-color: rgba(215, 153, 39, 0.2);
-    border-radius: 6px;
-    margin-right: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
diff --git a/packages/canon/docs/components/Chip/Chip.tsx b/packages/canon/docs/components/Chip/Chip.tsx
deleted file mode 100644
index e6e1d1b1c4..0000000000
--- a/packages/canon/docs/components/Chip/Chip.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-export const Chip = ({
-  children,
-  head = false,
-}: {
-  children: React.ReactNode;
-  head?: boolean;
-}) => {
-  return <span className={`chip ${head ? 'head' : ''}`}>{children}</span>;
-};
diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/canon/docs/components/Chip/index.ts
deleted file mode 100644
index ff9e4794c5..0000000000
--- a/packages/canon/docs/components/Chip/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Chip } from './Chip';
diff --git a/packages/canon/docs/components/Chip/styles.css b/packages/canon/docs/components/Chip/styles.css
deleted file mode 100644
index 95cf7cef34..0000000000
--- a/packages/canon/docs/components/Chip/styles.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  font-family: monospace;
-  font-size: 13px;
-  border-radius: 6px;
-  padding: 0px 8px;
-  height: 24px;
-  margin-right: 4px;
-  background-color: #f0f0f0;
-  color: #5d5d5d;
-
-  &.head {
-    background-color: #eaf2fd;
-    color: #2563eb;
-  }
-}
diff --git a/packages/canon/docs/components/Columns/Columns.tsx b/packages/canon/docs/components/Columns/Columns.tsx
deleted file mode 100644
index 115ec50010..0000000000
--- a/packages/canon/docs/components/Columns/Columns.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-export const Columns = ({
-  children,
-  style,
-}: {
-  children: React.ReactNode;
-  style?: React.CSSProperties;
-}) => {
-  return (
-    <div className="columns" style={style}>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/Columns/index.ts b/packages/canon/docs/components/Columns/index.ts
deleted file mode 100644
index 05de0850be..0000000000
--- a/packages/canon/docs/components/Columns/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Columns } from './Columns';
diff --git a/packages/canon/docs/components/Columns/styles.css b/packages/canon/docs/components/Columns/styles.css
deleted file mode 100644
index c34acfc406..0000000000
--- a/packages/canon/docs/components/Columns/styles.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.columns {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 20px;
-  column-gap: 80px;
-}
diff --git a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
deleted file mode 100644
index 0159e27b32..0000000000
--- a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-export const ComponentStatus = ({
-  name,
-  status = 'notStarted',
-  style,
-  link,
-}: {
-  name: string;
-  status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable';
-  style?: React.CSSProperties;
-  link?: string;
-}) => {
-  return (
-    <div className="component-status" style={style}>
-      {link ? (
-        <a href={link} className="title">
-          {name}
-        </a>
-      ) : (
-        <span className="title">{name}</span>
-      )}
-      <span className={`pill ${status}`}>
-        {status === 'notStarted' && 'Not Started'}
-        {status === 'inProgress' && 'In Progress'}
-        {status === 'alpha' && 'Alpha'}
-        {status === 'beta' && 'Beta'}
-        {status === 'stable' && 'Stable'}
-      </span>
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/canon/docs/components/ComponentStatus/index.ts
deleted file mode 100644
index 238c001289..0000000000
--- a/packages/canon/docs/components/ComponentStatus/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { ComponentStatus } from './ComponentStatus';
diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css
deleted file mode 100644
index 6ef02ccf3f..0000000000
--- a/packages/canon/docs/components/ComponentStatus/styles.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.component-status {
-  display: flex;
-  justify-content: space-between;
-
-  & .title {
-    color: #3b59ff;
-    font-size: 16px;
-    font-weight: 400;
-    text-decoration: none;
-  }
-
-  & .pill {
-    display: inline-flex;
-    align-items: center;
-    color: #000;
-    border-radius: 40px;
-    padding: 0px 8px;
-    height: 24px;
-    font-size: 12px;
-    font-weight: 600;
-    border-style: solid;
-    border-width: 1px;
-    margin-left: 8px;
-
-    &.notStarted {
-      background-color: #f2f2f2;
-      border-color: #cdcdcd;
-      color: #888888;
-    }
-
-    &.inProgress {
-      background-color: #fff2b9;
-      border-color: #ffd000;
-      color: #d79927;
-    }
-
-    &.alpha {
-      background-color: #d7f9d7;
-      border-color: #4ed14a;
-      color: #3a9837;
-    }
-
-    &.beta {
-      background-color: #d7f9d7;
-      border-color: #4ed14a;
-      color: #3a9837;
-    }
-
-    &.stable {
-      background-color: #d7f9d7;
-      border-color: #4ed14a;
-      color: #3a9837;
-    }
-  }
-}
diff --git a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
deleted file mode 100644
index e32f4c08a4..0000000000
--- a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { Icon } from '@backstage/canon';
-import type { IconNames } from '@backstage/canon';
-import { defaultIcons } from '../../../src/components/Icon/icons';
-import { Text } from '../Text/Text';
-
-export const IconLibrary = () => {
-  const icons = Object.keys(defaultIcons);
-
-  return (
-    <div className="icon-library">
-      {icons.map(icon => (
-        <div key={icon} className="icon-library-item">
-          <div className="icon-library-item-icon">
-            <Icon name={icon as IconNames} />
-          </div>
-          <Text>{icon}</Text>
-        </div>
-      ))}
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts
deleted file mode 100644
index 071c80db85..0000000000
--- a/packages/canon/docs/components/IconLibrary/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { IconLibrary } from './IconLibrary';
diff --git a/packages/canon/docs/components/IconLibrary/styles.css b/packages/canon/docs/components/IconLibrary/styles.css
deleted file mode 100644
index 1a6f63ca79..0000000000
--- a/packages/canon/docs/components/IconLibrary/styles.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.icon-library {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 1rem;
-}
-
-.icon-library-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.icon-library-item-icon {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  height: 80px;
-  border: 1px solid #d3d3d3;
-  border-radius: 0.5rem;
-}
diff --git a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
deleted file mode 100644
index 56f389a389..0000000000
--- a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { BoxSvg } from './svgs/box';
-import { StackSvg } from './svgs/stack';
-import { GridSvg } from './svgs/grid';
-import { InlineSvg } from './svgs/inline';
-import { ContainerSvg } from './svgs/container';
-
-export const LayoutComponents = () => {
-  return (
-    <div className="layout-components">
-      <div className="box">
-        <a className="content" href="/?path=/docs/components-box--docs">
-          <BoxSvg />
-        </a>
-        <div className="title">Box</div>
-        <div className="description">The most basic layout component</div>
-      </div>
-      <div className="box">
-        <a className="content" href="/?path=/docs/components-stack--docs">
-          <StackSvg />
-        </a>
-        <div className="title">Stack</div>
-        <div className="description">Arrange your components vertically</div>
-      </div>
-      <div className="box">
-        <a className="content" href="/?path=/docs/components-grid--docs">
-          <GridSvg />
-        </a>
-        <div className="title">Grid</div>
-        <div className="description">Arrange your components in a grid</div>
-      </div>
-      <div className="box">
-        <a className="content" href="/?path=/docs/components-inline--docs">
-          <InlineSvg />
-        </a>
-        <div className="title">Inline</div>
-        <div className="description">Arrange your components in a row</div>
-      </div>
-      <div className="box">
-        <a className="content" href="/?path=/docs/components-container--docs">
-          <ContainerSvg />
-        </a>
-        <div className="title">Container</div>
-        <div className="description">A container for your components</div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/LayoutComponents/index.ts b/packages/canon/docs/components/LayoutComponents/index.ts
deleted file mode 100644
index 55cc9f25ef..0000000000
--- a/packages/canon/docs/components/LayoutComponents/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { LayoutComponents } from './LayoutComponents';
diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css
deleted file mode 100644
index 9319121224..0000000000
--- a/packages/canon/docs/components/LayoutComponents/styles.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.layout-components {
-  display: flex;
-  justify-content: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-
-  & .box {
-    display: flex;
-    flex-direction: column;
-    width: calc(33.33% - 0.67rem);
-    margin-bottom: 1rem;
-    align-items: flex-start;
-  }
-
-  & .content {
-    flex: none;
-    background: linear-gradient(180deg, #f3f3f3 0%, #fff 100%);
-    border-radius: 4px;
-    width: 100%;
-    height: 180px;
-    transition: all 0.2s ease-in-out;
-    margin-bottom: 0.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      transform: translateY(-4px);
-    }
-  }
-
-  & .title {
-    font-size: 16px;
-    transition: color 0.2s ease-in-out;
-    margin-bottom: 0.25rem;
-  }
-
-  & .description {
-    font-size: 16px;
-    color: #9e9e9e;
-  }
-}
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx
deleted file mode 100644
index 1749b38c6f..0000000000
--- a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const BoxSvg = () => {
-  return (
-    <svg
-      width="100"
-      height="60"
-      viewBox="0 0 100 60"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="100" height="60" rx="4" fill="black" fill-opacity="0.06" />
-      <path
-        d="M94.5 0.5H96C97.933 0.5 99.5 2.067 99.5 4V5.5"
-        stroke="#4765FF"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M99.5 54.5L99.5 56C99.5 57.933 97.933 59.5 96 59.5L94.5 59.5"
-        stroke="#4765FF"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M5.5 59.5L4 59.5C2.067 59.5 0.5 57.933 0.5 56L0.5 54.5"
-        stroke="#4765FF"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M0.5 5.5L0.5 4C0.5 2.067 2.067 0.5 4 0.5L5.5 0.500001"
-        stroke="#4765FF"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx
deleted file mode 100644
index 62fe4ce266..0000000000
--- a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx
+++ /dev/null
@@ -1,373 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const ContainerSvg = () => {
-  return (
-    <svg
-      width="126"
-      height="111"
-      viewBox="0 0 126 111"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_1922_1559"
-        // style="mask-type:alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="13"
-        height="111"
-      >
-        <rect width="13" height="111" fill="url(#paint0_linear_1922_1559)" />
-      </mask>
-      <g mask="url(#mask0_1922_1559)">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 44.7563L13.0259 51.6995L12.5259 52.5655L0.5 45.6224L1 44.7563Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 50.5655L13.0259 57.5087L12.5259 58.3747L0.5 51.4316L1 50.5655Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 56.3747L13.0259 63.3179L12.5259 64.1839L0.5 57.2408L1 56.3747Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 62.1839L13.0259 69.1271L12.5259 69.9931L0.5 63.05L1 62.1839Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 67.9931L13.0259 74.9363L12.5259 75.8023L0.5 68.8592L1 67.9931Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 73.8023L13.0259 80.7455L12.5259 81.6116L0.5 74.6684L1 73.8023Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 79.6115L13.0259 86.5547L12.5259 87.4208L0.5 80.4776L1 79.6115Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 85.4208L13.0259 92.3639L12.5259 93.23L0.5 86.2868L1 85.4208Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 91.23L13.0259 98.1731L12.5259 99.0392L0.5 92.096L1 91.23Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 97.0392L13.0259 103.982L12.5259 104.848L0.5 97.9052L1 97.0392Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 102.848L13.0259 109.792L12.5259 110.658L0.5 103.714L1 102.848Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 108.658L13.0259 115.601L12.5259 116.467L0.5 109.524L1 108.658Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 38.9471L13.0259 45.8903L12.5259 46.7563L0.5 39.8131L1 38.9471Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 33.1379L13.0259 40.0811L12.5259 40.9471L0.5 34.0039L1 33.1379Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 27.3287L13.0259 34.2719L12.5259 35.1379L0.5 28.1947L1 27.3287Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 21.5195L13.0259 28.4627L12.5259 29.3287L0.5 22.3855L1 21.5195Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 15.7103L13.0259 22.6535L12.5259 23.5195L0.5 16.5763L1 15.7103Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 9.90109L13.0259 16.8443L12.5259 17.7103L0.5 10.7671L1 9.90109Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 4.09188L13.0259 11.0351L12.5259 11.9011L0.5 4.95791L1 4.09188Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 -1.71732L13.0259 5.22586L12.5259 6.09188L0.5 -0.851298L1 -1.71732Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 -7.52653L13.0259 -0.583351L12.5259 0.282675L0.5 -6.66051L1 -7.52653Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M0 131L0 -17H1L1 131H0Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M12 131L12 -17H13L13 131H12Z"
-          fill="#4765FF"
-        />
-      </g>
-      <rect
-        x="13"
-        y="25.5"
-        width="100"
-        height="60"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <mask
-        id="mask1_1922_1559"
-        // style="mask-type:alpha"
-        maskUnits="userSpaceOnUse"
-        x="113"
-        y="0"
-        width="13"
-        height="111"
-      >
-        <rect
-          x="113"
-          width="13"
-          height="111"
-          fill="url(#paint1_linear_1922_1559)"
-        />
-      </mask>
-      <g mask="url(#mask1_1922_1559)">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 44.7563L126.026 51.6995L125.526 52.5655L113.5 45.6224L114 44.7563Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 50.5655L126.026 57.5087L125.526 58.3747L113.5 51.4316L114 50.5655Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 56.3747L126.026 63.3179L125.526 64.1839L113.5 57.2408L114 56.3747Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 62.1839L126.026 69.1271L125.526 69.9931L113.5 63.05L114 62.1839Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 67.9931L126.026 74.9363L125.526 75.8023L113.5 68.8592L114 67.9931Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 73.8023L126.026 80.7455L125.526 81.6116L113.5 74.6684L114 73.8023Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 79.6115L126.026 86.5547L125.526 87.4208L113.5 80.4776L114 79.6115Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 85.4208L126.026 92.3639L125.526 93.23L113.5 86.2868L114 85.4208Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 91.23L126.026 98.1731L125.526 99.0392L113.5 92.096L114 91.23Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 97.0392L126.026 103.982L125.526 104.848L113.5 97.9052L114 97.0392Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 102.848L126.026 109.792L125.526 110.658L113.5 103.714L114 102.848Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 108.658L126.026 115.601L125.526 116.467L113.5 109.524L114 108.658Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 38.9471L126.026 45.8903L125.526 46.7563L113.5 39.8131L114 38.9471Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 33.1379L126.026 40.0811L125.526 40.9471L113.5 34.0039L114 33.1379Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 27.3287L126.026 34.2719L125.526 35.1379L113.5 28.1947L114 27.3287Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 21.5195L126.026 28.4627L125.526 29.3287L113.5 22.3855L114 21.5195Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 15.7103L126.026 22.6535L125.526 23.5195L113.5 16.5763L114 15.7103Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 9.90109L126.026 16.8443L125.526 17.7103L113.5 10.7671L114 9.90109Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 4.09188L126.026 11.0351L125.526 11.9011L113.5 4.95791L114 4.09188Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 -1.71732L126.026 5.22586L125.526 6.09188L113.5 -0.851298L114 -1.71732Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M114 -7.52653L126.026 -0.583351L125.526 0.282675L113.5 -6.66051L114 -7.52653Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M113 131L113 -17H114L114 131H113Z"
-          fill="#4765FF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M125 131L125 -17H126L126 131H125Z"
-          fill="#4765FF"
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_1922_1559"
-          x1="6.5"
-          y1="0"
-          x2="6.5"
-          y2="111"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.05" stop-color="white" stop-opacity="0" />
-          <stop offset="0.2" stop-color="white" />
-          <stop offset="0.8" stop-color="white" />
-          <stop offset="1" stop-color="white" stop-opacity="0" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_1922_1559"
-          x1="119.5"
-          y1="0"
-          x2="119.5"
-          y2="111"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.05" stop-color="white" stop-opacity="0" />
-          <stop offset="0.2" stop-color="white" />
-          <stop offset="0.8" stop-color="white" />
-          <stop offset="1" stop-color="white" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
deleted file mode 100644
index 5527d1f3e2..0000000000
--- a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const GridSvg = () => {
-  return (
-    <svg
-      width="166"
-      height="61"
-      viewBox="0 0 166 61"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="0.5"
-        width="52"
-        height="61"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M53.5 30L64.5 30V31L53.5 31L53.5 30Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M64.5 24.5C64.5 24.2239 64.7239 24 65 24C65.2761 24 65.5 24.2239 65.5 24.5L65.5 36.5C65.5 36.7761 65.2761 37 65 37C64.7239 37 64.5 36.7761 64.5 36.5L64.5 24.5Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M52.5 24.5C52.5 24.2239 52.7239 24 53 24C53.2761 24 53.5 24.2239 53.5 24.5L53.5 36.5C53.5 36.7761 53.2761 37 53 37C52.7239 37 52.5 36.7761 52.5 36.5L52.5 24.5Z"
-        fill="#4765FF"
-      />
-      <rect
-        x="65.5"
-        y="0.5"
-        width="100"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M115 36.5L115 25.5L116 25.5L116 36.5L115 36.5Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M109.5 25.5C109.224 25.5 109 25.2761 109 25V25C109 24.7239 109.224 24.5 109.5 24.5L121.5 24.5C121.776 24.5 122 24.7239 122 25V25C122 25.2761 121.776 25.5 121.5 25.5L109.5 25.5Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M109.5 36.5C109.224 36.5 109 36.2761 109 36V36C109 35.7239 109.224 35.5 109.5 35.5L121.5 35.5C121.776 35.5 122 35.7239 122 36V36C122 36.2761 121.776 36.5 121.5 36.5L109.5 36.5Z"
-        fill="#4765FF"
-      />
-      <rect
-        x="65.5"
-        y="36.5"
-        width="100"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-    </svg>
-  );
-};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
deleted file mode 100644
index fadb9bfc1b..0000000000
--- a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const InlineSvg = () => {
-  return (
-    <svg
-      width="159"
-      height="56"
-      viewBox="0 0 159 56"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="24" height="24" rx="4" fill="black" fill-opacity="0.06" />
-      <rect
-        x="32"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <rect
-        x="64"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <rect
-        x="96"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <rect
-        x="128"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <rect
-        y="32"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <rect
-        x="32"
-        y="32"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <rect
-        x="64"
-        y="32"
-        width="24"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <path
-        d="M12 12H138.811C141.238 12 141.569 15.5106 139.185 15.9647L12.8145 40.0353C10.4306 40.4894 10.762 44 13.1888 44H77"
-        stroke="#4765FF"
-      />
-    </svg>
-  );
-};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
deleted file mode 100644
index aeda998d2e..0000000000
--- a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const StackSvg = () => {
-  return (
-    <svg
-      width="100"
-      height="96"
-      viewBox="0 0 100 96"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="100" height="24" rx="4" fill="black" fill-opacity="0.06" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M49.5 36L49.5 25L50.5 25L50.5 36L49.5 36Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M44 25C43.7239 25 43.5 24.7761 43.5 24.5V24.5C43.5 24.2239 43.7239 24 44 24L56 24C56.2761 24 56.5 24.2239 56.5 24.5V24.5C56.5 24.7761 56.2761 25 56 25L44 25Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M44 36C43.7239 36 43.5 35.7761 43.5 35.5V35.5C43.5 35.2239 43.7239 35 44 35L56 35C56.2761 35 56.5 35.2239 56.5 35.5V35.5C56.5 35.7761 56.2761 36 56 36L44 36Z"
-        fill="#4765FF"
-      />
-      <rect
-        y="36"
-        width="100"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M49.5 72L49.5 61L50.5 61L50.5 72L49.5 72Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M44 61C43.7239 61 43.5 60.7761 43.5 60.5V60.5C43.5 60.2239 43.7239 60 44 60L56 60C56.2761 60 56.5 60.2239 56.5 60.5V60.5C56.5 60.7761 56.2761 61 56 61L44 61Z"
-        fill="#4765FF"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M44 72C43.7239 72 43.5 71.7761 43.5 71.5V71.5C43.5 71.2239 43.7239 71 44 71L56 71C56.2761 71 56.5 71.2239 56.5 71.5V71.5C56.5 71.7761 56.2761 72 56 72L44 72Z"
-        fill="#4765FF"
-      />
-      <rect
-        y="72"
-        width="100"
-        height="24"
-        rx="4"
-        fill="black"
-        fill-opacity="0.06"
-      />
-    </svg>
-  );
-};
diff --git a/packages/canon/docs/components/PropsTable/PropsTable.tsx b/packages/canon/docs/components/PropsTable/PropsTable.tsx
deleted file mode 100644
index a3dc9e271c..0000000000
--- a/packages/canon/docs/components/PropsTable/PropsTable.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import * as Table from '..';
-import { Chip } from '..';
-
-// Modify the PropsTable component to accept a generic type
-export const PropsTable = <T extends Record<string, any>>({
-  data,
-}: {
-  data: T;
-}) => {
-  return (
-    <Table.Root>
-      <Table.Header>
-        <Table.HeaderRow>
-          <Table.HeaderCell>Prop</Table.HeaderCell>
-          <Table.HeaderCell>Type</Table.HeaderCell>
-          <Table.HeaderCell>Responsive</Table.HeaderCell>
-        </Table.HeaderRow>
-      </Table.Header>
-      <Table.Body>
-        {Object.keys(data).map(n => (
-          <Table.Row key={n}>
-            <Table.Cell>
-              <Chip head>{n}</Chip>
-            </Table.Cell>
-            <Table.Cell>
-              {Array.isArray(data[n].type) ? (
-                data[n].type.map((t: any) => <Chip key={t}>{t}</Chip>)
-              ) : (
-                <Chip>{data[n].type}</Chip>
-              )}
-            </Table.Cell>
-            <Table.Cell>
-              <Chip>{data[n].responsive ? 'Yes' : 'No'}</Chip>
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table.Root>
-  );
-};
diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts
deleted file mode 100644
index 5773eaeb27..0000000000
--- a/packages/canon/docs/components/PropsTable/getProps.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export function getProps(styles: Record<string, any>) {
-  return Object.keys(styles).reduce(
-    (acc: Record<string, { type: any[]; responsive: boolean }>, n) => {
-      const style = styles[n];
-
-      let values: string[] = [];
-
-      if (style.values) {
-        // If values exist, use them
-        values = Object.keys(style.values);
-      } else if (style.mappings && style.mappings.length > 0) {
-        // If mappings exist, use the first mapping's values
-        const firstMapping = style.mappings[0];
-        values = Object.keys(styles[firstMapping].values);
-      } else {
-        // Default to an empty array if neither values nor mappings exist
-        values = [];
-      }
-
-      acc[n] = {
-        type: values,
-        responsive: true,
-      };
-      return acc;
-    },
-    {} as Record<string, { type: string[]; responsive: boolean }>,
-  );
-}
diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts
deleted file mode 100644
index 181933f0f8..0000000000
--- a/packages/canon/docs/components/PropsTable/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { PropsTable } from './PropsTable';
-export { getProps } from './getProps';
diff --git a/packages/canon/docs/components/Roadmap/Roadmap.tsx b/packages/canon/docs/components/Roadmap/Roadmap.tsx
deleted file mode 100644
index 2177ea558f..0000000000
--- a/packages/canon/docs/components/Roadmap/Roadmap.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { RoadmapItem } from './list';
-
-export const Roadmap = ({ list }: { list: RoadmapItem[] }) => {
-  const orderList = ['inProgress', 'notStarted', 'completed'];
-  return (
-    <div className="roadmap">
-      {list
-        .sort(
-          (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status),
-        )
-        .map(Item)}
-    </div>
-  );
-};
-
-const Item = ({
-  title,
-  status = 'notStarted',
-}: {
-  title: string;
-  status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
-}) => {
-  return (
-    <div className={['roadmap-item', status].join(' ')}>
-      <div className="left">
-        <div className="dot" />
-        <div className="title">{title}</div>
-      </div>
-      <span className="pill">
-        {status === 'notStarted' && 'Not Started'}
-        {status === 'inProgress' && 'In Progress'}
-        {status === 'inReview' && 'Ready for Review'}
-        {status === 'completed' && 'Completed'}
-      </span>
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts
deleted file mode 100644
index ac51dfa1ed..0000000000
--- a/packages/canon/docs/components/Roadmap/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Roadmap } from './Roadmap';
diff --git a/packages/canon/docs/components/Roadmap/list.ts b/packages/canon/docs/components/Roadmap/list.ts
deleted file mode 100644
index d5f436281a..0000000000
--- a/packages/canon/docs/components/Roadmap/list.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export type RoadmapItem = {
-  title: string;
-  status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
-};
-
-export const list: RoadmapItem[] = [
-  {
-    title: 'Remove Vanilla Extract and use pure CSS instead',
-    status: 'inProgress',
-  },
-  {
-    title: 'Add collapsing across breakpoints for the Inline component',
-    status: 'notStarted',
-  },
-  {
-    title: 'Add reversing the order for the Inline component',
-    status: 'notStarted',
-  },
-  {
-    title: 'Set up Storybook',
-    status: 'completed',
-  },
-  {
-    title: 'Set up iconography',
-    status: 'completed',
-  },
-  {
-    title: 'Set up global tokens',
-    status: 'inProgress',
-  },
-  {
-    title: 'Set up theming system',
-    status: 'inProgress',
-  },
-  {
-    title: 'Create first pass at box component',
-    status: 'completed',
-  },
-  {
-    title: 'Create first pass at stack component',
-    status: 'completed',
-  },
-  {
-    title: 'Create first pass at inline component',
-    status: 'completed',
-  },
-];
diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css
deleted file mode 100644
index 63f32312e7..0000000000
--- a/packages/canon/docs/components/Roadmap/styles.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.roadmap {
-  display: flex;
-  flex-direction: column;
-}
-
-.roadmap .roadmap-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e0e0e0;
-  padding: 8px 0px;
-}
-
-.roadmap .roadmap-item .left {
-  display: flex;
-  align-items: center;
-  padding-left: 12px;
-  gap: 12px;
-}
-
-.roadmap .roadmap-item .dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #e0e0e0;
-}
-
-.roadmap .roadmap-item.notStarted {
-  color: #000;
-}
-
-.roadmap .roadmap-item.inProgress {
-  color: #000;
-}
-
-.roadmap .roadmap-item.inReview {
-  color: #000;
-}
-
-.roadmap .roadmap-item.completed .title {
-  color: #a2a2a2;
-  text-decoration: line-through;
-}
-
-.roadmap .roadmap-item.notStarted .dot {
-  background-color: #d1d1d1;
-}
-
-.roadmap .roadmap-item.inProgress .dot {
-  background-color: #ffd000;
-}
-
-.roadmap .roadmap-item.inReview .dot {
-  background-color: #4ed14a;
-}
-
-.roadmap .roadmap-item.completed .dot {
-  background-color: #4ed14a;
-}
-
-.roadmap .roadmap-item .title {
-  font-size: 16px;
-}
-
-.roadmap .roadmap-item .pill {
-  display: inline-flex;
-  align-items: center;
-  height: 24px;
-  padding: 0px 8px;
-  border-radius: 40px;
-  font-size: 12px;
-  font-weight: 600;
-  margin-left: 8px;
-  border-style: solid;
-  border-width: 1px;
-}
-
-.roadmap .roadmap-item.notStarted .pill {
-  background-color: #f2f2f2;
-  border-color: #cdcdcd;
-  color: #888888;
-}
-
-.roadmap .roadmap-item.inProgress .pill {
-  background-color: #fff2b9;
-  border-color: #ffd000;
-  color: #d79927;
-}
-
-.roadmap .roadmap-item.inReview .pill {
-  background-color: #d7f9d7;
-  border-color: #4ed14a;
-  color: #3a9837;
-}
-
-.roadmap .roadmap-item.completed .pill {
-  background-color: #d7f9d7;
-  border-color: #4ed14a;
-  color: #3a9837;
-}
diff --git a/packages/canon/docs/components/Table/Table.tsx b/packages/canon/docs/components/Table/Table.tsx
deleted file mode 100644
index 74a26a89af..0000000000
--- a/packages/canon/docs/components/Table/Table.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-export const Root = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div className="sb-table-wrapper">
-      <table className="sb-table">{children}</table>
-    </div>
-  );
-};
-
-export const Header = ({ children }: { children: React.ReactNode }) => {
-  return <thead>{children}</thead>;
-};
-
-export const Body = ({ children }: { children: React.ReactNode }) => {
-  return <tbody>{children}</tbody>;
-};
-
-export const HeaderRow = ({ children }: { children: React.ReactNode }) => {
-  return <tr>{children}</tr>;
-};
-
-export const HeaderCell = ({ children }: { children: React.ReactNode }) => {
-  return <th className="sb-table-cell sb-table-header-cell">{children}</th>;
-};
-
-export const Row = ({ children }: { children: React.ReactNode }) => {
-  return <tr className="sb-table-row">{children}</tr>;
-};
-
-export const Cell = ({ children }: { children: React.ReactNode }) => {
-  return <td className="sb-table-cell">{children}</td>;
-};
diff --git a/packages/canon/docs/components/Table/index.ts b/packages/canon/docs/components/Table/index.ts
deleted file mode 100644
index 7419aa83a8..0000000000
--- a/packages/canon/docs/components/Table/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table';
diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css
deleted file mode 100644
index ed56774a85..0000000000
--- a/packages/canon/docs/components/Table/styles.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.sb-table-wrapper {
-  border: 1px solid #e7e7e7;
-  border-radius: 4px;
-  overflow: hidden;
-
-  & .sb-table {
-    width: 100%;
-    margin: 0 !important;
-    padding: 0 !important;
-    border-spacing: 0px;
-    border-collapse: collapse;
-  }
-
-  & .sb-table-cell {
-    padding: 12px 16px !important;
-    border: none !important;
-    text-align: left;
-    background-color: white !important;
-    font-size: 16px;
-
-    & p {
-      margin: 0;
-    }
-  }
-
-  & .sb-table-header-cell {
-    background-color: #f5f5f5 !important;
-    border-bottom: 1px solid #e7e7e7 !important;
-    font-weight: 500;
-    font-size: 14px;
-  }
-
-  & .sb-table-row {
-    border: none;
-    border-bottom: 1px solid #e7e7e7;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  & .sb-table-chip {
-    display: inline-block;
-    font-size: 14px !important;
-    border: 1px solid #e7e7e7;
-    border-radius: 6px;
-    padding: 0px 6px;
-    height: 24px;
-  }
-
-  & .sb-table-type {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    gap: 8px;
-  }
-}
diff --git a/packages/canon/docs/components/Text/Text.tsx b/packages/canon/docs/components/Text/Text.tsx
deleted file mode 100644
index 90804b7da7..0000000000
--- a/packages/canon/docs/components/Text/Text.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-export const Text = ({
-  children,
-  style,
-}: {
-  children: React.ReactNode;
-  style?: React.CSSProperties;
-}) => {
-  return (
-    <div className="sb-text" style={style}>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/canon/docs/components/Text/index.ts b/packages/canon/docs/components/Text/index.ts
deleted file mode 100644
index 873fca2c76..0000000000
--- a/packages/canon/docs/components/Text/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Text } from './Text';
diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css
deleted file mode 100644
index b1bc40a1ac..0000000000
--- a/packages/canon/docs/components/Text/styles.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.sb-text {
-  font-size: 16px;
-  line-height: 28px;
-  margin: 0;
-  margin-bottom: 16px;
-  color: #4f4f4f;
-
-  & p {
-    font-size: 16px;
-    line-height: 28px;
-    margin: 0;
-  }
-
-  & code {
-    font-size: 13px;
-    color: #215cff;
-    background-color: #f1f3fc;
-    padding: 4px 4px;
-    border-radius: 4px;
-  }
-
-  & a {
-    color: #215cff;
-    text-decoration: none;
-    border-bottom: 1px solid #215cff;
-  }
-}
diff --git a/packages/canon/docs/components/Title/Title.tsx b/packages/canon/docs/components/Title/Title.tsx
deleted file mode 100644
index 59fefad8f9..0000000000
--- a/packages/canon/docs/components/Title/Title.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-export const Title = ({
-  children,
-  style,
-  type = 'h1',
-}: {
-  children: React.ReactNode;
-  style?: React.CSSProperties;
-  type?: 'h1' | 'h2' | 'h3';
-}) => {
-  let Component = 'h1';
-  if (type === 'h1') Component = 'h1';
-  if (type === 'h2') Component = 'h2';
-  if (type === 'h3') Component = 'h3';
-
-  return React.createElement(Component, {
-    className: `sb-title ${type}`,
-    style,
-    children,
-  });
-};
diff --git a/packages/canon/docs/components/Title/index.ts b/packages/canon/docs/components/Title/index.ts
deleted file mode 100644
index 998dc81882..0000000000
--- a/packages/canon/docs/components/Title/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export { Title } from './Title';
diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css
deleted file mode 100644
index 61e99e20b3..0000000000
--- a/packages/canon/docs/components/Title/styles.css
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.sb-title {
-  margin: 0;
-  font-weight: 500;
-  border: none;
-
-  &.h1 {
-    font-size: 36px;
-    line-height: 44px;
-    margin-bottom: 24px;
-    margin-top: 0px;
-  }
-
-  &.h2 {
-    font-size: 24px;
-    line-height: 32px;
-    margin-bottom: 12px;
-    margin-top: 52px;
-  }
-
-  &.h3 {
-    font-size: 20px;
-    line-height: 28px;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-}
diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts
deleted file mode 100644
index 0e5ff2e325..0000000000
--- a/packages/canon/docs/components/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from './Banner';
-export * from './Chip';
-export * from './Columns';
-export * from './ComponentStatus';
-export * from './IconLibrary';
-export * from './LayoutComponents';
-export * from './PropsTable';
-export * from './Roadmap';
-export * from './Table';
-export * from './Text';
-export * from './Title';
diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css
deleted file mode 100644
index 706b1626b3..0000000000
--- a/packages/canon/docs/components/styles.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.sbdocs-content {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-}
-
-@import './Banner/styles.css';
-@import './Chip/styles.css';
-@import './Columns/styles.css';
-@import './ComponentStatus/styles.css';
-@import './IconLibrary/styles.css';
-@import './LayoutComponents/styles.css';
-@import './Roadmap/styles.css';
-@import './Table/styles.css';
-@import './Text/styles.css';
-@import './Title/styles.css';
diff --git a/packages/canon/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts
deleted file mode 100644
index 3eb6961bc1..0000000000
--- a/packages/canon/docs/spaceProps.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export const spacePropsList = [
-  'margin',
-  'marginBottom',
-  'marginLeft',
-  'marginRight',
-  'marginTop',
-  'marginX',
-  'marginY',
-  'padding',
-  'paddingBottom',
-  'paddingLeft',
-  'paddingRight',
-  'paddingTop',
-  'paddingX',
-  'paddingY',
-].reduce(
-  (acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => {
-    acc[prop] = {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    };
-    return acc;
-  },
-  {},
-);
diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
deleted file mode 100644
index ee30e17305..0000000000
--- a/packages/canon/src/components/Box/Docs.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
-import * as BoxStories from './Box.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components';
-import { spacePropsList } from '../../../docs/spaceProps';
-
-<Meta of={BoxStories} />
-
-<Unstyled>
-
-<Title type="h1">Box</Title>
-<Text>
-  Box is the lowest-level component in Canon. We use it internally to build all
-  of our components. It provides a consistent API for styling and layout.
-</Text>
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Box } from "@backstage/canon";
-
-<Box>Hello World!</Box>
-`} language="tsx" dark />
-
-<Title type="h2">API reference</Title>
-
-<Title type="h3">Box</Title>
-<Text>
-  This is the Box component, our lowest-level component. Here are all the
-  available properties.
-</Text>
-
-<PropsTable
-  data={{
-    alignItems: {
-      type: ['stretch', 'start', 'center', 'end'],
-      responsive: true,
-    },
-    border: {
-      type: ['none', 'base', 'error', 'warning', 'selected'],
-      responsive: true,
-    },
-    borderRadius: {
-      type: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    display: {
-      type: ['none', 'flex', 'block', 'inline'],
-      responsive: true,
-    },
-    flexDirection: {
-      type: ['row', 'column'],
-      responsive: true,
-    },
-    flexWrap: {
-      type: ['wrap', 'nowrap', 'wrap-reverse'],
-      responsive: true,
-    },
-    gap: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    justifyContent: {
-      type: ['stretch', 'start', 'center', 'end', 'around', 'between'],
-      responsive: true,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-<Text style={{ marginTop: '16px' }}>
-  Padding and margin are used to create space around your component using our
-  predefined spacing tokens. We would recommend to use padding over margin to
-  avoid collapsing margins but both are available.
-</Text>
-
-<Canvas of={BoxStories.Padding} />
-
-<PropsTable data={spacePropsList} />
-
-<Title type="h2">Examples</Title>
-<Text>Here are some examples of how you can use the Box component.</Text>
-
-<Title type="h3">Simple example</Title>
-<Text>A simple example of how to use the Box component.</Text>
-<Source
-  code={`<Box padding="md" borderRadius="md">Hello World</Box>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive</Title>
-<Text>
-  Most of the values can be defined per breakpoint, making it easy to create
-  responsive designs.
-</Text>
-<Source
-  code={`<Box padding={{ xs: 'sm', md: 'md' }} borderRadius={{ xs: 'sm', md: 'md' }}>Hello World</Box>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
deleted file mode 100644
index e4b069cbcd..0000000000
--- a/packages/canon/src/components/Button/Docs.mdx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
-import * as ButtonStories from './Button.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-
-<Meta of={ButtonStories} />
-
-<Unstyled>
-
-<Title type="h1">Button</Title>
-<Text>A button component that can be used to trigger actions.</Text>
-
-<Canvas of={ButtonStories.Primary} />
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Button } from "@backstage/canon";
-
-<Button>Click me</Button>
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    size: {
-      type: ['small', 'medium'],
-      responsive: true,
-    },
-    variant: {
-      type: ['primary', 'secondary', 'tertiary'],
-      responsive: true,
-    },
-    disabled: {
-      type: 'boolean',
-      responsive: false,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-<Title type="h2">Examples</Title>
-
-<Title type="h3">Variants</Title>
-<Text>Here's a view when buttons have different variants.</Text>
-
-<Canvas of={ButtonStories.Variants} />
-
-<Source
-  code={`<Inline alignY="center">
-  <Button variant="primary">Primary</Button>
-  <Button variant="secondary">Secondary</Button>
-  <Button variant="tertiary">Tertiary</Button>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Sizes</Title>
-<Text>Here's a view when buttons have different sizes.</Text>
-
-<Canvas of={ButtonStories.Sizes} />
-
-<Source
-  code={`<Inline alignY="center">
-  <Button size="medium">Medium</Button>
-  <Button size="small">Small</Button>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">With Icons</Title>
-<Text>Here's a view when buttons have icons.</Text>
-
-<Canvas of={ButtonStories.WithIcons} />
-
-<Source
-  code={`<Inline alignY="center">
-  <Button iconStart="cloud">Button</Button>
-  <Button iconEnd="chevronRight">Button</Button>
-  <Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Full width</Title>
-<Text>Here's a view when buttons are full width.</Text>
-
-<Canvas of={ButtonStories.FullWidth} />
-
-<Source
-  code={`<Stack style={{ width: '300px' }}>
-  <Button iconStart="cloud">Button</Button>
-  <Button iconEnd="chevronRight">Button</Button>
-  <Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Disabled</Title>
-<Text>Here's a view when buttons are disabled.</Text>
-
-<Canvas of={ButtonStories.Disabled} />
-
-<Source code={`<Button disabled>Button</Button>`} language="tsx" dark />
-
-<Title type="h3">Responsive</Title>
-<Text>Here's a view when buttons are responsive.</Text>
-
-<Canvas of={ButtonStories.Responsive} />
-
-<Source
-  code={`<Button variant={{ xs: 'primary', sm: 'secondary', md: 'tertiary' }} size={{ xs: 'small', sm: 'medium' }}>
-  Button
-</Button>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx
deleted file mode 100644
index 12e13abf03..0000000000
--- a/packages/canon/src/components/Checkbox/Docs.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
-import * as CheckboxStories from './Checkbox.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components/PropsTable';
-
-<Meta of={CheckboxStories} />
-
-<Unstyled>
-
-<Title type="h1">Checkbox</Title>
-<Text>A checkbox component that can be used to trigger actions.</Text>
-
-<Canvas of={CheckboxStories.Primary} />
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Checkbox } from "@backstage/canon";
-
-<Checkbox label="Checkbox" />
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    label: {
-      type: 'string',
-      responsive: false,
-    },
-    defaultChecked: {
-      type: ['boolean', "'indeterminate'"],
-      responsive: false,
-    },
-    checked: {
-      type: ['boolean', "'indeterminate'"],
-      responsive: false,
-    },
-    onChange: {
-      type: "(checked: boolean | 'indeterminate') => void",
-      responsive: false,
-    },
-    disabled: {
-      type: 'boolean',
-      responsive: false,
-    },
-    required: {
-      type: 'boolean',
-      responsive: false,
-    },
-    name: {
-      type: 'string',
-      responsive: false,
-    },
-    value: {
-      type: 'string',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
deleted file mode 100644
index 05a0600813..0000000000
--- a/packages/canon/src/components/Container/Docs.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Meta, Unstyled, Source } from '@storybook/blocks';
-import * as ContainerStories from './Container.stories';
-import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacePropsList } from '../../../docs/spaceProps';
-
-<Meta of={ContainerStories} />
-
-<Unstyled>
-
-<Title type="h1">Container</Title>
-
-<Text>
-  The container component let you use our default max-width and center the
-  content on the page.
-</Text>
-
-<Title type="h2">Usage</Title>
-<Source
-  code={`import { Container } from "@backstage/canon";
-
-<Container>Hello World!</Container>
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    marginY: {
-      type: spacePropsList.marginY.type,
-      responsive: spacePropsList.marginY.responsive,
-    },
-    marginBottom: {
-      type: spacePropsList.marginBottom.type,
-      responsive: spacePropsList.marginBottom.responsive,
-    },
-    marginTop: {
-      type: spacePropsList.marginTop.type,
-      responsive: spacePropsList.marginTop.responsive,
-    },
-    paddingY: {
-      type: spacePropsList.paddingY.type,
-      responsive: spacePropsList.paddingY.responsive,
-    },
-    paddingBottom: {
-      type: spacePropsList.paddingBottom.type,
-      responsive: spacePropsList.paddingBottom.responsive,
-    },
-    paddingTop: {
-      type: spacePropsList.paddingTop.type,
-      responsive: spacePropsList.paddingTop.responsive,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-<Title type="h2">Examples</Title>
-
-<Title type="h3">Simple</Title>
-<Text>A simple example of how to use the Container component.</Text>
-
-<Source
-  code={`<Container>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Container>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive padding & margin</Title>
-<Text>
-  The Container component also supports responsive values, making it easy to
-  create responsive designs.
-</Text>
-<Source
-  code={`<Container paddingY={{ xs: 'sm', md: 'md' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Container>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
deleted file mode 100644
index c1a0237279..0000000000
--- a/packages/canon/src/components/Grid/Docs.mdx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
-import * as GridStories from './Grid.stories';
-import { Title, Text, PropsTable } from '../../../docs/components';
-import { spacePropsList } from '../../../docs/spaceProps';
-
-<Meta of={GridStories} />
-
-<Unstyled>
-
-<Title type="h1">Grid</Title>
-<Text>
-  A layout component that helps to create simple column-based layouts as well as
-  more complex ones.
-</Text>
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Grid } from "@backstage/canon";
-
-<Grid>
-  <Grid.Item>Hello World</Grid.Item>
-</Grid>
-`} language="tsx" dark />
-
-<Title type="h2">API reference</Title>
-
-<Title type="h3">Grid</Title>
-<Text>
-  This is the grid container component. It will help to define the number of
-  columns that will be used in the grid. You can also define the gap between the
-  columns. All values are responsive.
-</Text>
-
-<PropsTable
-  data={{
-    columns: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
-      responsive: true,
-    },
-    gap: {
-      type: ['xs', 'sm', 'md', 'lg', 'xl'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      required: false,
-    },
-    className: {
-      type: 'string',
-      required: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      required: false,
-    },
-  }}
-/>
-
-<Text style={{ marginTop: '16px' }}>
-  The grid component also accepts all the spacing props from the Box component.
-</Text>
-
-<PropsTable data={spacePropsList} />
-
-<Title type="h3">Grid Item</Title>
-<Text>
-  If you need more control over the columns, you can use the grid item
-  component. This will give you access to `rowSpan`, `colSpan`, `start` and
-  `end`. All values are responsive. This component is optional, you can use any
-  elements directly if you prefer.
-</Text>
-
-<PropsTable
-  data={{
-    colSpan: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
-      responsive: true,
-    },
-    rowSpan: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'],
-      responsive: true,
-    },
-    start: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
-      responsive: true,
-    },
-    end: {
-      type: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      required: false,
-    },
-    className: {
-      type: 'string',
-      required: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      required: false,
-    },
-  }}
-/>
-
-<Title type="h2">Examples</Title>
-
-<Title type="h3">Simple grid</Title>
-<Text>This is a simple grid with 3 columns and a gap of md.</Text>
-<Source
-  code={`<Grid columns={3} gap="md">
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Grid>
-`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Complex grid</Title>
-<Text>
-  You can also use the grid item to create more complex layouts. In this example
-  the first column will span 1 column and the second column will span 2 columns.
-</Text>
-
-<Source
-  code={`<Grid columns={3} gap="md">
-  <Grid.Item colSpan={1}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-</Grid>
-`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Mixing rows and columns</Title>
-<Text>
-  The grid item component also supports the `rowSpan` prop, which allows you to
-  span multiple rows within the grid layout. In this example, the first item
-  will span 2 rows to achieve a dynamic and flexible grid structure.
-</Text>
-
-<Source
-  code={`<Grid columns={3} gap="md">
-  <Grid.Item colSpan={1} rowSpan={2}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={2}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-</Grid>
-`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive</Title>
-<Text>
-  The grid component also supports responsive values. In this example the grid
-  will have 1 column on small screens and 3 on large screens, with a gap of xs
-  on small screens and md on large screens.
-</Text>
-<Source
-  code={`<Grid columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
-  <Grid.Item colSpan={{ xs: 1, md: 2 }}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-  <Grid.Item colSpan={{ xs: 1, md: 1 }}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-</Grid>
-`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Start and End</Title>
-<Text>
-  The start and end props can be used to position the item in the grid.
-</Text>
-<Source
-  code={`<Grid columns={3} gap="md">
-  <Grid.Item start={2} end={4}>
-    <Box>Hello World</Box>
-  </Grid.Item>
-</Grid>
-`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Heading/Docs.mdx b/packages/canon/src/components/Heading/Docs.mdx
deleted file mode 100644
index dd64bd59b2..0000000000
--- a/packages/canon/src/components/Heading/Docs.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
-import * as HeadingStories from './Heading.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-
-<Meta of={HeadingStories} />
-
-<Unstyled>
-
-<Title type="h1">Heading</Title>
-
-<Text>Headings are used to structure the content of your page.</Text>
-
-<Canvas of={HeadingStories.Title1} />
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Heading } from "@backstage/canon";
-
-<Heading variant="title1">Hello World!</Heading>
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    variant: {
-      type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-<Title type="h2">Examples</Title>
-<Text>Here are some examples of how you can use the Heading component.</Text>
-
-<Title type="h3">All variants</Title>
-<Text>
-  The `Heading` component has a `variant` prop that can be used to change the
-  appearance of the heading.
-</Text>
-
-<Canvas of={HeadingStories.AllVariants} />
-
-<Source
-  code={`<Stack gap="md">
-  <Heading variant="title1">Title 1 Lorem ipsum dolor sit amet consectetur...</Heading>
-  <Heading variant="title2">Title 2 Lorem ipsum dolor sit amet consectetur...</Heading>
-  <Heading variant="title3">Title 3 Lorem ipsum dolor sit amet consectetur...</Heading>
-  <Heading variant="title4">Title 4 Lorem ipsum dolor sit amet consectetur...</Heading>
-  <Heading variant="title5">Title 5 Lorem ipsum dolor sit amet consectetur...</Heading>
-  <Heading variant="display">Display Lorem ipsum dolor sit amet consectetur...</Heading>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive</Title>
-<Text>
-  You can also use the `variant` prop to change the appearance of the text based
-  on the screen size.
-</Text>
-
-<Source
-  code={`<Heading variant={{ xs: 'title1', md: 'title2' }}>Responsive Lorem ipsum dolor sit amet consectetur...</Heading>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx
deleted file mode 100644
index 463fe60133..0000000000
--- a/packages/canon/src/components/Icon/Docs.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
-import * as IconStories from './Icon.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-import { defaultIcons } from './icons';
-
-<Meta of={IconStories} />
-
-<Unstyled>
-
-<Title type="h1">Icon</Title>
-
-<Text>Icons are used to represent an action or a state.</Text>
-
-<Canvas of={IconStories.Primary} />
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Icon } from "@backstage/canon";
-
-<Icon name="icon-name" />
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    name: {
-      type: Object.keys(defaultIcons),
-      responsive: false,
-    },
-    size: {
-      type: 'number',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx
deleted file mode 100644
index 7671122966..0000000000
--- a/packages/canon/src/components/Inline/Docs.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Meta, Unstyled, Source } from '@storybook/blocks';
-import * as InlineStories from './Inline.stories';
-import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacePropsList } from '../../../docs/spaceProps';
-
-<Meta of={InlineStories} />
-
-<Unstyled>
-
-<Title type="h1">Inline</Title>
-
-<Text>
-  The Inline component is used to create a horizontal layout of elements. By
-  default it uses flex and flexWrap to make sure that your content always flows
-  responsively.
-</Text>
-
-<Title type="h2">Usage</Title>
-<Source
-  code={`import { Inline } from "@backstage/canon";
-
-<Inline>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Inline>
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    align: {
-      type: 'start | center | end',
-      responsive: true,
-    },
-    alignY: {
-      type: 'start | center | end',
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-<Text style={{ marginTop: '16px' }}>
-  The grid component also accepts all the spacing props from the Box component.
-</Text>
-
-<PropsTable data={spacePropsList} />
-
-<Title type="h2">Examples</Title>
-
-<Title type="h3">Simple</Title>
-<Text>A simple example of how to use the Inline component.</Text>
-
-<Source
-  code={`<Inline>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive</Title>
-<Text>
-  The Inline component also supports responsive values, making it easy to create
-  responsive designs.
-</Text>
-<Source
-  code={`<Inline gap={{ xs: 'sm', md: 'md' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Align</Title>
-<Text>
-  The Inline component also supports responsive alignment, making it easy to
-  create responsive designs.
-</Text>
-<Source
-  code={`<Inline align={{ xs: 'left', md: 'center' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Align vertically</Title>
-<Text>
-  The Inline component also supports responsive vertical alignment, making it
-  easy to create responsive designs.
-</Text>
-<Source
-  code={`<Inline alignY={{ xs: 'top', md: 'center' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Inline>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
deleted file mode 100644
index 921618f49f..0000000000
--- a/packages/canon/src/components/Stack/Docs.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Meta, Unstyled, Source } from '@storybook/blocks';
-import * as StackStories from './Stack.stories';
-import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacePropsList } from '../../../docs/spaceProps';
-
-<Meta of={StackStories} />
-
-<Unstyled>
-
-<Title type="h1">Stack</Title>
-
-<Text>
-  This is the stack container component. It will help to define the number of
-  columns that will be used in the grid. You can also define the gap between the
-  columns. All values are responsive.
-</Text>
-
-<Title type="h2">Usage</Title>
-<Source
-  code={`import { Stack } from "@backstage/canon";
-
-<Stack>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Stack>
-`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    align: {
-      type: ['start', 'center', 'end'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      required: false,
-    },
-    className: {
-      type: 'string',
-      required: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      required: false,
-    },
-  }}
-/>
-
-<Text style={{ marginTop: '16px' }}>
-  The grid component also accepts all the spacing props from the Box component.
-</Text>
-
-<PropsTable data={spacePropsList} />
-
-<Title type="h2">Common questions</Title>
-
-<Title type="h3">Can I stack horizontally?</Title>
-<Text>
-  The Stack component only allows for stacking elements vertically. If you want
-  to create a column layout, please use the Grid component.
-</Text>
-
-<Source
-  code={`<Grid columns={3} gap="md">
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Grid>
-`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h2">Examples</Title>
-
-<Title type="h3">Simple</Title>
-<Text>
-  A simple example of how to use the Stack component with a medium gap.
-</Text>
-
-<Source
-  code={`<Stack gap="md">
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive</Title>
-<Text>
-  The Stack component also supports responsive values, making it easy to create
-  responsive designs.
-</Text>
-<Source
-  code={`<Stack gap={{ xs: 'sm', md: 'md' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Align</Title>
-<Text>
-  The Stack component also supports responsive alignment, making it easy to
-  create responsive designs.
-</Text>
-<Source
-  code={`<Stack align={{ xs: 'left', md: 'center' }}>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-  <Box>Hello World</Box>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>
diff --git a/packages/canon/src/components/Table/Docs.mdx b/packages/canon/src/components/Table/Docs.mdx
deleted file mode 100644
index 6a6e9c8a59..0000000000
--- a/packages/canon/src/components/Table/Docs.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Meta, Controls } from '@storybook/blocks';
-
-<Meta title="Components/Table" />
-
-# Table
diff --git a/packages/canon/src/components/Text/Docs.mdx b/packages/canon/src/components/Text/Docs.mdx
deleted file mode 100644
index 685a00a33f..0000000000
--- a/packages/canon/src/components/Text/Docs.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
-import * as TextStories from './Text.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-
-<Meta of={TextStories} />
-
-<Unstyled>
-
-<Title type="h1">Text</Title>
-
-<Text>The `Text` component is used to display content on your page.</Text>
-
-<Canvas of={TextStories.Default} />
-
-<Title type="h2">Usage</Title>
-<Source code={`import { Text } from "@backstage/canon";
-
-<Text>Hello World!</Text>`} language="tsx" dark />
-
-<Title type="h2" style={{ marginBottom: '16px' }}>
-  API reference
-</Title>
-
-<PropsTable
-  data={{
-    variant: {
-      type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
-      responsive: true,
-    },
-    weight: {
-      type: ['regular', 'bold'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
-
-<Title type="h2">Examples</Title>
-<Text>Here are some examples of how you can use the Text component.</Text>
-
-<Title type="h3">All variants</Title>
-<Text>
-  The `Text` component has a `variant` prop that can be used to change the
-  appearance of the text.
-</Text>
-
-<Canvas of={TextStories.AllVariants} />
-
-<Source
-  code={`<Stack gap="md">
-  <Text variant="subtitle">Subtitle Lorem ipsum dolor sit amet consectetur...</Text>
-  <Text variant="body">Body Lorem ipsum dolor sit amet consectetur...</Text>
-  <Text variant="caption">Caption Lorem ipsum dolor sit amet consectetur...</Text>
-  <Text variant="label">Label Lorem ipsum dolor sit amet consectetur...</Text>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">All weights</Title>
-<Text>
-  The `Text` component has a `weight` prop that can be used to change the
-  appearance of the text.
-</Text>
-
-<Canvas of={TextStories.AllWeights} />
-
-<Source
-  code={`<Stack gap="md">
-  <Text weight="regular">Regular Lorem ipsum dolor sit amet consectetur...</Text>
-  <Text weight="bold">Bold Lorem ipsum dolor sit amet consectetur...</Text>
-</Stack>`}
-  language="tsx"
-  dark
-/>
-
-<Title type="h3">Responsive</Title>
-<Text>
-  You can also use the `variant` prop to change the appearance of the text based
-  on the screen size.
-</Text>
-
-<Source
-  code={`<Text variant={{ xs: 'label', md: 'body' }}>Responsive Lorem ipsum dolor sit amet consectetur...</Text>`}
-  language="tsx"
-  dark
-/>
-
-</Unstyled>