diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx
index 421b315a7b..3a16b533e9 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx
@@ -27,10 +27,10 @@ example below on how to set your light and dark mode.
   lang="css"
   code={`/** Light theme **/
 [data-theme='light'] {
-    --canon-accent: #1ed760;
+    --canon-bg-accent: #1ed760;
     --canon-bg: #fff;
-    --canon-surface-1: #f5f5f5;
-    --canon-surface-2: #000;
+    --canon-bg-elevated: #f5f5f5;
+    --canon-bg: #000;
     --canon-outline: #666;
     --canon-outline-focus: #ccc;
     --canon-text-primary: #f0f0f0;
@@ -42,10 +42,10 @@ example below on how to set your light and dark mode.
   
 /** Dark theme **/
 [data-theme='dark'] {
-    --canon-accent: #1ed760;
+    --canon-bg-accent: #1ed760;
+    --canon-bg: #000;
+    --canon-bg-elevated: #f5f5f5;
     --canon-bg: #000;
-    --canon-surface-1: #f5f5f5;
-    --canon-surface-2: #000;
     --canon-outline: #666;
     --canon-outline-focus: #ccc;
     --canon-text-primary: #fff;
@@ -73,7 +73,7 @@ application to match your brand.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-accent</Chip>
+        <Chip head>--canon-bg-accent</Chip>
       </Table.Cell>
       <Table.Cell>The accent color for the theme.</Table.Cell>
     </Table.Row>
@@ -85,13 +85,13 @@ application to match your brand.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-surface-1</Chip>
+        <Chip head>--canon-bg-elevated</Chip>
       </Table.Cell>
       <Table.Cell>The first surface color for the theme.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-surface-2</Chip>
+        <Chip head>--canon-bg</Chip>
       </Table.Cell>
       <Table.Cell>The second surface color for the theme.</Table.Cell>
     </Table.Row>
diff --git a/canon-docs/src/app/(playground)/playground/styles.module.css b/canon-docs/src/app/(playground)/playground/styles.module.css
index 5280021836..8fdd79a1dd 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-base);
-  background-color: var(--canon-background-base);
+  border: 1px solid var(--canon-border);
+  background-color: var(--canon-bg);
   padding: 16px;
 }
diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/app/globals.css
index 5efc0407e7..71f7b8be9c 100644
--- a/canon-docs/src/app/globals.css
+++ b/canon-docs/src/app/globals.css
@@ -1,7 +1,7 @@
 body {
   display: flex;
   flex-direction: row;
-  background-color: var(--canon-background);
+  background-color: var(--canon-bg);
   color: var(--canon-text-primary);
   transition: background-color 0.2s ease-in-out;
 
@@ -41,8 +41,8 @@ iframe {
 }
 
 .ͼ2 .cm-gutters {
-  background-color: var(--canon-surface-2);
-  border-right: 1px solid var(--canon-border-base);
+  background-color: var(--canon-bg);
+  border-right: 1px solid var(--canon-border);
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css
index e74714e07c..b5f005f962 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-base);
+  border: 1px solid var(--canon-border);
   position: relative;
   background: transparent;
   overflow-x: auto;
@@ -15,7 +15,7 @@
 }
 
 .title {
-  border-bottom: 1px solid var(--canon-border-base);
+  border-bottom: 1px solid var(--canon-border);
   padding: 12px 20px;
   font-size: 0.875rem;
   color: var(--canon-text-secondary);
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 3d8ed394bd..6f76267725 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-accent: #000;
+  --canon-bg-accent: #000;
 }`;
 
 const myTheme = createTheme({
   theme: 'light',
   settings: {
-    background: 'var(--canon-surface-1)',
+    background: 'var(--canon-bg-elevated)',
     backgroundImage: '',
     foreground: '#6182B8',
     caret: '#5d00ff',
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css
index a4f51c8a1d..fdb2d00fba 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-surface-1);
+  background-color: var(--canon-bg-elevated);
   border-radius: 0.375rem;
-  border: 1px solid var(--canon-border-base);
+  border: 1px solid var(--canon-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-base);
-  background-color: var(--canon-surface-1);
+  border-bottom: 1px solid var(--canon-border);
+  background-color: var(--canon-bg-elevated);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -65,7 +65,7 @@
   height: 28px;
   padding: 0 8px;
   color: #fff;
-  background-color: var(--canon-surface-2);
+  background-color: var(--canon-bg);
   color: var(--canon-text-primary);
   transition: background-color 0.2s ease-in-out;
   border-radius: 0.25rem;
diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css
index 6993f51943..1353f150bb 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-surface-1);
+  background-color: var(--canon-bg-elevated);
   padding: var(--canon-space-6);
-  border-radius: var(--canon-border-radius-xs);
-  border: 1px solid var(--canon-border-base);
+  border-radius: var(--canon-radius-2);
+  border: 1px solid var(--canon-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-surface-2);
-  border: 1px solid var(--canon-border-base);
-  border-radius: var(--canon-border-radius-xs);
+  background-color: var(--canon-bg);
+  border: 1px solid var(--canon-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-body);
+  font-size: var(--canon-font-size-3);
   color: var(--canon-text-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 40b177ced0..8cef221620 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-background);
+  background-color: var(--canon-bg);
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--canon-surface-1);
+    background-color: var(--canon-bg-elevated);
   }
 }
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index f3bdd3f2e7..43f1681812 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -11,8 +11,8 @@
     width: 300px;
     height: 100vh;
     color: var(--canon-text-primary);
