diff --git a/canon-docs/src/components/Chip/styles.module.css b/canon-docs/src/components/Chip/styles.module.css
index b96899e6d5..9b80b937d5 100644
--- a/canon-docs/src/components/Chip/styles.module.css
+++ b/canon-docs/src/components/Chip/styles.module.css
@@ -9,7 +9,6 @@
   margin-right: 4px;
   background-color: #f0f0f0;
   color: #5d5d5d;
-  transition: background-color 0.2s ease-in-out;
 }
 
 .head {
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css
index 8b17c11b86..03ec72d6c4 100644
--- a/canon-docs/src/components/CodeBlock/styles.module.css
+++ b/canon-docs/src/components/CodeBlock/styles.module.css
@@ -4,9 +4,8 @@
   position: relative;
   background: transparent;
   overflow-x: auto;
-  font-family: var(--canon-font-monospace);
+  font-family: var(--font-mono);
   background-color: #fff;
-  transition: background-color 0.2s ease-in-out;
   margin-bottom: 1rem;
 }
 
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 66b4afc47c..87c72ecdcb 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -11,13 +11,13 @@ import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
 
 const defaultTheme = `:root {
-  --canon-bg-accent: #000;
+  --canon-bg-solid: #000;
 }`;
 
 const myTheme = createTheme({
   theme: 'light',
   settings: {
-    background: 'var(--canon-bg-surface-1)',
+    background: 'var(--surface-1)',
     backgroundImage: '',
     foreground: '#6182B8',
     caret: '#5d00ff',
diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css
index c87787634e..384327c394 100644
--- a/canon-docs/src/components/HeadlessBanners/styles.module.css
+++ b/canon-docs/src/components/HeadlessBanners/styles.module.css
@@ -1,16 +1,16 @@
 .container {
   display: flex;
   background-color: var(--panel);
-  padding: var(--canon-space-6);
-  border-radius: var(--canon-radius-2);
+  padding: 1.5rem;
+  border-radius: 0.25rem;
   border: 1px solid var(--border);
-  margin-bottom: var(--canon-space-6);
-  gap: var(--canon-space-6);
+  margin-bottom: 1.5rem;
+  gap: 1.5rem;
   transition: background-color 0.2s ease-in-out;
 }
 
 .icon path {
-  fill: var(--canon-fg-primary);
+  fill: var(--primary);
 }
 
 .content {
@@ -31,12 +31,12 @@
   cursor: pointer;
   background-color: var(--bg);
   border: 1px solid var(--border);
-  border-radius: var(--canon-radius-2);
-  padding: 0 var(--canon-space-3);
+  border-radius: 0.25rem;
+  padding: 0 0.75rem;
   height: 28px;
   border-radius: 100px;
-  margin-top: var(--canon-space-3);
-  font-size: var(--canon-font-size-3);
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
   color: var(--primary);
-  gap: var(--canon-space-2);
+  gap: 0.5rem;
 }
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index 4eb49682df..bfb2e6f648 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -15,7 +15,6 @@
     color: var(--primary);
     background-color: var(--panel);
     border: 1px solid var(--border);
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     overflow: hidden;
   }
 }
@@ -56,8 +55,8 @@
 }
 
 .sectionTitle {
-  font-size: var(--canon-font-size-3);
-  font-weight: var(--canon-font-weight-bold);
+  font-size: 0.875rem;
+  font-weight: 600;
   padding: 12px 0;
   color: var(--primary);
   margin-top: 24px;
@@ -74,10 +73,10 @@
   height: 26px;
   padding: 0 12px;
   border-radius: 4px;
-  transition: background-color 0.2s ease-in-out;
 
   &:hover {
     background-color: var(--surface-1);
+    transition: background-color 0.2s ease-in-out;
   }
 }
 
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index 41dc9ed684..7371b29c40 100644
--- a/canon-docs/src/components/Snippet/styles.module.css
+++ b/canon-docs/src/components/Snippet/styles.module.css
@@ -8,7 +8,6 @@
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px var(--border);
   background-color: var(--bg);
-  transition: all 0.2s ease-in-out;
   padding: 1px;
   position: relative;
 }
diff --git a/canon-docs/src/components/Table/styles.module.css b/canon-docs/src/components/Table/styles.module.css
index 3381f39e58..5a5ebab450 100644
--- a/canon-docs/src/components/Table/styles.module.css
+++ b/canon-docs/src/components/Table/styles.module.css
@@ -19,7 +19,6 @@
   text-align: left;
   background-color: var(--panel) !important;
   font-size: 16px;
