diff --git a/.changeset/lazy-trains-wink.md b/.changeset/lazy-trains-wink.md
new file mode 100644
index 0000000000..adbf25906b
--- /dev/null
+++ b/.changeset/lazy-trains-wink.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix sass variable in layout.pcss
diff --git a/app/components/primer/alpha/layout.pcss b/app/components/primer/alpha/layout.pcss
index 772ff96493..33ccd6901a 100644
--- a/app/components/primer/alpha/layout.pcss
+++ b/app/components/primer/alpha/layout.pcss
@@ -73,7 +73,7 @@
       background: var(--color-canvas-inset);
       border-color: var(--color-border-default);
       border-style: solid;
-      border-width: $border-width 0;
+      border-width: var(--primer-borderWidth-thin, 1px) 0;
     }
   }
 }
diff --git a/test/components/component_css_test.rb b/test/components/component_css_test.rb
index 17dc45a074..d17b1f5fa9 100644
--- a/test/components/component_css_test.rb
+++ b/test/components/component_css_test.rb
@@ -13,8 +13,12 @@ def test_css_is_compiled_correctly
     Dir["app/components/**/*.css"].each do |file|
       css = File.read(file)
 
+      # remove comments
+      css.gsub!(%r{/\*((?!\*/).)*\*/}m, "")
+
       refute(css.include?("@import"), "CSS files should not import other CSS files:\n#{file} contains @import")
       refute(css.include?("&"), "CSS Nesting wasn't compiled correctly:\n#{file} contains &")
+      refute(css.include?("$"), "Sass variable(s) detected:\n#{file} contains $")
     end
   end
 end