diff --git a/canon-docs/package.json b/canon-docs/package.json
index 8f42a23db0..69fd1cae30 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -17,6 +17,7 @@
     "@storybook/react": "^8.4.7",
     "@uiw/codemirror-themes": "^4.23.7",
     "@uiw/react-codemirror": "^4.23.7",
+    "motion": "^12.4.1",
     "next": "14.2.23",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
diff --git a/canon-docs/src/app/(playground)/playground/styles.module.css b/canon-docs/src/app/(playground)/playground/styles.module.css
index 8fdd79a1dd..026e8a1bd4 100644
--- a/canon-docs/src/app/(playground)/playground/styles.module.css
+++ b/canon-docs/src/app/(playground)/playground/styles.module.css
@@ -30,7 +30,7 @@
 .breakpointContent {
   height: 100%;
   border-radius: 4px;
-  border: 1px solid var(--canon-border);
-  background-color: var(--canon-bg);
+  border: 1px solid var(--border);
+  background-color: var(--bg);
   padding: 16px;
 }
diff --git a/canon-docs/src/app/layout.tsx b/canon-docs/src/app/layout.tsx
index 99b5f22739..b32622e4ae 100644
--- a/canon-docs/src/app/layout.tsx
+++ b/canon-docs/src/app/layout.tsx
@@ -3,12 +3,11 @@ import { Sidebar } from '../components/Sidebar';
 import { Toolbar } from '@/components/Toolbar';
 import { Providers } from './providers';
 import { CustomTheme } from '@/components/CustomTheme';
-import styles from './page.module.css';
+import styles from '../css/page.module.css';
 
-import './globals.css';
+import '../css/globals.css';
 import '/public/core.css';
 import '/public/components.css';
-import '/public/backstage.css';
 
 export const metadata: Metadata = {
   title: 'Canon',
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css
index 966b3ff72b..8b17c11b86 100644
--- a/canon-docs/src/components/CodeBlock/styles.module.css
+++ b/canon-docs/src/components/CodeBlock/styles.module.css
@@ -1,6 +1,6 @@
 .codeBlock {
   border-radius: 4px;
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   position: relative;
   background: transparent;
   overflow-x: auto;
@@ -15,10 +15,10 @@
 }
 
 .title {
-  border-bottom: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--border);
   padding: 12px 20px;
   font-size: 0.875rem;
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
 }
 
 .code {
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 6f76267725..174a8d0b24 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -5,7 +5,7 @@ import CodeMirror from '@uiw/react-codemirror';
 import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { Icon } from '../../../../packages/canon';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css
index ac7d7f36f1..3f0a5eb14e 100644
--- a/canon-docs/src/components/CustomTheme/styles.module.css
+++ b/canon-docs/src/components/CustomTheme/styles.module.css
@@ -4,9 +4,9 @@
   right: 16px;
   width: 240px;
   height: 47px;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   border-radius: 0.375rem;
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -31,8 +31,8 @@
 .header {
   height: 46px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--canon-border);
-  background-color: var(--canon-bg-elevated);
+  border-bottom: 1px solid var(--border);
+  background-color: var(--panel);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -65,8 +65,8 @@
   height: 28px;
   padding: 0 8px;
   color: #fff;
-  background-color: var(--canon-bg);
-  color: var(--canon-fg-text-primary);
+  background-color: var(--bg);
+  color: var(--primary);
   transition: background-color 0.2s ease-in-out;
   border-radius: 0.25rem;
   cursor: pointer;
diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css
index 4817ab569f..31d08aedb4 100644
--- a/canon-docs/src/components/HeadlessBanners/styles.module.css
+++ b/canon-docs/src/components/HeadlessBanners/styles.module.css
@@ -1,9 +1,9 @@
 .container {
   display: flex;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   padding: var(--canon-space-6);
   border-radius: var(--canon-radius-2);
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   margin-bottom: var(--canon-space-6);
   gap: var(--canon-space-6);
   transition: background-color 0.2s ease-in-out;
@@ -29,14 +29,14 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--canon-bg);
-  border: 1px solid var(--canon-border);
+  background-color: var(--bg);
+  border: 1px solid var(--border);
   border-radius: var(--canon-radius-2);
   padding: 0 var(--canon-space-3);
   height: 28px;
   border-radius: 100px;
   margin-top: var(--canon-space-3);
   font-size: var(--canon-font-size-3);
-  color: var(--canon-fg-text-primary);
+  color: var(--primary);
   gap: var(--canon-space-2);
 }
