diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx
index 14cd06cb8f..4cb03859f9 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx
@@ -186,7 +186,7 @@ are prefixed with `fg` to make it easier to identify.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-primary</Chip>
+        <Chip head>--canon-fg-text-primary</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
@@ -194,7 +194,7 @@ are prefixed with `fg` to make it easier to identify.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-secondary</Chip>
+        <Chip head>--canon-fg-text-secondary</Chip>
       </Table.Cell>
       <Table.Cell>
         It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/app/globals.css
index 6f3702c950..343f23a38f 100644
--- a/canon-docs/src/app/globals.css
+++ b/canon-docs/src/app/globals.css
@@ -2,7 +2,7 @@ body {
   display: flex;
   flex-direction: row;
   background-color: var(--canon-bg);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   transition: background-color 0.2s ease-in-out;
 
   --docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
diff --git a/canon-docs/src/app/page.module.css b/canon-docs/src/app/page.module.css
index 3d22802a3c..bc28185d48 100644
--- a/canon-docs/src/app/page.module.css
+++ b/canon-docs/src/app/page.module.css
@@ -17,7 +17,7 @@
 }
 
 .page p {
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   font-size: 1rem;
   line-height: 1.5rem;
   margin-top: 0;
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css
index fcd5309f14..966b3ff72b 100644
--- a/canon-docs/src/components/CodeBlock/styles.module.css
+++ b/canon-docs/src/components/CodeBlock/styles.module.css
@@ -18,7 +18,7 @@
   border-bottom: 1px solid var(--canon-border);
   padding: 12px 20px;
   font-size: 0.875rem;
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-secondary);
 }
 
 .code {
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css
index 8f72b15d02..ac7d7f36f1 100644
--- a/canon-docs/src/components/CustomTheme/styles.module.css
+++ b/canon-docs/src/components/CustomTheme/styles.module.css
@@ -66,7 +66,7 @@
   padding: 0 8px;
   color: #fff;
   background-color: var(--canon-bg);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-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 6cbb107aa7..4817ab569f 100644
--- a/canon-docs/src/components/HeadlessBanners/styles.module.css
+++ b/canon-docs/src/components/HeadlessBanners/styles.module.css
@@ -10,7 +10,7 @@
 }
 
 .icon path {
-  fill: var(--canon-fg-primary);
+  fill: var(--canon-fg-text-primary);
 }
 
 .content {
@@ -37,6 +37,6 @@
   border-radius: 100px;
   margin-top: var(--canon-space-3);
   font-size: var(--canon-font-size-3);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   gap: var(--canon-space-2);
 }
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index d87be799d0..feb9f8bea3 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -10,7 +10,7 @@
     left: 0;
     width: 300px;
     height: 100vh;
-    color: var(--canon-fg-primary);
+    color: var(--canon-fg-text-primary);
     background-color: var(--canon-bg-elevated);
     border-right: 1px solid var(--canon-border);
     padding-left: 20px;
@@ -26,7 +26,7 @@
 }
 
 .logo path {
-  fill: var(--canon-fg-primary);
+  fill: var(--canon-fg-text-primary);
 }
 
 .menu {
@@ -75,11 +75,11 @@
   font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
 }
 
 .lineStatus {
   font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-secondary);
 }
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 0139d3be1a..41dfadf2ea 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -34,8 +34,8 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
             {...rest}
             style={{
               color: state.selected
-                ? 'var(--canon-fg-primary)'
-                : 'var(--canon-fg-secondary)',
+                ? 'var(--canon-fg-text-primary)'
+                : 'var(--canon-fg-text-secondary)',
             }}
           >
             {children}
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
index 2ce4d81064..137bc7470d 100644
--- a/canon-docs/src/components/Tabs/styles.module.css
+++ b/canon-docs/src/components/Tabs/styles.module.css
@@ -22,6 +22,6 @@
   left: var(--active-tab-left);
   width: var(--active-tab-width);
   height: 1px;
