diff --git a/.pfe.config.json b/.pfe.config.json
index 24499216d2..a37b6a7d91 100644
--- a/.pfe.config.json
+++ b/.pfe.config.json
@@ -16,7 +16,7 @@
     "description": "Red Hat Design System",
     "componentSubpath": "elements",
     "stylesheets": [
-      "/docs/styles/dev-server/styles.css"
+      "/docs/styles/demo/dev-server.css"
     ]
   }
 }
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
index d31a4ce675..4e29ddc3d3 100644
--- a/docs/_includes/layouts/base.njk
+++ b/docs/_includes/layouts/base.njk
@@ -17,7 +17,6 @@
   <head>
     {% include "../partials/meta.html" %}
 
-    <link rel="stylesheet" href="/assets/packages/@rhds/tokens/css/global.css">
     <link rel="stylesheet" href="/styles/styles.css">
 
    {# On browsers that don't yet support native declarative shadow DOM, a
diff --git a/docs/_includes/layouts/demo.njk b/docs/_includes/layouts/demo.njk
index 92aa17ebc1..d55178d07d 100644
--- a/docs/_includes/layouts/demo.njk
+++ b/docs/_includes/layouts/demo.njk
@@ -8,8 +8,8 @@
 
     <link rel="preconnect" href="https://ga.jspm.io">
 
-    <link rel="stylesheet" href="/styles/dev-server/styles.css" media="all">
-
+    <link rel="stylesheet" href="/styles/demo/styles.css" media="all">
+   
     <script type="importmap">{{ importMap | dump(2) | safe }}</script>
     <script type="module">
       // dsd polyfill needs to happen before hydration attempts
diff --git a/docs/styles/demo/dev-server.css b/docs/styles/demo/dev-server.css
new file mode 100644
index 0000000000..f796080de1
--- /dev/null
+++ b/docs/styles/demo/dev-server.css
@@ -0,0 +1,56 @@
+@layer
+  reset,
+  fonts,
+  tokens,
+  typography,
+  base,
+  layout,
+  third-party;
+
+  @import url('../reset.css') layer(reset);
+  @import url('../fonts.css') layer(fonts);
+  @import url('/node_modules/@rhds/tokens/css/global.css') layer(tokens);
+  @import url('../typography.css') layer(typography);
+  @import url('../third-party/prism-rhds.css') layer(third-party);
+
+  @layer base {
+    /**
+     * PFE based styles as we do not have control over the
+     * html layout that is upstream with no current override
+     */
+    #main-header {
+      --pf-theme--color--surface--accent: black;
+      --pf-theme--color--accent: black;
+    }
+  }
+  
+  @layer layout {
+    html,
+    body,
+    main { height: 100%; }
+  
+    [data-demo] {
+      display: contents;
+    }
+  
+    main {
+      display: block;
+      position: relative;
+      max-height: initial;
+    }
+  
+    #nav {
+      height: 100%;
+    }
+  
+    #main-header a img {
+      margin-right: 0;
+    }
+  
+    /* offset the padding on the demo container from above */
+    rh-context-demo {
+      min-height: calc(100% + 2 * var(--rh-space-xl, 24px));
+      height: auto;
+    }
+  }
+  
\ No newline at end of file
diff --git a/docs/styles/demo/styles.css b/docs/styles/demo/styles.css
new file mode 100644
index 0000000000..41b5f922cd
--- /dev/null
+++ b/docs/styles/demo/styles.css
@@ -0,0 +1,11 @@
+@layer
+  reset,
+  fonts,
+  tokens,
+  typography;
+
+@import url('../reset.css') layer(reset);
+@import url('../fonts.css') layer(fonts);
+@import url('/assets/packages/@rhds/tokens/css/global.css') layer(tokens);
+@import url('../typography.css') layer(typography);
+
diff --git a/docs/styles/dev-server/styles.css b/docs/styles/dev-server/styles.css
deleted file mode 100644
index 4d37ba6945..0000000000
--- a/docs/styles/dev-server/styles.css
+++ /dev/null
@@ -1,53 +0,0 @@
-@layer
-  reset,
-  fonts,
-  typography,
-  base,
-  layout,
-  third-party;
-
-@import url('../reset.css') layer(reset);
-@import url('../fonts.css') layer(fonts);
-@import url('../typography.css') layer(typography);
-@import url('../third-party/prism-rhds.css') layer(third-party);
-
-@layer base {
-  /**
-   * PFE based styles as we do not have control over the
-   * html layout that is upstream with no current override
-   */
-  #main-header {
-    --pf-theme--color--surface--accent: black;
-    --pf-theme--color--accent: black;
-  }
-}
-
-@layer layout {
-  html,
-  body,
-  main { height: 100%; }
-
-  [data-demo] {
-    display: contents;
-  }
-
-  main {
-    display: block;
-    position: relative;
-    max-height: initial;
-  }
-
-  #nav {
-    height: 100%;
-  }
-
-  #main-header a img {
-    margin-right: 0;
-  }
-
-  /* offset the padding on the demo container from above */
-  rh-context-demo {
-    min-height: calc(100% + 2 * var(--rh-space-xl, 24px));
-    height: auto;
-  }
-}
diff --git a/docs/styles/styles.css b/docs/styles/styles.css
index d3b0fcedf5..2c54e4cb88 100644
--- a/docs/styles/styles.css
+++ b/docs/styles/styles.css
@@ -1,6 +1,7 @@
 @layer
   reset,
   fonts,
+  tokens,
   typography,
   base,
   grid,
@@ -16,6 +17,7 @@
 @import url('not-defined.css') layer(not-defined);
 @import url('reset.css') layer(reset);
 @import url('fonts.css') layer(fonts);
+@import url('/assets/packages/@rhds/tokens/css/global.css') layer(tokens);
 @import url('typography.css') layer(typography);
 @import url('grid.css') layer(grid);
 @import url('lightdom.css') layer(lightdom);
diff --git a/scripts/playgrounds.ts b/scripts/playgrounds.ts
index f383baa688..e7bbc7d5ae 100644
--- a/scripts/playgrounds.ts
+++ b/scripts/playgrounds.ts
@@ -171,12 +171,7 @@ class PlaygroundDemo {
   }
 
   private addCommonCss() {
-    const cssPrefix = this.demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';
-    this.append(this.createStyleLink(`${cssPrefix}reset.css`),
-                Tools.createTextNode('\n'),
-                this.createStyleLink(`${cssPrefix}fonts.css`),
-                Tools.createTextNode('\n'),
-                this.createStyleLink(`${cssPrefix}typography.css`));
+    this.append(this.createStyleLink(`/styles/demo/styles.css`));
   }
 
   private getFinalContent() {
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
index 613dc54e08..9a0464cf6c 100644
--- a/web-dev-server.config.js
+++ b/web-dev-server.config.js
@@ -25,7 +25,7 @@ export const litcssOptions = {
     /@rhds\/tokens\/css\/.*\.css$/,
     /lib\/.*\.css$/,
   ]))),
-  exclude: /lightdom/,
+  exclude: [/lightdom/, /node_modules\/@rhds\/tokens\/css\/global\.css/],
 };
 
 export default pfeDevServerConfig({