diff --git a/canon-docs/src/components/IconLibrary/styles.module.css b/canon-docs/src/components/IconLibrary/styles.module.css
index 8cef221620..8c9a96e5db 100644
--- a/canon-docs/src/components/IconLibrary/styles.module.css
+++ b/canon-docs/src/components/IconLibrary/styles.module.css
@@ -19,10 +19,10 @@
   height: 80px;
   border: 1px solid #d3d3d3;
   border-radius: 0.5rem;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--canon-bg-elevated);
+    background-color: var(--panel);
   }
 }
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index feb9f8bea3..fba98420d0 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -6,27 +6,39 @@
   .sidebar {
     display: block;
     position: fixed;
-    top: 0;
-    left: 0;
+    top: 16px;
+    left: 16px;
+    border-radius: 8px;
     width: 300px;
-    height: 100vh;
-    color: var(--canon-fg-text-primary);
-    background-color: var(--canon-bg-elevated);
-    border-right: 1px solid var(--canon-border);
-    padding-left: 20px;
-    padding-right: 20px;
+    height: calc(100vh - 32px);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
+    color: var(--primary);
+    background-color: var(--panel);
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     overflow: hidden;
   }
 }
 
+.root {
+  height: 100%;
+}
+
+.viewport {
+  overflow: scroll;
+  height: 100%;
+}
+
+.content {
+  padding: 0 20px 20px;
+}
+
 .logoContainer {
   padding-left: 6px;
   padding-top: 32px;
 }
 
 .logo path {
-  fill: var(--canon-fg-text-primary);
+  fill: var(--primary);
 }
 
 .menu {
@@ -43,10 +55,11 @@
 }
 
 .sectionTitle {
-  font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   padding: 12px 0;
+  color: var(--primary);
+  margin-top: 24px;
 }
 
 .line {
@@ -63,23 +76,57 @@
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--canon-bg);
+    background-color: var(--bg);
   }
 }
 
 .line.active {
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
+}
+
+.line.active .lineTitle {
+  color: var(--primary);
 }
 
 .lineTitle {
-  font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-text-primary);
+  color: var(--secondary);
 }
 
 .lineStatus {
-  font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
+}
+
+.scrollbar {
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  width: 0.25rem;
+  border-radius: 0.375rem;
+  margin: 0.5rem;
+  opacity: 0;
+  transition: opacity 150ms 300ms;
+  right: -20px;
+
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    transition-duration: 75ms;
+    transition-delay: 0ms;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 1.25rem;
+    height: 100%;
+  }
+}
+
+.thumb {
+  width: 100%;
+  border-radius: inherit;
+  background-color: rgba(0, 0, 0, 0.2);
 }
diff --git a/canon-docs/src/components/Sidebar/docs.tsx b/canon-docs/src/components/Sidebar/docs.tsx
index f207036cfa..da501b151a 100644
--- a/canon-docs/src/components/Sidebar/docs.tsx
+++ b/canon-docs/src/components/Sidebar/docs.tsx
@@ -2,8 +2,7 @@
 
 import Link from 'next/link';
 import { components, overview, layoutComponents, theme } from '@/utils/data';
-import { Box } from '../../../../packages/canon';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
 import { Fragment } from 'react';
