diff --git a/Makefile b/Makefile
index d6dc6ff320..8fb1778064 100644
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,4 @@
+.PHONY: build
 build:
 	rm -rf ./dist
 	tsc --project tsconfig.build.json
diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js
index a029b19564..3d811b39f7 100755
--- a/bin/paragon-scripts.js
+++ b/bin/paragon-scripts.js
@@ -85,11 +85,21 @@ const COMMANDS = {
         description: 'Include only source design tokens in the build.',
         defaultValue: false,
       },
+      {
+        name: '--output-references',
+        description: 'Include references in the build output.',
+        defaultValue: true,
+      },
       {
         name: '-t, --themes',
         description: 'Specify themes to include in the token build.',
         defaultValue: 'light',
       },
+      {
+        name: '-v, --verbose',
+        description: 'Enable verbose logging.',
+        defaultValue: false,
+      },
     ],
   },
   'replace-variables': {
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
index 19f9199d09..a4dd71fdb4 100755
--- a/lib/build-tokens.js
+++ b/lib/build-tokens.js
@@ -1,6 +1,10 @@
 const path = require('path');
 const minimist = require('minimist');
-const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary');
+const {
+  initializeStyleDictionary,
+  createCustomCSSVariables,
+  colorTransform,
+} = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -13,24 +17,37 @@ const { createIndexCssFile } = require('../tokens/utils');
  * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens.
  */
 async function buildTokensCommand(commandArgs) {
-  const StyleDictionary = await initializeStyleDictionary();
-
   const defaultParams = {
     themes: ['light'],
     'build-dir': './build/',
+    'source-tokens-only': false,
+    'output-references': true,
+    verbose: false,
   };
 
   const alias = {
     'build-dir': 'b',
     themes: 't',
+    verbose: '-v',
   };
 
   const {
     'build-dir': buildDir,
     source: tokensSource,
     'source-tokens-only': hasSourceTokensOnly,
+    'output-references': outputReferences,
     themes,
-  } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
+    verbose,
+  } = minimist(
+    commandArgs,
+    {
+      alias,
+      default: defaultParams,
+      boolean: ['source-tokens-only', 'output-references', 'verbose'],
+    },
+  );
+
+  const StyleDictionary = await initializeStyleDictionary({ themes });
 
   const coreConfig = {
     include: [
@@ -43,7 +60,6 @@ async function buildTokensCommand(commandArgs) {
     platforms: {
       css: {
         prefix: 'pgn',
-        transformGroup: 'css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
         files: [
@@ -52,7 +68,10 @@ async function buildTokensCommand(commandArgs) {
             destination: 'core/variables.css',
             filter: hasSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
           {
@@ -60,16 +79,19 @@ async function buildTokensCommand(commandArgs) {
             destination: 'core/custom-media-breakpoints.css',
             filter: hasSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
         ],
         transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
-        options: {
-          fileHeader: 'customFileHeader',
-        },
       },
     },
+    log: {
+      verbosity: verbose ? 'verbose' : 'default',
+    },
   };
 
   const getStyleDictionaryConfig = (themeVariant) => ({
@@ -104,9 +126,14 @@ async function buildTokensCommand(commandArgs) {
           {
             format: 'css/custom-variables',
             destination: `themes/${themeVariant}/variables.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: hasSourceTokensOnly
+              ? `isThemeVariant${themeVariant.charAt(0).toUpperCase()}${themeVariant.slice(1)}SourceOnly`
+              : `isThemeVariant${themeVariant.charAt(0).toUpperCase()}${themeVariant.slice(1)}`,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
           {
@@ -114,7 +141,10 @@ async function buildTokensCommand(commandArgs) {
             destination: `themes/${themeVariant}/utility-classes.css`,
             filter: hasSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
+              formatting: {
+                fileHeaderTimestamp: true,
+              },
             },
           },
         ],
@@ -122,14 +152,29 @@ async function buildTokensCommand(commandArgs) {
     },
   });
 
-  new StyleDictionary(coreConfig).buildAllPlatforms();
-  createIndexCssFile({ buildDir, isTheme: false });
+  // Create list of style-dictionary configurations to build (core + theme variants)
+  const configs = [
+    { config: coreConfig },
+    ...themes.map((themeVariant) => {
+      const config = getStyleDictionaryConfig(themeVariant);
+      return {
+        config,
+        themeVariant,
+      };
+    }),
+  ];
 
-  themes.forEach(async (themeVariant) => {
-    const config = getStyleDictionaryConfig(themeVariant);
-    new StyleDictionary(config).buildAllPlatforms();
-    createIndexCssFile({ buildDir, isTheme: true, themeVariant });
-  });
+  // Build tokens for each configuration
+  await Promise.all(configs.map(async ({ config, isThemeVariant, themeVariant }) => {
+    const sd = new StyleDictionary(config);
+    await sd.cleanAllPlatforms();
+    await sd.buildAllPlatforms();
+    createIndexCssFile({
+      buildDir,
+      isThemeVariant: !!isThemeVariant,
+      themeVariant,
+    });
+  }));
 }
 
 module.exports = buildTokensCommand;
diff --git a/package-lock.json b/package-lock.json
index 919cb6752f..574036908f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,7 +73,7 @@
         "@babel/preset-typescript": "^7.16.7",
         "@edx/eslint-config": "^3.2.0",
         "@edx/stylelint-config-edx": "^2.3.0",
-        "@edx/typescript-config": "^1.0.1",
+        "@edx/typescript-config": "^1.1.0",
         "@formatjs/cli": "^5.0.2",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/git": "^10.0.1",
@@ -4478,9 +4478,9 @@
       }
     },
     "node_modules/@edx/typescript-config": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.0.1.tgz",
-      "integrity": "sha512-w0g3nIX9oEch8Rip8q8sb/nrurGEHA1BEjK/I1LAQwA44K4FPMWvyvabmZErrdTJ9sXcZL10aWD3bat1obV8Bg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.1.0.tgz",
+      "integrity": "sha512-HF+7dsSgA2YQ6f/qV4HnrEYBoIhIdxVQZgDyYk/YGvaVGqT6IFuaHnYUP7ImpCUMOUmx/Jl7EyuVeaMe2LrMcA==",
       "dev": true,
       "peerDependencies": {
         "typescript": "^4.9.4"
diff --git a/package.json b/package.json
index 6a52a674bf..96e162c515 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,8 @@
     "prepare": "husky || true",
     "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
-    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition"
+    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
+    "cli:help": "./bin/paragon-scripts.js help"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
@@ -114,7 +115,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@edx/eslint-config": "^3.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
-    "@edx/typescript-config": "^1.0.1",
+    "@edx/typescript-config": "^1.1.0",
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss
index 3f19d55ab5..6e22e92a7d 100644
--- a/src/Form/_FormText.scss
+++ b/src/Form/_FormText.scss
@@ -1,5 +1,5 @@
 .pgn__form-text {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   display: flex;
   align-items: center;
 
diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss
index 320b2be9f5..0b6cf3f05f 100644
--- a/src/PageBanner/index.scss
+++ b/src/PageBanner/index.scss
@@ -4,12 +4,12 @@
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 
diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss
index 3f4852536e..96271b1813 100644
--- a/src/ProgressBar/index.scss
+++ b/src/ProgressBar/index.scss
@@ -87,6 +87,6 @@
   .pgn__progress-hint {
     box-sizing: border-box;
     padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
diff --git a/src/Stepper/index.scss b/src/Stepper/index.scss
index e89bea41be..1995425c29 100644
--- a/src/Stepper/index.scss
+++ b/src/Stepper/index.scss
@@ -56,7 +56,7 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: var(--pgn-typography-font-size-xs);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
diff --git a/src/Toast/index.scss b/src/Toast/index.scss
index 69b6a58a46..866e049709 100644
--- a/src/Toast/index.scss
+++ b/src/Toast/index.scss
@@ -31,7 +31,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: var(--pgn-typography-font-size-sm);
       margin: 0;
       padding-right: .75rem;
     }
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
index 71df821c71..3935bb85ec 100644
--- a/styles/css/core/custom-media-breakpoints.css
+++ b/styles/css/core/custom-media-breakpoints.css
@@ -1,10 +1,9 @@
-/*
- * IMPORTANT: This file is the result of assembling design tokens.
- * Do not edit directly.
- * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 02 Sep 2024 19:21:13 GMT
  */
 
-@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem);
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
 @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
 @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
 @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 056692268f..fc64608b5f 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -1,7 +1,6 @@
-/*
- * IMPORTANT: This file is the result of assembling design tokens.
- * Do not edit directly.
- * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 02 Sep 2024 19:21:13 GMT
  */
 
 :root {
@@ -10,19 +9,19 @@
   --pgn-other-form-control-custom-file-lang: en;
   --pgn-other-form-control-range-track-cursor: pointer;
   --pgn-other-form-control-cursor: auto;
-  --pgn-elevation-zindex-fixed: 1030;
-  --pgn-elevation-zindex-sticky: 1020;
-  --pgn-elevation-zindex-2000: 2000;
-  --pgn-elevation-zindex-1800: 1800;
-  --pgn-elevation-zindex-1600: 1600;
-  --pgn-elevation-zindex-1400: 1400;
-  --pgn-elevation-zindex-1200: 1200;
-  --pgn-elevation-zindex-1000: 1000;
-  --pgn-elevation-zindex-800: 800;
-  --pgn-elevation-zindex-600: 600;
-  --pgn-elevation-zindex-400: 400;
-  --pgn-elevation-zindex-200: 200;
-  --pgn-elevation-zindex-0: 0;
+  --pgn-elevation-zindex-fixed: 1030; /* z-index of for fixed element. */
+  --pgn-elevation-zindex-sticky: 1020; /* z-index for sticky element. */
+  --pgn-elevation-zindex-2000: 2000; /* z-index of level 2000. */
+  --pgn-elevation-zindex-1800: 1800; /* z-index of level 1800. */
+  --pgn-elevation-zindex-1600: 1600; /* z-index of level 1600. */
+  --pgn-elevation-zindex-1400: 1400; /* z-index of level 1400. */
+  --pgn-elevation-zindex-1200: 1200; /* z-index of level 1200. */
+  --pgn-elevation-zindex-1000: 1000; /* z-index of level 1000. */
+  --pgn-elevation-zindex-800: 800; /* z-index of level 800. */
+  --pgn-elevation-zindex-600: 600; /* z-index of level 600. */
+  --pgn-elevation-zindex-400: 400; /* z-index of level 400. */
+  --pgn-elevation-zindex-200: 200; /* z-index of level 200. */
+  --pgn-elevation-zindex-0: 0; /* z-index of level 0. */
   --pgn-elevation-tooltip-zindex: 1070;
   --pgn-elevation-sheet-zindex-main: 1032;
   --pgn-elevation-sheet-zindex-backdrop: 1031;
@@ -31,10 +30,10 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse-width: width .35s ease;
-  --pgn-transition-collapse-height: height .35s ease;
-  --pgn-transition-fade: opacity .15s linear;
-  --pgn-transition-base: all .2s ease-in-out;
+  --pgn-transition-collapse-width: width .35s ease; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-height: height .35s ease; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-fade: opacity .15s linear; /* Opacity transition that takes 150ms */
+  --pgn-transition-base: all .2s ease-in-out; /* Generic transition for any property change */
   --pgn-transition-progress-bar-bar-transition: width .6s ease;
   --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
   --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
@@ -45,57 +44,57 @@
   --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
-  --pgn-typography-line-height-micro: .938rem;
-  --pgn-typography-line-height-sm: 1.5rem;
-  --pgn-typography-line-height-lg: 1.5rem;
-  --pgn-typography-line-height-base: 1.5556rem;
-  --pgn-typography-font-weight-table-th: normal;
-  --pgn-typography-font-weight-lead: inherit;
-  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-font-weight-bolder: bolder;
-  --pgn-typography-font-weight-bold: 700;
-  --pgn-typography-font-weight-semi-bold: 500;
-  --pgn-typography-font-weight-normal: 400;
-  --pgn-typography-font-weight-light: 300;
-  --pgn-typography-font-weight-lighter: lighter;
-  --pgn-typography-font-size-micro: .688rem;
-  --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6);
-  --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5);
-  --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4);
-  --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3);
-  --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2);
-  --pgn-typography-font-size-mobile-h1: 2.25rem;
-  --pgn-typography-font-size-h6: .75rem;
-  --pgn-typography-font-size-h5: .875rem;
-  --pgn-typography-font-size-h4: 1.125rem;
-  --pgn-typography-font-size-h3: 1.375rem;
-  --pgn-typography-font-size-h2: 2rem;
-  --pgn-typography-font-size-h1: 2.5rem;
-  --pgn-typography-font-size-small-x: 75%;
-  --pgn-typography-font-size-small-base: 87.5%;
-  --pgn-typography-font-size-xs: .75rem;
-  --pgn-typography-font-size-sm: .875rem;
-  --pgn-typography-font-size-lg: 1.4063rem;
-  --pgn-typography-font-size-base: 1.125rem;
-  --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
-  --pgn-typography-font-family-serif: serif;
-  --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
-  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
   --pgn-typography-print-page-size: a3;
-  --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-mobile: 3.25rem;
-  --pgn-typography-display-line-height-mobile: 3.5rem;
-  --pgn-typography-display-line-height-base: 1rem;
-  --pgn-typography-display-4: 7.5rem;
-  --pgn-typography-display-3: 5.625rem;
-  --pgn-typography-display-2: 4.875rem;
-  --pgn-typography-display-1: 3.75rem;
+  --pgn-typography-line-height-display-mobile: 3.5rem; /* Mobile display line height. */
+  --pgn-typography-line-height-display-base: 1; /* Standard display line height. */
+  --pgn-typography-line-height-micro: .938rem; /* Micro utils line height. */
+  --pgn-typography-line-height-sm: 1.5; /* Small line height. */
+  --pgn-typography-line-height-lg: 1.5; /* Large line height. */
+  --pgn-typography-line-height-base: 1.5556; /* Basic line height. */
+  --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold); /* Font weight of display level 4. */
+  --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */
+  --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */
+  --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */
+  --pgn-typography-font-weight-table-th: normal; /* Table th font weight. */
+  --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */
+  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */
+  --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */
+  --pgn-typography-font-weight-bold: 700; /* Bold font weight. */
+  --pgn-typography-font-weight-semi-bold: 500; /* Semi-bold font weight. */
+  --pgn-typography-font-weight-normal: 400; /* Normal font weight. */
+  --pgn-typography-font-weight-light: 300; /* Light font weight. */
+  --pgn-typography-font-weight-lighter: lighter; /* Lighter font weight. */
+  --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 4. */
+  --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 3. */
+  --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 2. */
+  --pgn-typography-font-size-display-mobile-1: 3.25rem; /* Mobile font size for heading of level 1. */
+  --pgn-typography-font-size-display-4: 7.5rem; /* Font size for heading of level 4. */
+  --pgn-typography-font-size-display-3: 5.625rem; /* Font size for heading of level 3. */
+  --pgn-typography-font-size-display-2: 4.875rem; /* Font size for heading of level 2. */
+  --pgn-typography-font-size-display-1: 3.75rem; /* Font size for heading of level 1. */
+  --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */
+  --pgn-typography-font-size-h6-base: .75rem; /* Font size of heading level 6. */
+  --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */
+  --pgn-typography-font-size-h5-base: .875rem; /* Font size of heading level 5. */
+  --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /* Mobile font size of heading level 4. */
+  --pgn-typography-font-size-h4-base: 1.125rem; /* Font size of heading level 4. */
+  --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /* Mobile font size of heading level 3. */
+  --pgn-typography-font-size-h3-base: 1.375rem; /* Font size of heading level 3. */
+  --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base); /* Mobile font size of heading level 2. */
+  --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */
+  --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */
+  --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */
+  --pgn-typography-font-size-micro: .6875rem; /* Micro utils text font size. */
+  --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */
+  --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
+  --pgn-typography-font-size-lg: var(--pgn-typography-font-size-base) * 1.25; /* Lead text font size. */
+  --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
+  --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; /* Monospace font family. */
+  --pgn-typography-font-family-serif: serif; /* Serif font family. */
+  --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'; /* Sans-serif font family. */
+  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */
   --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
+  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-link-decoration-brand-inline-hover: underline;
   --pgn-typography-link-decoration-brand-inline-base: underline;
@@ -110,13 +109,13 @@
   --pgn-typography-link-decoration-hover: underline;
   --pgn-typography-link-decoration-base: none;
   --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
-  --pgn-typography-input-btn-line-height-sm: 1.4286rem;
-  --pgn-typography-input-btn-line-height-base: 1.3333rem;
+  --pgn-typography-input-btn-line-height-sm: 1.4286;
+  --pgn-typography-input-btn-line-height-base: 1.3333;
   --pgn-typography-input-btn-font-size-lg: 1.325rem;
   --pgn-typography-input-btn-font-size-sm: .875rem;
   --pgn-typography-input-btn-font-size-base: 1.125rem;
   --pgn-typography-input-btn-font-family: inherit;
-  --pgn-typography-headings-line-height: 1.25rem;
+  --pgn-typography-headings-line-height: 1.25;
   --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-headings-font-family: inherit;
   --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
@@ -137,7 +136,7 @@
   --pgn-typography-image-figure-caption-font-size: 90%;
   --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
   --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
+  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
   --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
   --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
@@ -155,7 +154,7 @@
   --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
   --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
   --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x);
+  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs);
   --pgn-typography-dropdown-item-text-decoration: none;
   --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
   --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
@@ -163,7 +162,7 @@
   --pgn-typography-code-font-size: 87.5%;
   --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
-  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
+  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs);
   --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
   --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
   --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
@@ -179,23 +178,23 @@
   --pgn-typography-alert-line-height: 1.5rem;
   --pgn-typography-alert-font-size: .875rem;
   --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
-  --pgn-spacing-grid-gutter-width: 24px;
-  --pgn-spacing-table-cell-padding-sm: .3rem;
-  --pgn-spacing-table-cell-padding-base: .75rem;
-  --pgn-spacing-label-margin-bottom: .5rem;
-  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
-  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
-  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
-  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
-  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
-  --pgn-spacing-spacer-base: 1rem;
-  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
-  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
-  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
-  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
-  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
-  --pgn-spacing-spacer-0: 0rem;
+  --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */
+  --pgn-spacing-table-cell-padding-sm: .3rem; /* Padding sm for tables. */
+  --pgn-spacing-table-cell-padding-base: .75rem; /* Padding for tables. */
+  --pgn-spacing-label-margin-bottom: .5rem; /* Margin bottom for label. */
+  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */
+  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */
+  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */
+  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */
+  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */
+  --pgn-spacing-spacer-base: 1rem; /* Basic space value */
+  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */
+  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */
+  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */
+  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */
+  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */
+  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */
+  --pgn-spacing-spacer-0: 0; /* Space value of level 0 */
   --pgn-spacing-mark-padding: .2em;
   --pgn-spacing-paragraph-margin-bottom: 1rem;
   --pgn-spacing-list-group-item-padding-x: 1.25rem;
@@ -210,7 +209,7 @@
   --pgn-spacing-headings-margin-bottom: .5rem;
   --pgn-spacing-caret-vertical-align: .255em;
   --pgn-spacing-caret-base: .255em;
-  --pgn-spacing-tooltip-margin: 0rem;
+  --pgn-spacing-tooltip-margin: 0;
   --pgn-spacing-tooltip-padding-x: .5rem;
   --pgn-spacing-tooltip-padding-y: .5rem;
   --pgn-spacing-toast-container-gutter-sm: .625rem;
@@ -224,9 +223,9 @@
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
-  --pgn-spacing-sticky-offset: 0rem;
-  --pgn-spacing-stepper-header-step-list-margin: 0rem;
-  --pgn-spacing-stepper-header-step-list-padding-x: 0rem;
+  --pgn-spacing-sticky-offset: 0;
+  --pgn-spacing-stepper-header-step-list-margin: 0;
+  --pgn-spacing-stepper-header-step-list-padding-x: 0;
   --pgn-spacing-stepper-header-step-list-padding-y: .25rem;
   --pgn-spacing-stepper-header-step-padding: .25rem;
   --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
@@ -308,7 +307,7 @@
   --pgn-spacing-dropdown-padding-y-item: .25rem;
   --pgn-spacing-dropdown-padding-y-base: .5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
-  --pgn-spacing-dropdown-padding-x-base: 0rem;
+  --pgn-spacing-dropdown-padding-x-base: 0;
   --pgn-spacing-dropdown-spacer: .125rem;
   --pgn-spacing-data-table-footer-position: center;
   --pgn-spacing-data-table-padding-cell: .5rem .75rem;
@@ -347,7 +346,7 @@
   --pgn-spacing-card-loading-skeleton-spacer: .313rem;
   --pgn-spacing-card-footer-action-gap: .5rem;
   --pgn-spacing-card-columns-gap: 1.25rem;
-  --pgn-spacing-card-columns-count: 3rem;
+  --pgn-spacing-card-columns-count: 3;
   --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
   --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
@@ -367,7 +366,7 @@
   --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
   --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
-  --pgn-spacing-bubble-expandable-padding-y: 0rem;
+  --pgn-spacing-bubble-expandable-padding-y: 0;
   --pgn-spacing-breadcrumb-margin-left: .5rem;
   --pgn-spacing-badge-padding-y: .125rem;
   --pgn-spacing-badge-padding-x-pill: .6em;
@@ -384,12 +383,12 @@
   --pgn-spacing-alert-padding-y: 1.5rem;
   --pgn-spacing-action-row-gap-y: .5rem;
   --pgn-spacing-action-row-gap-x: .5rem;
-  --pgn-size-breakpoint-xxl: 1400px;
-  --pgn-size-breakpoint-xl: 1200px;
-  --pgn-size-breakpoint-lg: 992px;
-  --pgn-size-breakpoint-md: 768px;
-  --pgn-size-breakpoint-sm: 576px;
-  --pgn-size-breakpoint-xs: 0rem;
+  --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */
+  --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */
+  --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */
+  --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */
+  --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */
+  --pgn-size-breakpoint-xs: 0; /* Starting breakpoint for portrait phones. */
   --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-list-group-border-width: var(--pgn-size-border-width);
   --pgn-size-input-btn-focus-width: 1px;
@@ -407,9 +406,9 @@
   --pgn-size-tabs-notification-width: 1rem;
   --pgn-size-tabs-notification-height: 1rem;
   --pgn-size-stepper-step-bubble-error-shadow-width: 3px;
-  --pgn-size-stepper-step-width-min: 0rem;
+  --pgn-size-stepper-step-width-min: 0;
   --pgn-size-stepper-header-height-min: 5.13rem;
-  --pgn-size-stack-gap: 0rem;
+  --pgn-size-stack-gap: 0;
   --pgn-size-spinner-sm-border-width: .2em;
   --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
   --pgn-size-spinner-sm-width: 1rem;
@@ -417,11 +416,11 @@
   --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
   --pgn-size-spinner-base-width: 2rem;
   --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --pgn-size-search-field-border-radius: 0rem;
+  --pgn-size-search-field-border-radius: 0;
   --pgn-size-search-field-border-width-focus: .3125rem;
   --pgn-size-search-field-border-width-base: .0625rem;
   --pgn-size-progress-bar-threshold-circle: .5625rem;
-  --pgn-size-progress-bar-border-radius: 0rem;
+  --pgn-size-progress-bar-border-radius: 0;
   --pgn-size-progress-bar-border-width: 1px;
   --pgn-size-progress-bar-height-annotated: .3125rem;
   --pgn-size-progress-bar-height-base: 1rem;
@@ -437,7 +436,7 @@
   --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
   --pgn-size-popover-border-width: var(--pgn-size-border-width);
   --pgn-size-popover-max-width: 480px;
-  --pgn-size-pagination-focus-outline: 0rem;
+  --pgn-size-pagination-focus-outline: 0;
   --pgn-size-pagination-toggle-border-sm: .25rem;
   --pgn-size-pagination-toggle-border-base: .3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
@@ -452,7 +451,7 @@
   --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
   --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
   --pgn-size-navbar-nav-scroll-max-height: 75vh;
-  --pgn-size-nav-tabs-border-radius: 0rem;
+  --pgn-size-nav-tabs-border-radius: 0;
   --pgn-size-nav-tabs-border-width: 2px;
   --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
   --pgn-size-nav-tabs-link-border-bottom-width: .188rem;
@@ -491,7 +490,7 @@
   --pgn-size-form-autosuggest-icon-width: 2.4rem;
   --pgn-size-form-grid-gutter-width: 0.625rem;
   --pgn-size-form-control-border-radio-indicator-radius: 50%;
-  --pgn-size-form-control-border-checkbox-indicator-radius: 0rem;
+  --pgn-size-form-control-border-checkbox-indicator-radius: 0;
   --pgn-size-form-control-icon-width: 2rem;
   --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
   --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
@@ -499,7 +498,7 @@
   --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
   --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-border-radius: 1rem;
-  --pgn-size-form-control-range-thumb-border-base: 0rem;
+  --pgn-size-form-control-range-thumb-border-base: 0;
   --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-range-thumb-width: 1rem;
   --pgn-size-form-control-range-track-border-radius: 1rem;
@@ -593,11 +592,11 @@
   --pgn-size-annotation-border-radius: .25rem;
   --pgn-size-annotation-max-width: 18.75rem;
   --pgn-size-annotation-arrow-border-width: .5rem;
-  --pgn-size-alert-border-width: 0rem;
+  --pgn-size-alert-border-width: 0;
   --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-rounded-pill: 50rem;
-  --pgn-size-border-radius-sm: .25rem;
-  --pgn-size-border-radius-lg: .425rem;
-  --pgn-size-border-radius-base: .375rem;
-  --pgn-size-border-width: 1px;
+  --pgn-size-rounded-pill: 50rem; /* Pill border radius. */
+  --pgn-size-border-radius-sm: .25rem; /* Small border radius. */
+  --pgn-size-border-radius-lg: .425rem; /* Large border radius. */
+  --pgn-size-border-radius-base: .375rem; /* Default border radius. */
+  --pgn-size-border-width: 1px; /* Default border width. */
 }
diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
index d3aee7ed00..824c7895a1 100644
--- a/styles/css/themes/light/utility-classes.css
+++ b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,6 @@
-/*
- * IMPORTANT: This file is the result of assembling design tokens.
- * Do not edit directly.
- * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 02 Sep 2024 19:21:13 GMT
  */
 
 .bg-accent-a {
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 895537aa53..b2837b1027 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,7 +1,6 @@
-/*
- * IMPORTANT: This file is the result of assembling design tokens.
- * Do not edit directly.
- * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 02 Sep 2024 19:21:13 GMT
  */
 
 :root {
@@ -114,115 +113,115 @@
   --pgn-color-action-default-gray-300: #949494FF;
   --pgn-color-action-default-gray-200: #B3B3B3FF;
   --pgn-color-action-default-gray-100: #D2D2D2FF;
-  --pgn-color-dark-base: #273F2FFF;
-  --pgn-color-dark-900: #1B2C21FF;
-  --pgn-color-dark-800: #1D2F23FF;
-  --pgn-color-dark-700: #1F3226FF;
-  --pgn-color-dark-600: #23392AFF;
-  --pgn-color-dark-500: var(--pgn-color-dark-base);
-  --pgn-color-dark-400: #5D6F63FF;
-  --pgn-color-dark-300: #939F97FF;
-  --pgn-color-dark-200: #C9CFCBFF;
-  --pgn-color-dark-100: #F2F3F3FF;
-  --pgn-color-light-base: #E1DDDBFF;
-  --pgn-color-light-900: #9E9B99FF;
-  --pgn-color-light-800: #A9A6A4FF;
-  --pgn-color-light-700: #B4B1AFFF;
-  --pgn-color-light-600: #CBC7C5FF;
-  --pgn-color-light-500: var(--pgn-color-light-base);
-  --pgn-color-light-400: #E9E6E4FF;
-  --pgn-color-light-300: #F0EEEDFF;
-  --pgn-color-light-200: #F8F7F6FF;
-  --pgn-color-light-100: #FDFDFDFF;
-  --pgn-color-danger-base: var(--pgn-color-red);
-  --pgn-color-danger-900: #892029FF;
-  --pgn-color-danger-800: #92222CFF;
-  --pgn-color-danger-700: #9C242EFF;
-  --pgn-color-danger-600: #B02934FF;
-  --pgn-color-danger-500: var(--pgn-color-danger-base);
-  --pgn-color-danger-400: #D2626BFF;
-  --pgn-color-danger-300: #E1969DFF;
-  --pgn-color-danger-200: #F0CBCEFF;
-  --pgn-color-danger-100: #FBF2F3FF;
-  --pgn-color-warning-base: var(--pgn-color-yellow);
-  --pgn-color-warning-900: #B39800FF;
-  --pgn-color-warning-800: #BFA300FF;
-  --pgn-color-warning-700: #CCAE00FF;
-  --pgn-color-warning-600: #E6C300FF;
-  --pgn-color-warning-500: var(--pgn-color-warning-base);
-  --pgn-color-warning-400: #FFE340FF;
-  --pgn-color-warning-300: #FFEC80FF;
-  --pgn-color-warning-200: #FFF6BFFF;
-  --pgn-color-warning-100: #FFFDF0FF;
-  --pgn-color-info-base: var(--pgn-color-teal);
-  --pgn-color-info-900: #004C77FF;
-  --pgn-color-info-800: #005280FF;
-  --pgn-color-info-700: #005788FF;
-  --pgn-color-info-600: #006299FF;
-  --pgn-color-info-500: var(--pgn-color-info-base);
-  --pgn-color-info-400: #4092BFFF;
-  --pgn-color-info-300: #80B6D5FF;
-  --pgn-color-info-200: #BFDBEAFF;
-  --pgn-color-info-100: #F0F6FAFF;
-  --pgn-color-success-base: var(--pgn-color-green);
-  --pgn-color-success-900: #105B3AFF;
-  --pgn-color-success-800: #11623EFF;
-  --pgn-color-success-700: #126842FF;
-  --pgn-color-success-600: #15754BFF;
-  --pgn-color-success-500: var(--pgn-color-success-base);
-  --pgn-color-success-400: #51A17EFF;
-  --pgn-color-success-300: #8BC1A9FF;
-  --pgn-color-success-200: #C5E0D4FF;
-  --pgn-color-success-100: #F1F8F5FF;
-  --pgn-color-brand-base: #9D0054FF;
-  --pgn-color-brand-900: #6E003BFF;
-  --pgn-color-brand-800: #76003FFF;
-  --pgn-color-brand-700: #7E0043FF;
-  --pgn-color-brand-600: #8D004CFF;
-  --pgn-color-brand-500: var(--pgn-color-brand-base);
-  --pgn-color-brand-400: #B6407FFF;
-  --pgn-color-brand-300: #CE80AAFF;
-  --pgn-color-brand-200: #E7BFD4FF;
-  --pgn-color-brand-100: #F9F0F5FF;
-  --pgn-color-secondary-base: var(--pgn-color-gray-700);
-  --pgn-color-secondary-900: #303030FF;
-  --pgn-color-secondary-800: #343434FF;
-  --pgn-color-secondary-700: #373737FF;
-  --pgn-color-secondary-600: #3E3E3EFF;
-  --pgn-color-secondary-500: var(--pgn-color-secondary-base);
-  --pgn-color-secondary-400: #747474FF;
-  --pgn-color-secondary-300: #A2A2A2FF;
-  --pgn-color-secondary-200: #D1D1D1FF;
-  --pgn-color-secondary-100: #F4F4F4FF;
-  --pgn-color-primary-base: #0A3055FF;
-  --pgn-color-primary-900: #07223CFF;
-  --pgn-color-primary-800: #082440FF;
-  --pgn-color-primary-700: #082644FF;
-  --pgn-color-primary-600: #092B4DFF;
-  --pgn-color-primary-500: var(--pgn-color-primary-base);
-  --pgn-color-primary-400: #476480FF;
-  --pgn-color-primary-300: #8598AAFF;
-  --pgn-color-primary-200: #C2CBD5FF;
-  --pgn-color-primary-100: #F0F3F5FF;
-  --pgn-color-gray-base: #707070FF;
-  --pgn-color-gray-900: #212529FF;
-  --pgn-color-gray-800: #333333FF;
-  --pgn-color-gray-700: #454545FF;
-  --pgn-color-gray-600: #5C5C5CFF;
-  --pgn-color-gray-500: var(--pgn-color-gray-base);
-  --pgn-color-gray-400: #8F8F8FFF;
-  --pgn-color-gray-300: #ADADADFF;
-  --pgn-color-gray-200: #CCCCCCFF;
-  --pgn-color-gray-100: #EBEBEBFF;
-  --pgn-color-accent-b: #FFEE88FF;
-  --pgn-color-accent-a: #00BBF9FF;
-  --pgn-color-teal: #006DAAFF;
-  --pgn-color-yellow: #FFD900FF;
-  --pgn-color-green: #178253FF;
-  --pgn-color-red: #C32D3AFF;
-  --pgn-color-blue: #23419FFF;
-  --pgn-color-black: #000000FF;
-  --pgn-color-white: #FFFFFFFF;
+  --pgn-color-dark-base: #273F2FFF; /* Basic dark color. */
+  --pgn-color-dark-900: #1B2C21FF; /* Dark color of level 900. */
+  --pgn-color-dark-800: #1D2F23FF; /* Dark color of level 800. */
+  --pgn-color-dark-700: #1F3226FF; /* Info color of level 700. */
+  --pgn-color-dark-600: #23392AFF; /* Dark color of level 600. */
+  --pgn-color-dark-500: var(--pgn-color-dark-base); /* Dark color of level 500. */
+  --pgn-color-dark-400: #5D6F63FF; /* Dark color of level 400. */
+  --pgn-color-dark-300: #939F97FF; /* Dark color of level 300. */
+  --pgn-color-dark-200: #C9CFCBFF; /* Dark color of level 200. */
+  --pgn-color-dark-100: #F2F3F3FF; /* Dark color of level 100. */
+  --pgn-color-light-base: #E1DDDBFF; /* Basic light color. */
+  --pgn-color-light-900: #9E9B99FF; /* Light color of level 900. */
+  --pgn-color-light-800: #A9A6A4FF; /* Light color of level 800. */
+  --pgn-color-light-700: #B4B1AFFF; /* Light color of level 700. */
+  --pgn-color-light-600: #CBC7C5FF; /* Light color of level 600. */
+  --pgn-color-light-500: var(--pgn-color-light-base); /* Light color of level 500. */
+  --pgn-color-light-400: #E9E6E4FF; /* Light color of level 400. */
+  --pgn-color-light-300: #F0EEEDFF; /* Light color of level 300. */
+  --pgn-color-light-200: #F8F7F6FF; /* Light color of level 200. */
+  --pgn-color-light-100: #FDFDFDFF; /* Light color of level 100. */
+  --pgn-color-danger-base: var(--pgn-color-red); /* Basic danger color. */
+  --pgn-color-danger-900: #892029FF; /* Danger color of level 900. */
+  --pgn-color-danger-800: #92222CFF; /* Danger color of level 800. */
+  --pgn-color-danger-700: #9C242EFF; /* Danger color of level 700. */
+  --pgn-color-danger-600: #B02934FF; /* Danger color of level 600. */
+  --pgn-color-danger-500: var(--pgn-color-danger-base); /* Danger color of level 500. */
+  --pgn-color-danger-400: #D2626BFF; /* Danger color of level 400. */
+  --pgn-color-danger-300: #E1969DFF; /* Danger color of level 300. */
+  --pgn-color-danger-200: #F0CBCEFF; /* Danger color of level 200. */
+  --pgn-color-danger-100: #FBF2F3FF; /* Danger color of level 100. */
+  --pgn-color-warning-base: var(--pgn-color-yellow); /* Basic warning color. */
+  --pgn-color-warning-900: #B39800FF; /* Warning color of level 900. */
+  --pgn-color-warning-800: #BFA300FF; /* Warning color of level 800. */
+  --pgn-color-warning-700: #CCAE00FF; /* Warning color of level 700. */
+  --pgn-color-warning-600: #E6C300FF; /* Warning color of level 600. */
+  --pgn-color-warning-500: var(--pgn-color-warning-base); /* Warning color of level 500. */
+  --pgn-color-warning-400: #FFE340FF; /* Warning color of level 400. */
+  --pgn-color-warning-300: #FFEC80FF; /* Warning color of level 300. */
+  --pgn-color-warning-200: #FFF6BFFF; /* Warning color of level 200. */
+  --pgn-color-warning-100: #FFFDF0FF; /* Warning color of level 100. */
+  --pgn-color-info-base: var(--pgn-color-teal); /* Basic info color. */
+  --pgn-color-info-900: #004C77FF; /* Info color of level 900. */
+  --pgn-color-info-800: #005280FF; /* Info color of level 800. */
+  --pgn-color-info-700: #005788FF; /* Info color of level 700. */
+  --pgn-color-info-600: #006299FF; /* Info color of level 600. */
+  --pgn-color-info-500: var(--pgn-color-info-base); /* Info color of level 500. */
+  --pgn-color-info-400: #4092BFFF; /* Info color of level 400. */
+  --pgn-color-info-300: #80B6D5FF; /* Info color of level 300. */
+  --pgn-color-info-200: #BFDBEAFF; /* Info color of level 200. */
+  --pgn-color-info-100: #F0F6FAFF; /* Info color of level 100. */
+  --pgn-color-success-base: var(--pgn-color-green); /* Basic success color. */
+  --pgn-color-success-900: #105B3AFF; /* Success color of level 900. */
+  --pgn-color-success-800: #11623EFF; /* Success color of level 800. */
+  --pgn-color-success-700: #126842FF; /* Success color of level 700. */
+  --pgn-color-success-600: #15754BFF; /* Success color of level 600. */
+  --pgn-color-success-500: var(--pgn-color-success-base); /* Success color of level 500. */
+  --pgn-color-success-400: #51A17EFF; /* Success color of level 400. */
+  --pgn-color-success-300: #8BC1A9FF; /* Success color of level 300. */
+  --pgn-color-success-200: #C5E0D4FF; /* Success color of level 200. */
+  --pgn-color-success-100: #F1F8F5FF; /* Success color of level 100. */
+  --pgn-color-brand-base: #9D0054FF; /* Basic brand color. */
+  --pgn-color-brand-900: #6E003BFF; /* Brand color of level 900. */
+  --pgn-color-brand-800: #76003FFF; /* Brand color of level 800. */
+  --pgn-color-brand-700: #7E0043FF; /* Brand color of level 700. */
+  --pgn-color-brand-600: #8D004CFF; /* Brand color of level 600. */
+  --pgn-color-brand-500: var(--pgn-color-brand-base); /* Brand color of level 500. */
+  --pgn-color-brand-400: #B6407FFF; /* Brand color of level 400. */
+  --pgn-color-brand-300: #CE80AAFF; /* Brand color of level 300. */
+  --pgn-color-brand-200: #E7BFD4FF; /* Brand color of level 200. */
+  --pgn-color-brand-100: #F9F0F5FF; /* Brand color of level 100. */
+  --pgn-color-secondary-base: var(--pgn-color-gray-700); /* Basic secondary color. */
+  --pgn-color-secondary-900: #303030FF; /* Secondary color of level 900. */
+  --pgn-color-secondary-800: #343434FF; /* Secondary color of level 800. */
+  --pgn-color-secondary-700: #373737FF; /* Secondary color of level 700. */
+  --pgn-color-secondary-600: #3E3E3EFF; /* Secondary color of level 600. */
+  --pgn-color-secondary-500: var(--pgn-color-secondary-base); /* Secondary color of level 500. */
+  --pgn-color-secondary-400: #747474FF; /* Secondary color of level 400. */
+  --pgn-color-secondary-300: #A2A2A2FF; /* Secondary color of level 300. */
+  --pgn-color-secondary-200: #D1D1D1FF; /* Secondary color of level 200. */
+  --pgn-color-secondary-100: #F4F4F4FF; /* Secondary color of level 100. */
+  --pgn-color-primary-base: #0A3055FF; /* Basic primary color. */
+  --pgn-color-primary-900: #07223CFF; /* Primary color of level 900. */
+  --pgn-color-primary-800: #082440FF; /* Primary color of level 800. */
+  --pgn-color-primary-700: #082644FF; /* Primary color of level 700. */
+  --pgn-color-primary-600: #092B4DFF; /* Primary color of level 600. */
+  --pgn-color-primary-500: var(--pgn-color-primary-base); /* Primary color of level 500. */
+  --pgn-color-primary-400: #476480FF; /* Primary color of level 400. */
+  --pgn-color-primary-300: #8598AAFF; /* Primary color of level 300. */
+  --pgn-color-primary-200: #C2CBD5FF; /* Primary color of level 200. */
+  --pgn-color-primary-100: #F0F3F5FF; /* Primary color of level 100. */
+  --pgn-color-gray-base: #707070FF; /* Basic gray color. */
+  --pgn-color-gray-900: #212529FF; /* Gray color of level 900. */
+  --pgn-color-gray-800: #333333FF; /* Gray color of level 800. */
+  --pgn-color-gray-700: #454545FF; /* Gray color of level 700. */
+  --pgn-color-gray-600: #5C5C5CFF; /* Gray color of level 600. */
+  --pgn-color-gray-500: var(--pgn-color-gray-base); /* Gray color of level 500. */
+  --pgn-color-gray-400: #8F8F8FFF; /* Gray color of level 400. */
+  --pgn-color-gray-300: #ADADADFF; /* Gray color of level 300. */
+  --pgn-color-gray-200: #CCCCCCFF; /* Gray color of level 200. */
+  --pgn-color-gray-100: #EBEBEBFF; /* Gray color of level 100. */
+  --pgn-color-accent-b: #FFEE88FF; /* Accent-B color. */
+  --pgn-color-accent-a: #00BBF9FF; /* Accent-A color. */
+  --pgn-color-teal: #006DAAFF; /* Teal color. */
+  --pgn-color-yellow: #FFD900FF; /* Yellow color. */
+  --pgn-color-green: #178253FF; /* Green color. */
+  --pgn-color-red: #C32D3AFF; /* Red color. */
+  --pgn-color-blue: #23419FFF; /* Blue color. */
+  --pgn-color-black: #000000FF; /* Black color. */
+  --pgn-color-white: #FFFFFFFF; /* White color. */
   --pgn-color-yiq-light: var(--pgn-color-white);
   --pgn-color-blockquote-small: var(--pgn-color-gray-500);
   --pgn-color-mark-bg: #FFF243FF;
@@ -240,19 +239,19 @@
   --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
   --pgn-color-list-group-bg-base: var(--pgn-color-white);
   --pgn-color-list-group-base: inherit;
-  --pgn-color-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base);
+  --pgn-color-link-brand-inline-hover-decoration: #51002BFF;
   --pgn-color-link-brand-inline-hover-base: #51002BFF;
   --pgn-color-link-brand-inline-decoration: #9D00544D;
   --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
   --pgn-color-link-brand-hover: #51002BFF;
   --pgn-color-link-brand-base: var(--pgn-color-brand-500);
-  --pgn-color-link-muted-inline-hover-decoration: var(--pgn-color-link-muted-inline-hover-base);
+  --pgn-color-link-muted-inline-hover-decoration: #020911FF;
   --pgn-color-link-muted-inline-hover-base: #020911FF;
   --pgn-color-link-muted-inline-decoration: #0A30554D;
   --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
   --pgn-color-link-muted-hover: #020911FF;
   --pgn-color-link-muted-base: var(--pgn-color-primary-500);
-  --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base);
+  --pgn-color-link-inline-hover-decoration: #003C5EFF;
   --pgn-color-link-inline-hover-base: #003C5EFF;
   --pgn-color-link-inline-decoration: #006DAA4D;
   --pgn-color-link-inline-base: var(--pgn-color-info-500);
@@ -1442,78 +1441,77 @@
   --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success);
   --pgn-color-alert-content: var(--pgn-color-gray-700);
   --pgn-color-alert-title: var(--pgn-color-black);
-  --pgn-color-theme-active-gray: var(--pgn-color-gray-900);
-  --pgn-color-theme-active-dark: var(--pgn-color-dark-900);
-  --pgn-color-theme-active-light: var(--pgn-color-light-900);
-  --pgn-color-theme-active-danger: var(--pgn-color-danger-900);
-  --pgn-color-theme-active-warning: var(--pgn-color-warning-900);
-  --pgn-color-theme-active-info: var(--pgn-color-info-900);
-  --pgn-color-theme-active-success: var(--pgn-color-success-900);
-  --pgn-color-theme-active-brand: var(--pgn-color-brand-900);
-  --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900);
-  --pgn-color-theme-active-primary: var(--pgn-color-primary-900);
-  --pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
-  --pgn-color-theme-hover-dark: var(--pgn-color-dark-700);
-  --pgn-color-theme-hover-light: var(--pgn-color-light-700);
-  --pgn-color-theme-hover-danger: var(--pgn-color-danger-700);
-  --pgn-color-theme-hover-warning: var(--pgn-color-warning-700);
-  --pgn-color-theme-hover-info: var(--pgn-color-info-700);
-  --pgn-color-theme-hover-success: var(--pgn-color-success-700);
-  --pgn-color-theme-hover-brand: var(--pgn-color-brand-700);
-  --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700);
-  --pgn-color-theme-hover-primary: var(--pgn-color-primary-700);
-  --pgn-color-theme-default-gray: var(--pgn-color-gray-500);
-  --pgn-color-theme-default-dark: var(--pgn-color-dark-500);
-  --pgn-color-theme-default-light: var(--pgn-color-light-500);
-  --pgn-color-theme-default-danger: var(--pgn-color-danger-500);
-  --pgn-color-theme-default-warning: var(--pgn-color-warning-500);
-  --pgn-color-theme-default-info: var(--pgn-color-info-500);
-  --pgn-color-theme-default-success: var(--pgn-color-success-500);
-  --pgn-color-theme-default-brand: var(--pgn-color-brand-500);
-  --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-default-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500);
-  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500);
-  --pgn-color-theme-focus-light: var(--pgn-color-light-500);
-  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500);
-  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500);
-  --pgn-color-theme-focus-info: var(--pgn-color-info-500);
-  --pgn-color-theme-focus-success: var(--pgn-color-success-500);
-  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500);
-  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-border-gray: var(--pgn-color-gray-200);
-  --pgn-color-theme-border-dark: var(--pgn-color-dark-200);
-  --pgn-color-theme-border-light: var(--pgn-color-light-200);
-  --pgn-color-theme-border-danger: var(--pgn-color-danger-200);
-  --pgn-color-theme-border-warning: var(--pgn-color-warning-200);
-  --pgn-color-theme-border-info: var(--pgn-color-info-200);
-  --pgn-color-theme-border-success: var(--pgn-color-success-200);
-  --pgn-color-theme-border-brand: var(--pgn-color-brand-200);
-  --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200);
-  --pgn-color-theme-border-primary: var(--pgn-color-primary-200);
-  --pgn-color-theme-bg-gray: var(--pgn-color-gray-100);
-  --pgn-color-theme-bg-dark: var(--pgn-color-dark-100);
-  --pgn-color-theme-bg-light: var(--pgn-color-light-100);
-  --pgn-color-theme-bg-danger: var(--pgn-color-danger-100);
-  --pgn-color-theme-bg-warning: var(--pgn-color-warning-100);
-  --pgn-color-theme-bg-info: var(--pgn-color-info-100);
-  --pgn-color-theme-bg-success: var(--pgn-color-success-100);
-  --pgn-color-theme-bg-brand: var(--pgn-color-brand-100);
-  --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
-  --pgn-color-theme-bg-primary: var(--pgn-color-primary-100);
-  --pgn-color-border: var(--pgn-color-gray-200);
-  --pgn-color-table-border: var(--pgn-color-border);
-  --pgn-color-table-caption: var(--pgn-color-text-muted);
+  --pgn-color-theme-active-gray: var(--pgn-color-gray-900); /* Theme-specific gray active color. */
+  --pgn-color-theme-active-dark: var(--pgn-color-dark-900); /* Theme-specific dark active color. */
+  --pgn-color-theme-active-light: var(--pgn-color-light-900); /* Theme-specific light active color. */
+  --pgn-color-theme-active-danger: var(--pgn-color-danger-900); /* Theme-specific danger active color. */
+  --pgn-color-theme-active-warning: var(--pgn-color-warning-900); /* Theme-specific warning active color. */
+  --pgn-color-theme-active-info: var(--pgn-color-info-900); /* Theme-specific info active color. */
+  --pgn-color-theme-active-success: var(--pgn-color-success-900); /* Theme-specific success active color. */
+  --pgn-color-theme-active-brand: var(--pgn-color-brand-900); /* Theme-specific brand active color. */
+  --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); /* Theme-specific secondary active color. */
+  --pgn-color-theme-active-primary: var(--pgn-color-primary-900); /* Theme-specific primary active color. */
+  --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); /* Theme-specific gray hover color. */
+  --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); /* Theme-specific dark hover color. */
+  --pgn-color-theme-hover-light: var(--pgn-color-light-700); /* Theme-specific light hover color. */
+  --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); /* Theme-specific danger hover color. */
+  --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); /* Theme-specific warning hover color. */
+  --pgn-color-theme-hover-info: var(--pgn-color-info-700); /* Theme-specific info hover color. */
+  --pgn-color-theme-hover-success: var(--pgn-color-success-700); /* Theme-specific success hover color. */
+  --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); /* Theme-specific brand hover color. */
+  --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); /* Theme-specific secondary hover color. */
+  --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); /* Theme-specific primary hover color. */
+  --pgn-color-theme-default-gray: var(--pgn-color-gray-500); /* Theme-specific gray default color. */
+  --pgn-color-theme-default-dark: var(--pgn-color-dark-500); /* Theme-specific dark default color. */
+  --pgn-color-theme-default-light: var(--pgn-color-light-500); /* Theme-specific light default color. */
+  --pgn-color-theme-default-danger: var(--pgn-color-danger-500); /* Theme-specific danger default color. */
+  --pgn-color-theme-default-warning: var(--pgn-color-warning-500); /* Theme-specific warning default color. */
+  --pgn-color-theme-default-info: var(--pgn-color-info-500); /* Theme-specific info default color. */
+  --pgn-color-theme-default-success: var(--pgn-color-success-500); /* Theme-specific success default color. */
+  --pgn-color-theme-default-brand: var(--pgn-color-brand-500); /* Theme-specific brand default color. */
+  --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary default color. */
+  --pgn-color-theme-default-primary: var(--pgn-color-primary-500); /* Theme-specific primary default color. */
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); /* Theme-specific gray focus color. */
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); /* Theme-specific dark focus color. */
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500); /* Theme-specific light focus color. */
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); /* Theme-specific danger focus color. */
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); /* Theme-specific warning focus color. */
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500); /* Theme-specific info focus color. */
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500); /* Theme-specific success focus color. */
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); /* Theme-specific brand focus color. */
+  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary focus color. */
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); /* Theme-specific primary focus color. */
+  --pgn-color-theme-border-gray: var(--pgn-color-gray-200); /* Theme-specific gray border color. */
+  --pgn-color-theme-border-dark: var(--pgn-color-dark-200); /* Theme-specific dark border color. */
+  --pgn-color-theme-border-light: var(--pgn-color-light-200); /* Theme-specific light border color. */
+  --pgn-color-theme-border-danger: var(--pgn-color-danger-200); /* Theme-specific danger border color. */
+  --pgn-color-theme-border-warning: var(--pgn-color-warning-200); /* Theme-specific warning border color. */
+  --pgn-color-theme-border-info: var(--pgn-color-info-200); /* Theme-specific info border color. */
+  --pgn-color-theme-border-success: var(--pgn-color-success-200); /* Theme-specific success border color. */
+  --pgn-color-theme-border-brand: var(--pgn-color-brand-200); /* Theme-specific brand border color. */
+  --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); /* Theme-specific secondary border color. */
+  --pgn-color-theme-border-primary: var(--pgn-color-primary-200); /* Theme-specific primary border color. */
+  --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); /* Theme-specific gray background color. */
+  --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); /* Theme-specific dark background color. */
+  --pgn-color-theme-bg-light: var(--pgn-color-light-100); /* Theme-specific light background color. */
+  --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); /* Theme-specific danger background color. */
+  --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); /* Theme-specific warning background color. */
+  --pgn-color-theme-bg-info: var(--pgn-color-info-100); /* Theme-specific info background color. */
+  --pgn-color-theme-bg-success: var(--pgn-color-success-100); /* Theme-specific success background color. */
+  --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); /* Theme-specific brand background color. */
+  --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); /* Theme-specific secondary background color. */
+  --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); /* Theme-specific primary background color. */
+  --pgn-color-border: var(--pgn-color-gray-200); /* Border color. */
+  --pgn-color-table-border: var(--pgn-color-border); /* Table border color. */
+  --pgn-color-table-caption: var(--pgn-color-text-muted); /* Table caption color. */
   --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
-  --pgn-color-input-focus: var(--pgn-color-primary-500);
-  --pgn-color-disabled: var(--pgn-color-gray-500);
-  --pgn-color-active: var(--pgn-color-white);
-  --pgn-color-text-50-white: #FFFFFF80;
-  --pgn-color-text-50-black: #00000080;
-  --pgn-color-bg-active: var(--pgn-color-primary-500);
-  --pgn-color-bg-base: var(--pgn-color-white);
-  --pgn-theme-interval: 8%;
+  --pgn-color-input-focus: var(--pgn-color-primary-500); /* Focused input value color. */
+  --pgn-color-disabled: var(--pgn-color-gray-500); /* Color for disabled element. */
+  --pgn-color-active: var(--pgn-color-white); /* Color for active element. */
+  --pgn-color-text-50-white: #FFFFFF80; /* White text color with transparency of 50%. */
+  --pgn-color-text-50-black: #00000080; /* Black text color with transparency of 50%. */
+  --pgn-color-bg-active: var(--pgn-color-primary-500); /* Active background color. */
+  --pgn-color-bg-base: var(--pgn-color-white); /* Basic background color. */
   --pgn-other-link-emphasized-hover-darken-percentage: 15%;
   --pgn-other-tooltip-opacity: 1;
   --pgn-other-search-field-disabled-opacity: .3;
@@ -1536,43 +1534,39 @@
   --pgn-other-carousel-control-opacity-base: .5;
   --pgn-other-btn-disabled-opacity: .65;
   --pgn-other-form-feedback-tooltip-opacity: .9;
-  --pgn-other-form-control-custom-file-content: Browse;
-  --pgn-other-form-control-custom-file-lang: en;
-  --pgn-other-form-control-range-track-cursor: pointer;
-  --pgn-other-form-control-cursor: auto;
-  --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3);
-  --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2);
-  --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3);
-  --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); /* Large box shadow. */
+  --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); /* Small box shadow. */
+  --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); /* Default box shadow. */
+  --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 1. */
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
   --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
@@ -1642,598 +1636,8 @@
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
   --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-zindex-fixed: 1030;
-  --pgn-elevation-zindex-sticky: 1020;
-  --pgn-elevation-zindex-2000: 2000;
-  --pgn-elevation-zindex-1800: 1800;
-  --pgn-elevation-zindex-1600: 1600;
-  --pgn-elevation-zindex-1400: 1400;
-  --pgn-elevation-zindex-1200: 1200;
-  --pgn-elevation-zindex-1000: 1000;
-  --pgn-elevation-zindex-800: 800;
-  --pgn-elevation-zindex-600: 600;
-  --pgn-elevation-zindex-400: 400;
-  --pgn-elevation-zindex-200: 200;
-  --pgn-elevation-zindex-0: 0;
   --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-tooltip-zindex: 1070;
-  --pgn-elevation-sheet-zindex-main: 1032;
-  --pgn-elevation-sheet-zindex-backdrop: 1031;
-  --pgn-elevation-product-tour-checkpoint-zindex: 1060;
   --pgn-elevation-popover-box-shadow: none;
-  --pgn-elevation-popover-zindex: 1060;
   --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
-  --pgn-elevation-modal-zindex: 1050;
-  --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-box-shadow: none;
-  --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse-width: width .35s ease;
-  --pgn-transition-collapse-height: height .35s ease;
-  --pgn-transition-fade: opacity .15s linear;
-  --pgn-transition-base: all .2s ease-in-out;
-  --pgn-transition-progress-bar-bar-transition: width .6s ease;
-  --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
-  --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-carousel-control: opacity .15s ease;
-  --pgn-transition-carousel-indicator: opacity .6s ease;
-  --pgn-transition-carousel-duration: .6s;
-  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
-  --pgn-transition-btn: none;
-  --pgn-transition-badge: none;
-  --pgn-typography-line-height-micro: .938rem;
-  --pgn-typography-line-height-sm: 1.5rem;
-  --pgn-typography-line-height-lg: 1.5rem;
-  --pgn-typography-line-height-base: 1.5556rem;
-  --pgn-typography-font-weight-table-th: normal;
-  --pgn-typography-font-weight-lead: inherit;
-  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-font-weight-bolder: bolder;
-  --pgn-typography-font-weight-bold: 700;
-  --pgn-typography-font-weight-semi-bold: 500;
-  --pgn-typography-font-weight-normal: 400;
-  --pgn-typography-font-weight-light: 300;
-  --pgn-typography-font-weight-lighter: lighter;
-  --pgn-typography-font-size-micro: .688rem;
-  --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6);
-  --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5);
-  --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4);
-  --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3);
-  --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2);
-  --pgn-typography-font-size-mobile-h1: 2.25rem;
-  --pgn-typography-font-size-h6: .75rem;
-  --pgn-typography-font-size-h5: .875rem;
-  --pgn-typography-font-size-h4: 1.125rem;
-  --pgn-typography-font-size-h3: 1.375rem;
-  --pgn-typography-font-size-h2: 2rem;
-  --pgn-typography-font-size-h1: 2.5rem;
-  --pgn-typography-font-size-small-x: 75%;
-  --pgn-typography-font-size-small-base: 87.5%;
-  --pgn-typography-font-size-xs: .75rem;
-  --pgn-typography-font-size-sm: .875rem;
-  --pgn-typography-font-size-lg: 1.4063rem;
-  --pgn-typography-font-size-base: 1.125rem;
-  --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace;
-  --pgn-typography-font-family-serif: serif;
-  --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, '"Helvetica Neue"', Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
-  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
-  --pgn-typography-print-page-size: a3;
-  --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-mobile: 3.25rem;
-  --pgn-typography-display-line-height-mobile: 3.5rem;
-  --pgn-typography-display-line-height-base: 1rem;
-  --pgn-typography-display-4: 7.5rem;
-  --pgn-typography-display-3: 5.625rem;
-  --pgn-typography-display-2: 4.875rem;
-  --pgn-typography-display-1: 3.75rem;
-  --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
-  --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-link-decoration-brand-inline-hover: underline;
-  --pgn-typography-link-decoration-brand-inline-base: underline;
-  --pgn-typography-link-decoration-brand-hover: underline;
-  --pgn-typography-link-decoration-brand-base: none;
-  --pgn-typography-link-decoration-muted-inline-hover: underline;
-  --pgn-typography-link-decoration-muted-inline-base: underline;
-  --pgn-typography-link-decoration-muted-hover: underline;
-  --pgn-typography-link-decoration-muted-base: none;
-  --pgn-typography-link-decoration-inline-hover: underline;
-  --pgn-typography-link-decoration-inline-base: underline;
-  --pgn-typography-link-decoration-hover: underline;
-  --pgn-typography-link-decoration-base: none;
-  --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
-  --pgn-typography-input-btn-line-height-sm: 1.4286rem;
-  --pgn-typography-input-btn-line-height-base: 1.3333rem;
-  --pgn-typography-input-btn-font-size-lg: 1.325rem;
-  --pgn-typography-input-btn-font-size-sm: .875rem;
-  --pgn-typography-input-btn-font-size-base: 1.125rem;
-  --pgn-typography-input-btn-font-family: inherit;
-  --pgn-typography-headings-line-height: 1.25rem;
-  --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-headings-font-family: inherit;
-  --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-toast-font-size: .875rem;
-  --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
-  --pgn-typography-spacer-line-height: 1px;
-  --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
-  --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-pagination-line-height: 1.5rem;
-  --pgn-typography-pagination-font-size-sm: .875rem;
-  --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
-  --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
-  --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
-  --pgn-typography-nav-link-text-decoration: none;
-  --pgn-typography-nav-link-font-weight: 500;
-  --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
-  --pgn-typography-menu-select-btn-link-text-decoration-line: underline;
-  --pgn-typography-image-figure-caption-font-size: 90%;
-  --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
-  --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
-  --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
-  --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
-  --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
-  --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
-  --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
-  --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
-  --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
-  --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
-  --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
-  --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
-  --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
-  --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
-  --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
-  --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
-  --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
-  --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
-  --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x);
-  --pgn-typography-dropdown-item-text-decoration: none;
-  --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
-  --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
-  --pgn-typography-code-font-size: 87.5%;
-  --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
-  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
-  --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
-  --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
-  --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
-  --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
-  --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
-  --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
-  --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-badge-font-size: 75%;
-  --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
-  --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-alert-line-height: 1.5rem;
-  --pgn-typography-alert-font-size: .875rem;
-  --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
-  --pgn-spacing-grid-gutter-width: 24px;
-  --pgn-spacing-table-cell-padding-sm: .3rem;
-  --pgn-spacing-table-cell-padding-base: .75rem;
-  --pgn-spacing-label-margin-bottom: .5rem;
-  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
-  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
-  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
-  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
-  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
-  --pgn-spacing-spacer-base: 1rem;
-  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
-  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
-  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
-  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
-  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
-  --pgn-spacing-spacer-0: 0rem;
-  --pgn-spacing-mark-padding: .2em;
-  --pgn-spacing-paragraph-margin-bottom: 1rem;
-  --pgn-spacing-list-group-item-padding-x: 1.25rem;
-  --pgn-spacing-list-group-item-padding-y: .75rem;
-  --pgn-spacing-list-inline-padding: .5rem;
-  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
-  --pgn-spacing-input-btn-padding-lg-y: .6875rem;
-  --pgn-spacing-input-btn-padding-sm-x: .75rem;
-  --pgn-spacing-input-btn-padding-sm-y: .4375rem;
-  --pgn-spacing-input-btn-padding-x: 1rem;
-  --pgn-spacing-input-btn-padding-y: .5625rem;
-  --pgn-spacing-headings-margin-bottom: .5rem;
-  --pgn-spacing-caret-vertical-align: .255em;
-  --pgn-spacing-caret-base: .255em;
-  --pgn-spacing-tooltip-margin: 0rem;
-  --pgn-spacing-tooltip-padding-x: .5rem;
-  --pgn-spacing-tooltip-padding-y: .5rem;
-  --pgn-spacing-toast-container-gutter-sm: .625rem;
-  --pgn-spacing-toast-container-gutter-lg: 1.25rem;
-  --pgn-spacing-toast-padding-y: .25rem;
-  --pgn-spacing-toast-padding-x: .75rem;
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
-  --pgn-spacing-sticky-offset: 0rem;
-  --pgn-spacing-stepper-header-step-list-margin: 0rem;
-  --pgn-spacing-stepper-header-step-list-padding-x: 0rem;
-  --pgn-spacing-stepper-header-step-list-padding-y: .25rem;
-  --pgn-spacing-stepper-header-step-padding: .25rem;
-  --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-stepper-header-padding-y: .75rem;
-  --pgn-spacing-vertical-align: .125em;
-  --pgn-spacing-selectable-box-box-space: .75rem;
-  --pgn-spacing-selectable-box-border-radius: .25rem;
-  --pgn-spacing-selectable-box-padding: 1rem;
-  --pgn-spacing-search-field-margin-button: .5rem;
-  --pgn-spacing-progress-bar-hint-annotation-gap: .5rem;
-  --pgn-spacing-popover-icon-margin-right: .5rem;
-  --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
-  --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
-  --pgn-spacing-popover-header-padding-x: 1rem;
-  --pgn-spacing-popover-header-padding-y: .5rem;
-  --pgn-spacing-pagination-padding-x-lg: 1.5rem;
-  --pgn-spacing-pagination-padding-x-sm: .6rem;
-  --pgn-spacing-pagination-padding-x-base: 1rem;
-  --pgn-spacing-pagination-padding-y-lg: .75rem;
-  --pgn-spacing-pagination-padding-y-sm: .8rem;
-  --pgn-spacing-pagination-padding-y-base: .625rem;
-  --pgn-spacing-navbar-toggler-padding-x: .75rem;
-  --pgn-spacing-navbar-toggler-padding-y: .25rem;
-  --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
-  --pgn-spacing-navbar-padding-x-nav-link: .5rem;
-  --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-nav-link-distance-to-border: 4px;
-  --pgn-spacing-nav-link-padding-x: 1rem;
-  --pgn-spacing-nav-link-padding-y: .5rem;
-  --pgn-spacing-modal-dialog-margin: 1.5rem;
-  --pgn-spacing-modal-header-padding-y: 1rem;
-  --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
-  --pgn-spacing-modal-footer-padding-y: 1rem;
-  --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
-  --pgn-spacing-modal-inner-padding-bottom: .7rem;
-  --pgn-spacing-modal-inner-padding-base: 1.5rem;
-  --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
-  --pgn-spacing-menu-item-icon-margin-left: .25em;
-  --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
-  --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
-  --pgn-spacing-image-thumbnail-padding: .25rem;
-  --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
-  --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
-  --pgn-spacing-form-control-select-icon-padding: .5625rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem;
-  --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
-  --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
-  --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
-  --pgn-spacing-form-control-select-indicator-padding: 1rem;
-  --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
-  --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
-  --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
-  --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
-  --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
-  --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
-  --pgn-spacing-form-control-spacer-x: 1rem;
-  --pgn-spacing-form-control-gutter: .5rem;
-  --pgn-spacing-form-group-margin-bottom: 1rem;
-  --pgn-spacing-form-check-position-axis: .375rem;
-  --pgn-spacing-form-check-inline-margin-x: .75rem;
-  --pgn-spacing-form-text-margin-top: .25rem;
-  --pgn-spacing-form-input-check-margin-y: .3rem;
-  --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
-  --pgn-spacing-form-input-check-margin-x-base: .25rem;
-  --pgn-spacing-form-input-check-gutter: 1.25rem;
-  --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
-  --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
-  --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
-  --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
-  --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
-  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-spacing-dropzone-border-base: 1px;
-  --pgn-spacing-dropzone-padding: 1.5rem;
-  --pgn-spacing-dropdown-close-container-top: .625rem;
-  --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
-  --pgn-spacing-dropdown-padding-y-item: .25rem;
-  --pgn-spacing-dropdown-padding-y-base: .5rem;
-  --pgn-spacing-dropdown-padding-x-item: 1rem;
-  --pgn-spacing-dropdown-padding-x-base: 0rem;
-  --pgn-spacing-dropdown-spacer: .125rem;
-  --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: .5rem .75rem;
-  --pgn-spacing-data-table-padding-small: .5rem;
-  --pgn-spacing-data-table-padding-y: .75rem;
-  --pgn-spacing-data-table-padding-x: .75rem;
-  --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem;
-  --pgn-spacing-collapsible-card-spacer-basic-x: .5rem;
-  --pgn-spacing-collapsible-card-spacer-basic-y: .5rem;
-  --pgn-spacing-collapsible-card-spacer-icon: 2.5rem;
-  --pgn-spacing-collapsible-card-spacer-left-body: .75rem;
-  --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
-  --pgn-spacing-collapsible-card-spacer-x-base: .5rem;
-  --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
-  --pgn-spacing-collapsible-card-spacer-y-base: .5rem;
-  --pgn-spacing-code-kbd-padding-x: .4rem;
-  --pgn-spacing-code-kbd-padding-y: .2rem;
-  --pgn-spacing-chip-carousel-container-padding-y: .313rem;
-  --pgn-spacing-chip-carousel-container-padding-x: .625rem;
-  --pgn-spacing-chip-carousel-controls-top-offset: .375rem;
-  --pgn-spacing-chip-outline-width: 3px;
-  --pgn-spacing-chip-outline-focus-distance-dark: .313rem;
-  --pgn-spacing-chip-outline-focus-distance-light: .313rem;
-  --pgn-spacing-chip-outline-selected-distance-dark: 3px;
-  --pgn-spacing-chip-outline-selected-distance-light: 3px;
-  --pgn-spacing-chip-padding-x: .5rem;
-  --pgn-spacing-chip-padding-y: 1px;
-  --pgn-spacing-chip-margin-icon: .25rem;
-  --pgn-spacing-chip-margin-base: .125rem;
-  --pgn-spacing-carousel-indicator-spacer: 3px;
-  --pgn-spacing-card-focus-border-offset: 5px;
-  --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem;
-  --pgn-spacing-card-logo-bottom-offset-base: 1rem;
-  --pgn-spacing-card-logo-left-offset-horizontal: .4375rem;
-  --pgn-spacing-card-logo-left-offset-base: 1.5rem;
-  --pgn-spacing-card-loading-skeleton-spacer: .313rem;
-  --pgn-spacing-card-footer-action-gap: .5rem;
-  --pgn-spacing-card-columns-gap: 1.25rem;
-  --pgn-spacing-card-columns-count: 3rem;
-  --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
-  --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
-  --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
-  --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
-  --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
-  --pgn-spacing-card-margin-group: 12px;
-  --pgn-spacing-card-spacer-y: .75rem;
-  --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
-  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
-  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
-  --pgn-spacing-btn-block-spacing-y: .5rem;
-  --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
-  --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
-  --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
-  --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
-  --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
-  --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-spacing-bubble-expandable-padding-x: .25rem;
-  --pgn-spacing-bubble-expandable-padding-y: 0rem;
-  --pgn-spacing-breadcrumb-margin-left: .5rem;
-  --pgn-spacing-badge-padding-y: .125rem;
-  --pgn-spacing-badge-padding-x-pill: .6em;
-  --pgn-spacing-badge-padding-x-base: .5rem;
-  --pgn-spacing-avatar-button-padding-left-lg: .25em;
-  --pgn-spacing-avatar-button-padding-left-sm: .25em;
-  --pgn-spacing-avatar-button-padding-left-base: .25em;
-  --pgn-spacing-annotation-arrow-side-margin: .25rem;
-  --pgn-spacing-annotation-padding: .5rem;
-  --pgn-spacing-alert-icon-space: .8rem;
-  --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
-  --pgn-spacing-alert-margin-bottom: 1rem;
-  --pgn-spacing-alert-padding-x: 1.5rem;
-  --pgn-spacing-alert-padding-y: 1.5rem;
-  --pgn-spacing-action-row-gap-y: .5rem;
-  --pgn-spacing-action-row-gap-x: .5rem;
-  --pgn-size-breakpoint-xxl: 1400px;
-  --pgn-size-breakpoint-xl: 1200px;
-  --pgn-size-breakpoint-lg: 992px;
-  --pgn-size-breakpoint-md: 768px;
-  --pgn-size-breakpoint-sm: 576px;
-  --pgn-size-breakpoint-xs: 0rem;
-  --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-list-group-border-width: var(--pgn-size-border-width);
-  --pgn-size-input-btn-focus-width: 1px;
-  --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
-  --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
-  --pgn-size-hr-border-width: var(--pgn-size-border-width);
-  --pgn-size-caret-width: .3em;
-  --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-tooltip-arrow-width: .8rem;
-  --pgn-size-tooltip-arrow-height: .4rem;
-  --pgn-size-tooltip-max-width: 200px;
-  --pgn-size-toast-border-radius: .25rem;
-  --pgn-size-toast-border-width: 1px;
-  --pgn-size-toast-max-width: 400px;
-  --pgn-size-tabs-notification-width: 1rem;
-  --pgn-size-tabs-notification-height: 1rem;
-  --pgn-size-stepper-step-bubble-error-shadow-width: 3px;
-  --pgn-size-stepper-step-width-min: 0rem;
-  --pgn-size-stepper-header-height-min: 5.13rem;
-  --pgn-size-stack-gap: 0rem;
-  --pgn-size-spinner-sm-border-width: .2em;
-  --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
-  --pgn-size-spinner-sm-width: 1rem;
-  --pgn-size-spinner-base-border-width: .25em;
-  --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
-  --pgn-size-spinner-base-width: 2rem;
-  --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --pgn-size-search-field-border-radius: 0rem;
-  --pgn-size-search-field-border-width-focus: .3125rem;
-  --pgn-size-search-field-border-width-base: .0625rem;
-  --pgn-size-progress-bar-threshold-circle: .5625rem;
-  --pgn-size-progress-bar-border-radius: 0rem;
-  --pgn-size-progress-bar-border-width: 1px;
-  --pgn-size-progress-bar-height-annotated: .3125rem;
-  --pgn-size-progress-bar-height-base: 1rem;
-  --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-product-tour-checkpoint-width-max: 480px;
-  --pgn-size-product-tour-checkpoint-width-arrow: 15px;
-  --pgn-size-product-tour-checkpoint-width-border: 8px;
-  --pgn-size-popover-arrow-height: .5rem;
-  --pgn-size-popover-arrow-width: 1rem;
-  --pgn-size-popover-icon-width: 1rem;
-  --pgn-size-popover-icon-height: 1rem;
-  --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
-  --pgn-size-popover-border-width: var(--pgn-size-border-width);
-  --pgn-size-popover-max-width: 480px;
-  --pgn-size-pagination-focus-outline: 0rem;
-  --pgn-size-pagination-toggle-border-sm: .25rem;
-  --pgn-size-pagination-toggle-border-base: .3125rem;
-  --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
-  --pgn-size-pagination-reduced-dropdown-max-height: 60vh;
-  --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-pagination-border-width: var(--pgn-size-border-width);
-  --pgn-size-pagination-secondary-height-sm: 2.25rem;
-  --pgn-size-pagination-secondary-height-base: 2.75rem;
-  --pgn-size-pagination-icon-height: 2.25rem;
-  --pgn-size-pagination-icon-width: 2.25rem;
-  --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
-  --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
-  --pgn-size-navbar-nav-scroll-max-height: 75vh;
-  --pgn-size-nav-tabs-border-radius: 0rem;
-  --pgn-size-nav-tabs-border-width: 2px;
-  --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
-  --pgn-size-nav-tabs-link-border-bottom-width: .188rem;
-  --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
-  --pgn-size-nav-pills-link-border-width: 1px;
-  --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
-  --pgn-size-modal-content-border-width: 0px;
-  --pgn-size-modal-sm: 400px;
-  --pgn-size-modal-md: 500px;
-  --pgn-size-modal-lg: 800px;
-  --pgn-size-modal-xl: 1140px;
-  --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
-  --pgn-size-menu-item-width-xs: 13.438rem;
-  --pgn-size-menu-item-width-base: 19rem;
-  --pgn-size-menu-item-height: 3rem;
-  --pgn-size-menu-base-max-height: 16.813rem;
-  --pgn-size-menu-base-border-radius: .25em;
-  --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
-  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
-  --pgn-size-icon-button-diameter-sm: 2.25rem;
-  --pgn-size-icon-button-diameter-md: 2.75rem;
-  --pgn-size-icon-lg: 1.75rem;
-  --pgn-size-icon-md: 1.5rem;
-  --pgn-size-icon-sm: 1.25rem;
-  --pgn-size-icon-xs: 1rem;
-  --pgn-size-icon-inline: .8em;
-  --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-border-radius-width: .125rem;
-  --pgn-size-form-border-radius-check-focus: .0625rem;
-  --pgn-size-form-autosuggest-border-width: .125rem;
-  --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
-  --pgn-size-form-autosuggest-spinner-width: 1.25rem;
-  --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
-  --pgn-size-form-autosuggest-icon-width: 2.4rem;
-  --pgn-size-form-grid-gutter-width: 0.625rem;
-  --pgn-size-form-control-border-radio-indicator-radius: 50%;
-  --pgn-size-form-control-border-checkbox-indicator-radius: 0rem;
-  --pgn-size-form-control-icon-width: 2rem;
-  --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
-  --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
-  --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
-  --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
-  --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
-  --pgn-size-form-control-range-thumb-border-radius: 1rem;
-  --pgn-size-form-control-range-thumb-border-base: 0rem;
-  --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
-  --pgn-size-form-control-range-thumb-width: 1rem;
-  --pgn-size-form-control-range-track-border-radius: 1rem;
-  --pgn-size-form-control-range-track-height: .5rem;
-  --pgn-size-form-control-range-track-width: 100%;
-  --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
-  --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
-  --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
-  --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
-  --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
-  --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
-  --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
-  --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
-  --pgn-size-form-control-indicator-border-width: 0.125rem;
-  --pgn-size-form-control-indicator-bg: 100%;
-  --pgn-size-form-control-indicator-base: 1.25rem;
-  --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
-  --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
-  --pgn-size-form-input-width-focus: 0.063rem;
-  --pgn-size-form-input-width-hover: 0.063rem;
-  --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
-  --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
-  --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
-  --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
-  --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
-  --pgn-size-dropdown-min-width: 18rem;
-  --pgn-size-data-table-layout-sidebar-width: 12rem;
-  --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
-  --pgn-size-data-table-dropdown-pagination-max-height: 60vh;
-  --pgn-size-data-table-border: 2px;
-  --pgn-size-container-max-width-xl: 1440px;
-  --pgn-size-container-max-width-lg: 1192px;
-  --pgn-size-container-max-width-md: 952px;
-  --pgn-size-container-max-width-sm: 708px;
-  --pgn-size-container-max-width-xs: 464px;
-  --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px);
-  --pgn-size-color-picker-sm: 2rem;
-  --pgn-size-code-pre-scrollable-max-height: 340px;
-  --pgn-size-chip-icon: 1.5rem;
-  --pgn-size-chip-border-radius: .375rem;
-  --pgn-size-carousel-caption-width: 70%;
-  --pgn-size-carousel-indicator-height-area-hit: 10px;
-  --pgn-size-carousel-indicator-height-base: 3px;
-  --pgn-size-carousel-indicator-width: 30px;
-  --pgn-size-carousel-control-width-icon: 20px;
-  --pgn-size-carousel-control-width-base: 15%;
-  --pgn-size-card-logo-height: 4.125rem;
-  --pgn-size-card-logo-width: 7.25rem;
-  --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-card-image-vertical-max-height: 140px;
-  --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
-  --pgn-size-card-image-horizontal-width-max: 240px;
-  --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
-  --pgn-size-card-focus-border-width: 2px;
-  --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
-  --pgn-size-card-border-radius-logo: .25rem;
-  --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-card-border-width: var(--pgn-size-border-width);
-  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
-  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
-  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
-  --pgn-size-btn-focus-width: 2px;
-  --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
-  --pgn-size-breadcrumb-border-width-focus: .0625rem;
-  --pgn-size-breadcrumb-border-axis-y-focus: .5rem;
-  --pgn-size-breadcrumb-border-axis-x-focus: .25rem;
-  --pgn-size-breadcrumb-border-radius-focus: .125rem;
-  --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
-  --pgn-size-badge-border-radius-pill: 10rem;
-  --pgn-size-badge-border-radius-base: .25rem;
-  --pgn-size-avatar-border-radius: 100%;
-  --pgn-size-avatar-border-base: 1px;
-  --pgn-size-avatar-huge: 18.75rem;
-  --pgn-size-avatar-xxl: 11.5rem;
-  --pgn-size-avatar-xl: 6rem;
-  --pgn-size-avatar-lg: 4rem;
-  --pgn-size-avatar-sm: 2.25rem;
-  --pgn-size-avatar-xs: 1.5rem;
-  --pgn-size-avatar-base: 3rem;
-  --pgn-size-annotation-border-radius: .25rem;
-  --pgn-size-annotation-max-width: 18.75rem;
-  --pgn-size-annotation-arrow-border-width: .5rem;
-  --pgn-size-alert-border-width: 0rem;
-  --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-rounded-pill: 50rem;
-  --pgn-size-border-radius-sm: .25rem;
-  --pgn-size-border-radius-lg: .425rem;
-  --pgn-size-border-radius-base: .375rem;
-  --pgn-size-border-width: 1px;
 }
diff --git a/styles/scss/core/_typography.scss b/styles/scss/core/_typography.scss
index 1bc648d691..03a479a002 100644
--- a/styles/scss/core/_typography.scss
+++ b/styles/scss/core/_typography.scss
@@ -1,11 +1,23 @@
 @import "~bootstrap/scss/type";
 
 @mixin mobile-type {
-  .display-1,
-  .display-2,
-  .display-3,
+  .display-1 {
+    font-size: $display1-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-2 {
+    font-size: $display2-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-3 {
+    font-size: $display3-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
   .display-4 {
-    font-size: $display-mobile-size;
+    font-size: $display4-mobile-size;
     line-height: $display-mobile-line-height;
   }
 
diff --git a/styles/scss/core/_utilities.scss b/styles/scss/core/_utilities.scss
index afdb2c671a..9fc1f30765 100644
--- a/styles/scss/core/_utilities.scss
+++ b/styles/scss/core/_utilities.scss
@@ -21,13 +21,17 @@
 $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 .x-small {
-  font-size: $x-small-font-size;
+  font-size: $x-small-font-size !important;
 }
 
 .micro {
-  font-size: $micro-font-size;
+  font-size: $micro-font-size !important;
   font-weight: normal;
-  line-height: $micro-line-height;
+  line-height: $micro-line-height !important;
+}
+
+.font-size-normal {
+  font-size: $font-size-base !important;
 }
 
 .mw-xs {
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
index 5e1f358f1a..e5723b6a73 100644
--- a/styles/scss/core/_variables.scss
+++ b/styles/scss/core/_variables.scss
@@ -703,19 +703,19 @@ $font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default;
 $font-weight-base: var(--pgn-typography-font-weight-base) !default;
 $line-height-base: var(--pgn-typography-line-height-base) !default;
 
-$h1-font-size: var(--pgn-typography-font-size-h1) !default;
-$h2-font-size: var(--pgn-typography-font-size-h2) !default;
-$h3-font-size: var(--pgn-typography-font-size-h3) !default;
-$h4-font-size: var(--pgn-typography-font-size-h4) !default;
-$h5-font-size: var(--pgn-typography-font-size-h5) !default;
-$h6-font-size: var(--pgn-typography-font-size-h6) !default;
-
-$h1-mobile-font-size: var(--pgn-typography-font-size-mobile-h1) !default;
-$h2-mobile-font-size: var(--pgn-typography-font-size-mobile-h2) !default;
-$h3-mobile-font-size: var(--pgn-typography-font-size-mobile-h3) !default;
-$h4-mobile-font-size: var(--pgn-typography-font-size-mobile-h4) !default;
-$h5-mobile-font-size: var(--pgn-typography-font-size-mobile-h5) !default;
-$h6-mobile-font-size: var(--pgn-typography-font-size-mobile-h6) !default;
+$h1-font-size: var(--pgn-typography-font-size-h1-base) !default;
+$h2-font-size: var(--pgn-typography-font-size-h2-base) !default;
+$h3-font-size: var(--pgn-typography-font-size-h3-base) !default;
+$h4-font-size: var(--pgn-typography-font-size-h4-base) !default;
+$h5-font-size: var(--pgn-typography-font-size-h5-base) !default;
+$h6-font-size: var(--pgn-typography-font-size-h6-base) !default;
+
+$h1-mobile-font-size: var(--pgn-typography-font-size-h1-mobile) !default;
+$h2-mobile-font-size: var(--pgn-typography-font-size-h2-mobile) !default;
+$h3-mobile-font-size: var(--pgn-typography-font-size-h3-mobile) !default;
+$h4-mobile-font-size: var(--pgn-typography-font-size-h4-mobile) !default;
+$h5-mobile-font-size: var(--pgn-typography-font-size-h5-mobile) !default;
+$h6-mobile-font-size: var(--pgn-typography-font-size-h6-mobile) !default;
 
 $headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default;
 $headings-font-family: var(--pgn-typography-headings-font-family) !default;
@@ -723,29 +723,34 @@ $headings-font-weight: var(--pgn-typography-headings-font-weight) !default;
 $headings-line-height: var(--pgn-typography-headings-line-height) !default;
 $headings-color: var(--pgn-color-headings-base) !default;
 
-$display1-size: var(--pgn-typography-display-1) !default;
-$display2-size: var(--pgn-typography-display-2) !default;
-$display3-size: var(--pgn-typography-display-3) !default;
-$display4-size: var(--pgn-typography-display-4) !default;
+$display1-size: var(--pgn-typography-font-size-display-1) !default;
+$display2-size: var(--pgn-typography-font-size-display-2) !default;
+$display3-size: var(--pgn-typography-font-size-display-3) !default;
+$display4-size: var(--pgn-typography-font-size-display-4) !default;
 
-$display-mobile-size: var(--pgn-typography-display-mobile) !default;
+$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; // deprecated in favor of $display1-mobile-size
+$display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
+$display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default;
+$display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default;
+$display4-mobile-size: var(--pgn-typography-font-size-display-mobile-4) !default;
 
-$display1-weight: var(--pgn-typography-display-weight-1) !default;
-$display2-weight: var(--pgn-typography-display-weight-2) !default;
-$display3-weight: var(--pgn-typography-display-weight-3) !default;
-$display4-weight: var(--pgn-typography-display-weight-4) !default;
 
-$display-line-height: var(--pgn-typography-display-line-height-base) !default;
-$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default;
+$display1-weight: var(--pgn-typography-font-weight-display-1) !default;
+$display2-weight: var(--pgn-typography-font-weight-display-2) !default;
+$display3-weight: var(--pgn-typography-font-weight-display-3) !default;
+$display4-weight: var(--pgn-typography-font-weight-display-4) !default;
 
-$lead-font-size: var(--pgn-typography-font-size-lead) !default;
+$display-line-height: var(--pgn-typography-line-height-display-base) !default;
+$display-mobile-line-height: var(--pgn-typography-line-height-display-mobile) !default;
+
+$lead-font-size: var(--pgn-typography-font-size-lg) !default;
 $lead-font-weight: var(--pgn-typography-font-weight-lead) !default;
 
-$small-font-size: var(--pgn-typography-font-size-small-base) !default;
-$x-small-font-size: var(--pgn-typography-font-size-small-x) !default;
+$small-font-size: var(--pgn-typography-font-size-sm) !default;
+$x-small-font-size: var(--pgn-typography-font-size-xs) !default;
 
-$micro-font-size: var(--pgn-typography-font-size-micro);
-$micro-line-height: var(--pgn-typography-line-height-micro);
+$micro-font-size: var(--pgn-typography-font-size-micro) !default;
+$micro-line-height: var(--pgn-typography-line-height-micro) !default;
 
 $text-muted: var(--pgn-color-text-muted) !default;
 
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
index 133b336cc8..aafa21a782 100644
--- a/tokens/src/core/components/Alert.json
+++ b/tokens/src/core/components/Alert.json
@@ -17,7 +17,7 @@
         "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
         "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
       },
-      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" }
+      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }
     }
   },
   "size": {
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
index 4a20f37204..62539f1e2f 100644
--- a/tokens/src/core/components/Annotation.json
+++ b/tokens/src/core/components/Annotation.json
@@ -11,7 +11,7 @@
   "typography": {
     "annotation": {
       "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}" },
-      "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}" }
+      "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "type": "number" }
     }
   },
   "size": {
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index bcfcc5bc6c..93a9a7366f 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -43,7 +43,7 @@
         "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }
       },
       "line-height": {
-        "$type": "dimension",
+        "$type": "number",
         "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" },
         "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
         "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index 52e9a46ddc..e6260ebae8 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -76,7 +76,7 @@
   "typography": {
     "footer": {
       "text": {
-        "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.small.x}" }
+        "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   }
diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
index f3927f9aeb..c3f78c9007 100644
--- a/tokens/src/core/components/Dropzone.json
+++ b/tokens/src/core/components/Dropzone.json
@@ -3,7 +3,7 @@
   "typography": {
     "dropzone": {
       "restriction-msg": {
-        "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.small.x}" }
+        "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   },
diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json
index da1a0e8e6a..dd4973969b 100644
--- a/tokens/src/core/components/Form/typography.json
+++ b/tokens/src/core/components/Form/typography.json
@@ -13,7 +13,7 @@
           "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" }
         },
         "line-height": {
-          "$type": "dimension",
+          "$type": "number",
           "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" },
           "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
           "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
@@ -31,10 +31,10 @@
             },
             "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
           },
-          "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" }
+          "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }
         },
         "file": {
-          "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" },
+          "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" },
           "font": {
             "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
             "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
@@ -44,13 +44,13 @@
       "feedback": {
         "$type": "dimension",
         "font": {
-          "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.small.base}" }
+          "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" }
         },
         "tooltip": {
           "font": {
             "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" }
           },
-          "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}" }
+          "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" }
         }
       }
     }
diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
index 2d28cec0c5..b300e4ac78 100644
--- a/tokens/src/core/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -5,7 +5,7 @@
       "font-size": {
         "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" }
       },
-      "line-height": { "source": "$pagination-line-height", "$value": "1.5rem" }
+      "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" }
     }
   },
   "spacing": {
diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json
index 2590069543..e3e33d5ddc 100644
--- a/tokens/src/core/components/Stepper.json
+++ b/tokens/src/core/components/Stepper.json
@@ -33,7 +33,7 @@
   },
   "typography": {
     "spacer": {
-      "line-height": { "source": "$stepper-header-line-height", "$value": "1px" }
+      "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" }
     }
   }
 }
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
index 40312e767b..c631e3d2d6 100644
--- a/tokens/src/core/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -5,7 +5,7 @@
         "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" },
         "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       },
-      "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "dimension" }
+      "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" }
     }
   },
   "spacing": {
diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
index f0fabce75c..0bdc756950 100644
--- a/tokens/src/core/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -12,7 +12,7 @@
           }
         },
         "line-height": {
-          "$type": "dimension",
+          "$type": "number",
           "base": { "source": "$input-btn-line-height", "$value": "1.3333" },
           "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" },
           "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" }
diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json
index 45ce22da9a..8608354cdc 100644
--- a/tokens/src/core/components/general/text.json
+++ b/tokens/src/core/components/general/text.json
@@ -9,7 +9,7 @@
   "typography": {
     "blockquote": {
       "small": {
-        "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.small.base}" }
+        "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" }
       },
       "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" }
     }
diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json
deleted file mode 100644
index 17eb942016..0000000000
--- a/tokens/src/core/global/display.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
-  "typography": {
-    "display": {
-      "1": {
-        "source": "$display1-size",
-        "$value": "3.75rem",
-        "$type": "dimension",
-        "$description": "Font size for heading of level 1."
-      },
-      "2": {
-        "source": "$display2-size",
-        "$value": "4.875rem",
-        "$type": "dimension",
-        "$description": "Font size for heading of level 2."
-      },
-      "3": {
-        "source": "$display3-size",
-        "$value": "5.625rem",
-        "$type": "dimension",
-        "$description": "Font size for heading of level 3."
-      },
-      "4": {
-        "source": "$display4-size",
-        "$value": "7.5rem",
-        "$type": "dimension",
-        "$description": "Font size for heading of level 4."
-      },
-      "line-height": {
-        "$type": "dimension",
-        "base": {
-          "source": "$display-line-height",
-          "$value": "1",
-          "$description": "Standard line height."
-        },
-        "mobile": {
-          "source": "$display-mobile-line-height",
-          "$value": "3.5rem",
-          "$description": "Mobile line height."
-        }
-      },
-      "mobile": {
-        "source": "$display-mobile-size",
-        "$value": "3.25rem",
-        "$type": "dimension",
-        "$description": "Font size for mobile devices."
-      },
-      "weight": {
-        "1": {
-          "source": "$display1-weight",
-          "$value": "{typography.font.weight.bold}",
-          "$description": "Font weight of level 1."
-        },
-        "2": {
-          "source": "$display2-weight",
-          "$value": "{typography.font.weight.bold}",
-          "$description": "Font weight of level 2."
-        },
-        "3": {
-          "source": "$display3-weight",
-          "$value": "{typography.font.weight.bold}",
-          "$description": "Font weight of level 3."
-        },
-        "4": {
-          "source": "$display4-weight",
-          "$value": "{typography.font.weight.bold}",
-          "$description": "Font weight of level 4."
-        },
-        "$type": "fontWeight"
-      }
-    },
-    "print-page-size": {
-      "source": "$print-page-size",
-      "$value": "a3",
-      "$type": "dimension"
-    }
-  }
-}
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index 20646617ed..022e875753 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -27,123 +27,145 @@
         }
       },
       "size": {
+        "$type": "dimension",
         "base": {
           "source": "$font-size-base",
           "$value": "1.125rem",
-          "$type": "dimension",
           "$description": "Base font size."
         },
         "lg": {
-          "source": "$font-size-lg",
-          "$value": "1.4063rem",
-          "$type": "dimension",
-          "$description": "Large font size."
+          "source": "$lead-font-size",
+          "$value": "{typography.font.size.base} * 1.25",
+          "$description": "Lead text font size."
         },
         "sm": {
-          "source": "$font-size-sm",
-          "$value": ".875rem",
-          "$type": "dimension",
+          "source": "$small-font-size",
+          "$value": "0.875rem",
           "$description": "Small font size."
         },
         "xs": {
-          "source": "$font-size-xs",
-          "$value": ".75rem",
+          "source": "$x-small-font-size",
+          "$value": "0.75rem",
+          "$description": "X-small font size."
+        },
+        "micro": {
+          "source": "$micro-font-size",
+          "$value": ".6875rem",
           "$type": "dimension",
-          "$description": "Extra-small font size."
+          "$description": "Micro utils text font size."
         },
-        "small": {
-          "$type": "percentage",
+        "h1": {
           "base": {
-            "source": "$small-font-size",
-            "$value": "87.5%",
-            "$description": "Small font size."
+            "source": "$h1-font-size",
+            "$value": "2.5rem",
+            "$description": "Base font size of heading level 1."
           },
-          "x": {
-            "source": "$x-small-font-size",
-            "$value": "75%",
-            "$description": "X-small font size."
-          }
-        },
-        "h1": {
-          "source": "$h1-font-size",
-          "$value": "2.5rem",
-          "$type": "dimension",
-          "$description": "Font size of heading level 1."
-        },
-        "h2": {
-          "source": "$h2-font-size",
-          "$value": "2rem",
-          "$type": "dimension",
-          "$description": "Font size of heading level 2."
-        },
-        "h3": {
-          "source": "$h3-font-size",
-          "$value": "1.375rem",
-          "$type": "dimension",
-          "$description": "Font size of heading level 3."
-        },
-        "h4": {
-          "source": "$h4-font-size",
-          "$value": "1.125rem",
-          "$type": "dimension",
-          "$description": "Font size of heading level 4."
-        },
-        "h5": {
-          "source": "$h5-font-size",
-          "$value": ".875rem",
-          "$type": "dimension",
-          "$description": "Font size of heading level 5."
-        },
-        "h6": {
-          "source": "$h6-font-size",
-          "$value": ".75rem",
-          "$type": "dimension",
-          "$description": "Font size of heading level 6."
-        },
-        "mobile": {
-          "$type": "dimension",
-          "h1": {
+          "mobile": {
             "source": "$h1-mobile-font-size",
             "$value": "2.25rem",
             "$description": "Mobile font size of heading level 1."
+          }
+        },
+        "h2": {
+          "base": {
+            "source": "$h2-font-size",
+            "$value": "2rem",
+            "$description": "Font size of heading level 2."
           },
-          "h2": {
+          "mobile": {
             "source": "$h2-mobile-font-size",
-            "$value": "{typography.font.size.h2}",
+            "$value": "{typography.font.size.h2.base}",
             "$description": "Mobile font size of heading level 2."
+          }
+        },
+        "h3": {
+          "base": {
+            "source": "$h3-font-size",
+            "$value": "1.375rem",
+            "$description": "Font size of heading level 3."
           },
-          "h3": {
+          "mobile": {
             "source": "$h3-mobile-font-size",
-            "$value": "{typography.font.size.h3}",
+            "$value": "{typography.font.size.h3.base}",
             "$description": "Mobile font size of heading level 3."
+          }
+        },
+        "h4": {
+          "base": {
+            "source": "$h4-font-size",
+            "$value": "1.125rem",
+            "$description": "Font size of heading level 4."
           },
-          "h4": {
+          "mobile": {
             "source": "$h4-mobile-font-size",
-            "$value": "{typography.font.size.h4}",
+            "$value": "{typography.font.size.h4.base}",
             "$description": "Mobile font size of heading level 4."
+          }
+        },
+        "h5": {
+          "base": {
+            "source": "$h5-font-size",
+            "$value": ".875rem",
+            "$description": "Font size of heading level 5."
           },
-          "h5": {
+          "mobile": {
             "source": "$h5-mobile-font-size",
-            "$value": "{typography.font.size.h5}",
+            "$value": "{typography.font.size.h5.base}",
             "$description": "Mobile font size of heading level 5."
+          }
+        },
+        "h6": {
+          "base": {
+            "source": "$h6-font-size",
+            "$value": ".75rem",
+            "$description": "Font size of heading level 6."
           },
-          "h6": {
+          "mobile": {
             "source": "$h6-mobile-font-size",
-            "$value": "{typography.font.size.h6}",
+            "$value": "{typography.font.size.h6.base}",
             "$description": "Mobile font size of heading level 6."
           }
         },
-        "lead": {
-          "source": "$lead-font-size",
-          "$value": "calc({typography.font.size.base} * 1.25)",
-          "$type": "dimension",
-          "$description": "Lead text font size."
-        },
-        "micro": {
-          "source": "$micro-font-size",
-          "$value": ".688rem",
-          "$type": "dimension",
-          "$description": "Micro utils text font size."
+        "display": {
+          "1": {
+            "source": "$display1-size",
+            "$value": "3.75rem",
+            "$description": "Font size for heading of level 1."
+          },
+          "2": {
+            "source": "$display2-size",
+            "$value": "4.875rem",
+            "$description": "Font size for heading of level 2."
+          },
+          "3": {
+            "source": "$display3-size",
+            "$value": "5.625rem",
+            "$description": "Font size for heading of level 3."
+          },
+          "4": {
+            "source": "$display4-size",
+            "$value": "7.5rem",
+            "$description": "Font size for heading of level 4."
+          },
+          "mobile": {
+            "1": {
+              "source": "$display-mobile-size",
+              "$value": "3.25rem",
+              "$description": "Mobile font size for heading of level 1."
+            },
+            "2": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 2."
+            },
+            "3": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 3."
+            },
+            "4": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 4."
+            }
+          }
         }
       },
       "weight": {
@@ -194,11 +216,33 @@
           "source": "$table-th-font-weight",
           "$value": "normal",
           "$description": "Table th font weight."
+        },
+        "display": {
+          "1": {
+            "source": "$display1-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 1."
+          },
+          "2": {
+            "source": "$display2-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 2."
+          },
+          "3": {
+            "source": "$display3-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 3."
+          },
+          "4": {
+            "source": "$display4-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 4."
+          }
         }
       }
     },
     "line-height": {
-      "$type": "dimension",
+      "$type": "number",
       "base": {
         "source": "$line-height-base",
         "$value": "1.5556",
@@ -218,7 +262,24 @@
         "source": "$micro-line-height",
         "$value": ".938rem",
         "$description": "Micro utils line height."
+      },
+      "display": {
+        "base": {
+          "source": "$display-line-height",
+          "$value": "1",
+          "$description": "Standard display line height."
+        },
+        "mobile": {
+          "source": "$display-mobile-line-height",
+          "$value": "3.5rem",
+          "$description": "Mobile display line height."
+        }
       }
+    },
+    "print-page-size": {
+      "source": "$print-page-size",
+      "$value": "a3",
+      "$type": "dimension"
     }
   }
 }
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index 1a25ff759a..ae559e6202 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -2,35 +2,81 @@
  * This module creates and exports custom StyleDictionary instance for Paragon.
  */
 const toml = require('js-toml');
+const chalk = require('chalk');
 const chroma = require('chroma-js');
 const { colorYiq, darken, lighten } = require('./sass-helpers');
 const cssUtilities = require('./css-utilities');
-const { composeBreakpointName, createCustomHeader } = require('./utils');
+const { composeBreakpointName } = require('./utils');
+
+/* eslint-disable import/no-unresolved */
+const getStyleDictionary = async () => (await import('style-dictionary')).default;
+const getStyleDictionaryUtils = async () => import('style-dictionary/utils');
+/* eslint-enable import/no-unresolved */
+
+/**
+ * @typedef {import('style-dictionary/types').DesignToken} DesignToken
+ */
+
+/**
+ * @typedef ModifyColorYiq
+ * @property {'color-yiq'} type - The type of modification.
+ * @property {number} [amount] - The amount of modification to apply.
+ * @property {string} [otherColor] - The other color to mix with.
+ * @property {number} [light] - The light color to use for color-yiq.
+ * @property {number} [dark] - The dark color to use for color-yiq.
+ * @property {number} [threshold] - The threshold to use for color-yiq.
+ */
+
+/**
+ * @typedef ModifyColorDarken
+ * @property {'darken'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ */
+
+/**
+ * @typedef ModifyColorLighten
+ * @property {'lighten'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ */
+
+/**
+ * @typedef ModifyColorMix
+ * @property {'mix'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ * @property {string} otherColor - The other color to mix with.
+ */
+
+/**
+ * @typedef ModifyColorAlpha
+ * @property {'alpha'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ */
+
+/**
+ * @typedef DesignTokenModify
+ * @type {ModifyColorYiq | ModifyColorDarken | ModifyColorLighten | ModifyColorMix | ModifyColorAlpha}
+ */
+
+/**
+ * @typedef {DesignToken & {
+ *   outputReferences?: boolean;
+ *   modify?: DesignTokenModify[];
+ * }} ParagonDesignToken
+ */
 
 /**
  * Transforms a color token based on various modifications.
  *
- * @param {Object} token - The token object containing color information and modifications.
- * @param {string} token.name - The name of the color token.
- * @param {string} token.$value - The initial color value of the token.
- * @param {Object} token.original - The original token object containing the original value.
- * @param {string} token.original.$value - The original color value before any modifications.
- * @param {Array} [token.modify=[]] - An array of modification objects to apply to the color.
- * @param {string} token.modify.type - The type of modification to apply (e.g., 'mix', 'darken', 'lighten').
- * @param {number} token.modify.amount - The amount by which to modify the color (e.g., percentage or value).
- * @param {string} [token.modify.otherColor] - The other color to mix with, if applicable.
- * @param {string} [token.modify.light] - The light color for YIQ modification.
- * @param {string} [token.modify.dark] - The dark color for YIQ modification.
- * @param {number} [token.modify.threshold] - The threshold for YIQ modification.
- * @param {Object} theme - The theme object containing additional information for color transformations.
+ * @param {ParagonDesignToken} token - The token object containing color information and modifications.
+ * @param {string} themeVariant - The themeVariant object containing additional information for color transformations.
  * @returns {string} - The transformed color value in hexadecimal format, including alpha if applicable.
  */
-const colorTransform = (token, theme) => {
+const colorTransform = (token, themeVariant) => {
   const {
     name: tokenName,
     $value,
     original,
-    modify = [],
+    modify,
   } = token;
   const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none'];
 
@@ -40,7 +86,7 @@ const colorTransform = (token, theme) => {
 
   let color = chroma($value);
 
-  if (modify && modify.length > 0) {
+  if (modify?.length > 0) {
     modify.forEach((modifier) => {
       const { type, amount, otherColor } = modifier;
       switch (type) {
@@ -55,7 +101,7 @@ const colorTransform = (token, theme) => {
             light,
             dark,
             threshold,
-            theme,
+            themeVariant,
           });
           break;
         }
@@ -65,8 +111,16 @@ const colorTransform = (token, theme) => {
         case 'lighten':
           color = lighten(color, amount);
           break;
-        default:
+        default: {
+          if (!color[type]) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              chalk.keyword('orange').bold(`[Paragon] Warning: Invalid color modification type "${type}" for ${tokenName}.`),
+            );
+            return;
+          }
           color = color[type](amount);
+        }
       }
     });
   }
@@ -80,45 +134,44 @@ const colorTransform = (token, theme) => {
  * 2. 'theme' to output only theme's variables (e.g, 'light' or 'dark'), if theme is not provided - only
  * core tokens are built.
  */
-const createCustomCSSVariables = async ({
-  formatterArgs,
-  themeVariant,
-}, StyleDictionary) => {
-  // eslint-disable-next-line import/no-unresolved
-  const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils'));
+const createCustomCSSVariables = async ({ formatterArgs }) => {
+  const { fileHeader, formattedVariables } = await getStyleDictionaryUtils();
   const { dictionary, options, file } = formatterArgs;
-  const outputTokens = themeVariant
-    ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant))
-    : dictionary.allTokens;
-
-  const variables = outputTokens.sort(sortByReference(dictionary)).map(token => {
-    let { $value } = token;
-
-    const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences;
-
-    if (usesReferences(token.original.$value) && outputReferencesForToken) {
-      const refs = getReferences(token.original.$value, dictionary.tokens);
-      refs.forEach(ref => {
-        $value = $value.replace(ref.$value, `var(--${ref.name})`);
-      });
-    }
-
-    return `  --${token.name}: ${$value};`;
-  }).join('\n');
-
-  return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`;
+  const { outputReferences, formatting } = options;
+  const variables = formattedVariables({
+    format: 'css',
+    dictionary,
+    outputReferences: (token) => {
+      // Formatter options configured to never output references
+      if (!outputReferences) {
+        return false;
+      }
+      // Token has modifications (e.g., mix, darken, lighten); the computed
+      // value should be output instead of the reference.
+      if (token.modify) {
+        return false;
+      }
+      // Formatter options configured to show output references, but handle when individual tokens might opt-out.
+      return token.outputReferences ?? true;
+    },
+    usesDtcg: true,
+  });
+  const header = await fileHeader({ file, formatting });
+  return `${header}:root {\n${variables}\n}\n`;
 };
 
+/**
+ * @typedef {type import("style-dictionary/types").StyleDictionary} StyleDictionary
+ */
+
 /**
  * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers.
  *
- * @returns {Promise<Object>} - A promise that resolves to the configured Style Dictionary instance.
+ * @returns {Promise<StyleDictionary>} - A promise that resolves to the configured Style Dictionary instance.
  */
-const initializeStyleDictionary = async () => {
-  // eslint-disable-next-line import/no-unresolved
-  const StyleDictionary = (await import('style-dictionary')).default;
-  // eslint-disable-next-line import/no-unresolved
-  const { getReferences } = (await import('style-dictionary/utils'));
+const initializeStyleDictionary = async ({ themes }) => {
+  const StyleDictionary = await getStyleDictionary();
+  const { getReferences } = await getStyleDictionaryUtils();
 
   /**
    * Transformer that applies SASS color functions to tokens.
@@ -127,7 +180,7 @@ const initializeStyleDictionary = async () => {
     name: 'color/sass-color-functions',
     transitive: true,
     type: 'value',
-    filter: (token) => token.attributes.category === 'color' || token.$value?.toString().startsWith('#'),
+    filter: (token) => token.attributes?.category === 'color' || token.$value.toString().startsWith('#'),
     transform: (token) => colorTransform(token),
   });
 
@@ -151,7 +204,7 @@ const initializeStyleDictionary = async () => {
    */
   StyleDictionary.registerFormat({
     name: 'css/custom-variables',
-    format: formatterArgs => createCustomCSSVariables({ formatterArgs }, StyleDictionary),
+    format: formatterArgs => createCustomCSSVariables({ formatterArgs }),
   });
 
   /**
@@ -163,7 +216,9 @@ const initializeStyleDictionary = async () => {
    */
   StyleDictionary.registerFormat({
     name: 'css/utility-classes',
-    format: async ({ dictionary, file }) => {
+    format: async ({ dictionary, file, options = {} }) => {
+      const { formatting } = options;
+      const { fileHeader } = await getStyleDictionaryUtils();
       const { utilities } = dictionary.tokens;
       if (!utilities) {
         return '';
@@ -189,8 +244,8 @@ const initializeStyleDictionary = async () => {
           }
         }
       });
-
-      return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${utilityClasses}`;
+      const header = await fileHeader({ file, formatting });
+      return `${header}${utilityClasses}`;
     },
   });
 
@@ -201,7 +256,9 @@ const initializeStyleDictionary = async () => {
    */
   StyleDictionary.registerFormat({
     name: 'css/custom-media-breakpoints',
-    format: ({ dictionary, file }) => {
+    format: async ({ dictionary, file, options = {} }) => {
+      const { fileHeader } = await getStyleDictionaryUtils();
+      const { formatting } = options;
       const { breakpoint } = dictionary.tokens.size;
 
       let customMediaVariables = '';
@@ -216,26 +273,8 @@ const initializeStyleDictionary = async () => {
             += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`;
         }
       }
-
-      return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${customMediaVariables}`;
-    },
-  });
-
-  /**
-   * Custom file header for custom and built-in formatters.
-   */
-  StyleDictionary.registerFileHeader({
-    name: 'customFileHeader',
-    fileHeader: () => {
-      const currentDate = new Date().toUTCString();
-      return [
-        '/*',
-        ' * IMPORTANT: This file is the result of assembling design tokens.',
-        ' * Do not edit directly.',
-        ` * Generated on ${currentDate}`,
-        ' */',
-        '',
-      ];
+      const header = await fileHeader({ file, formatting });
+      return `${header}${customMediaVariables}`;
     },
   });
 
@@ -245,7 +284,23 @@ const initializeStyleDictionary = async () => {
    */
   StyleDictionary.registerFilter({
     name: 'isSource',
-    filter: token => token.isSource === true,
+    filter: token => token.isSource,
+  });
+
+  themes.forEach((themeVariant) => {
+    const capitalizedThemeVariant = `${themeVariant.charAt(0).toUpperCase()}${themeVariant.slice(1)}`;
+    const themeVariantFilter = `isThemeVariant${capitalizedThemeVariant}`;
+    const themeVariantFilterSourceOnly = `${themeVariantFilter}SourceOnly`;
+
+    StyleDictionary.registerFilter({
+      name: themeVariantFilter,
+      filter: token => token.filePath.includes(themeVariant),
+    });
+
+    StyleDictionary.registerFilter({
+      name: themeVariantFilterSourceOnly,
+      filter: token => token.isSource && token.filePath.includes(themeVariant),
+    });
   });
 
   /**
@@ -264,4 +319,5 @@ module.exports = {
   initializeStyleDictionary,
   createCustomCSSVariables,
   colorTransform,
+  getStyleDictionaryUtils,
 };
diff --git a/tokens/utils.js b/tokens/utils.js
index d3c230b87d..5fb09c77ea 100644
--- a/tokens/utils.js
+++ b/tokens/utils.js
@@ -195,11 +195,11 @@ async function transformInPath(location, variablesMap, transformType = 'definiti
  * @param {Object} options - The options for creating the `index.css` file.
  * @param {string} [options.buildDir=path.resolve(__dirname, '../styles/css')]
  * - The base directory where the CSS files are located.
- * @param {boolean} options.isTheme - A flag indicating whether the directory is for theme files.
+ * @param {boolean} options.isThemeVariant - A flag indicating whether the directory is for theme files.
  * @param {string} options.themeVariant - The specific theme variant to be used (e.g., 'dark', 'light').
  */
-function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isTheme, themeVariant }) {
-  const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`;
+function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isThemeVariant, themeVariant }) {
+  const directoryPath = isThemeVariant ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`;
 
   fs.readdir(directoryPath, (errDir, files) => {
     if (errDir) {
@@ -211,7 +211,7 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'
     const outputCssFiles = files.filter(file => file !== 'index.css');
     // When creating themes, there are typically two files: one for utility classes and one for variables.
     // It's organized them to allow variables be reading first.
-    if (isTheme) { outputCssFiles.reverse(); }
+    if (isThemeVariant) { outputCssFiles.reverse(); }
 
     const exportStatements = outputCssFiles.map((file) => `@import "${file}";`);
 
@@ -237,22 +237,10 @@ function composeBreakpointName(breakpointName, format) {
   return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`;
 }
 
-/**
- * Generates a custom file header using Style Dictionary hooks.
- *
- * @param {Object} StyleDictionary - The Style Dictionary instance being used.
- * @param {Object} file - The file object containing metadata about the file being generated.
- * @returns {string[]} - An array of strings representing the lines of the file header.
- */
-function createCustomHeader(StyleDictionary, file) {
-  return StyleDictionary.hooks.fileHeaders.customFileHeader({ file });
-}
-
 module.exports = {
   createIndexCssFile,
   getFilesWithExtension,
   getSCSStoCSSMap,
   transformInPath,
   composeBreakpointName,
-  createCustomHeader,
 };
diff --git a/www/src/components/ComponentsList.tsx b/www/src/components/ComponentsList.tsx
index f0a20f0b8e..113394990d 100644
--- a/www/src/components/ComponentsList.tsx
+++ b/www/src/components/ComponentsList.tsx
@@ -41,9 +41,9 @@ function ComponentsList() {
   return (
     <Container className="py-3 bg-light-200 border-top border-light-300">
       <Container size="xl" className="py-5">
-        <div className="pgn-doc__menu-all-components pt-5">
+        <div className="pgn-doc__menu-all-components">
           <h3 className="mb-4">All components (A-Z)</h3>
-          <ul className="pgn-doc__menu-component-list list-unstyled small mb-4">
+          <ul className="pgn-doc__menu-component-list list-unstyled small">
             {all.map((node: IComponentNavItem) => <ComponentNavItem key={node.id} {...node} />)}
           </ul>
         </div>
diff --git a/www/src/components/MeasuredItem.tsx b/www/src/components/MeasuredItem.tsx
index 646cafcc54..77e7ab3078 100644
--- a/www/src/components/MeasuredItem.tsx
+++ b/www/src/components/MeasuredItem.tsx
@@ -41,8 +41,6 @@ function MeasuredItem({
         }, {});
         setMeasurements(measurementsItems);
       };
-      // Needs a moment to finish switching theme and re-render children to DOM first.
-      setMeasurements(initialMeasurements);
       const timeout = setTimeout(measure, 1000);
       return () => clearTimeout(timeout);
     },
@@ -51,9 +49,9 @@ function MeasuredItem({
 
   return (
     <>
-      {renderBefore ? renderBefore(measurements) : null}
+      {renderBefore?.(measurements)}
       {React.cloneElement(children as React.ReactElement, { ref: itemRef })}
-      {renderAfter ? renderAfter(measurements) : null}
+      {renderAfter?.(measurements)}
     </>
   );
 }
diff --git a/www/src/components/TableCells.tsx b/www/src/components/TableCells.tsx
index 2dd00c84a2..339aefb06b 100644
--- a/www/src/components/TableCells.tsx
+++ b/www/src/components/TableCells.tsx
@@ -6,6 +6,18 @@ export type CodeCellType = {
   value: string | number | undefined,
 };
 
+export type ClassNameRowType = {
+  className: string | undefined,
+  text: string,
+  hasClass?: boolean,
+};
+
+export type ClassNameCellType = {
+  row: {
+    original: ClassNameRowType,
+  },
+} & CodeCellType;
+
 export type DataTableRowType = {
   row: {
     original: {
@@ -17,13 +29,17 @@ export type DataTableRowType = {
   },
 };
 
-export function ClassNameCell({ value }: CodeCellType) {
+export function ClassNameCell({ row, value }: ClassNameCellType) {
+  if (row.original.hasClass === false) {
+    return null;
+  }
+
   if (!value) {
     return null;
   }
 
   return (
-    <code className="fs-16">
+    <code className="font-size-normal">
       .{value}
     </code>
   );
@@ -31,7 +47,7 @@ export function ClassNameCell({ value }: CodeCellType) {
 
 export function TextCell({ value }: CodeCellType) {
   return (
-    <p className="m-0 fs-16">
+    <p className="m-0 font-size-normal">
       {value}
     </p>
   );
@@ -39,7 +55,7 @@ export function TextCell({ value }: CodeCellType) {
 
 export function CodeCell({ value }: CodeCellType) {
   return (
-    <code className="fs-16">
+    <code className="font-size-normal">
       {value}
     </code>
   );
@@ -69,7 +85,7 @@ export function MobileMeasuredCell({ row } : DataTableRowType) {
 
 export function StyleCell({ row } : DataTableRowType) {
   return (
-    <p className={`fs-16 ${row.original.className}`}>
+    <p className={`font-size-normal ${row.original.className}`}>
       {row.original.text}
     </p>
   );
diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss
index bfff2bae46..99f6d3dfc8 100644
--- a/www/src/components/_CodeBlock.scss
+++ b/www/src/components/_CodeBlock.scss
@@ -1,10 +1,11 @@
 .pgn-doc__code-block {
   margin: var(--pgn-spacing-spacer-base) 0 2rem;
-  background-color: var(--pgn-color-light-200);
-  border: solid 2px var(--pgn-color-light-300);
-  border-radius: var(--pgn-size-border-radius-base);
 
   .pgn-doc__code-block-preview {
+    background-color: var(--pgn-color-light-200);
+    border: solid 2px var(--pgn-color-light-300);
+    border-bottom: 0;
+    border-radius: var(--pgn-size-border-radius-base) var(--pgn-size-border-radius-base) 0 0;
     padding: var(--pgn-spacing-spacer-base);
   }
 
diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
index 94d3e937cd..decd92b57e 100644
--- a/www/src/components/_doc-elements.scss
+++ b/www/src/components/_doc-elements.scss
@@ -327,6 +327,18 @@
 
 .color-palette {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
-  grid-row-gap: 2rem;
+  grid-gap: 2rem;
+  grid-template-columns: repeat(2, 1fr); // Default to 2 columns
+}
+
+@media (--pgn-size-breakpoint-min-width-md) {
+  .color-palette {
+    grid-template-columns: repeat(3, 1fr);  // 3 columns for medium+ screens
+  }
+}
+
+@media (--pgn-size-breakpoint-min-width-lg) {
+  .color-palette {
+    grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens
+  }
 }
diff --git a/www/src/components/header/Navbar.tsx b/www/src/components/header/Navbar.tsx
index ffef619923..dd7f188ec7 100644
--- a/www/src/components/header/Navbar.tsx
+++ b/www/src/components/header/Navbar.tsx
@@ -35,7 +35,7 @@ export default function Navbar({
   return (
     <Container as="header" className="py-3 bg-dark text-white sticky-top">
       <Row className="align-items-center text-center text-sm-left">
-        <Col className="pgn-doc__header-button--menu mb-2 mb-sm-0 col-4" sm={5}>
+        <Col className="pgn-doc__header-button--menu mb-2 mb-sm-0">
           {showMinimizedTitle && (
             <Button
               ref={setTarget}
@@ -48,10 +48,10 @@ export default function Navbar({
             </Button>
           )}
         </Col>
-        <Col className="mb-2 mb-sm-0 col-4" sm={showMinimizedTitle ? 2 : 3}>
+        <Col className="mb-2 mb-sm-0 text-center" sm={showMinimizedTitle ? 3 : 4}>
           <SiteTitle isFullVersion={!showMinimizedTitle} title={siteTitle} />
         </Col>
-        <Col className="small mb-2 mb-sm-0 col-4" sm={5} xl={showMinimizedTitle ? 5 : 4}>
+        <Col className="small mb-2 mb-sm-0">
           {showSettingsIcon && (
             <Nav className="pgn-doc__header-settings-and-search">
               <Nav.Item>
diff --git a/www/src/components/header/SiteTitle.tsx b/www/src/components/header/SiteTitle.tsx
index bfe5165019..1d3d3c6749 100644
--- a/www/src/components/header/SiteTitle.tsx
+++ b/www/src/components/header/SiteTitle.tsx
@@ -15,7 +15,7 @@ export default function SiteTitle({ title, isFullVersion, className } : SiteTitl
   return (
     <Link
       to="/"
-      className={classNames('d-block text-decoration-none', className)}
+      className={classNames('d-inline-block text-decoration-none', className)}
     >
       <div className="pgn-doc__header-title">
         <span
diff --git a/www/src/components/typography-page/Body.tsx b/www/src/components/typography-page/Body.tsx
index 2b2c62be8f..a0c34fc52a 100644
--- a/www/src/components/typography-page/Body.tsx
+++ b/www/src/components/typography-page/Body.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { DataTable } from '~paragon-react';
 
-import { DesktopMeasuredCell, ClassNameCell } from '../TableCells';
+import { DesktopMeasuredCell, ClassNameCell, ClassNameRowType } from '../TableCells';
 
-const bodyClassesAndDescriptions = [
+const bodyClassesAndDescriptions: ClassNameRowType[] = [
   { className: 'lead', text: 'Large Body' },
-  { className: '', text: 'Body' },
+  { className: 'font-size-normal', text: 'Body', hasClass: false },
   { className: 'small', text: 'Small Body' },
   { className: 'x-small', text: 'Extra Small Body' },
   { className: 'micro', text: 'Micro Body' },
@@ -17,7 +17,7 @@ export default function Body() {
       <h2 className="mb-2">Body</h2>
       <div className="mb-4">
         <DataTable
-          itemCount={5}
+          itemCount={bodyClassesAndDescriptions.length}
           data={bodyClassesAndDescriptions}
           columns={[
             {
diff --git a/www/src/components/typography-page/Display.tsx b/www/src/components/typography-page/Display.tsx
index 9fc3a6bfe1..5762a98ab6 100644
--- a/www/src/components/typography-page/Display.tsx
+++ b/www/src/components/typography-page/Display.tsx
@@ -12,7 +12,7 @@ export default function Display() {
       <h2 className="mb-2">Display</h2>
       <div className="mb-4">
         <DataTable
-          itemCount={4}
+          itemCount={displaySizes.length}
           data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}
           columns={[
             {
diff --git a/www/src/components/typography-page/Headings.tsx b/www/src/components/typography-page/Headings.tsx
index 4b2e11b94c..f3eb494e9b 100644
--- a/www/src/components/typography-page/Headings.tsx
+++ b/www/src/components/typography-page/Headings.tsx
@@ -7,13 +7,21 @@ import { MobileMeasuredCell, ClassNameCell, DesktopMeasuredCell } from '../Table
 const headingSizes = [1, 2, 3, 4, 5, 6];
 
 export default function Headings() {
+  const headingSizesTableData = headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }));
+  const tableData = [
+    ...headingSizesTableData,
+    {
+      text: 'Heading Label',
+      className: 'heading-label',
+    },
+  ];
   return (
     <>
       <h2 className="mb-2">Headings</h2>
       <div className="mb-4">
         <DataTable
-          itemCount={6}
-          data={headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }))}
+          itemCount={tableData.length}
+          data={tableData}
           columns={[
             {
               Header: 'Desktop',
diff --git a/www/src/components/typography-page/measuredTypeProps.tsx b/www/src/components/typography-page/measuredTypeProps.tsx
index 82e5075cd7..38a9c9caec 100644
--- a/www/src/components/typography-page/measuredTypeProps.tsx
+++ b/www/src/components/typography-page/measuredTypeProps.tsx
@@ -13,9 +13,12 @@ const weightLabels: Record<string, string> = {
 const measuredTypeProps = {
   properties: ['font-size', 'line-height', 'font-family', 'font-weight'],
   renderAfter: (measurements: { [x: string]: string; }) => {
-    const fontFamily = measurements['font-family']
-      ? measurements['font-family'].split(',')[0]
-      : null;
+    if (!measurements || Object.keys(measurements).length === 0) {
+      return (
+        <p className="m-0 text-muted">&nbsp;</p>
+      );
+    }
+    const fontFamily = measurements['font-family']?.split(',')[0];
     const weight = weightLabels[measurements['font-weight']];
     // only one significant digit if needed
     const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10;
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index 52b423e899..5084d56f67 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -9,27 +9,52 @@ import { SettingsContext } from '../../context/SettingsContext';
 import { CodeCell } from '../../components/TableCells';
 
 const utilityClasses = {
-  bg: (color: string, level: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
+  bg: (color: string, level?: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
   border: (color: string, level: number) => (level ? `border-${color}-${level}` : `border-${color}`),
   text: (color: string, level: number) => (level ? `text-${color}-${level}` : `text-${color}`),
 };
 
-export interface IColors {
+type UnusedLevels = number[];
+
+interface ColorVariant {
+  name: string,
+  unusedLevels?: UnusedLevels,
+  hasLevels?: boolean,
+}
+
+export interface IColorsBase {
   themeName: string,
-  color: string,
-  unusedLevels: number[],
 }
 
+export interface IColorsWithUnusedLevels extends IColorsBase {
+  unusedLevels?: UnusedLevels,
+  variants?: never,
+}
+
+export interface IColorsWithVariants extends IColorsBase {
+  variants: ColorVariant[],
+  unusedLevels?: never,
+}
+
+export type IColors = IColorsWithUnusedLevels | IColorsWithVariants;
+
 const colors: IColors[] = [
-  { themeName: 'gray', color: 'gray', unusedLevels: [] },
-  { themeName: 'primary', color: 'blue', unusedLevels: [] },
-  { themeName: 'brand', color: 'blue', unusedLevels: [] },
-  { themeName: 'light', color: 'light', unusedLevels: [] },
-  { themeName: 'dark', color: 'dark', unusedLevels: [] },
-  { themeName: 'success', color: 'green', unusedLevels: [] },
-  { themeName: 'info', color: 'teal', unusedLevels: [] },
-  { themeName: 'danger', color: 'red', unusedLevels: [] },
-  { themeName: 'warning', color: 'yellow', unusedLevels: [] },
+  { themeName: 'gray' },
+  { themeName: 'primary' },
+  { themeName: 'brand' },
+  { themeName: 'light' },
+  { themeName: 'dark' },
+  { themeName: 'success' },
+  { themeName: 'info' },
+  { themeName: 'danger' },
+  { themeName: 'warning' },
+  {
+    themeName: 'accent',
+    variants: [
+      { name: 'a', hasLevels: false },
+      { name: 'b', hasLevels: false },
+    ],
+  },
 ];
 
 const levels = [100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -61,21 +86,20 @@ export interface ISwatch {
 function Swatch({
   name, colorClassName, isUnused, styles,
 }: ISwatch) {
-  const computedValue = styles?.getPropertyValue(name);
+  const computedValue = styles?.getPropertyValue(`--pgn-color-${name}`);
+
+  if (isUnused) {
+    return null;
+  }
 
   return (
     <div className="d-flex align-items-center mb-2">
-      <div
-        className={classNames('p-3 mr-2 rounded', colorClassName, {
-          'unused-level': isUnused,
-        })}
-      />
+      <div className={classNames('p-3 mr-2 rounded', colorClassName)} />
       <div style={{ lineHeight: 1 }} className="small">
-        <code className="mb-0 d-block text-lowercase text-dark-700">
-          {`var(${name})`}
+        <code className="d-block text-lowercase text-dark">
+          {name}
         </code>
-
-        <code style={{ fontSize: '65%' }} className="text-muted">
+        <code className="text-muted micro">
           {computedValue}
         </code>
       </div>
@@ -93,20 +117,70 @@ Swatch.defaultProps = {
   isUnused: false,
 };
 
-const renderColorRamp = (themeName: string, unusedLevels: number[], styles: CSSStyleDeclarationType) => (
-  <div
-    key={`${themeName}`}
-  >
+export interface IRenderColorRampBase {
+  themeName: string;
+  styles: CSSStyleDeclarationType;
+}
+
+export interface IRenderColorRampWithUnusedLevels extends IRenderColorRampBase {
+  unusedLevels?: UnusedLevels;
+  variants?: never;
+}
+
+export interface IRenderColorRampWithVariants extends IRenderColorRampBase {
+  variants: ColorVariant[];
+  unusedLevels?: never;
+}
+
+export type IRenderColorRamp = IRenderColorRampWithUnusedLevels | IRenderColorRampWithVariants;
+
+const renderColorRamp = ({
+  themeName,
+  unusedLevels = [],
+  variants = [],
+  styles,
+}: IRenderColorRamp) => (
+  <div key={`${themeName}`}>
     <p className="h5">{themeName}</p>
-    {levels.map(level => (
-      <Swatch
-        key={`${themeName}-${level}`}
-        name={`--pgn-color-${themeName}-${level}`}
-        colorClassName={utilityClasses.bg(themeName, level)}
-        isUnused={unusedLevels.includes(level)}
-        styles={styles}
-      />
-    ))}
+    {variants.length > 0
+      ? variants.map(({
+        name,
+        unusedLevels: variantUnusedLevels = [],
+        hasLevels = true,
+      }) => {
+        if (hasLevels) {
+          return (
+            <div key={`${themeName}-${name}`}>
+              {levels.map(level => (
+                <Swatch
+                  key={`${themeName}-${name}-${level}`}
+                  name={`${name}-${level}`}
+                  colorClassName={utilityClasses.bg(`${themeName}-${name}`, level)}
+                  isUnused={variantUnusedLevels.includes(level)}
+                  styles={styles}
+                />
+              ))}
+            </div>
+          );
+        }
+        return (
+          <Swatch
+            key={`${themeName}-${name}`}
+            name={`${themeName}-${name}`}
+            colorClassName={utilityClasses.bg(`${themeName}-${name}`)}
+            styles={styles}
+          />
+        );
+      })
+      : levels.map(level => (
+        <Swatch
+          key={`${themeName}-${level}`}
+          name={`${themeName}-${level}`}
+          colorClassName={utilityClasses.bg(themeName, level)}
+          isUnused={unusedLevels.includes(level)}
+          styles={styles}
+        />
+      ))}
   </div>
 );
 
@@ -144,18 +218,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
       <Container size={settings.containerWidth} className="py-5">
         <h1>Colors</h1>
         <div className="color-palette mb-3">
-          {colors
-            .slice(0, 3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
-          {colors
-            .slice(3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
-          <div>
-            <p className="h5">accents</p>
-
-            <Swatch name="--pgn-color-accent-a" colorClassName="bg-accent-a" styles={styles} />
-            <Swatch name="--pgn-color-accent-b" colorClassName="bg-accent-b" styles={styles} />
-          </div>
+          {colors.map((colorArgs) => renderColorRamp({ ...colorArgs, styles }))}
         </div>
 
         <h3>CSS Color Usage</h3>
@@ -283,7 +346,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
         <div className="d-flex">
           {[500, 700, 900].map(level => (
             <div key={level} style={{ flexBasis: '33%' }}>
-              {colors.map(({ themeName, unusedLevels }) => {
+              {colors.map(({ themeName, unusedLevels = [] }) => {
                 if (unusedLevels.includes(level)) { return null; }
                 return (
                   <code
diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss
index 11f132a15b..6f411506f5 100644
--- a/www/src/scss/base.scss
+++ b/www/src/scss/base.scss
@@ -27,7 +27,3 @@ body {
 .container-fluid {
   max-width: none;
 }
-
-.fs-16 {
-  font-size: 16px;
-}
diff --git a/www/src/scss/edxorg-theme.scss b/www/src/scss/edxorg-theme.scss
index 2d9186b421..8a621a45ab 100644
--- a/www/src/scss/edxorg-theme.scss
+++ b/www/src/scss/edxorg-theme.scss
@@ -1,3 +1,4 @@
-@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
-@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
+@import "~paragon-style/scss/core/core";
 @import "base";
+@import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/light.min.css");
diff --git a/www/src/scss/openedx-theme.scss b/www/src/scss/openedx-theme.scss
index 2ab84d006f..2ae63d6d3c 100644
--- a/www/src/scss/openedx-theme.scss
+++ b/www/src/scss/openedx-theme.scss
@@ -1,7 +1,4 @@
-@import "~@openedx/brand-openedx/paragon/fonts";
-@import "~@openedx/brand-openedx/paragon/variables";
 @import "~paragon-style/scss/core/core";
 @import "~paragon-style/css/themes/light/variables";
 @import "~paragon-style/css/themes/light/utility-classes";
-@import "~@openedx/brand-openedx/paragon/overrides";
 @import "base";