diff --git a/packages/canon/docs/components/Banner/index.tsx b/packages/canon/docs/components/Banner/Banner.tsx
similarity index 90%
rename from packages/canon/docs/components/Banner/index.tsx
rename to packages/canon/docs/components/Banner/Banner.tsx
index c3036eac03..3199e65bc0 100644
--- a/packages/canon/docs/components/Banner/index.tsx
+++ b/packages/canon/docs/components/Banner/Banner.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import React from 'react';
-import { bannerIconStyles, bannerStyles } from './banner.css';
 
 export const Banner = ({
   children,
@@ -24,8 +23,8 @@ export const Banner = ({
   variant?: 'info' | 'warning';
 }) => {
   return (
-    <div className={bannerStyles({ variant })}>
-      <div className={bannerIconStyles}>
+    <div className={`banner ${variant}`}>
+      <div className="icon">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
diff --git a/packages/canon/docs/components/Banner/banner.css.ts b/packages/canon/docs/components/Banner/banner.css.ts
deleted file mode 100644
index 2dfe443f41..0000000000
--- a/packages/canon/docs/components/Banner/banner.css.ts
+++ /dev/null
@@ -1,61 +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 { recipe } from '@vanilla-extract/recipes';
-import { globalStyle, style } from '@vanilla-extract/css';
-
-export const bannerStyles = recipe({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    fontFamily: '"Geist", sans-serif',
-    fontSize: '16px',
-    lineHeight: '28px',
-    padding: '16px',
-    borderRadius: '6px',
-    marginBottom: '16px',
-    border: '1px solid #e0e0e0',
-  },
-  variants: {
-    variant: {
-      info: {
-        backgroundColor: '#F2F2F2',
-        borderColor: '#CDCDCD',
-        color: '#888888',
-      },
-      warning: {
-        backgroundColor: '#FFF2B9',
-        borderColor: '#FFD000',
-        color: '#D79927',
-      },
-    },
-  },
-});
-
-globalStyle(`${bannerStyles.classNames.base} p`, {
-  margin: '0',
-});
-
-export const bannerIconStyles = style({
-  width: '32px',
-  height: '32px',
-  backgroundColor: 'rgba(215, 153, 39, 0.2)',
-  borderRadius: '6px',
-  marginRight: '16px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
diff --git a/packages/canon/docs/components/Columns/columns.css.ts b/packages/canon/docs/components/Banner/index.ts
similarity index 76%
rename from packages/canon/docs/components/Columns/columns.css.ts
rename to packages/canon/docs/components/Banner/index.ts
index 0b5ec18aef..31f4aa88b0 100644
--- a/packages/canon/docs/components/Columns/columns.css.ts
+++ b/packages/canon/docs/components/Banner/index.ts
@@ -13,12 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { style } from '@vanilla-extract/css';
-
-export const styles = style({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 1fr)',
-  rowGap: '20px',
-  columnGap: '80px',
-});
+export { Banner } from './Banner';
diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css
new file mode 100644
index 0000000000..6fec3345ae
--- /dev/null
+++ b/packages/canon/docs/components/Banner/styles.css
@@ -0,0 +1,38 @@
+.banner {
+  display: flex;
+  align-items: center;
+  font-family: 'Geist', sans-serif;
+  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/index.tsx b/packages/canon/docs/components/Chip/Chip.tsx
similarity index 87%
rename from packages/canon/docs/components/Chip/index.tsx
rename to packages/canon/docs/components/Chip/Chip.tsx
index 81609dda61..e6e1d1b1c4 100644
--- a/packages/canon/docs/components/Chip/index.tsx
+++ b/packages/canon/docs/components/Chip/Chip.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { chipStyles } from './chip.css';
 
 export const Chip = ({
   children,
@@ -24,5 +23,5 @@ export const Chip = ({
   children: React.ReactNode;
   head?: boolean;
 }) => {
-  return <span className={chipStyles({ head })}>{children}</span>;
+  return <span className={`chip ${head ? 'head' : ''}`}>{children}</span>;
 };
diff --git a/packages/canon/docs/components/Chip/chip.css.ts b/packages/canon/docs/components/Chip/chip.css.ts
deleted file mode 100644
index 027a722f84..0000000000
--- a/packages/canon/docs/components/Chip/chip.css.ts
+++ /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.
- */
-
-import { recipe } from '@vanilla-extract/recipes';
-
-export const chipStyles = recipe({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    fontFamily: 'Geist Mono, monospace',
-    fontSize: '13px',
-    borderRadius: '6px',
-    padding: '0px 8px',
-    height: '24px',
-    marginRight: '4px',
-  },
-  variants: {
-    head: {
-      true: {
-        backgroundColor: '#eaf2fd',
-        color: '#2563eb',
-      },
-      false: {
-        backgroundColor: '#f0f0f0',
-        color: '#5d5d5d',
-      },
-    },
-  },
-});
diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/canon/docs/components/Chip/index.ts
new file mode 100644
index 0000000000..ff9e4794c5
--- /dev/null
+++ b/packages/canon/docs/components/Chip/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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
new file mode 100644
index 0000000000..ebbaf6645f
--- /dev/null
+++ b/packages/canon/docs/components/Chip/styles.css
@@ -0,0 +1,33 @@
+/*
+ * 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: 'Geist Mono', 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/index.tsx b/packages/canon/docs/components/Columns/Columns.tsx
similarity index 90%
rename from packages/canon/docs/components/Columns/index.tsx
rename to packages/canon/docs/components/Columns/Columns.tsx
index 0d6f27f04d..115ec50010 100644
--- a/packages/canon/docs/components/Columns/index.tsx
+++ b/packages/canon/docs/components/Columns/Columns.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { styles } from './columns.css';
 
 export const Columns = ({
   children,
@@ -25,7 +24,7 @@ export const Columns = ({
   style?: React.CSSProperties;
 }) => {
   return (
-    <div className={styles} style={style}>
+    <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
new file mode 100644
index 0000000000..05de0850be
--- /dev/null
+++ b/packages/canon/docs/components/Columns/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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/src/components/Box/box.css.ts b/packages/canon/docs/components/Columns/styles.css
similarity index 79%
rename from packages/canon/src/components/Box/box.css.ts
rename to packages/canon/docs/components/Columns/styles.css
index a3e49162fd..c34acfc406 100644
--- a/packages/canon/src/components/Box/box.css.ts
+++ b/packages/canon/docs/components/Columns/styles.css
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { style } from '@vanilla-extract/css';
-
-export const base = style({
-  fontFamily: 'var(--canon-font-regular)',
-  color: 'var(--canon-text-primary)',
-});
+.columns {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: 20px;
+  column-gap: 80px;
+}
diff --git a/packages/canon/docs/components/ComponentStatus/index.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
similarity index 83%
rename from packages/canon/docs/components/ComponentStatus/index.tsx
rename to packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
index 64d552ea97..0159e27b32 100644
--- a/packages/canon/docs/components/ComponentStatus/index.tsx
+++ b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { container, pill, title } from './component-status.css';
 
 export const ComponentStatus = ({
   name,
@@ -29,15 +28,15 @@ export const ComponentStatus = ({
   link?: string;
 }) => {
   return (
-    <div className={container} style={style}>
+    <div className="component-status" style={style}>
       {link ? (
-        <a href={link} className={title}>
+        <a href={link} className="title">
           {name}
         </a>
       ) : (
-        <span className={title}>{name}</span>
+        <span className="title">{name}</span>
       )}
-      <span className={pill({ status })}>
+      <span className={`pill ${status}`}>
         {status === 'notStarted' && 'Not Started'}
         {status === 'inProgress' && 'In Progress'}
         {status === 'alpha' && 'Alpha'}
diff --git a/packages/canon/docs/components/ComponentStatus/component-status.css.ts b/packages/canon/docs/components/ComponentStatus/component-status.css.ts
deleted file mode 100644
index 5cce5adb5d..0000000000
--- a/packages/canon/docs/components/ComponentStatus/component-status.css.ts
+++ /dev/null
@@ -1,77 +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 { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
-
-export const container = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-
-export const title = style({
-  color: '#3b59ff',
-  fontFamily: '"Geist", sans-serif',
-  fontSize: '16px',
-  fontWeight: 400,
-  textDecoration: 'none',
-});
-
-export const pill = recipe({
-  base: {
-    fontFamily: '"Geist", sans-serif',
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: '#000',
-    borderRadius: '40px',
-    padding: '0px 8px',
-    height: '24px',
-    fontSize: '12px',
-    fontWeight: 600,
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    marginLeft: '8px',
-  },
-  variants: {
-    status: {
-      notStarted: {
-        backgroundColor: '#F2F2F2',
-        borderColor: '#CDCDCD',
-        color: '#888888',
-      },
-      inProgress: {
-        backgroundColor: '#FFF2B9',
-        borderColor: '#FFD000',
-        color: '#D79927',
-      },
-      alpha: {
-        backgroundColor: '#D7F9D7',
-        borderColor: '#4ED14A',
-        color: '#3A9837',
-      },
-      beta: {
-        backgroundColor: '#D7F9D7',
-        borderColor: '#4ED14A',
-        color: '#3A9837',
-      },
-      stable: {
-        backgroundColor: '#D7F9D7',
-        borderColor: '#4ED14A',
-        color: '#3A9837',
-      },
-    },
-  },
-});
diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/canon/docs/components/ComponentStatus/index.ts
new file mode 100644
index 0000000000..238c001289
--- /dev/null
+++ b/packages/canon/docs/components/ComponentStatus/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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
new file mode 100644
index 0000000000..f800e659e0
--- /dev/null
+++ b/packages/canon/docs/components/ComponentStatus/styles.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.
+ */
+
+.component-status {
+  display: flex;
+  justify-content: space-between;
+
+  & .title {
+    color: #3b59ff;
+    font-family: 'Geist', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    text-decoration: none;
+  }
+
+  & .pill {
+    font-family: 'Geist', sans-serif;
+    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/index.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
similarity index 96%
rename from packages/canon/docs/components/IconLibrary/index.tsx
rename to packages/canon/docs/components/IconLibrary/IconLibrary.tsx
index 6e94c2c777..e32f4c08a4 100644
--- a/packages/canon/docs/components/IconLibrary/index.tsx
+++ b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
@@ -17,7 +17,7 @@ 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';
+import { Text } from '../Text/Text';
 
 export const IconLibrary = () => {
   const icons = Object.keys(defaultIcons);
diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts
new file mode 100644
index 0000000000..071c80db85
--- /dev/null
+++ b/packages/canon/docs/components/IconLibrary/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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/LayoutComponents/LayoutComponents.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
new file mode 100644
index 0000000000..56f389a389
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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
new file mode 100644
index 0000000000..55cc9f25ef
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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/index.tsx b/packages/canon/docs/components/LayoutComponents/index.tsx
deleted file mode 100644
index 92fab7c47f..0000000000
--- a/packages/canon/docs/components/LayoutComponents/index.tsx
+++ /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.
- */
-
-import React from 'react';
-import {
-  container,
-  box,
-  content,
-  title,
-  description,
-} from './layout-components.css';
-import { BoxSvg } from './box';
-import { StackSvg } from './stack';
-import { GridSvg } from './grid';
-import { InlineSvg } from './inline';
-import { ContainerSvg } from './container';
-
-export const LayoutComponents = () => {
-  return (
-    <div className={container}>
-      <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/layout-components.css.ts b/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
deleted file mode 100644
index 47d9a13111..0000000000
--- a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
+++ /dev/null
@@ -1,63 +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 { style } from '@vanilla-extract/css';
-
-export const container = style({
-  display: 'flex',
-  justifyContent: 'flex-start',
-  gap: '1rem',
-  flexWrap: 'wrap',
-});
-
-export const box = style({
-  display: 'flex',
-  flexDirection: 'column',
-  width: 'calc(33.33% - 0.67rem)',
-  marginBottom: '1rem',
-  alignItems: 'flex-start',
-});
-
-export const content = style({
-  flex: 'none',
-  background: 'linear-gradient(180deg, #F3F3F3 0%, #FFF 100%)',
-  borderRadius: '4px',
-  width: '100%',
-  height: '180px',
-  transition: 'all 0.2s ease-in-out',
-  marginBottom: '0.75rem',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  selectors: {
-    [`${box}:hover &`]: {
-      transform: 'translateY(-4px)',
-    },
-  },
-});
-
-export const title = style({
-  fontSize: '16px',
-  fontFamily: 'var(--canon-font-regular)',
-  transition: 'color 0.2s ease-in-out',
-  marginBottom: '0.25rem',
-});
-
-export const description = style({
-  fontSize: '16px',
-  fontFamily: 'var(--canon-font-regular)',
-  color: '#9e9e9e',
-});
diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css
new file mode 100644
index 0000000000..c2a819cf6b
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/styles.css
@@ -0,0 +1,60 @@
+/*
+ * 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;
+    font-family: 'Geist', sans-serif;
+    transition: color 0.2s ease-in-out;
+    margin-bottom: 0.25rem;
+  }
+
+  & .description {
+    font-size: 16px;
+    font-family: 'Geist', sans-serif;
+    color: #9e9e9e;
+  }
+}
diff --git a/packages/canon/docs/components/LayoutComponents/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx
similarity index 100%
rename from packages/canon/docs/components/LayoutComponents/box.tsx
rename to packages/canon/docs/components/LayoutComponents/svgs/box.tsx
diff --git a/packages/canon/docs/components/LayoutComponents/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx
similarity index 100%
rename from packages/canon/docs/components/LayoutComponents/container.tsx
rename to packages/canon/docs/components/LayoutComponents/svgs/container.tsx
diff --git a/packages/canon/docs/components/LayoutComponents/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
similarity index 100%
rename from packages/canon/docs/components/LayoutComponents/grid.tsx
rename to packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
diff --git a/packages/canon/docs/components/LayoutComponents/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
similarity index 100%
rename from packages/canon/docs/components/LayoutComponents/inline.tsx
rename to packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
diff --git a/packages/canon/docs/components/LayoutComponents/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
similarity index 100%
rename from packages/canon/docs/components/LayoutComponents/stack.tsx
rename to packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts
index 866dcb9d10..5773eaeb27 100644
--- a/packages/canon/docs/components/PropsTable/getProps.ts
+++ b/packages/canon/docs/components/PropsTable/getProps.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function getBoxProps(styles: Record<string, any>) {
+export function getProps(styles: Record<string, any>) {
   return Object.keys(styles).reduce(
     (acc: Record<string, { type: any[]; responsive: boolean }>, n) => {
       const style = styles[n];
diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts
index 010452ee2a..181933f0f8 100644
--- a/packages/canon/docs/components/PropsTable/index.ts
+++ b/packages/canon/docs/components/PropsTable/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 export { PropsTable } from './PropsTable';
-export { getBoxProps } from './getProps';
+export { getProps } from './getProps';
diff --git a/packages/canon/docs/components/Roadmap/index.tsx b/packages/canon/docs/components/Roadmap/Roadmap.tsx
similarity index 100%
rename from packages/canon/docs/components/Roadmap/index.tsx
rename to packages/canon/docs/components/Roadmap/Roadmap.tsx
diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts
new file mode 100644
index 0000000000..ac51dfa1ed
--- /dev/null
+++ b/packages/canon/docs/components/Roadmap/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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/Table/index.tsx b/packages/canon/docs/components/Table/Table.tsx
similarity index 77%
rename from packages/canon/docs/components/Table/index.tsx
rename to packages/canon/docs/components/Table/Table.tsx
index ead30985aa..4983038724 100644
--- a/packages/canon/docs/components/Table/index.tsx
+++ b/packages/canon/docs/components/Table/Table.tsx
@@ -15,18 +15,11 @@
  */
 
 import React from 'react';
-import {
-  cellStyles,
-  headerCellStyles,
-  tableStyles,
-  wrapperStyles,
-  rowStyles,
-} from './table.css';
 
 export const Root = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className={wrapperStyles}>
-      <table className={tableStyles}>{children}</table>
+    <div className="table-wrapper">
+      <table className="table">{children}</table>
     </div>
   );
 };
@@ -44,13 +37,13 @@ export const HeaderRow = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const HeaderCell = ({ children }: { children: React.ReactNode }) => {
-  return <th className={`${cellStyles} ${headerCellStyles}`}>{children}</th>;
+  return <th className="table-cell table-header-cell">{children}</th>;
 };
 
 export const Row = ({ children }: { children: React.ReactNode }) => {
-  return <tr className={rowStyles}>{children}</tr>;
+  return <tr className="table-row">{children}</tr>;
 };
 
 export const Cell = ({ children }: { children: React.ReactNode }) => {
-  return <td className={cellStyles}>{children}</td>;
+  return <td className="table-cell">{children}</td>;
 };
diff --git a/packages/canon/docs/components/Table/index.ts b/packages/canon/docs/components/Table/index.ts
new file mode 100644
index 0000000000..7419aa83a8
--- /dev/null
+++ b/packages/canon/docs/components/Table/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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
new file mode 100644
index 0000000000..a8c35d3978
--- /dev/null
+++ b/packages/canon/docs/components/Table/styles.css
@@ -0,0 +1,74 @@
+/*
+ * 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.
+ */
+
+.table-wrapper {
+  border: 1px solid #e7e7e7;
+  border-radius: 4px;
+  overflow: hidden;
+
+  & .table {
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-spacing: 0px;
+    border-collapse: collapse;
+  }
+
+  & .table-cell {
+    padding: 12px 16px !important;
+    border: none !important;
+    text-align: left;
+    background-color: white !important;
+    font-family: 'Geist', sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+
+    & p {
+      margin: 0;
+    }
+  }
+
+  & .table-header-cell {
+    background-color: #f5f5f5 !important;
+    border-bottom: 1px solid #e7e7e7 !important;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  & .table-row {
+    border: none;
+    border-bottom: 1px solid #e7e7e7;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  & .table-chip {
+    display: inline-block;
+    font-size: 14px !important;
+    border: 1px solid #e7e7e7;
+    border-radius: 6px;
+    padding: 0px 6px;
+    height: 24px;
+  }
+
+  & .table-type {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 8px;
+  }
+}
diff --git a/packages/canon/docs/components/Table/table.css.ts b/packages/canon/docs/components/Table/table.css.ts
deleted file mode 100644
index b01373ee04..0000000000
--- a/packages/canon/docs/components/Table/table.css.ts
+++ /dev/null
@@ -1,83 +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 { style, globalStyle } from '@vanilla-extract/css';
-
-export const wrapperStyles = style({
-  border: '1px solid #e7e7e7',
-  borderRadius: '4px',
-  overflow: 'hidden',
-});
-
-export const tableStyles = style({
-  width: '100%',
-  margin: '0 !important',
-  padding: '0 !important',
-  borderSpacing: '0px',
-  borderCollapse: 'collapse',
-});
-
-export const cellStyles = style({
-  padding: '12px 16px !important',
-  border: 'none !important',
-  textAlign: 'left',
-  backgroundColor: 'white !important',
-  fontFamily: '"Geist", sans-serif',
-  fontSize: '16px',
-  fontWeight: 300,
-});
-
-// Apply global styles to <p> elements inside cellStyles
-globalStyle(`${cellStyles} p`, {
-  margin: '0',
-});
-
-export const headerRowStyles = style({
-  borderBottom: '1px solid #e7e7e7',
-});
-
-export const headerCellStyles = style({
-  backgroundColor: '#f5f5f5 !important',
-  borderBottom: '1px solid #e7e7e7 !important',
-  fontWeight: 500,
-  fontSize: '14px',
-});
-
-export const rowStyles = style({
-  border: 'none',
-  borderBottom: '1px solid #e7e7e7',
-  selectors: {
-    '&:last-child': {
-      borderBottom: 'none',
-    },
-  },
-});
-
-export const chipStyles = style({
-  display: 'inline-block',
-  fontSize: '14px !important',
-  border: '1px solid #e7e7e7',
-  borderRadius: '6px',
-  padding: '0px 6px',
-  height: '24px',
-});
-
-export const typeStyles = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-  flexDirection: 'row',
-  gap: '8px',
-});
diff --git a/packages/canon/docs/components/Text/index.tsx b/packages/canon/docs/components/Text/Text.tsx
similarity index 90%
rename from packages/canon/docs/components/Text/index.tsx
rename to packages/canon/docs/components/Text/Text.tsx
index be882c0a81..9f3dd6ce90 100644
--- a/packages/canon/docs/components/Text/index.tsx
+++ b/packages/canon/docs/components/Text/Text.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { textStyles } from './text.css';
 
 export const Text = ({
   children,
@@ -25,7 +24,7 @@ export const Text = ({
   style?: React.CSSProperties;
 }) => {
   return (
-    <div className={textStyles} style={style}>
+    <div className="text" style={style}>
       {children}
     </div>
   );
diff --git a/packages/canon/docs/components/Text/index.ts b/packages/canon/docs/components/Text/index.ts
new file mode 100644
index 0000000000..873fca2c76
--- /dev/null
+++ b/packages/canon/docs/components/Text/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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
new file mode 100644
index 0000000000..cbb2b88edb
--- /dev/null
+++ b/packages/canon/docs/components/Text/styles.css
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+.text {
+  font-family: 'Geist', sans-serif;
+  font-size: 16px;
+  line-height: 28px;
+  margin: 0;
+  font-weight: 300;
+  margin-bottom: 16px;
+
+  & p {
+    font-family: 'Geist', sans-serif;
+    font-size: 16px;
+    line-height: 28px;
+    margin: 0;
+    font-weight: 300;
+  }
+}
diff --git a/packages/canon/docs/components/Title/index.tsx b/packages/canon/docs/components/Title/Title.tsx
similarity index 92%
rename from packages/canon/docs/components/Title/index.tsx
rename to packages/canon/docs/components/Title/Title.tsx
index 13e5b964bb..056ccfc14d 100644
--- a/packages/canon/docs/components/Title/index.tsx
+++ b/packages/canon/docs/components/Title/Title.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { titleStyles } from './title.css';
 
 export const Title = ({
   children,
@@ -32,7 +31,7 @@ export const Title = ({
   if (type === 'h3') Component = 'h3';
 
   return React.createElement(Component, {
-    className: titleStyles({ type }),
+    className: `title ${type}`,
     style,
     children,
   });
diff --git a/packages/canon/docs/components/Title/index.ts b/packages/canon/docs/components/Title/index.ts
new file mode 100644
index 0000000000..998dc81882
--- /dev/null
+++ b/packages/canon/docs/components/Title/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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/Text/text.css.ts b/packages/canon/docs/components/Title/styles.css
similarity index 59%
rename from packages/canon/docs/components/Text/text.css.ts
rename to packages/canon/docs/components/Title/styles.css
index fbbc427362..a8d00e2af5 100644
--- a/packages/canon/docs/components/Text/text.css.ts
+++ b/packages/canon/docs/components/Title/styles.css
@@ -14,21 +14,30 @@
  * limitations under the License.
  */
 
-import { globalStyle, style } from '@vanilla-extract/css';
+.title {
+  font-family: 'Geist', sans-serif;
+  margin: 0;
+  font-weight: 500;
+  border: none;
 
-export const textStyles = style({
-  fontFamily: '"Geist", sans-serif',
-  fontSize: '16px',
-  lineHeight: '28px',
-  margin: '0',
-  fontWeight: 300,
-  marginBottom: '16px',
-});
+  &.h1 {
+    font-size: 36px;
+    line-height: 44px;
+    margin-bottom: 8px;
+    margin-top: 0px;
+  }
 
-globalStyle(`${textStyles} p`, {
-  fontFamily: '"Geist", sans-serif',
-  fontSize: '16px',
-  lineHeight: '28px',
-  margin: '0',
-  fontWeight: 300,
-});
+  &.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/Title/title.css.ts b/packages/canon/docs/components/Title/title.css.ts
deleted file mode 100644
index 6618ad80be..0000000000
--- a/packages/canon/docs/components/Title/title.css.ts
+++ /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 { recipe } from '@vanilla-extract/recipes';
-
-export const titleStyles = recipe({
-  base: {
-    fontFamily: '"Geist", sans-serif',
-    margin: '0',
-    fontWeight: 500,
-    border: 'none',
-  },
-  variants: {
-    type: {
-      h1: {
-        fontSize: '36px',
-        lineHeight: '44px',
-        marginBottom: '8px',
-        marginTop: '0px',
-      },
-      h2: {
-        fontSize: '24px',
-        lineHeight: '32px',
-        marginBottom: '12px',
-        marginTop: '52px',
-      },
-      h3: {
-        fontSize: '20px',
-        lineHeight: '28px',
-        marginBottom: '12px',
-        marginTop: '40px',
-      },
-    },
-  },
-});
diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts
index 7ad07bec6a..0e5ff2e325 100644
--- a/packages/canon/docs/components/index.ts
+++ b/packages/canon/docs/components/index.ts
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
+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';
 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
index 698085ad19..670b0c3046 100644
--- a/packages/canon/docs/components/styles.css
+++ b/packages/canon/docs/components/styles.css
@@ -1,2 +1,10 @@
+@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/package.json b/packages/canon/package.json
index c8a8f79a6f..7bfc717b74 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -39,9 +39,6 @@
   "dependencies": {
     "@base_ui/react": "^1.0.0-alpha.3",
     "@remixicon/react": "^4.5.0",
-    "@vanilla-extract/css": "^1.16.0",
-    "@vanilla-extract/dynamic": "^2.1.2",
-    "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3"
   },
   "devDependencies": {
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index a470c0584d..ecf138f1ce 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -16,7 +16,6 @@
 
 import { createElement, forwardRef } from 'react';
 import { boxSprinkles } from './sprinkles.css';
-import { base } from './box.css';
 import { BoxProps } from './types';
 
 /** @public */
@@ -27,7 +26,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const sprinklesClassName = boxSprinkles(restProps);
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = [base, sprinklesClassName, className]
+  const classNames = ['box', sprinklesClassName, className]
     .filter(Boolean)
     .join(' ');
 
diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index 11cc53b148..a03c6d43d3 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -2,7 +2,7 @@ import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
 import { Padding } from './docs/padding';
-import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { PropsTable, getProps } from '../../../docs/components';
 import { boxProperties } from './sprinkles.css';
 import { spacingProperties } from '../../layout/sprinkles.css';
 
@@ -29,7 +29,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <PropsTable
   data={{
-    ...getBoxProps(boxProperties.styles),
+    ...getProps(boxProperties.styles),
     children: {
       type: 'ReactNode',
       required: false,
@@ -53,7 +53,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <Padding />
 
-<PropsTable data={getBoxProps(spacingProperties.styles)} />
+<PropsTable data={getProps(spacingProperties.styles)} />
 
 <Title type="h2">Examples</Title>
 <Text>Here are some examples of how you can use the Box component.</Text>
diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css
new file mode 100644
index 0000000000..75fd0dd493
--- /dev/null
+++ b/packages/canon/src/components/Box/styles.css
@@ -0,0 +1,4 @@
+.box {
+  font-family: 'var(--canon-font-regular)';
+  color: 'var(--canon-text-primary)';
+}
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
index 7fa1886a4e..4ddce0c982 100644
--- a/packages/canon/src/components/Button/Docs.mdx
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -1,7 +1,7 @@
 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';
+import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Meta of={ButtonStories} />
 
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
index 733dbae637..d4dcf694da 100644
--- a/packages/canon/src/components/Container/Docs.mdx
+++ b/packages/canon/src/components/Container/Docs.mdx
@@ -1,7 +1,6 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as ContainerStories from './Container.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
 import { spacingProperties } from '../../layout/sprinkles.css';
 import { containerProperties } from './sprinkles.css';
 
@@ -29,7 +28,7 @@ import { containerProperties } from './sprinkles.css';
 
 <PropsTable
   data={{
-    ...getBoxProps(containerProperties.styles),
+    ...getProps(containerProperties.styles),
     children: {
       type: 'ReactNode',
       required: false,
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
index 4a3d64d06f..7a4ef4de2f 100644
--- a/packages/canon/src/components/Grid/Docs.mdx
+++ b/packages/canon/src/components/Grid/Docs.mdx
@@ -1,7 +1,6 @@
 import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
 import * as GridStories from './Grid.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
 import { spacingProperties } from '../../layout/sprinkles.css';
 
 <Meta of={GridStories} />
@@ -71,7 +70,7 @@ export default () => (
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getBoxProps(spacingProperties.styles)} />
+<PropsTable data={getProps(spacingProperties.styles)} />
 
 <Title type="h3">Grid Item</Title>
 <Text>
diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx
index 0469ff0860..9850dedf7a 100644
--- a/packages/canon/src/components/Inline/Docs.mdx
+++ b/packages/canon/src/components/Inline/Docs.mdx
@@ -1,7 +1,6 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as InlineStories from './Inline.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
 import { spacingProperties } from '../../layout/sprinkles.css';
 import { inlineProperties } from './sprinkles.css';
 
@@ -57,7 +56,7 @@ import { inlineProperties } from './sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getBoxProps(spacingProperties.styles)} />
+<PropsTable data={getProps(spacingProperties.styles)} />
 
 <Title type="h2">Examples</Title>
 
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
index 5ec864937b..d5bdb0fc82 100644
--- a/packages/canon/src/components/Stack/Docs.mdx
+++ b/packages/canon/src/components/Stack/Docs.mdx
@@ -1,7 +1,6 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as StackStories from './Stack.stories';
-import { Title, Text } from '../../../docs/components';
-import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
 import { spacingProperties } from '../../layout/sprinkles.css';
 
 <Meta of={StackStories} />
@@ -52,7 +51,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getBoxProps(spacingProperties.styles)} />
+<PropsTable data={getProps(spacingProperties.styles)} />
 
 <Title type="h2">Common questions</Title>
 
diff --git a/yarn.lock b/yarn.lock
index d59389cc8c..1e28a7a65d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3842,9 +3842,6 @@ __metadata:
     "@testing-library/jest-dom": ^6.0.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
-    "@vanilla-extract/css": ^1.16.0
-    "@vanilla-extract/dynamic": ^2.1.2
-    "@vanilla-extract/recipes": ^0.5.5
     "@vanilla-extract/rollup-plugin": ^1.3.10
     "@vanilla-extract/sprinkles": ^1.6.3
     "@vanilla-extract/webpack-plugin": ^2.3.14
@@ -21548,7 +21545,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vanilla-extract/css@npm:^1.16.0, @vanilla-extract/css@npm:^1.16.1":
+"@vanilla-extract/css@npm:^1.16.1":
   version: 1.16.1
   resolution: "@vanilla-extract/css@npm:1.16.1"
   dependencies:
@@ -21568,15 +21565,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vanilla-extract/dynamic@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "@vanilla-extract/dynamic@npm:2.1.2"
-  dependencies:
-    "@vanilla-extract/private": ^1.0.6
-  checksum: ec6ec9b02c7ec8a9d60aebf63225fd3f930c06ad824321f03f683f1948eb6d4e554d934303da140b3230b4af2fa15bab494c6da2a3b9a172e4118c245b4f942a
-  languageName: node
-  linkType: hard
-
 "@vanilla-extract/integration@npm:^7.1.11":
   version: 7.1.11
   resolution: "@vanilla-extract/integration@npm:7.1.11"
@@ -21604,15 +21592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vanilla-extract/recipes@npm:^0.5.5":
-  version: 0.5.5
-  resolution: "@vanilla-extract/recipes@npm:0.5.5"
-  peerDependencies:
-    "@vanilla-extract/css": ^1.0.0
-  checksum: 8d2b4f8163369424226ec9a47e754002b8a095bcf86c1a60a91b2183f59508519bd31ed41baefc950ad7ca225d75b3184c3b84d3c741c5c60d91618dd70452aa
-  languageName: node
-  linkType: hard
-
 "@vanilla-extract/rollup-plugin@npm:^1.3.10":
   version: 1.3.11
   resolution: "@vanilla-extract/rollup-plugin@npm:1.3.11"