-    background-color: var(--canon-surface-1);
-    border-right: 1px solid var(--canon-border-base);
+    background-color: var(--canon-bg-elevated);
+    border-right: 1px solid var(--canon-border);
     padding-left: 20px;
     padding-right: 20px;
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
@@ -44,7 +44,7 @@
 
 .sectionTitle {
   font-family: var(--docs-font);
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   padding: 12px 0;
 }
@@ -63,23 +63,23 @@
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--canon-surface-2);
+    background-color: var(--canon-bg);
   }
 }
 
 .line.active {
-  background-color: var(--canon-surface-2);
+  background-color: var(--canon-bg);
 }
 
 .lineTitle {
   font-family: var(--docs-font);
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-primary);
 }
 
 .lineStatus {
   font-family: var(--docs-font);
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   color: var(--canon-text-secondary);
 }
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index c56627b1e1..65bdc62d05 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-base);
-  background-color: var(--canon-background);
+  box-shadow: inset 0 0 0 1px var(--canon-border);
+  background-color: var(--canon-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 df90566eee..7ac48709eb 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-base);
+  border: 1px solid var(--canon-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-surface-1) !important;
+  background-color: var(--canon-bg-elevated) !important;
   font-size: 16px;
   transition: background-color 0.2s ease-in-out;
 
@@ -43,14 +43,14 @@
 }
 
 .tableHeaderCell {
-  border-bottom: 1px solid var(--canon-border-base) !important;
+  border-bottom: 1px solid var(--canon-border) !important;
   font-weight: 500;
   font-size: 14px;
 }
 
 .tableRow {
   border: none;
-  border-bottom: 1px solid var(--canon-border-base);
+  border-bottom: 1px solid var(--canon-border);
   &:last-child {
     border-bottom: none;
   }
@@ -59,7 +59,7 @@
 .tableChip {
   display: inline-block;
   font-size: 14px !important;
-  border: 1px solid var(--canon-border-base);
+  border: 1px solid var(--canon-border);
   border-radius: 6px;
   padding: 0px 6px;
   height: 24px;
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
index c331316353..8d898fd727 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-base);
+  border-bottom: 1px solid var(--canon-border);
   position: relative;
   margin-bottom: var(--canon-space-6);
 }
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index c16ed3d02a..90730b1403 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-surface-2);
+  background-color: var(--canon-bg);
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
@@ -28,7 +28,7 @@
   height: 60px;
   font-family: var(--docs-font);
   color: var(--canon-text-secondary);
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   cursor: pointer;
   transition: color 0.2s ease-in-out;
@@ -53,7 +53,7 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--canon-surface-1);
+      outline: 2px solid var(--canon-bg-elevated);
       outline-offset: -1px;
     }
   }
diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css
index ff3376cfc1..3b0378a03e 100644
--- a/canon-docs/src/components/Toolbar/styles.module.css
+++ b/canon-docs/src/components/Toolbar/styles.module.css
@@ -4,8 +4,8 @@
   left: 0;
   right: 0;
   z-index: 10;
-  background-color: var(--canon-surface-1);
-  border-bottom: 1px solid var(--canon-border-base);
+  background-color: var(--canon-bg-elevated);
+  border-bottom: 1px solid var(--canon-border);
   height: 60px;
   display: flex;
   align-items: center;
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
index c9700c571b..0ae2675e31 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-surface-2);
+  background-color: var(--canon-bg);
   transition: background-color 0.2s ease-in-out;
 
   &:focus-visible {
@@ -31,7 +31,7 @@
 }
 
 .SelectValue {
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
 }
 
@@ -43,9 +43,9 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   border-radius: 0.375rem;
-  background-color: var(--canon-surface-1);
+  background-color: var(--canon-bg-elevated);
   color: var(--color-gray-900);
-  border: 1px solid var(--canon-border-base);
+  border: 1px solid var(--canon-border);
   padding-inline: 0.25rem;
   transform-origin: var(--transform-origin);
   transition: transform 150ms, opacity 150ms;
@@ -82,7 +82,7 @@
   padding-block: 0.5rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   display: grid;
   gap: 0.5rem;
@@ -104,7 +104,7 @@
     z-index: 0;
     position: relative;
     color: var(--color-gray-50);
-    background-color: var(--canon-surface-2);
+    background-color: var(--canon-bg);
   }
 
   &[data-highlighted]::before {
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index 2d17ffbac2..564f5be4ca 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-surface-2);
+  background-color: var(--canon-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-surface-2);
+  background-color: var(--canon-bg);
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
@@ -57,7 +57,7 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--canon-surface-1);
+      outline: 2px solid var(--canon-bg-elevated);
       outline-offset: -1px;
     }
   }
@@ -76,7 +76,7 @@
   width: var(--active-tab-width);
   height: 1.5rem;
   border-radius: 0.25rem;
