diff --git a/example/index.scss b/example/index.scss
index fb5123d2..2c7dca1d 100644
--- a/example/index.scss
+++ b/example/index.scss
@@ -1,6 +1 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
-
 @import "@edx/frontend-component-header/index";
diff --git a/package-lock.json b/package-lock.json
index 0bc99317..87db675c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,9 @@
       "version": "1.0.0-semantically-released",
       "license": "AGPL-3.0",
       "dependencies": {
+        "@edx/brand": "npm:@edx/brand-edx.org@2.1.2",
         "@edx/frontend-enterprise-utils": "4.0.0",
-        "@edx/paragon": "20.45.5",
+        "@edx/paragon": "21.0.0-alpha.38",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-brands-svg-icons": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
@@ -34,6 +35,7 @@
         "@edx/browserslist-config": "1.1.1",
         "@edx/frontend-build": "12.9.4",
         "@edx/frontend-platform": "5.0.0",
+        "@edx/paragon": "21.0.0-alpha.38",
         "@edx/reactifex": "2.2.0",
         "@testing-library/dom": "9.3.1",
         "@testing-library/jest-dom": "5.17.0",
@@ -55,6 +57,7 @@
       },
       "peerDependencies": {
         "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
+        "@edx/paragon": "21.0.0-alpha.38",
         "prop-types": "^15.5.10",
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0"
@@ -3146,7 +3149,7 @@
         "transifex-utils.js": "i18n/scripts/transifex-utils.js"
       },
       "peerDependencies": {
-        "@edx/frontend-build": ">= 8.1.0 || ^12.9.0-alpha.1",
+        "@edx/frontend-build": ">= 8.1.0",
         "@edx/paragon": ">= 10.0.0 < 21.0.0",
         "prop-types": "^15.7.2",
         "react": "^16.9.0 || ^17.0.0",
@@ -3164,21 +3167,27 @@
       }
     },
     "node_modules/@edx/paragon": {
-      "version": "20.45.5",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.45.5.tgz",
-      "integrity": "sha512-7GsGPKyxtjFo3Xnj+uQ4vx/Khz7S6srHe8MqcsYCMx2mJ8fulPN2JFm84m+0o1CSwHaL469wBPONI4KCa+vfrA==",
+      "version": "21.0.0-alpha.38",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.0.0-alpha.38.tgz",
+      "integrity": "sha512-KecffnE5As+BteXARamrahk1vI+OfFo196jP3im0xlq1hZHiV5DUOAoqqrzr9z7h3rHNJ0iWMuJhc4rZGCC01A==",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.1.1",
-        "@fortawesome/react-fontawesome": "^0.1.18",
         "@popperjs/core": "^2.11.4",
         "bootstrap": "^4.6.2",
+        "chalk": "^4.1.2",
+        "chroma-js": "^2.4.2",
         "classnames": "^2.3.1",
+        "commander": "^9.4.1",
         "email-prop-type": "^3.0.0",
         "file-selector": "^0.6.0",
-        "font-awesome": "^4.7.0",
         "glob": "^8.0.3",
         "lodash.uniqby": "^4.7.0",
         "mailto-link": "^2.0.0",
+        "postcss": "^8.4.21",
+        "postcss-combine-duplicated-selectors": "^10.0.3",
+        "postcss-custom-media": "^9.1.2",
+        "postcss-import": "^15.1.0",
+        "postcss-map": "^0.11.0",
+        "postcss-minify": "^1.1.0",
         "prop-types": "^15.8.1",
         "react-bootstrap": "^1.6.5",
         "react-colorful": "^5.6.1",
@@ -3190,26 +3199,82 @@
         "react-responsive": "^8.2.0",
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
+        "sass": "^1.58.3",
+        "style-dictionary": "^3.7.1",
         "tabbable": "^5.3.3",
         "uncontrollable": "^7.2.1",
         "uuid": "^9.0.0"
       },
