diff --git a/package-lock.json b/package-lock.json
index d689a3ced4e..132787616fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -144,6 +144,7 @@
         "mdast-util-to-string": "3.1.1",
         "micromark-extension-frontmatter": "1.0.0",
         "micromark-extension-mdxjs": "1.0.0",
+        "postcss-custom-properties-fallback": "^1.0.2",
         "prettier": "2.8.1",
         "react": "18.2.0",
         "react-dnd": "14.0.4",
@@ -27062,6 +27063,18 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "node_modules/is-url-superb": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-4.0.0.tgz",
+      "integrity": "sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -35442,6 +35455,19 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-custom-properties-fallback": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties-fallback/-/postcss-custom-properties-fallback-1.0.2.tgz",
+      "integrity": "sha512-UrPr99bo03c1iX4iqjBBYo3W+EsXfxrozp2LNvRN34Y95n/7R2RupcMhGlc+C/RQxknDXiP+bptyhmb8nFYzeQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "postcss-values-parser": "^6.0.2"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-discard-comments": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
@@ -35935,6 +35961,29 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/postcss-values-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-6.0.2.tgz",
+      "integrity": "sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "is-url-superb": "^4.0.0",
+        "quote-unquote": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.9"
+      }
+    },
+    "node_modules/postcss-values-parser/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
     "node_modules/preferred-pm": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.0.3.tgz",
@@ -36392,6 +36441,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/quote-unquote": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/quote-unquote/-/quote-unquote-1.0.0.tgz",
+      "integrity": "sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==",
+      "dev": true
+    },
     "node_modules/ramda": {
       "version": "0.28.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz",
diff --git a/package.json b/package.json
index f74b5cb52f7..a2145dd7900 100644
--- a/package.json
+++ b/package.json
@@ -228,6 +228,7 @@
     "mdast-util-to-string": "3.1.1",
     "micromark-extension-frontmatter": "1.0.0",
     "micromark-extension-mdxjs": "1.0.0",
+    "postcss-custom-properties-fallback": "^1.0.2",
     "prettier": "2.8.1",
     "react": "18.2.0",
     "react-dnd": "14.0.4",
diff --git a/rollup.config.js b/rollup.config.js
index cbb17d02099..56cca810a74 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,6 +7,8 @@ import glob from 'fast-glob'
 import {visualizer} from 'rollup-plugin-visualizer'
 import postcss from 'rollup-plugin-postcss'
 import packageJson from './package.json'
+import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback'
+const importedJSONFromPrimitives = require('@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')
 
 const input = new Set([
   // "exports"
@@ -116,6 +118,13 @@ const baseConfig = {
       extract: 'components.css',
       autoModules: false,
       modules: {generateScopedName: 'prc_[local]-[hash:base64:5]'},
+      plugins: [
+        postcssCustomPropertiesFallback({
+          importFrom: {
+            customProperties: importedJSONFromPrimitives,
+          },
+        }),
+      ],
     }),
   ],
 }
diff --git a/src/drafts/CSSComponent/component.module.css b/src/drafts/CSSComponent/component.module.css
index 6fe6836a6d0..a2b243e7776 100644
--- a/src/drafts/CSSComponent/component.module.css
+++ b/src/drafts/CSSComponent/component.module.css
@@ -1,7 +1,7 @@
 .component {
-  background-color: var(--bgColor-default, var(--color-canvas-default));
-  color: var(--fgColor-muted, var(--color-fg-muted));
-  border: 1px solid var(--borderColor-default, var(--color-border-default));
+  background-color: var(--bgColor-default);
+  color: var(--fgColor-muted);
+  border: 1px solid var(--borderColor-default);
   width: fit-content;
   padding: var(--control-xsmall-paddingBlock) var(--control-xsmall-paddingInline-normal);
 }