-  background-color: var(--canon-surface-1);
+  background-color: var(--canon-bg-elevated);
   transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
index eec8eec438..85df3315c4 100644
--- a/canon-docs/src/mdx-components.tsx
+++ b/canon-docs/src/mdx-components.tsx
@@ -77,11 +77,11 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       <code
         style={{
           fontFamily: 'var(--canon-font-monospace)',
-          backgroundColor: 'var(--canon-surface-1)',
+          backgroundColor: 'var(--canon-bg-elevated)',
           padding: '0.2rem 0.375rem',
           borderRadius: '0.25rem',
           color: 'var(--canon-text-secondary)',
-          border: '1px solid var(--canon-border-base)',
+          border: '1px solid var(--canon-border)',
           fontSize: '0.875rem',
         }}
       >
diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx
index 867461818b..0588d75c0a 100644
--- a/packages/canon/.storybook/preview.tsx
+++ b/packages/canon/.storybook/preview.tsx
@@ -85,12 +85,11 @@ const preview: Preview = {
       defaultTheme: 'Light',
     }),
     Story => {
-      document.body.style.backgroundColor = 'var(--canon-background)';
+      document.body.style.backgroundColor = 'var(--canon-bg)';
 
       const docsStoryElements = document.getElementsByClassName('docs-story');
       Array.from(docsStoryElements).forEach(element => {
-        (element as HTMLElement).style.backgroundColor =
-          'var(--canon-background)';
+        (element as HTMLElement).style.backgroundColor = 'var(--canon-bg)';
       });
 
       return (
diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css
index 3e8cc85a56..92884fa4e7 100644
--- a/packages/canon/.storybook/themes/backstage.css
+++ b/packages/canon/.storybook/themes/backstage.css
@@ -54,35 +54,35 @@
 
 [data-theme-name='legacy'][data-theme='light'] {
   /* Colors */
-  --canon-accent: #2e77d0;
-  --canon-background: #f8f8f8;
-  --canon-surface-1: #fff;
-  --canon-surface-2: #f4f4f4;
+  --canon-bg-accent: #2e77d0;
+  --canon-bg: #f8f8f8;
+  --canon-bg-elevated: #fff;
+  --canon-bg: #f4f4f4;
 
   /* Text colors */
   --canon-text-primary: #000;
-  --canon-text-primary-on-accent: #fff;
+  --canon-fg-accent: #fff;
   --canon-text-secondary: #646464;
 }
 
 [data-theme-name='legacy'][data-theme='dark'] {
   /* Colors */
-  --canon-accent: #fff;
-  --canon-background: #000;
-  --canon-surface-1: #121212;
-  --canon-surface-2: #1a1a1a;
+  --canon-bg-accent: #fff;
+  --canon-bg: #000;
+  --canon-bg-elevated: #121212;
+  --canon-bg: #1a1a1a;
 
   /* Borders */
-  --canon-border-base: rgba(255, 255, 255, 0.2);
+  --canon-border: rgba(255, 255, 255, 0.2);
   --canon-border-warning: #f50000;
-  --canon-border-error: #f87503;
-  --canon-border-selected: #25d262;
+  --canon-border-danger: #f87503;
+  --canon-border-focus: #25d262;
 
   /* States - Add more states */
-  --canon-error: #f50000;
+  --canon-fg-danger: #f50000;
 
   /* Text colors */
   --canon-text-primary: #fff;
-  --canon-text-primary-on-accent: #000;
+  --canon-fg-accent: #000;
   --canon-text-secondary: #b3b3b3;
 }
diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index d11f9fbab7..bf4b8ae5de 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -382,7 +382,7 @@ export const BorderRadius: Story = {
 export const Border: Story = {
   args: {
     style: {
-      background: 'var(--canon-surface-1)',
+      background: 'var(--canon-bg-elevated)',
       color: 'var(--canon-text-primary)',
       padding: '4px 8px',
       width: '80px',
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 2dfc2f1aa6..3456f8aa1a 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -22,16 +22,16 @@
   user-select: none;
   font-family: var(--canon-font-regular);
   font-weight: var(--canon-font-weight-bold);
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   padding: 0;
   transition: all 150ms ease;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--canon-radius-2);
 }
 
 .canon-Button--variant-primary {
-  background-color: var(--canon-accent);
-  color: var(--canon-text-primary-on-accent);
+  background-color: var(--canon-bg-accent);
+  color: var(--canon-fg-accent);
 
   &:hover {
     background-color: transparent;
@@ -42,7 +42,7 @@
 
 .canon-Button--variant-secondary {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--canon-border-base);
+  box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-text-primary);
 
   &:hover {
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index 9d055be24d..76e14029ca 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -5,13 +5,13 @@
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  box-shadow: inset 0 0 0 1px var(--canon-border-base);
+  box-shadow: inset 0 0 0 1px var(--canon-border);
   cursor: pointer;
   border-radius: 2px;
   transition: all 0.2s ease-in-out;
 
   &[data-checked] {
-    background-color: var(--canon-accent);
+    background-color: var(--canon-bg-accent);
   }
 }
 
@@ -20,7 +20,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: var(--canon-spacing-xs);
+  gap: var(--canon-space-2);
   font-size: var(--canon-font-size-xs);
   font-family: var(--canon-font-regular);
   color: var(--canon-text-primary);
@@ -37,5 +37,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--canon-text-primary-on-accent);
+  color: var(--canon-fg-accent);
 }
diff --git a/packages/canon/src/components/Field/Field.styles.css b/packages/canon/src/components/Field/Field.styles.css
index 3412ab7b5c..317dce8143 100644
--- a/packages/canon/src/components/Field/Field.styles.css
+++ b/packages/canon/src/components/Field/Field.styles.css
@@ -22,14 +22,14 @@
 }
 
 .canon-FieldLabel {
-  font-size: var(--canon-font-size-caption);
+  font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
 .canon-FieldDescription {
-  font-size: var(--canon-font-size-caption);
+  font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-secondary);
   margin: 0;
@@ -37,15 +37,15 @@
 }
 
 .canon-FieldError {
-  font-size: var(--canon-font-size-caption);
+  font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-error);
+  color: var(--canon-fg-danger);
   margin: 0;
   padding-top: var(--canon-space-1_5);
 }
 
 .canon-FieldValidity {
-  font-size: var(--canon-font-size-caption);
+  font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-secondary);
   margin: 0;
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 122d8f4925..bc121c1063 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -23,22 +23,22 @@
 }
 
 .canon-Heading--variant-display {
-  font-size: var(--canon-font-size-display);
+  font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
 .canon-Heading--variant-title1 {
-  font-size: var(--canon-font-size-title1);
+  font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
 .canon-Heading--variant-title2 {
-  font-size: var(--canon-font-size-title2);
+  font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
 .canon-Heading--variant-title3 {
-  font-size: var(--canon-font-size-title3);
+  font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
@@ -48,6 +48,6 @@
 }
 
 .canon-Heading--variant-title5 {
-  font-size: var(--canon-font-size-title5);
+  font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css
index 6b66c0aedb..51ad1c5afe 100644
--- a/packages/canon/src/components/Input/Input.styles.css
+++ b/packages/canon/src/components/Input/Input.styles.css
@@ -15,11 +15,11 @@
  */
 
 .canon-Input {
-  border-radius: var(--canon-border-radius-sm);
-  border: 1px solid var(--canon-border-base);
+  border-radius: var(--canon-radius-3);
+  border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
-  background-color: var(--canon-surface-1);
-  font-size: var(--canon-font-size-body);
+  background-color: var(--canon-bg-elevated);
+  font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
   color: var(--canon-text-primary);
   transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
@@ -35,13 +35,13 @@
 }
 
 .canon-Input:focus-visible {
-  outline-color: var(--canon-border-selected);
+  outline-color: var(--canon-border-focus);
   outline-width: 0px;
-  border-color: var(--canon-border-selected);
+  border-color: var(--canon-border-focus);
 }
 
 .canon-Input[data-invalid] {
-  border-color: var(--canon-error);
+  border-color: var(--canon-fg-danger);
 }
 
 .canon-Input--size-sm {
diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css
index 472d88fcb9..6bb470a423 100644
--- a/packages/canon/src/components/Table/styles.css
+++ b/packages/canon/src/components/Table/styles.css
@@ -2,11 +2,11 @@
   position: relative;
   overflow: auto;
   width: 100%;
-  background-color: var(--canon-surface-1);
-  border-radius: var(--canon-border-radius-xs);
+  background-color: var(--canon-bg-elevated);
+  border-radius: var(--canon-radius-2);
   padding-bottom: var(--canon-space-0_5);
   padding-top: var(--canon-space-0_5);
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
 
   table {
     width: 100%;
@@ -31,29 +31,29 @@
   transition: color 0.2s ease-in-out;
 
   &:hover td {
-    background-color: var(--canon-surface-3);
+    background-color: var(--canon-bg-tint);
   }
 
   & .table-cell:first-child {
-    border-top-left-radius: var(--canon-border-radius-xs);
-    border-bottom-left-radius: var(--canon-border-radius-xs);
-    box-shadow: inset 4px 2px 0 0 var(--canon-surface-1),
-      inset 4px -2px 0 0 var(--canon-surface-1);
+    border-top-left-radius: var(--canon-radius-2);
+    border-bottom-left-radius: var(--canon-radius-2);
+    box-shadow: inset 4px 2px 0 0 var(--canon-bg-elevated),
+      inset 4px -2px 0 0 var(--canon-bg-elevated);
     padding-left: var(--canon-space-3);
   }
 
   & .table-cell:last-child {
-    border-top-right-radius: var(--canon-border-radius-xs);
-    border-bottom-right-radius: var(--canon-border-radius-xs);
-    box-shadow: inset -4px 2px 0 0 var(--canon-surface-1),
-      inset -4px -2px 0 0 var(--canon-surface-1);
+    border-top-right-radius: var(--canon-radius-2);
+    border-bottom-right-radius: var(--canon-radius-2);
+    box-shadow: inset -4px 2px 0 0 var(--canon-bg-elevated),
+      inset -4px -2px 0 0 var(--canon-bg-elevated);
     padding-right: var(--canon-space-3);
   }
 }
 
 .table-cell {
   padding: var(--canon-space-3);
-  background-color: var(--canon-surface-2);
-  box-shadow: inset 0px 2px 0 0 var(--canon-surface-1),
-    inset 0px -2px 0 0 var(--canon-surface-1);
+  background-color: var(--canon-bg);
+  box-shadow: inset 0px 2px 0 0 var(--canon-bg-elevated),
+    inset 0px -2px 0 0 var(--canon-bg-elevated);
 }
diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css
index a338c6bca1..62f9d1eec0 100644
--- a/packages/canon/src/components/Text/styles.css
+++ b/packages/canon/src/components/Text/styles.css
@@ -22,22 +22,22 @@
 }
 
 .canon-Text--variant-body {
-  font-size: var(--canon-font-size-body);
+  font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
 .canon-Text--variant-subtitle {
-  font-size: var(--canon-font-size-subtitle);
+  font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
 .canon-Text--variant-caption {
-  font-size: var(--canon-font-size-caption);
+  font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
 .canon-Text--variant-label {
-  font-size: var(--canon-font-size-label);
+  font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index abba9f3d9c..bd03d4d906 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -31,22 +31,19 @@
   --canon-font-weight-bold: 600;
 
   /* Font sizes */
-  --canon-font-size-label: 0.625rem; /* 10px */
-  --canon-font-size-caption: 0.75rem; /* 12px */
-  --canon-font-size-body: 0.875rem; /* 14px */
-  --canon-font-size-subtitle: 1rem; /* 16px */
-  --canon-font-size-title5: 1.25rem; /* 20px */
-  --canon-font-size-title4: 1.5rem; /* 24px */
-  --canon-font-size-title3: 2rem; /* 32px */
-  --canon-font-size-title2: 3rem; /* 48px */
-  --canon-font-size-title1: 4rem; /* 64px */
-  --canon-font-size-display: 5.75rem; /* 92px */
+  --canon-font-size-1: 0.625rem; /* 10px */
+  --canon-font-size-2: 0.75rem; /* 12px */
+  --canon-font-size-3: 0.875rem; /* 14px */
+  --canon-font-size-4: 1rem; /* 16px */
+  --canon-font-size-5: 1.25rem; /* 20px */
+  --canon-font-size-6: 1.5rem; /* 24px */
+  --canon-font-size-7: 2rem; /* 32px */
+  --canon-font-size-8: 3rem; /* 48px */
+  --canon-font-size-9: 4rem; /* 64px */
+  --canon-font-size-10: 5.75rem; /* 92px */
 
   /* Spacing */
-  /* This is the spacing multiplier */
-  --canon-space: 0.25rem; /* 4px */
-
-  /* These are the spacing scale */
+  --canon-space: 0.25rem; /* This is the spacing multiplier */
   --canon-space-0_5: calc(var(--canon-space) * 0.5); /* 2px */
   --canon-space-1: var(--canon-space); /* 4px */
   --canon-space-1_5: calc(var(--canon-space) * 1.5); /* 6px */
@@ -64,58 +61,81 @@
   --canon-space-13: calc(var(--canon-space) * 13); /* 52px */
   --canon-space-14: calc(var(--canon-space) * 14); /* 56px */
 
-  /* Border radius */
-  --canon-border-radius-2xs: 0.125rem; /* 2px */
-  --canon-border-radius-xs: 0.25rem; /* 4px */
-  --canon-border-radius-sm: 0.5rem; /* 8px */
-  --canon-border-radius-md: 0.75rem; /* 12px */
-  --canon-border-radius-lg: 1rem; /* 16px */
-  --canon-border-radius-xl: 1.25rem; /* 20px */
-  --canon-border-radius-2xl: 1.5rem; /* 24px */
+  /* Radius */
+  --canon-radius-factor: 1.5;
+  --canon-radius-1: calc(3px * var(--canon-radius-factor));
+  --canon-radius-2: calc(4px * var(--canon-radius-factor));
+  --canon-radius-3: calc(6px * var(--canon-radius-factor));
+  --canon-radius-4: calc(8px * var(--canon-radius-factor));
+  --canon-radius-5: calc(12px * var(--canon-radius-factor));
+  --canon-radius-6: calc(16px * var(--canon-radius-factor));
+  --canon-radius-full: 9999px;
 
   /* Colors */
-  --canon-accent: #000;
-  --canon-background: #f8f8f8;
-  --canon-surface-1: #fff;
-  --canon-surface-2: #f4f4f4;
-  --canon-surface-3: #f1f1f1;
-
-  /* Borders */
-  --canon-border-base: rgba(0, 0, 0, 0.1);
+  --canon-bg: #f8f8f8;
+  --canon-bg-elevated: #fff;
+  --canon-bg-accent: #000;
+  --canon-bg-accent-active: #000;
+  --canon-bg-accent-disabled: #000;
+  --canon-bg-accent-hover: #000;
+  --canon-bg-tint: #edf2fe;
+  --canon-bg-tint-active: #c7d7ff;
+  --canon-bg-tint-disabled: #f8f8f8;
+  --canon-bg-tint-hover: #dbe4ff;
+  --canon-bg-danger: #f8f8f8;
+  --canon-bg-elevated: #fff;
+  --canon-bg-success: #f8f8f8;
+  --canon-bg-warning: #f8f8f8;
+  --canon-border: rgba(0, 0, 0, 0.1);
+  --canon-border-accent: #000;
+  --canon-border-accent-focus: #000;
+  --canon-border-accent-hover: #000;
+  --canon-border-danger: #e22b2b;
+  --canon-border-focus: rgba(0, 0, 0, 0.4);
   --canon-border-hover: rgba(0, 0, 0, 0.2);
+  --canon-border-success: #008000;
   --canon-border-warning: #e36d05;
-  --canon-border-error: #e22b2b;
-  --canon-border-selected: rgba(0, 0, 0, 0.4);
-
-  /* States - Add more states */
-  --canon-error: #f50000;
-
-  /* Text colors */
+  --canon-fg-accent: #fff;
+  --canon-fg-danger: #e22b2b;
+  --canon-fg-success: #008000;
+  --canon-fg-warning: #e36d05;
+  --canon-text-link: #fff;
+  --canon-text-link-hover: #fff;
   --canon-text-primary: #000;
-  --canon-text-primary-on-accent: #fff;
   --canon-text-secondary: #646464;
 }
 
 /* Dark theme tokens */
 [data-theme='dark'] {
-  /* Colors */
-  --canon-accent: #fff;
-  --canon-background: #000;
-  --canon-surface-1: #121212;
-  --canon-surface-2: #1a1a1a;
-
-  /* Borders */
-  --canon-border-base: rgba(255, 255, 255, 0.2);
-  --canon-border-hover: rgba(255, 255, 255, 0.3);
-  --canon-border-warning: #f50000;
-  --canon-border-error: #f87503;
-  --canon-border-selected: rgba(255, 255, 255, 0.4);
-
-  /* States - Add more states */
-  --canon-error: #f50000;
-
-  /* Text colors */
-  --canon-text-primary: #fff;
-  --canon-text-primary-on-accent: #000;
-  --canon-text-secondary: #b3b3b3;
+  --canon-bg: #f8f8f8;
+  --canon-bg-elevated: #fff;
+  --canon-bg-accent: #000;
+  --canon-bg-accent-active: #000;
+  --canon-bg-accent-disabled: #000;
+  --canon-bg-accent-hover: #000;
+  --canon-bg-tint: #edf2fe;
+  --canon-bg-tint-active: #c7d7ff;
+  --canon-bg-tint-disabled: #f8f8f8;
+  --canon-bg-tint-hover: #dbe4ff;
+  --canon-bg-danger: #f8f8f8;
+  --canon-bg-elevated: #fff;
+  --canon-bg-success: #f8f8f8;
+  --canon-bg-warning: #f8f8f8;
+  --canon-border: rgba(0, 0, 0, 0.1);
+  --canon-border-accent: #000;
+  --canon-border-accent-focus: #000;
+  --canon-border-accent-hover: #000;
+  --canon-border-danger: #e22b2b;
+  --canon-border-focus: rgba(0, 0, 0, 0.4);
+  --canon-border-hover: rgba(0, 0, 0, 0.2);
+  --canon-border-success: #008000;
+  --canon-border-warning: #e36d05;
+  --canon-fg-accent: #000;
+  --canon-fg-danger: #e22b2b;
+  --canon-fg-success: #008000;
+  --canon-fg-warning: #e36d05;
+  --canon-text-link: #fff;
+  --canon-text-link-hover: #fff;
+  --canon-text-primary: #000;
+  --canon-text-secondary: #646464;
 }
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index bbf51c3af6..0252fefaf7 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -21,13 +21,13 @@
     }
 
     .cu-2xl-border-base {
-      border-color: var(--canon-border-base);
+      border-color: var(--canon-border);
       border-width: 1px;
       border-style: solid;
     }
 
     .cu-2xl-border-error {
-      border-color: var(--canon-border-error);
+      border-color: var(--canon-border-danger);
       border-width: 1px;
       border-style: solid;
     }
@@ -38,7 +38,7 @@
     }
 
     .cu-2xl-border-selected {
-      border-color: var(--canon-border-selected);
+      border-color: var(--canon-border-focus);
       border-width: 1px;
       border-style: solid;
     }
@@ -854,19 +854,19 @@
     }
 
     .cu-2xl-rounded-2xl {
-      border-radius: var(--canon-border-radius-2xl);
+      border-radius: var(--canon-radius-full);
     }
 
     .cu-2xl-rounded-2xs {
-      border-radius: var(--canon-border-radius-2xs);
+      border-radius: var(--canon-radius-1);
     }
 
     .cu-2xl-rounded-lg {
-      border-radius: var(--canon-border-radius-lg);
+      border-radius: var(--canon-radius-5);
     }
 
     .cu-2xl-rounded-md {
-      border-radius: var(--canon-border-radius-md);
+      border-radius: var(--canon-radius-4);
     }
 
     .cu-2xl-rounded-none {
@@ -874,15 +874,15 @@
     }
 
     .cu-2xl-rounded-sm {
-      border-radius: var(--canon-border-radius-sm);
+      border-radius: var(--canon-radius-3);
     }
 
     .cu-2xl-rounded-xl {
-      border-radius: var(--canon-border-radius-xl);
+      border-radius: var(--canon-radius-6);
     }
 
     .cu-2xl-rounded-xs {
-      border-radius: var(--canon-border-radius-xs);
+      border-radius: var(--canon-radius-2);
     }
 
     .cu-2xl-row-span-1 {
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index e2bb93a355..a69dae1df3 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -21,13 +21,13 @@
     }
 
     .cu-lg-border-base {
-      border-color: var(--canon-border-base);
+      border-color: var(--canon-border);
       border-width: 1px;
       border-style: solid;
     }
 
     .cu-lg-border-error {
-      border-color: var(--canon-border-error);
+      border-color: var(--canon-border-danger);
       border-width: 1px;
       border-style: solid;
     }
@@ -38,7 +38,7 @@
     }
 
     .cu-lg-border-selected {
-      border-color: var(--canon-border-selected);
+      border-color: var(--canon-border-focus);
       border-width: 1px;
       border-style: solid;
     }
@@ -854,19 +854,19 @@
     }
 
     .cu-lg-rounded-2xl {
-      border-radius: var(--canon-border-radius-2xl);
+      border-radius: var(--canon-radius-full);
     }
 
     .cu-lg-rounded-2xs {
-      border-radius: var(--canon-border-radius-2xs);
+      border-radius: var(--canon-radius-1);
     }
 
     .cu-lg-rounded-lg {
-      border-radius: var(--canon-border-radius-lg);
+      border-radius: var(--canon-radius-5);
     }
 
     .cu-lg-rounded-md {
-      border-radius: var(--canon-border-radius-md);
+      border-radius: var(--canon-radius-4);
     }
 
     .cu-lg-rounded-none {
@@ -874,15 +874,15 @@
     }
 
     .cu-lg-rounded-sm {
-      border-radius: var(--canon-border-radius-sm);
+      border-radius: var(--canon-radius-3);
     }
 
     .cu-lg-rounded-xl {
-      border-radius: var(--canon-border-radius-xl);
+      border-radius: var(--canon-radius-6);
     }
 
     .cu-lg-rounded-xs {
-      border-radius: var(--canon-border-radius-xs);
+      border-radius: var(--canon-radius-2);
     }
 
     .cu-lg-row-span-1 {
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 19842e2eab..2230865466 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -21,13 +21,13 @@
     }
 
     .cu-md-border-base {
-      border-color: var(--canon-border-base);
+      border-color: var(--canon-border);
       border-width: 1px;
       border-style: solid;
     }
 
     .cu-md-border-error {
-      border-color: var(--canon-border-error);
+      border-color: var(--canon-border-danger);
       border-width: 1px;
       border-style: solid;
     }
@@ -38,7 +38,7 @@
     }
 
     .cu-md-border-selected {
-      border-color: var(--canon-border-selected);
+      border-color: var(--canon-border-focus);
       border-width: 1px;
       border-style: solid;
     }
@@ -854,19 +854,19 @@
     }
 
     .cu-md-rounded-2xl {
-      border-radius: var(--canon-border-radius-2xl);
+      border-radius: var(--canon-radius-full);
     }
 
     .cu-md-rounded-2xs {
-      border-radius: var(--canon-border-radius-2xs);
+      border-radius: var(--canon-radius-1);
     }
 
     .cu-md-rounded-lg {
-      border-radius: var(--canon-border-radius-lg);
+      border-radius: var(--canon-radius-5);
     }
 
     .cu-md-rounded-md {
-      border-radius: var(--canon-border-radius-md);
+      border-radius: var(--canon-radius-4);
     }
 
     .cu-md-rounded-none {
@@ -874,15 +874,15 @@
     }
 
     .cu-md-rounded-sm {
-      border-radius: var(--canon-border-radius-sm);
+      border-radius: var(--canon-radius-3);
     }
 
     .cu-md-rounded-xl {
-      border-radius: var(--canon-border-radius-xl);
+      border-radius: var(--canon-radius-6);
     }
 
     .cu-md-rounded-xs {
-      border-radius: var(--canon-border-radius-xs);
+      border-radius: var(--canon-radius-2);
     }
 
     .cu-md-row-span-1 {
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 7a4e9a0cc7..c8fe35cb42 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -21,13 +21,13 @@
     }
 
     .cu-sm-border-base {
-      border-color: var(--canon-border-base);
+      border-color: var(--canon-border);
       border-width: 1px;
       border-style: solid;
     }
 
     .cu-sm-border-error {
-      border-color: var(--canon-border-error);
+      border-color: var(--canon-border-danger);
       border-width: 1px;
       border-style: solid;
     }