+      "bin": {
+        "build-design-tokens": "tokens/build-tokens.js",
+        "build-scss": "build-scss.js",
+        "replace-scss-with-css": "tokens/replace-variables.js"
+      },
       "peerDependencies": {
         "react": "^16.8.6 || ^17.0.0",
         "react-dom": "^16.8.6 || ^17.0.0",
         "react-intl": "^5.25.1"
       }
     },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.19",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
-      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+    "node_modules/@edx/paragon/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dependencies": {
-        "prop-types": "^15.8.1"
+        "color-convert": "^2.0.1"
       },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-        "react": ">=16.x"
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@edx/paragon/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@edx/paragon/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "engines": {
+        "node": "^12.20.0 || >=14"
       }
     },
     "node_modules/@edx/paragon/node_modules/glob": {
@@ -3230,6 +3295,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@edx/paragon/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@edx/paragon/node_modules/minimatch": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
@@ -3258,6 +3331,17 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@edx/paragon/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@edx/reactifex": {
       "version": "2.2.0",
       "dev": true,
@@ -6798,6 +6882,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -6825,6 +6918,16 @@
         }
       ]
     },
+    "node_modules/capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "node_modules/capture-exit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -6870,6 +6973,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -6915,6 +7037,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -7240,6 +7367,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
@@ -9688,13 +9825,6 @@
         }
       }
     },
-    "node_modules/font-awesome": {
-      "version": "4.7.0",
-      "license": "(OFL-1.1 AND MIT)",
-      "engines": {
-        "node": ">=0.10.3"
-      }
-    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "license": "MIT",
@@ -10389,6 +10519,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "dependencies": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/history": {
       "version": "4.10.1",
       "license": "MIT",
@@ -10527,15 +10666,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/html-minifier-terser/node_modules/camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dependencies": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
-    },
     "node_modules/html-minifier-terser/node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -14698,6 +14828,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "license": "MIT",
@@ -16178,6 +16313,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "license": "MIT",
@@ -16473,6 +16617,20 @@
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
       "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
+    "node_modules/postcss-combine-duplicated-selectors": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz",
+      "integrity": "sha512-IP0BmwFloCskv7DV7xqvzDXqMHpwdczJa6ZvIW8abgHdcIHs9mCJX2ltFhu3EwA51ozp13DByng30+Ke+eIExA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/postcss-convert-values": {
       "version": "6.0.0",
       "license": "MIT",
@@ -16554,6 +16712,22 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.3.tgz",
@@ -16638,6 +16812,48 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/postcss-map": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/postcss-map/-/postcss-map-0.11.0.tgz",
+      "integrity": "sha512-cgHYZrH9aAMds90upYUPhYz8xnAcRD45SwuNns/nQHONIrPQDhpwk3JLsAQGOndQxnRVXfB6nB+3WqSMy8fqlA==",
+      "dependencies": {
+        "js-yaml": "^3.12.0",
+        "postcss": "^7.0.2",
+        "reduce-function-call": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-map/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+    },
+    "node_modules/postcss-map/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-map/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/postcss-merge-longhand": {
       "version": "6.0.0",
       "license": "MIT",
@@ -16690,6 +16906,18 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-minify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify/-/postcss-minify-1.1.0.tgz",
+      "integrity": "sha512-9D64ueIW0DL2FdLajQTlXrnTN8Ox9NjuXqigKMmB819RhdClNPYx5Zp3i5x0ghjjy3vGrLBBYEYvJjY/1eMNbw==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0",
+        "postcss-value-parser": "^4.1"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0"
+      }
+    },
     "node_modules/postcss-minify-font-values": {
       "version": "6.0.0",
       "license": "MIT",
@@ -18108,6 +18336,22 @@
         "reactifex": "main.js"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/read-cache/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -18271,6 +18515,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/reduce-function-call": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
+      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "license": "MIT",
@@ -19160,6 +19412,16 @@
       "version": "2.1.3",
       "license": "MIT"
     },
