diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
index 440e9f4577d..a5e13758193 100644
--- a/www/src/components/PageLayout.tsx
+++ b/www/src/components/PageLayout.tsx
@@ -27,11 +27,6 @@ import { SettingsContext } from '../context/SettingsContext';
 import LeaveFeedback from './LeaveFeedback';
 import AutoToc from './AutoToc';
 
-if (process.env.NODE_ENV === 'development') {
-  /* eslint-disable-next-line global-require */
-  require('~paragon-style/scss/core/core.scss');
-}
-
 export interface ILayout {
   children: React.ReactNode,
   showMinimizedTitle: boolean,
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index 9a61abbd0f3..6c37ef6b03d 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -55,7 +55,7 @@ export interface ISwatch {
   isUnused?: boolean,
 }
 
-const styles = getComputedStyle(document.body);
+const styles = window.getComputedStyle(document.body);
 
 function Swatch({ name, colorClassName, isUnused }: ISwatch) {
   const computedValue = styles.getPropertyValue(name);
@@ -128,16 +128,15 @@ export default function ColorsPage({ data }: IColorsPage) {
           {colors
             .slice(0, 3)
             .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
+          {colors
+            .slice(3)
+            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
           <div>
             <p className="h5">accents</p>
 
             <Swatch name="--pgn-color-accent-a" colorClassName="bg-accent-a" />
             <Swatch name="--pgn-color-accent-b" colorClassName="bg-accent-b" />
           </div>
-
-          {colors
-            .slice(3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
         </div>
 
         <h3>CSS Color Usage</h3>