@@ -38,7 +38,7 @@
     }
 
     .cu-sm-border-selected {
-      border-color: var(--canon-border-selected);
+      border-color: var(--canon-border-focus);
       border-width: 1px;
       border-style: solid;
     }
@@ -854,19 +854,19 @@
     }
 
     .cu-sm-rounded-2xl {
-      border-radius: var(--canon-border-radius-2xl);
+      border-radius: var(--canon-radius-full);
     }
 
     .cu-sm-rounded-2xs {
-      border-radius: var(--canon-border-radius-2xs);
+      border-radius: var(--canon-radius-1);
     }
 
     .cu-sm-rounded-lg {
-      border-radius: var(--canon-border-radius-lg);
+      border-radius: var(--canon-radius-5);
     }
 
     .cu-sm-rounded-md {
-      border-radius: var(--canon-border-radius-md);
+      border-radius: var(--canon-radius-4);
     }
 
     .cu-sm-rounded-none {
@@ -874,15 +874,15 @@
     }
 
     .cu-sm-rounded-sm {
-      border-radius: var(--canon-border-radius-sm);
+      border-radius: var(--canon-radius-3);
     }
 
     .cu-sm-rounded-xl {
-      border-radius: var(--canon-border-radius-xl);
+      border-radius: var(--canon-radius-6);
     }
 
     .cu-sm-rounded-xs {
-      border-radius: var(--canon-border-radius-xs);
+      border-radius: var(--canon-radius-2);
     }
 
     .cu-sm-row-span-1 {
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index b4d0b3b3d3..218bd37217 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -21,13 +21,13 @@
     }
 
     .cu-xl-border-base {
-      border-color: var(--canon-border-base);
+      border-color: var(--canon-border);
       border-width: 1px;
       border-style: solid;
     }
 
     .cu-xl-border-error {
-      border-color: var(--canon-border-error);
+      border-color: var(--canon-border-danger);
       border-width: 1px;
       border-style: solid;
     }
