diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
index fd764c5c..c081e447 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
@@ -1,4 +1,4 @@
-import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/index.scss'
+import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/docs.scss'
 import {Flex} from '@primer/components'
 import {Frame} from '@primer/gatsby-theme-doctocat'
 import {MoonIcon, SunIcon} from '@primer/octicons-react'
diff --git a/src/base/modes.scss b/src/base/modes.scss
index 35a5daa0..535bd571 100644
--- a/src/base/modes.scss
+++ b/src/base/modes.scss
@@ -7,7 +7,6 @@
 // Use :root (html element) to define a default
 
 @include primer-colors-light(':root, [data-color-mode="light"]');
-@include primer-colors-dark('[data-color-mode="dark"]');
 
 // Color mode boundaries
 // Enables nesting of different color modes
diff --git a/src/docs.scss b/src/docs.scss
new file mode 100644
index 00000000..c683aa44
--- /dev/null
+++ b/src/docs.scss
@@ -0,0 +1,15 @@
+/*!
+ * Primer CSS
+ * https://primer.style
+ *
+ * Released under MIT license.
+ */
+
+// Docs styles
+// Only meant for the docs at https://primer.style/css
+
+// Global requirements
+@import "./core/index.scss";
+@import "./product/index.scss";
+@import "./marketing/index.scss";
+@include primer-colors-dark('[data-color-mode="dark"]');