@@ -53,9 +52,8 @@ export const Docs = () => {
       {data.map(section => {
         return (
           <Fragment key={section.title}>
-            <Box marginTop="lg" marginBottom="2xs">
-              <div className={styles.sectionTitle}>{section.title}</div>
-            </Box>
+            <div className={styles.sectionTitle}>{section.title}</div>
+
             {section.content.map(item => {
               const isActive = pathname === `${section.url}/${item.slug}`;
 
diff --git a/canon-docs/src/components/Sidebar/index.tsx b/canon-docs/src/components/Sidebar/index.tsx
index 455ab4be9b..ad6df68b97 100644
--- a/canon-docs/src/components/Sidebar/index.tsx
+++ b/canon-docs/src/components/Sidebar/index.tsx
@@ -2,28 +2,38 @@ import styles from './Sidebar.module.css';
 import { Docs } from './docs';
 import { Playground } from './playground';
 import Link from 'next/link';
+import { ScrollArea } from '@base-ui-components/react/scroll-area';
 
 export const Sidebar = () => {
   return (
     <div className={styles.sidebar}>
-      <div className={styles.logoContainer}>
-        <Link href="/">
-          <svg
-            width="89"
-            height="27"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={styles.logo}
-          >
-            <path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z" />
-            <path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z" />
-          </svg>
-        </Link>
-      </div>
-      <div className={styles.menu}>
-        <Docs />
-        <Playground />
-      </div>
+      <ScrollArea.Root className={styles.root}>
+        <ScrollArea.Viewport className={styles.viewport}>
+          <div className={styles.content}>
+            <div className={styles.logoContainer}>
+              <Link href="/">
+                <svg
+                  width="89"
+                  height="27"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className={styles.logo}
+                >
+                  <path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z" />
+                  <path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z" />
+                </svg>
+              </Link>
+            </div>
+            <div className={styles.menu}>
+              <Docs />
+              <Playground />
+            </div>
+          </div>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar className={styles.scrollbar}>
+          <ScrollArea.Thumb className={styles.thumb} />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
     </div>
   );
 };
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
index 59502f6314..5773807d74 100644
--- a/canon-docs/src/components/Sidebar/playground.tsx
+++ b/canon-docs/src/components/Sidebar/playground.tsx
@@ -1,10 +1,8 @@
 'use client';
 
 import { components } from '@/utils/data';
-import { Box } from '../../../../packages/canon/src/components/Box';
-import { Checkbox } from '../../../../packages/canon/src/components/Checkbox';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { motion } from 'framer-motion';
+import { Checkbox } from '../../../../packages/canon';
+import { motion } from 'motion/react';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
 import { screenSizes } from '@/utils/data';
@@ -54,28 +52,20 @@ export const Playground = () => {
       transition={{ duration: 0.2 }}
       style={{ position: 'absolute' }}
     >
-      <Box marginTop="lg" marginBottom="2xs">
-        <Text variant="body" weight="bold">
-          Components
-        </Text>
-      </Box>
+      <div className={styles.sectionTitle}>Components</div>
       {components.map(({ slug, title }) => (
         <div className={styles.line} key={slug}>
-          <Text variant="body">{title}</Text>
+          <div className={styles.lineTitle}>{title}</div>
           <Checkbox
             checked={selectedComponents.includes(slug)}
             onChange={() => handleComponentCheckboxChange(slug)}
           />
         </div>
       ))}
-      <Box marginTop="lg" marginBottom="2xs">
-        <Text variant="body" weight="bold">
-          Screen sizes
-        </Text>
-      </Box>
+      <div className={styles.sectionTitle}> Screen sizes</div>
       {screenSizes.map(({ slug, title }) => (
         <div className={styles.line} key={slug}>
-          <Text variant="body">{title}</Text>
+          <div className={styles.lineTitle}>{title}</div>
           <Checkbox
             checked={selectedScreenSizes.includes(slug)}
             onChange={() => handleCheckboxChange(slug)}
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index dc892e099c..f04b304afa 100644
--- a/canon-docs/src/components/Snippet/styles.module.css
+++ b/canon-docs/src/components/Snippet/styles.module.css
@@ -6,8 +6,8 @@
 
 .preview {
   border-radius: 4px;
-  box-shadow: inset 0 0 0 1px var(--canon-border);
-  background-color: var(--canon-bg);
+  box-shadow: inset 0 0 0 1px var(--border);
+  background-color: var(--bg);
   transition: all 0.2s ease-in-out;
   padding: 1px;
   position: relative;
@@ -38,7 +38,7 @@
 
 [data-theme='dark'] .previewContent {
   background-image: radial-gradient(
-    rgba(255, 255, 255, 0.1) 1px,
+    rgba(255, 255, 255, 0.14) 1px,
     transparent 0
   );
 }
diff --git a/canon-docs/src/components/Table/styles.module.css b/canon-docs/src/components/Table/styles.module.css
index 9b67b25025..b05ee2c039 100644
--- a/canon-docs/src/components/Table/styles.module.css
+++ b/canon-docs/src/components/Table/styles.module.css
@@ -15,7 +15,7 @@
  */
 
 .wrapper {
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   border-radius: 4px;
   overflow: hidden;
   margin-bottom: 1rem;
@@ -33,7 +33,7 @@
   padding: 12px 16px !important;
   border: none !important;
   text-align: left;
-  background-color: var(--canon-bg-elevated) !important;
+  background-color: var(--panel) !important;
   font-size: 16px;
   transition: background-color 0.2s ease-in-out;
 
@@ -43,14 +43,14 @@
 }
 
 .tableHeaderCell {
-  border-bottom: 1px solid var(--canon-border) !important;
+  border-bottom: 1px solid var(--border) !important;
   font-weight: 500;
   font-size: 14px;
 }
 
 .tableRow {
   border: none;
-  border-bottom: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--border);
   &:last-child {
     border-bottom: none;
   }
@@ -59,7 +59,7 @@
 .tableChip {
   display: inline-block;
   font-size: 14px !important;
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   border-radius: 6px;
   padding: 0px 6px;
   height: 24px;
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index cdf9ddd63c..7f074f9188 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -33,9 +33,7 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
             weight="bold"
             {...rest}
             style={{
-              color: state.selected
-                ? 'var(--canon-fg-text-primary)'
-                : 'var(--canon-fg-text-secondary)',
+              color: state.selected ? 'var(--primary)' : 'var(--secondary)',
             }}
           >
             {children}
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
index 137bc7470d..82e744b8b2 100644
--- a/canon-docs/src/components/Tabs/styles.module.css
+++ b/canon-docs/src/components/Tabs/styles.module.css
@@ -5,7 +5,7 @@
 .list {
   display: flex;
   gap: var(--canon-space-6);
-  border-bottom: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--border);
   position: relative;
   margin-bottom: var(--canon-space-6);
 }
@@ -22,6 +22,6 @@
   left: var(--active-tab-left);
   width: var(--active-tab-width);
   height: 1px;
-  background-color: var(--canon-fg-text-primary);
+  background-color: var(--primary);
   transition: all 0.2s ease-in-out;
 }
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index 526d7bf918..95228fa917 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -12,7 +12,7 @@
 .tabsTheme {
   width: 142px;
   border-radius: 0.375rem;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
@@ -26,22 +26,21 @@
 .tab {
   all: unset;
   height: 60px;
-  font-family: var(--docs-font);
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   cursor: pointer;
   transition: color 0.2s ease-in-out;
 
   &:hover {
-    color: var(--canon-fg-text-primary);
+    color: var(--primary);
   }
 
   &[data-selected] {
-    color: var(--canon-fg-text-primary);
+    color: var(--primary);
 
     & p {
-      color: var(--canon-fg-text-primary);
+      color: var(--primary);
     }
   }
 
@@ -53,14 +52,14 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--canon-bg-elevated);
+      outline: 2px solid var(--panel);
       outline-offset: -1px;
     }
   }
 }
 
 .tab p {
-  color: var(--canon-fg-text-secondary) !important;
+  color: var(--secondary) !important;
 }
 
 .indicator {
@@ -72,7 +71,7 @@
   width: var(--active-tab-width);
   height: 1px;
   border-radius: 0.25rem;
-  background-color: var(--canon-fg-text-primary);
+  background-color: var(--primary);
   transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css
index 3b0378a03e..ff85129441 100644
--- a/canon-docs/src/components/Toolbar/styles.module.css
+++ b/canon-docs/src/components/Toolbar/styles.module.css
@@ -1,17 +1,18 @@
 .toolbar {
   position: sticky;
-  top: 0;
+  top: 16px;
   left: 0;
   right: 0;
+  border-radius: 8px;
   z-index: 10;
-  background-color: var(--canon-bg-elevated);
-  border-bottom: 1px solid var(--canon-border);
+  background-color: var(--panel);
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--canon-space-6);
   transition: background-color 0.2s ease-in-out;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
 }
 
 .actions {
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
index 0ae2675e31..ca06762e23 100644
--- a/canon-docs/src/components/Toolbar/theme-name.module.css
+++ b/canon-docs/src/components/Toolbar/theme-name.module.css
@@ -17,7 +17,7 @@
   color: var(--color-gray-900);
   cursor: pointer;
   user-select: none;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out;
 
   &:focus-visible {
@@ -43,9 +43,9 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   border-radius: 0.375rem;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   color: var(--color-gray-900);
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   padding-inline: 0.25rem;
   transform-origin: var(--transform-origin);
   transition: transform 150ms, opacity 150ms;
@@ -104,7 +104,7 @@
     z-index: 0;
     position: relative;
     color: var(--color-gray-50);
-    background-color: var(--canon-bg);
+    background-color: var(--bg);
   }
 
   &[data-highlighted]::before {
diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx
index 07b734de34..6b35d0efcc 100644
--- a/canon-docs/src/components/Toolbar/theme-name.tsx
+++ b/canon-docs/src/components/Toolbar/theme-name.tsx
@@ -6,8 +6,7 @@ import { Icon } from '@backstage/canon';
 import { usePlayground } from '@/utils/playground-context';
 
 const themes = [
-  { name: 'Backstage Default', value: 'default' },
-  { name: 'Backstage Legacy', value: 'legacy' },
+  { name: 'Backstage', value: 'default' },
   { name: 'Custom theme', value: 'custom' },
 ];
 
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index ac3701541f..37ccb25249 100644
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ b/canon-docs/src/components/Toolbar/theme.module.css
@@ -1,14 +1,14 @@
 .tabs {
   border-radius: 0.375rem;
   width: 100%;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
@@ -29,23 +29,23 @@
   outline: 0;
   background: none;
   appearance: none;
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
   user-select: none;
   height: 2rem;
   flex: 1;
   cursor: pointer;
 
   &[data-selected] {
-    color: var(--canon-fg-text-primary);
+    color: var(--primary);
 
     & p {
-      color: var(--canon-fg-text-primary);
+      color: var(--primary);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--canon-fg-text-primary);
+      color: var(--primary);
     }
   }
 
@@ -57,14 +57,14 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--canon-bg-elevated);
+      outline: 2px solid var(--panel);
       outline-offset: -1px;
     }
   }
 }
 
 .tab p {
-  color: var(--canon-fg-text-secondary) !important;
+  color: var(--secondary) !important;
 }
 
 .indicator {
@@ -76,7 +76,7 @@
   width: var(--active-tab-width);
   height: 1.5rem;
   border-radius: 0.25rem;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/css/globals.css
similarity index 64%
rename from canon-docs/src/app/globals.css
rename to canon-docs/src/css/globals.css
index 343f23a38f..d7e64c3341 100644
--- a/canon-docs/src/app/globals.css
+++ b/canon-docs/src/css/globals.css
@@ -1,13 +1,33 @@
+:root {
+  --bg: #f8f8f8;
+  --panel: #fff;
+  --primary: #000;
+  --secondary: #757575;
+  --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
+    'Courier New', monospace;
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
+  --border: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] {
+  --bg: #000;
+  --panel: #222222;
+  --primary: #fff;
+  --secondary: #9e9e9e;
+  --border: rgba(255, 255, 255, 0.1);
+}
+
 body {
   display: flex;
   flex-direction: row;
-  background-color: var(--canon-bg);
-  color: var(--canon-fg-text-primary);
+  background-color: var(--bg);
+  color: var(--primary);
+  font-family: var(--font-regular);
   transition: background-color 0.2s ease-in-out;
-
-  --docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 iframe {
@@ -22,7 +42,7 @@ iframe {
 .shiki,
 .shiki span {
   background-color: transparent !important;
-  font-family: var(--canon-font-monospace);
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.7;
 }
@@ -41,8 +61,8 @@ iframe {
 }
 
 .ͼ2 .cm-gutters {
-  background-color: var(--canon-bg);
-  border-right: 1px solid var(--canon-border);
+  background-color: var(--bg);
+  border-right: 1px solid var(--border);
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 
diff --git a/canon-docs/src/css/mdx.module.css b/canon-docs/src/css/mdx.module.css
new file mode 100644
index 0000000000..9fb977214d
--- /dev/null
+++ b/canon-docs/src/css/mdx.module.css
@@ -0,0 +1,32 @@
+.h1 {
+  font-size: 2.5rem;
+  margin-top: 4rem;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+}
+
+.h2 {
+  font-size: 1.5rem;
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+}
+
+.h3 {
+  font-size: 1.25rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: var(--primary);
+}
+
+.p {
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--secondary);
+}
+
+.p:first-of-type {
+  margin-bottom: 2rem;
+}
diff --git a/canon-docs/src/app/page.module.css b/canon-docs/src/css/page.module.css
similarity index 88%
rename from canon-docs/src/app/page.module.css
rename to canon-docs/src/css/page.module.css
index bc28185d48..3a0bb492d8 100644
--- a/canon-docs/src/app/page.module.css
+++ b/canon-docs/src/css/page.module.css
@@ -4,11 +4,12 @@
 
 .container {
   width: 100%;
+  padding: 0 16px;
 }
 
 @media (min-width: 768px) {
   .container {
-    padding-left: 300px;
+    padding-left: 332px;
   }
 }
 
@@ -17,7 +18,7 @@
 }
 
 .page p {
-  color: var(--canon-fg-text-primary);
+  color: var(--primary);
   font-size: 1rem;
   line-height: 1.5rem;
   margin-top: 0;
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
index 5eb16edbfe..8ef40f3924 100644
--- a/canon-docs/src/mdx-components.tsx
+++ b/canon-docs/src/mdx-components.tsx
@@ -2,66 +2,22 @@ import React, { ReactNode } from 'react';
 import type { MDXComponents } from 'mdx/types';
 import Image, { ImageProps } from 'next/image';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Box } from '../../packages/canon/src/components/Box';
+import styles from './css/mdx.module.css';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     h1: ({ children }) => (
-      <Box style={{ marginTop: '4rem' }}>
-        <h1
-          style={{
-            fontFamily: 'var(--docs-font)',
-            fontSize: '3rem',
-            fontWeight: 'var(--canon-font-weight-bold)',
-            marginTop: '4rem',
-            marginBottom: '0.5rem',
-          }}
-        >
-          {children as ReactNode}
-        </h1>
-      </Box>
+      <h1 className={styles.h1}>{children as ReactNode}</h1>
     ),
     h2: ({ children }) => (
-      <Box marginTop="2xl" marginBottom="md">
-        <h2
-          style={{
-            fontFamily: 'var(--docs-font)',
-            fontSize: '1.5rem',
-            fontWeight: 'var(--canon-font-weight-bold)',
-          }}
-        >
-          {children as ReactNode}
-        </h2>
-      </Box>
+      <h2 className={styles.h2}>{children as ReactNode}</h2>
     ),
     h3: ({ children }) => (
-      <h3
-        style={{
-          fontFamily: 'var(--docs-font)',
-          fontSize: '1.25rem',
-          fontWeight: 'var(--canon-font-weight-bold)',
-          marginTop: '2rem',
-          marginBottom: '0.5rem',
-        }}
-      >
-        {children as ReactNode}
-      </h3>
-    ),
-    p: ({ children }) => (
-      <p
-        style={{
-          fontFamily: 'var(--docs-font)',
-          fontSize: '1rem',
-          lineHeight: '1.5',
-          marginTop: '0',
-          marginBottom: '1rem',
-        }}
-      >
-        {children as ReactNode}
-      </p>
+      <h3 className={styles.h3}>{children as ReactNode}</h3>
     ),
+    p: ({ children }) => <p className={styles.p}>{children as ReactNode}</p>,
     a: ({ children, href }) => (
-      <a href={href} style={{ color: 'var(--canon-fg-text-primary)' }}>
+      <a href={href} style={{ color: 'var(--primary)' }}>
         {children as ReactNode}
       </a>
     ),
@@ -78,12 +34,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     code: ({ children }) => (
       <code
         style={{
-          fontFamily: 'var(--canon-font-monospace)',
-          backgroundColor: 'var(--canon-bg-elevated)',
+          fontFamily: 'var(--font-mono)',
+          backgroundColor: 'var(--panel)',
           padding: '0.2rem 0.375rem',
           borderRadius: '0.25rem',
-          color: 'var(--canon-fg-text-secondary)',
-          border: '1px solid var(--canon-border)',
+          color: 'var(--secondary)',
+          border: '1px solid var(--border)',
           fontSize: '0.875rem',
         }}
       >
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index 40ffc69c8c..27c0ba9922 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -4,7 +4,6 @@ import { Box, Container } from '../../../packages/canon';
 
 const DecorativeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       height: '64px',
       background: '#eaf2fd',
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 161747cbf6..87012b7630 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -4,7 +4,6 @@ import { Box, Grid } from '../../../packages/canon';
 
 const FakeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
diff --git a/canon-docs/src/snippets/inline.tsx b/canon-docs/src/snippets/inline.tsx
index 73b619e3af..43fd56c650 100644
--- a/canon-docs/src/snippets/inline.tsx
+++ b/canon-docs/src/snippets/inline.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Inline } from '../../../packages/canon';
+import { Box, Flex } from '../../../packages/canon';
 
 const fakeBlockList = [
   { width: 45, height: 60 },
@@ -24,7 +24,6 @@ const FakeBox = ({
   height?: number;
 }) => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
@@ -39,10 +38,10 @@ const FakeBox = ({
 
 export const InlinePreview = () => {
   return (
-    <Inline>
+    <Flex>
       {fakeBlockList.map((block, index) => (
         <FakeBox key={index} width={block.width} height={block.height} />
       ))}
-    </Inline>
+    </Flex>
   );
 };
diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock
index 03749ea3e0..b2aaaec561 100644
--- a/canon-docs/yarn.lock
+++ b/canon-docs/yarn.lock
@@ -1510,6 +1510,7 @@ __metadata:
     eslint: ^8
     eslint-config-next: 14.2.23
     lightningcss: ^1.28.2
+    motion: ^12.4.1
     next: 14.2.23
     react: ^18.0.2
     react-dom: ^18.0.2
@@ -2584,6 +2585,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^12.4.1":
+  version: 12.4.1
+  resolution: "framer-motion@npm:12.4.1"
+  dependencies:
+    motion-dom: ^12.0.0
+    motion-utils: ^12.0.0
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 42679a16d9b99d5651b4cce157e56305b7341d94593d167647a478b3b934a6056693c8b274b5cd775557e6cc6b78e97981395c1a161c0467be922f58146b82ce
+  languageName: node
+  linkType: hard
+
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs.realpath@npm:1.0.0"
@@ -4104,6 +4127,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "motion-dom@npm:12.0.0"
+  dependencies:
+    motion-utils: ^12.0.0
+  checksum: 58b6c7e678ac29b0d68b966e3e5879d2b3cc6b85ad4e3d141013e44666919669c42e9344508f91a4d35c3c6ddb71660a92a04414998046d10c2309bb630ebeb0
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "motion-utils@npm:12.0.0"
+  checksum: 0b6ad4e10206e32a27fdd857df61ffdf929390eebda1d4832f6c85776677c7f8decdaf0f1eea10aa19e202f43a828bb32cade6e74a55ce7aec9d0c3fbd20dcf4
+  languageName: node
+  linkType: hard
+
+"motion@npm:^12.4.1":
+  version: 12.4.1
+  resolution: "motion@npm:12.4.1"
+  dependencies:
+    framer-motion: ^12.4.1
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 4c6711da834de4e266dd64f6d81fcf1668193fed9afc011722b575d874412d2ac0206fbcb7675eccb4383fe5480e292d7d71652acfe6dab0b476515b72d9a601
+  languageName: node
+  linkType: hard
+
 "ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"