+    "node_modules/sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "node_modules/serialize-javascript": {
       "version": "6.0.1",
       "license": "BSD-3-Clause",
@@ -20332,6 +20594,113 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-dictionary": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.8.0.tgz",
+      "integrity": "sha512-wHlB/f5eO3mDcYv6WtOz6gvQC477jBKrwuIXe+PtHskTCBsJdAOvL8hCquczJxDui2TnwpeNE+2msK91JJomZg==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.2",
+        "jsonc-parser": "^3.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/style-dictionary/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.3",
       "license": "MIT",
@@ -20750,6 +21119,11 @@
       "version": "1.0.3",
       "license": "MIT"
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -21206,6 +21580,22 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/upper-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "license": "BSD-2-Clause",
diff --git a/package.json b/package.json
index 6504380a..e02677bb 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   "homepage": "https://github.com/edx/frontend-component-header-edx#readme",
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@2.1.2",
+    "@edx/paragon": "21.0.0-alpha.38",
     "@edx/browserslist-config": "1.1.1",
     "@edx/frontend-build": "12.9.4",
     "@edx/frontend-platform": "5.0.0",
@@ -58,7 +59,6 @@
   },
   "dependencies": {
     "@edx/frontend-enterprise-utils": "4.0.0",
-    "@edx/paragon": "20.45.5",
     "@fortawesome/fontawesome-svg-core": "6.4.2",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",
@@ -78,6 +78,7 @@
     "timeago.js": "4.0.2"
   },
   "peerDependencies": {
+    "@edx/paragon": "21.0.0-alpha.38",
     "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
diff --git a/src/index.scss b/src/index.scss
index ee9bd857..fb1e7022 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,11 +1,3 @@
-$spacer: 1rem;
-$blue: #007db8;
-$white: #fff;
-
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
 @import './Menu/menu.scss';
 
 .dropdown-item a {
@@ -23,9 +15,10 @@ $white: #fff;
   width: 3rem;
   padding: .75rem;
   justify-content: center;
-  align-items:center;
+  align-items: center;
+
   &:hover, &:focus {
-    background: rgba(0,0,0,.1);
+    background: rgba(0, 0, 0, .1);
   }
 }
 
@@ -39,16 +32,15 @@ $white: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
+      padding-bottom: var(--pgn-spacing-spacer-base);
     }
   }
 
-  .user-dropdown {
-    .btn {
-      height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
+  .user-dropdown .btn {
+    height: 3rem;
+
+    @media (var(--max-pgn-size-breakpoint-xs)) {
+      padding: 0 .5rem;
     }
   }
 }
@@ -56,15 +48,17 @@ $white: #fff;
 .site-header-mobile,
 .site-header-desktop {
   position: relative;
-  z-index: 1000;
+  z-index: var(--pgn-elevation-dropdown-zindex);
 }
 
 .site-header-mobile {
   height: 3rem;
+
   .nav-link {
     text-decoration: none;
     cursor: pointer;
   }
+
   img {
     height: 1.5rem;
   }
@@ -72,31 +66,36 @@ $white: #fff;
 
 
 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
+  background: var(--pgn-color-white);
+
   .nav-link {
     text-decoration: none;
   }
+
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
+    padding: var(--pgn-spacing-spacer-base) 0;
+    margin-right: var(--pgn-spacing-spacer-base);
+
     img {
       display: block;
       height: 100%;
     }
   }
+
   .main-nav {
     .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base);
       text-decoration: none;
       font-weight: 500;
       letter-spacing: .01em;
     }
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
@@ -104,21 +103,24 @@ $white: #fff;
       background: $component-active-bg;
       color: $component-active-color;
     }
+
     .menu {
       position: static;
+
       .menu-content {
         border-top: solid 2px $component-active-bg;
         left: 0;
         right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base);
       }
     }
   }
+
   .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill);
   }
 }