-  transition: background-color 0.2s ease-in-out;
 
   & p {
     margin: 0 !important;
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 3d02683cef..2a394d248b 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const Root = ({
@@ -27,14 +26,8 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
     {...props}
     render={({ children, ...rest }, state) => {
       return (
-        <button className={styles.tab} {...rest}>
-          <Text
-            variant="subtitle"
-            weight="bold"
-            color={state.selected ? 'primary' : 'secondary'}
-          >
-            {children}
-          </Text>
+        <button className={styles.tab} data-selected={state.selected} {...rest}>
+          {children}
         </button>
       );
     }}
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
index 82e744b8b2..8fdffc3f4b 100644
--- a/canon-docs/src/components/Tabs/styles.module.css
+++ b/canon-docs/src/components/Tabs/styles.module.css
@@ -4,16 +4,28 @@
 
 .list {
   display: flex;
-  gap: var(--canon-space-6);
+  gap: 24px;
   border-bottom: 1px solid var(--border);
   position: relative;
-  margin-bottom: var(--canon-space-6);
+  margin-bottom: 24px;
 }
 
 .tab {
   all: unset;
   cursor: pointer;
-  padding-bottom: 8px;
+  padding-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--primary);
+
+  &[data-selected='false'] {
+    color: var(--secondary);
+  }
+
+  &[data-selected='false']:hover {
+    color: var(--primary);
+    transition: color 0.2s ease-in-out;
+  }
 }
 
 .indicator {
@@ -23,5 +35,7 @@
   width: var(--active-tab-width);
   height: 1px;
   background-color: var(--primary);
-  transition: all 0.2s ease-in-out;
+  transition-property: left, width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in-out;
 }
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index 95228fa917..56501f186e 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -20,19 +20,19 @@
   display: flex;
   position: relative;
   z-index: 0;
-  gap: var(--canon-space-8);
+  gap: 2rem;
 }
 
 .tab {
   all: unset;
   height: 60px;
   color: var(--secondary);
-  font-size: var(--canon-font-size-3);
-  font-weight: var(--canon-font-weight-bold);
+  font-size: 0.875rem;
+  font-weight: 600;
   cursor: pointer;
-  transition: color 0.2s ease-in-out;
 
   &:hover {
+    transition: color 0.2s ease-in-out;
     color: var(--primary);
   }
 
@@ -72,7 +72,7 @@
   height: 1px;
   border-radius: 0.25rem;
   background-color: var(--primary);
-  transition-property: translate, width, background-color;
+  transition-property: translate, width;
   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 5379e2047c..5700e876ab 100644
--- a/canon-docs/src/components/Toolbar/styles.module.css
+++ b/canon-docs/src/components/Toolbar/styles.module.css
@@ -3,15 +3,14 @@
   top: 16px;
   left: 0;
   right: 0;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   z-index: 10;
   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;
+  padding: 0 1.5rem;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
   border: 1px solid var(--border);
 }
@@ -19,5 +18,5 @@
 .actions {
   display: flex;
   align-items: center;
-  gap: var(--canon-space-4);
+  gap: 1rem;
 }
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
index 87d6538e81..02644e8ea0 100644
--- a/canon-docs/src/components/Toolbar/theme-name.module.css
+++ b/canon-docs/src/components/Toolbar/theme-name.module.css
@@ -18,7 +18,6 @@
   cursor: pointer;
   user-select: none;
   background-color: var(--surface-1);
-  transition: background-color 0.2s ease-in-out;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);
@@ -31,8 +30,8 @@
 }
 
 .SelectValue {
-  font-size: var(--canon-font-size-3);
-  font-weight: var(--canon-font-weight-regular);
+  font-size: 0.875rem;
+  font-weight: 400;
 }
 
 .Positioner {
@@ -82,8 +81,8 @@
   padding-block: 0.5rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
-  font-size: var(--canon-font-size-3);
-  font-weight: var(--canon-font-weight-bold);
+  font-size: 0.875rem;
+  font-weight: 600;
   display: grid;
   gap: 0.5rem;
   align-items: center;
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index 641909ac1e..a7895ad840 100644
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ b/canon-docs/src/components/Toolbar/theme.module.css
@@ -2,14 +2,12 @@
   border-radius: 0.375rem;
   width: 100%;
   background-color: var(--surface-1);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
   background-color: var(--surface-1);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .list {
@@ -77,7 +75,7 @@
   height: 1.5rem;
   border-radius: 0.25rem;
   background-color: var(--panel);
-  transition-property: translate, width, background-color;
+  transition-property: translate, width;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
 }
diff --git a/canon-docs/src/css/globals.css b/canon-docs/src/css/globals.css
index db10115dc3..f8ac189113 100644
--- a/canon-docs/src/css/globals.css
+++ b/canon-docs/src/css/globals.css
@@ -31,7 +31,6 @@ body {
   background-color: var(--bg);
   color: var(--primary);
   font-family: var(--font-regular);
-  transition: background-color 0.2s ease-in-out;
 }
 
 iframe {