-  background-color: var(--canon-fg-primary);
+  background-color: var(--canon-fg-text-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 123817c323..526d7bf918 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -27,21 +27,21 @@
   all: unset;
   height: 60px;
   font-family: var(--docs-font);
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-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-primary);
+    color: var(--canon-fg-text-primary);
   }
 
   &[data-selected] {
-    color: var(--canon-fg-primary);
+    color: var(--canon-fg-text-primary);
 
     & p {
-      color: var(--canon-fg-primary);
+      color: var(--canon-fg-text-primary);
     }
   }
 
@@ -60,7 +60,7 @@
 }
 
 .tab p {
-  color: var(--canon-fg-secondary) !important;
+  color: var(--canon-fg-text-secondary) !important;
 }
 
 .indicator {
@@ -72,7 +72,7 @@
   width: var(--active-tab-width);
   height: 1px;
   border-radius: 0.25rem;
-  background-color: var(--canon-fg-primary);
+  background-color: var(--canon-fg-text-primary);
   transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index 4da56e31f3..ac3701541f 100644
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ b/canon-docs/src/components/Toolbar/theme.module.css
@@ -29,23 +29,23 @@
   outline: 0;
   background: none;
   appearance: none;
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-secondary);
   user-select: none;
   height: 2rem;
   flex: 1;
   cursor: pointer;
 
   &[data-selected] {
-    color: var(--canon-fg-primary);
+    color: var(--canon-fg-text-primary);
 
     & p {
-      color: var(--canon-fg-primary);
+      color: var(--canon-fg-text-primary);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--canon-fg-primary);
+      color: var(--canon-fg-text-primary);
     }
   }
 
@@ -64,7 +64,7 @@
 }
 
 .tab p {
-  color: var(--canon-fg-secondary) !important;
+  color: var(--canon-fg-text-secondary) !important;
 }
 
 .indicator {
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
index 6d94175619..182eaa03b4 100644
--- a/canon-docs/src/mdx-components.tsx
+++ b/canon-docs/src/mdx-components.tsx
@@ -62,7 +62,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       </p>
     ),
     a: ({ children, href }) => (
-      <a href={href} style={{ color: 'var(--canon-fg-primary)' }}>
+      <a href={href} style={{ color: 'var(--canon-fg-text-primary)' }}>
         {children as ReactNode}
       </a>
     ),
@@ -83,7 +83,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
           backgroundColor: 'var(--canon-bg-elevated)',
           padding: '0.2rem 0.375rem',
           borderRadius: '0.25rem',
-          color: 'var(--canon-fg-secondary)',
+          color: 'var(--canon-fg-text-secondary)',
           border: '1px solid var(--canon-border)',
           fontSize: '0.875rem',
         }}
diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css
index 1f13b1ddae..653836c558 100644
--- a/packages/canon/.storybook/themes/backstage.css
+++ b/packages/canon/.storybook/themes/backstage.css
@@ -60,9 +60,9 @@
   --canon-bg: #f4f4f4;
 
   /* Text colors */
-  --canon-fg-primary: #000;
+  --canon-fg-text-primary: #000;
   --canon-fg-accent: #fff;
-  --canon-fg-secondary: #646464;
+  --canon-fg-text-secondary: #646464;
 }
 
 [data-theme-name='legacy'][data-theme='dark'] {
@@ -82,7 +82,7 @@
   --canon-fg-danger: #f50000;
 
   /* Text colors */
-  --canon-fg-primary: #fff;
+  --canon-fg-text-primary: #fff;
   --canon-fg-accent: #000;
-  --canon-fg-secondary: #b3b3b3;
+  --canon-fg-text-secondary: #b3b3b3;
 }
diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index e9caa0a3f9..52dd7bc782 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -383,7 +383,7 @@ export const Border: Story = {
   args: {
     style: {
       background: 'var(--canon-bg-elevated)',
-      color: 'var(--canon-fg-primary)',
+      color: 'var(--canon-fg-text-primary)',
       padding: '4px 8px',
       width: '80px',
       height: '32px',
diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css
index f3b24793cf..229f322343 100644
--- a/packages/canon/src/components/Box/styles.css
+++ b/packages/canon/src/components/Box/styles.css
@@ -1,4 +1,4 @@
 .canon-Box {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
 }
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index a90fe59348..6bfd93a8ea 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -36,14 +36,14 @@
   &:hover {
     background-color: transparent;
     box-shadow: inset 0 0 0 1px var(--canon-border-focus);
-    color: var(--canon-fg-primary);
+    color: var(--canon-fg-text-primary);
   }
 }
 
 .canon-Button--variant-secondary {
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--canon-border);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
 
   &:hover {
     box-shadow: inset 0 0 0 1px var(--canon-border-hover);
@@ -52,10 +52,10 @@
 
 .canon-Button--variant-tertiary {
   background-color: transparent;
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
 
   &:hover {
-    color: var(--canon-fg-secondary);
+    color: var(--canon-fg-text-secondary);
   }
 }
 
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index 5dae047191..1da96e8344 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -23,7 +23,7 @@
   gap: var(--canon-space-2);
   font-size: var(--canon-font-size-xs);
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   user-select: none;
 
   &:hover {
diff --git a/packages/canon/src/components/Field/Field.styles.css b/packages/canon/src/components/Field/Field.styles.css
index 6a8e3c8e22..6bf695fc97 100644
--- a/packages/canon/src/components/Field/Field.styles.css
+++ b/packages/canon/src/components/Field/Field.styles.css
@@ -24,14 +24,14 @@
 .canon-FieldLabel {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   margin-bottom: var(--canon-space-1_5);
 }
 
 .canon-FieldDescription {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-secondary);
   margin: 0;
   padding-top: var(--canon-space-1_5);
 }
@@ -47,7 +47,7 @@
 .canon-FieldValidity {
   font-size: var(--canon-font-size-2);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-secondary);
   margin: 0;
   padding-top: var(--canon-space-1_5);
 }
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 2db11d7eb2..a730afe9f0 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -16,7 +16,7 @@
 
 .canon-Heading {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   line-height: 100%;
   padding: 0;
   margin: 0;
diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css
index 72248f887e..cfeed27b48 100644
--- a/packages/canon/src/components/Input/Input.styles.css
+++ b/packages/canon/src/components/Input/Input.styles.css
@@ -21,13 +21,13 @@
   background-color: var(--canon-bg-elevated);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
   width: 100%;
 }
 
 .canon-Input::placeholder {
-  color: var(--canon-fg-secondary);
+  color: var(--canon-fg-text-secondary);
 }
 
 .canon-Input:hover {
diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css
index 871960b8db..9cf8c884fb 100644
--- a/packages/canon/src/components/Text/styles.css
+++ b/packages/canon/src/components/Text/styles.css
@@ -16,7 +16,7 @@
 
 .canon-Text {
   font-family: var(--canon-font-regular);
-  color: var(--canon-fg-primary);
+  color: var(--canon-fg-text-primary);
   padding: 0;
   margin: 0;
 }
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index a2e561b134..d744d468d0 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -95,8 +95,8 @@
   --canon-border-hover: rgba(0, 0, 0, 0.2);
   --canon-border-success: #008000;
   --canon-border-warning: #e36d05;
-  --canon-fg-primary: #000;
-  --canon-fg-secondary: #646464;
+  --canon-fg-text-primary: #000;
+  --canon-fg-text-secondary: #646464;
   --canon-fg-link: #fff;
   --canon-fg-link-hover: #fff;
   --canon-fg-accent: #fff;
@@ -137,6 +137,6 @@
   --canon-fg-warning: #e36d05;
   --canon-fg-link: #fff;
   --canon-fg-link-hover: #fff;
-  --canon-fg-primary: #000;
-  --canon-fg-secondary: #646464;
+  --canon-fg-text-primary: #000;
+  --canon-fg-text-secondary: #646464;
 }