@@ -38,7 +38,7 @@
     }
 
     .cu-xl-border-selected {
-      border-color: var(--canon-border-selected);
+      border-color: var(--canon-border-focus);
       border-width: 1px;
       border-style: solid;
     }
@@ -854,19 +854,19 @@
     }
 
     .cu-xl-rounded-2xl {
-      border-radius: var(--canon-border-radius-2xl);
+      border-radius: var(--canon-radius-full);
     }
 
     .cu-xl-rounded-2xs {
-      border-radius: var(--canon-border-radius-2xs);
+      border-radius: var(--canon-radius-1);
     }
 
     .cu-xl-rounded-lg {
-      border-radius: var(--canon-border-radius-lg);
+      border-radius: var(--canon-radius-5);
     }
 
     .cu-xl-rounded-md {
-      border-radius: var(--canon-border-radius-md);
+      border-radius: var(--canon-radius-4);
     }
 
     .cu-xl-rounded-none {
@@ -874,15 +874,15 @@
     }
 
     .cu-xl-rounded-sm {
-      border-radius: var(--canon-border-radius-sm);
+      border-radius: var(--canon-radius-3);
     }
 
     .cu-xl-rounded-xl {
-      border-radius: var(--canon-border-radius-xl);
+      border-radius: var(--canon-radius-6);
     }
 
     .cu-xl-rounded-xs {
-      border-radius: var(--canon-border-radius-xs);
+      border-radius: var(--canon-radius-2);
     }
 
     .cu-xl-row-span-1 {
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index 37a56a54c4..fa64c1d624 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -20,13 +20,13 @@
   }
 
   .cu-border-base {
-    border-color: var(--canon-border-base);
+    border-color: var(--canon-border);
     border-width: 1px;
     border-style: solid;
   }
 
   .cu-border-error {
-    border-color: var(--canon-border-error);
+    border-color: var(--canon-border-danger);
     border-width: 1px;
     border-style: solid;
   }
