diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts
index 41df32404b..5b0d20b9b5 100644
--- a/packages/canon/.storybook/main.ts
+++ b/packages/canon/.storybook/main.ts
@@ -14,8 +14,8 @@ function getAbsolutePath(value: string): any {
 const config: StorybookConfig = {
   stories: [
     '../docs/**/*.mdx',
-    '../src/components/**/*.mdx',
-    '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/components-new/**/*.mdx',
+    '../src/components-new/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   staticDirs: ['../static'],
   addons: [
diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx
index d2bda8cbf6..126ed19f01 100644
--- a/packages/canon/docs/Home.mdx
+++ b/packages/canon/docs/Home.mdx
@@ -1,5 +1,5 @@
 import { Unstyled } from '@storybook/blocks';
-import { Columns, Text, ComponentStatus, Banner } from './components';
+import { Columns, Text, ComponentStatus, Banner } from './components-new';
 
 <Unstyled>
 
diff --git a/packages/canon/docs/Layout.mdx b/packages/canon/docs/Layout.mdx
index 4f6672ca05..d19993e6d7 100644
--- a/packages/canon/docs/Layout.mdx
+++ b/packages/canon/docs/Layout.mdx
@@ -1,6 +1,6 @@
 import { Unstyled, Source } from '@storybook/blocks';
-import { Title, Text, LayoutComponents } from './components';
-import * as Table from './components/table';
+import { Title, Text, LayoutComponents } from './components-new';
+import * as Table from './components-new/Table';
 
 <Unstyled>
 
diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx
index 679208c317..646e4f8bbb 100644
--- a/packages/canon/docs/Theme.mdx
+++ b/packages/canon/docs/Theme.mdx
@@ -1,6 +1,6 @@
 import { Unstyled, Source } from '@storybook/blocks';
-import { Title, Text, Chip } from './components';
-import * as Table from './components/table';
+import { Title, Text, Chip } from './components-new';
+import * as Table from './components-new/Table';
 
 <Unstyled>
 
diff --git a/packages/canon/docs/components/banner/banner.css.ts b/packages/canon/docs/components-new/Banner/banner.css.ts
similarity index 100%
rename from packages/canon/docs/components/banner/banner.css.ts
rename to packages/canon/docs/components-new/Banner/banner.css.ts
diff --git a/packages/canon/docs/components/banner/index.tsx b/packages/canon/docs/components-new/Banner/index.tsx
similarity index 100%
rename from packages/canon/docs/components/banner/index.tsx
rename to packages/canon/docs/components-new/Banner/index.tsx
diff --git a/packages/canon/docs/components/chip/chip.css.ts b/packages/canon/docs/components-new/Chip/chip.css.ts
similarity index 100%
rename from packages/canon/docs/components/chip/chip.css.ts
rename to packages/canon/docs/components-new/Chip/chip.css.ts
diff --git a/packages/canon/docs/components/chip/index.tsx b/packages/canon/docs/components-new/Chip/index.tsx
similarity index 100%
rename from packages/canon/docs/components/chip/index.tsx
rename to packages/canon/docs/components-new/Chip/index.tsx
diff --git a/packages/canon/docs/components/columns/columns.css.ts b/packages/canon/docs/components-new/Columns/columns.css.ts
similarity index 100%
rename from packages/canon/docs/components/columns/columns.css.ts
rename to packages/canon/docs/components-new/Columns/columns.css.ts
diff --git a/packages/canon/docs/components/columns/index.tsx b/packages/canon/docs/components-new/Columns/index.tsx
similarity index 100%
rename from packages/canon/docs/components/columns/index.tsx
rename to packages/canon/docs/components-new/Columns/index.tsx
diff --git a/packages/canon/docs/components/component-status/component-status.css.ts b/packages/canon/docs/components-new/ComponentStatus/component-status.css.ts
similarity index 100%
rename from packages/canon/docs/components/component-status/component-status.css.ts
rename to packages/canon/docs/components-new/ComponentStatus/component-status.css.ts
diff --git a/packages/canon/docs/components/component-status/index.tsx b/packages/canon/docs/components-new/ComponentStatus/index.tsx
similarity index 100%
rename from packages/canon/docs/components/component-status/index.tsx
rename to packages/canon/docs/components-new/ComponentStatus/index.tsx
diff --git a/packages/canon/docs/components/layout-components/index.tsx b/packages/canon/docs/components-new/LayoutComponents/index.tsx
similarity index 100%
rename from packages/canon/docs/components/layout-components/index.tsx
rename to packages/canon/docs/components-new/LayoutComponents/index.tsx
diff --git a/packages/canon/docs/components/layout-components/layout-components.css.ts b/packages/canon/docs/components-new/LayoutComponents/layout-components.css.ts
similarity index 100%
rename from packages/canon/docs/components/layout-components/layout-components.css.ts
rename to packages/canon/docs/components-new/LayoutComponents/layout-components.css.ts
diff --git a/packages/canon/docs/components/table/index.tsx b/packages/canon/docs/components-new/Table/index.tsx
similarity index 100%
rename from packages/canon/docs/components/table/index.tsx
rename to packages/canon/docs/components-new/Table/index.tsx
diff --git a/packages/canon/docs/components/table/table.css.ts b/packages/canon/docs/components-new/Table/table.css.ts
similarity index 100%
rename from packages/canon/docs/components/table/table.css.ts
rename to packages/canon/docs/components-new/Table/table.css.ts
diff --git a/packages/canon/docs/components/text/index.tsx b/packages/canon/docs/components-new/Text/index.tsx
similarity index 100%
rename from packages/canon/docs/components/text/index.tsx
rename to packages/canon/docs/components-new/Text/index.tsx
diff --git a/packages/canon/docs/components/text/text.css.ts b/packages/canon/docs/components-new/Text/text.css.ts
similarity index 100%
rename from packages/canon/docs/components/text/text.css.ts
rename to packages/canon/docs/components-new/Text/text.css.ts
diff --git a/packages/canon/docs/components/title/index.tsx b/packages/canon/docs/components-new/Title/index.tsx
similarity index 100%
rename from packages/canon/docs/components/title/index.tsx
rename to packages/canon/docs/components-new/Title/index.tsx
diff --git a/packages/canon/docs/components/title/title.css.ts b/packages/canon/docs/components-new/Title/title.css.ts
similarity index 100%
rename from packages/canon/docs/components/title/title.css.ts
rename to packages/canon/docs/components-new/Title/title.css.ts
diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components-new/index.ts
similarity index 73%
rename from packages/canon/docs/components/index.ts
rename to packages/canon/docs/components-new/index.ts
index 265c5c06b6..6acc4910cb 100644
--- a/packages/canon/docs/components/index.ts
+++ b/packages/canon/docs/components-new/index.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-export * from './chip';
-export * from './table';
-export * from './title';
-export * from './text';
-export * from './columns';
-export * from './component-status';
-export * from './layout-components';
-export * from './banner';
+export * from './Chip';
+export * from './Table';
+export * from './Title';
+export * from './Text';
+export * from './Columns';
+export * from './ComponentStatus';
+export * from './LayoutComponents';
+export * from './Banner';
diff --git a/packages/canon/src/components/box/box.stories.tsx b/packages/canon/src/components-new/Box/Box.stories.tsx
similarity index 100%
rename from packages/canon/src/components/box/box.stories.tsx
rename to packages/canon/src/components-new/Box/Box.stories.tsx
diff --git a/packages/canon/src/components/box/box.tsx b/packages/canon/src/components-new/Box/Box.tsx
similarity index 100%
rename from packages/canon/src/components/box/box.tsx
rename to packages/canon/src/components-new/Box/Box.tsx
diff --git a/packages/canon/src/components/box/box.css.ts b/packages/canon/src/components-new/Box/box.css.ts
similarity index 100%
rename from packages/canon/src/components/box/box.css.ts
rename to packages/canon/src/components-new/Box/box.css.ts
diff --git a/packages/canon/src/components-new/Box/box.mdx b/packages/canon/src/components-new/Box/box.mdx
new file mode 100644
index 0000000000..5778f9a067
--- /dev/null
+++ b/packages/canon/src/components-new/Box/box.mdx
@@ -0,0 +1,38 @@
+import { Canvas, Meta, Unstyled } from '@storybook/blocks';
+import * as BoxStories from './Box.stories';
+import { Chip } from '../../../docs/components-new/Chip';
+import * as Table from '../../../docs/components-new/Table';
+import { Box } from './Box';
+import { Stack } from '../Stack';
+import { Title, Text } from '../../../docs/components-new';
+import { Padding } from './docs/padding';
+import { listResponsiveValues, listColorValues } from '../../utils/list-values';
+import { responsiveProperties } from './sprinkles.css';
+import { PropsTable } from './docs/props-table';
+import { SpacingTable } from './docs/spacing-table';
+
+<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 is a wrapper around the HTML `<div>` element and
+  provides a consistent API for styling and layout. You'll find below a list of all the available properties.
+</Text>
+
+<PropsTable />
+
+<Title type="h2">Padding & Margin</Title>
+<Text>
+  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>
+
+<Padding />
+
+<SpacingTable />
+
+</Unstyled>
diff --git a/packages/canon/src/components/box/docs/padding.tsx b/packages/canon/src/components-new/Box/docs/padding.tsx
similarity index 100%
rename from packages/canon/src/components/box/docs/padding.tsx
rename to packages/canon/src/components-new/Box/docs/padding.tsx
diff --git a/packages/canon/src/components/box/docs/props-table.tsx b/packages/canon/src/components-new/Box/docs/props-table.tsx
similarity index 94%
rename from packages/canon/src/components/box/docs/props-table.tsx
rename to packages/canon/src/components-new/Box/docs/props-table.tsx
index bcdda93f2a..b16f225568 100644
--- a/packages/canon/src/components/box/docs/props-table.tsx
+++ b/packages/canon/src/components-new/Box/docs/props-table.tsx
@@ -15,8 +15,8 @@
  */
 
 import React from 'react';
-import * as Table from '../../../../docs/components';
-import { Chip } from '../../../../docs/components';
+import * as Table from '../../../../docs/components-new';
+import { Chip } from '../../../../docs/components-new';
 import { listResponsiveValues } from '../../../utils/list-values';
 import { responsiveProperties } from '../sprinkles.css';
 
diff --git a/packages/canon/src/components-new/Box/docs/spacing-table.tsx b/packages/canon/src/components-new/Box/docs/spacing-table.tsx
new file mode 100644
index 0000000000..d6668e22ae
--- /dev/null
+++ b/packages/canon/src/components-new/Box/docs/spacing-table.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 '../../../../docs/components-new';
+import { Chip } from '../../../../docs/components-new';
+import { listResponsiveValues } from '../../../utils/list-values';
+import { responsiveProperties } from '../sprinkles.css';
+
+console.log(responsiveProperties.styles);
+
+export const SpacingTable = () => {
+  return (
+    <Table.Root>
+      <Table.Header>
+        <Table.HeaderRow>
+          <Table.HeaderCell>Prop</Table.HeaderCell>
+          <Table.HeaderCell>Type</Table.HeaderCell>
+        </Table.HeaderRow>
+      </Table.Header>
+      <Table.Body>
+        {Object.keys(responsiveProperties.styles)
+          .filter(n =>
+            [
+              'padding',
+              'paddingX',
+              'paddingY',
+              'paddingLeft',
+              'paddingRight',
+              'paddingTop',
+              'paddingBottom',
+              'margin',
+              'marginX',
+              'marginY',
+              'marginLeft',
+              'marginRight',
+              'marginTop',
+              'marginBottom',
+            ].includes(n),
+          )
+          .map(n => (
+            <Table.Row key={n}>
+              <Table.Cell>
+                <Chip head>{n}</Chip>
+              </Table.Cell>
+              <Table.Cell>
+                {listResponsiveValues(
+                  'paddingTop' as keyof typeof responsiveProperties.styles,
+                ).map(value => (
+                  <Chip key={value}>{value}</Chip>
+                ))}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+      </Table.Body>
+    </Table.Root>
+  );
+};
diff --git a/packages/canon/src/components/box/index.tsx b/packages/canon/src/components-new/Box/index.tsx
similarity index 100%
rename from packages/canon/src/components/box/index.tsx
rename to packages/canon/src/components-new/Box/index.tsx
diff --git a/packages/canon/src/components/box/properties.ts b/packages/canon/src/components-new/Box/properties.ts
similarity index 100%
rename from packages/canon/src/components/box/properties.ts
rename to packages/canon/src/components-new/Box/properties.ts
diff --git a/packages/canon/src/components/box/sprinkles.css.ts b/packages/canon/src/components-new/Box/sprinkles.css.ts
similarity index 100%
rename from packages/canon/src/components/box/sprinkles.css.ts
rename to packages/canon/src/components-new/Box/sprinkles.css.ts
diff --git a/packages/canon/src/components/button/button.stories.tsx b/packages/canon/src/components-new/Button/Button.stories.tsx
similarity index 100%
rename from packages/canon/src/components/button/button.stories.tsx
rename to packages/canon/src/components-new/Button/Button.stories.tsx
diff --git a/packages/canon/src/components/button/button.tsx b/packages/canon/src/components-new/Button/Button.tsx
similarity index 100%
rename from packages/canon/src/components/button/button.tsx
rename to packages/canon/src/components-new/Button/Button.tsx
diff --git a/packages/canon/src/components/button/button.css.ts b/packages/canon/src/components-new/Button/button.css.ts
similarity index 100%
rename from packages/canon/src/components/button/button.css.ts
rename to packages/canon/src/components-new/Button/button.css.ts
diff --git a/packages/canon/src/components/button/index.tsx b/packages/canon/src/components-new/Button/index.tsx
similarity index 100%
rename from packages/canon/src/components/button/index.tsx
rename to packages/canon/src/components-new/Button/index.tsx
diff --git a/packages/canon/src/components/button/styles.css b/packages/canon/src/components-new/Button/styles.css
similarity index 100%
rename from packages/canon/src/components/button/styles.css
rename to packages/canon/src/components-new/Button/styles.css
diff --git a/packages/canon/src/components/icon/icon.stories.tsx b/packages/canon/src/components-new/Icon/Icon.stories.tsx
similarity index 100%
rename from packages/canon/src/components/icon/icon.stories.tsx
rename to packages/canon/src/components-new/Icon/Icon.stories.tsx
diff --git a/packages/canon/src/components/icon/icon.tsx b/packages/canon/src/components-new/Icon/Icon.tsx
similarity index 100%
rename from packages/canon/src/components/icon/icon.tsx
rename to packages/canon/src/components-new/Icon/Icon.tsx
diff --git a/packages/canon/src/components/icon/context.tsx b/packages/canon/src/components-new/Icon/context.tsx
similarity index 100%
rename from packages/canon/src/components/icon/context.tsx
rename to packages/canon/src/components-new/Icon/context.tsx
diff --git a/packages/canon/src/components/icon/custom-icon.tsx b/packages/canon/src/components-new/Icon/custom-icon.tsx
similarity index 100%
rename from packages/canon/src/components/icon/custom-icon.tsx
rename to packages/canon/src/components-new/Icon/custom-icon.tsx
diff --git a/packages/canon/src/components/icon/index.tsx b/packages/canon/src/components-new/Icon/index.tsx
similarity index 100%
rename from packages/canon/src/components/icon/index.tsx
rename to packages/canon/src/components-new/Icon/index.tsx
diff --git a/packages/canon/src/components/inline/inline.stories.tsx b/packages/canon/src/components-new/Inline/Inline.stories.tsx
similarity index 100%
rename from packages/canon/src/components/inline/inline.stories.tsx
rename to packages/canon/src/components-new/Inline/Inline.stories.tsx
diff --git a/packages/canon/src/components/inline/inline.tsx b/packages/canon/src/components-new/Inline/Inline.tsx
similarity index 100%
rename from packages/canon/src/components/inline/inline.tsx
rename to packages/canon/src/components-new/Inline/Inline.tsx
diff --git a/packages/canon/src/components/Inline/index.ts b/packages/canon/src/components-new/Inline/index.ts
similarity index 100%
rename from packages/canon/src/components/Inline/index.ts
rename to packages/canon/src/components-new/Inline/index.ts
diff --git a/packages/canon/src/components/stack/stack.stories.tsx b/packages/canon/src/components-new/Stack/Stack.stories.tsx
similarity index 100%
rename from packages/canon/src/components/stack/stack.stories.tsx
rename to packages/canon/src/components-new/Stack/Stack.stories.tsx
diff --git a/packages/canon/src/components/stack/stack.tsx b/packages/canon/src/components-new/Stack/Stack.tsx
similarity index 100%
rename from packages/canon/src/components/stack/stack.tsx
rename to packages/canon/src/components-new/Stack/Stack.tsx
diff --git a/packages/canon/src/components/Stack/index.ts b/packages/canon/src/components-new/Stack/index.ts
similarity index 100%
rename from packages/canon/src/components/Stack/index.ts
rename to packages/canon/src/components-new/Stack/index.ts
diff --git a/packages/canon/src/components/Stack/sprinkles.css.ts b/packages/canon/src/components-new/Stack/sprinkles.css.ts
similarity index 100%
rename from packages/canon/src/components/Stack/sprinkles.css.ts
rename to packages/canon/src/components-new/Stack/sprinkles.css.ts
diff --git a/packages/canon/src/components/Box/docs/spacing-table.tsx b/packages/canon/src/components/Box/docs/spacing-table.tsx
index 7d98576b0e..d6668e22ae 100644
--- a/packages/canon/src/components/Box/docs/spacing-table.tsx
+++ b/packages/canon/src/components/Box/docs/spacing-table.tsx
@@ -15,8 +15,8 @@
  */
 
 import React from 'react';
-import * as Table from '../../../../docs/components';
-import { Chip } from '../../../../docs/components';
+import * as Table from '../../../../docs/components-new';
+import { Chip } from '../../../../docs/components-new';
 import { listResponsiveValues } from '../../../utils/list-values';
 import { responsiveProperties } from '../sprinkles.css';
 
diff --git a/packages/canon/src/components/box/box.mdx b/packages/canon/src/components/box/box.mdx
index 29a2a64454..5778f9a067 100644
--- a/packages/canon/src/components/box/box.mdx
+++ b/packages/canon/src/components/box/box.mdx
@@ -1,10 +1,10 @@
 import { Canvas, Meta, Unstyled } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
-import { Chip } from '../../../docs/components/chip';
-import * as Table from '../../../docs/components/table';
+import { Chip } from '../../../docs/components-new/Chip';
+import * as Table from '../../../docs/components-new/Table';
 import { Box } from './Box';
 import { Stack } from '../Stack';
-import { Title, Text } from '../../../docs/components';
+import { Title, Text } from '../../../docs/components-new';
 import { Padding } from './docs/padding';
 import { listResponsiveValues, listColorValues } from '../../utils/list-values';
 import { responsiveProperties } from './sprinkles.css';
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 2bd3f11f48..622f58b96d 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -20,6 +20,6 @@
  * @packageDocumentation
  */
 
-export * from './components/Button';
-export * from './components/Box';
-export * from './components/Icon';
+export * from './components-new/Button';
+export * from './components-new/Box';
+export * from './components-new/Icon';
diff --git a/packages/canon/src/theme/styles.css b/packages/canon/src/theme/styles.css
index fa5ed2ba4d..d082d3cf90 100644
--- a/packages/canon/src/theme/styles.css
+++ b/packages/canon/src/theme/styles.css
@@ -22,4 +22,4 @@
 @import './theme.css';
 
 /* Components */
-@import '../components/Button/styles.css';
+@import '../components-new/Button/styles.css';
diff --git a/packages/canon/src/utils/align.ts b/packages/canon/src/utils/align.ts
index f4d7b5932e..39215816ec 100644
--- a/packages/canon/src/utils/align.ts
+++ b/packages/canon/src/utils/align.ts
@@ -17,7 +17,7 @@
 import {
   type OptionalResponsiveValue,
   mapResponsiveValue,
-} from '../components/Box/sprinkles.css';
+} from '../components-new/Box/sprinkles.css';
 
 export type Align = 'left' | 'center' | 'right';
 export type AlignY = 'top' | 'center' | 'bottom';
diff --git a/packages/canon/src/utils/list-values.ts b/packages/canon/src/utils/list-values.ts
index 9e3464a4f5..42da674037 100644
--- a/packages/canon/src/utils/list-values.ts
+++ b/packages/canon/src/utils/list-values.ts
@@ -17,7 +17,7 @@
 import {
   responsiveProperties,
   colorProperties,
-} from '../components/Box/sprinkles.css';
+} from '../components-new/Box/sprinkles.css';
 
 export const listResponsiveValues = (
   value: keyof typeof responsiveProperties.styles,