diff --git a/package-lock.json b/package-lock.json
index 96252d4366..207e03b6f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7705,27 +7705,6 @@
         "@types/tern": "*"
       }
     },
-    "node_modules/@types/color": {
-      "version": "3.0.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/color-convert": "*"
-      }
-    },
-    "node_modules/@types/color-convert": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/color-name": "*"
-      }
-    },
-    "node_modules/@types/color-name": {
-      "version": "1.1.1",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/common-tags": {
       "version": "1.8.1",
       "license": "MIT"
@@ -39313,7 +39292,6 @@
         "analytics-node": "^6.0.0",
         "axios": "^0.27.2",
         "classnames": "^2.3.1",
-        "color": "^4.2.3",
         "gatsby": "^4.23.1",
         "gatsby-plugin-manifest": "^4.17.0",
         "gatsby-plugin-mdx": "^3.17.0",
@@ -39350,7 +39328,6 @@
         "@babel/preset-typescript": "^7.16.7",
         "@edx/eslint-config": "^3.1.0",
         "@svgr/webpack": "6.5.1",
-        "@types/color": "^3.0.3",
         "@types/mdx": "^2.0.3",
         "@types/mdx-js__react": "^1.5.5",
         "@types/react-helmet": "^6.1.6",
diff --git a/www/package.json b/www/package.json
index 1646330431..b7aa860290 100644
--- a/www/package.json
+++ b/www/package.json
@@ -12,7 +12,6 @@
     "analytics-node": "^6.0.0",
     "axios": "^0.28.0",
     "classnames": "^2.3.1",
-    "color": "^4.2.3",
     "gatsby": "^4.23.1",
     "gatsby-plugin-manifest": "^4.17.0",
     "gatsby-plugin-mdx": "^3.17.0",
@@ -38,8 +37,8 @@
     "rehype-slug": "^4.0.1",
     "sass": "^1.53.0",
     "sass-loader": "12.6.0",
-    "uuid": "^9.0.0",
-    "slugify": "^1.6.5"
+    "slugify": "^1.6.5",
+    "uuid": "^9.0.0"
   },
   "keywords": [
     "paragon",
@@ -70,7 +69,6 @@
     "@babel/preset-typescript": "^7.16.7",
     "@edx/eslint-config": "^3.1.0",
     "@svgr/webpack": "6.5.1",
-    "@types/color": "^3.0.3",
     "@types/mdx": "^2.0.3",
     "@types/mdx-js__react": "^1.5.5",
     "@types/react-helmet": "^6.1.6",
diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
index 38132503b7..0289d8f509 100644
--- a/www/src/components/PageLayout.tsx
+++ b/www/src/components/PageLayout.tsx
@@ -29,11 +29,6 @@ import LeaveFeedback from './LeaveFeedback';
 import AutoToc from './AutoToc';
 import PageEditBtn from './PageEditBtn';
 
-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/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
index e2c29574f2..94d3e937cd 100644
--- a/www/src/components/_doc-elements.scss
+++ b/www/src/components/_doc-elements.scss
@@ -324,3 +324,9 @@
 .pgn-doc__box-shadow-toolkit--controls-box--remove-btn svg {
   color: var(--pgn-color-white);
 }
+
+.color-palette {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
+  grid-row-gap: 2rem;
+}