@@ -37,7 +37,7 @@
   }
 
   .cu-border-selected {
-    border-color: var(--canon-border-selected);
+    border-color: var(--canon-border-focus);
     border-width: 1px;
     border-style: solid;
   }
@@ -853,19 +853,19 @@
   }
 
   .cu-rounded-2xl {
-    border-radius: var(--canon-border-radius-2xl);
+    border-radius: var(--canon-radius-full);
   }
 
   .cu-rounded-2xs {
-    border-radius: var(--canon-border-radius-2xs);
+    border-radius: var(--canon-radius-1);
   }
 
   .cu-rounded-lg {
-    border-radius: var(--canon-border-radius-lg);
+    border-radius: var(--canon-radius-5);
   }
 
   .cu-rounded-md {
-    border-radius: var(--canon-border-radius-md);
+    border-radius: var(--canon-radius-4);
   }
 
   .cu-rounded-none {
@@ -873,15 +873,15 @@
   }
 
   .cu-rounded-sm {
-    border-radius: var(--canon-border-radius-sm);
+    border-radius: var(--canon-radius-3);
   }
 
   .cu-rounded-xl {
-    border-radius: var(--canon-border-radius-xl);
+    border-radius: var(--canon-radius-6);
   }
 
   .cu-rounded-xs {
-    border-radius: var(--canon-border-radius-xs);
+    border-radius: var(--canon-radius-2);
   }
 
   .cu-row-span-1 {