diff --git a/package-lock.json b/package-lock.json
index 061be7baa40..e211ecf6ab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,6 +66,7 @@
         "jest": "27.4.5",
         "jest-axe": "7.0.1",
         "jest-cli": "27.4.5",
+        "json-to-ts": "1.7.0",
         "lerna": "7.1.5",
         "lint-staged": "13.2.3",
         "markdownlint-cli": "0.34.0",
@@ -16630,6 +16631,26 @@
       "integrity": "sha512-Twf7I2v4/1tLoIXMT8HlqaBSS5H2wQTs2wx3MNYCI8K1R1/clXyCazrcVCPm/FuO9cyV8+leEaZOWD5C253NDg==",
       "dev": true
     },
+    "node_modules/es7-shim": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/es7-shim/-/es7-shim-6.0.0.tgz",
+      "integrity": "sha512-aiQ/QyJBVJbabtsSediM1S4qI+P3p8F5J5YR5o/bH003BCnnclzxK9pi5Qd2Hg01ktAtZCaQBdejHrkOBGwf5Q==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.0.2",
+        "object.entries": "^1.0.3",
+        "object.getownpropertydescriptors": "^2.0.2",
+        "object.values": "^1.0.3",
+        "string-at": "^1.0.1",
+        "string.prototype.padend": "^3.0.0",
+        "string.prototype.padstart": "^3.0.0",
+        "string.prototype.trimleft": "^2.0.0",
+        "string.prototype.trimright": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -25451,6 +25472,23 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
+    "node_modules/json-to-ts": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/json-to-ts/-/json-to-ts-1.7.0.tgz",
+      "integrity": "sha512-uVhcw4SLnf9ucMwFpom/G1/IT+lnoILOyHbFE6xqxvw67oCvHl6iDZzmjyn2lPCRPsAOMSQgG/ZxvbCPySMi1Q==",
+      "dev": true,
+      "dependencies": {
+        "es7-shim": "^6.0.0",
+        "hash.js": "^1.0.3",
+        "pluralize": "^3.1.0"
+      }
+    },
+    "node_modules/json-to-ts/node_modules/pluralize": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-3.1.0.tgz",
+      "integrity": "sha512-2wcybwjwXOzGI1rlxWtlcs0/nSYK0OzNPqsg35TKxJFQlGhFu3cZ1x7EHS4r4bubQlhzyF4YxxlJqQnIhkUQCw==",
+      "dev": true
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -35034,6 +35072,23 @@
         "node": ">=0.6.19"
       }
     },
+    "node_modules/string-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/string-at/-/string-at-1.1.0.tgz",
+      "integrity": "sha512-jCpPowWKBn0NFdvtmK2qxK40Ol4jPcgCt8qYnKpPx6B5eDwHMDhRvq9MCsDEgsOTNtbXY6beAMHMRT2qPJXllA==",
+      "deprecated": "The original `String.prototype.at` proposal has been replaced by a new one; please use v1 or later of `string.prototype.at` instead",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -35178,6 +35233,40 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/string.prototype.trimleft": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.3.tgz",
+      "integrity": "sha512-699Ibssmj/awVzvdNk4g83/Iu8U9vDohzmA/ly2BrQWGhamuY4Tlvs5XKmKliDt3ky6SKbE1bzPhASKCFlx9Sg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "string.prototype.trimstart": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimright": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.3.tgz",
+      "integrity": "sha512-hoOq56oRFnnfDuXNy2lGHiwT77MehHv9d0zGfRZ8QdC+4zjrkFB9vd5i/zYTd/ymFBd4YxtbdgHt3U6ksGeuBw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "string.prototype.trimend": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/string.prototype.trimstart": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
@@ -53484,6 +53573,23 @@
       "integrity": "sha512-Twf7I2v4/1tLoIXMT8HlqaBSS5H2wQTs2wx3MNYCI8K1R1/clXyCazrcVCPm/FuO9cyV8+leEaZOWD5C253NDg==",
       "dev": true
     },
+    "es7-shim": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/es7-shim/-/es7-shim-6.0.0.tgz",
+      "integrity": "sha512-aiQ/QyJBVJbabtsSediM1S4qI+P3p8F5J5YR5o/bH003BCnnclzxK9pi5Qd2Hg01ktAtZCaQBdejHrkOBGwf5Q==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.0.2",
+        "object.entries": "^1.0.3",
+        "object.getownpropertydescriptors": "^2.0.2",
+        "object.values": "^1.0.3",
+        "string-at": "^1.0.1",
+        "string.prototype.padend": "^3.0.0",
+        "string.prototype.padstart": "^3.0.0",
+        "string.prototype.trimleft": "^2.0.0",
+        "string.prototype.trimright": "^2.0.0"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -60157,6 +60263,25 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "dev": true
     },
+    "json-to-ts": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/json-to-ts/-/json-to-ts-1.7.0.tgz",
+      "integrity": "sha512-uVhcw4SLnf9ucMwFpom/G1/IT+lnoILOyHbFE6xqxvw67oCvHl6iDZzmjyn2lPCRPsAOMSQgG/ZxvbCPySMi1Q==",
+      "dev": true,
+      "requires": {
+        "es7-shim": "^6.0.0",
+        "hash.js": "^1.0.3",
+        "pluralize": "^3.1.0"
+      },
+      "dependencies": {
+        "pluralize": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-3.1.0.tgz",
+          "integrity": "sha512-2wcybwjwXOzGI1rlxWtlcs0/nSYK0OzNPqsg35TKxJFQlGhFu3cZ1x7EHS4r4bubQlhzyF4YxxlJqQnIhkUQCw==",
+          "dev": true
+        }
+      }
+    },
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -67587,6 +67712,16 @@
       "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
       "dev": true
     },
+    "string-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/string-at/-/string-at-1.1.0.tgz",
+      "integrity": "sha512-jCpPowWKBn0NFdvtmK2qxK40Ol4jPcgCt8qYnKpPx6B5eDwHMDhRvq9MCsDEgsOTNtbXY6beAMHMRT2qPJXllA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      }
+    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -67695,6 +67830,28 @@
         "es-abstract": "^1.20.4"
       }
     },
+    "string.prototype.trimleft": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.3.tgz",
+      "integrity": "sha512-699Ibssmj/awVzvdNk4g83/Iu8U9vDohzmA/ly2BrQWGhamuY4Tlvs5XKmKliDt3ky6SKbE1bzPhASKCFlx9Sg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "string.prototype.trimstart": "^1.0.3"
+      }
+    },
+    "string.prototype.trimright": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.3.tgz",
+      "integrity": "sha512-hoOq56oRFnnfDuXNy2lGHiwT77MehHv9d0zGfRZ8QdC+4zjrkFB9vd5i/zYTd/ymFBd4YxtbdgHt3U6ksGeuBw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "string.prototype.trimend": "^1.0.3"
+      }
+    },
     "string.prototype.trimstart": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
diff --git a/package.json b/package.json
index 12118fa0ffe..077ca0e846f 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "jest-axe": "7.0.1",
     "jest-cli": "27.4.5",
     "jest": "27.4.5",
+    "json-to-ts": "1.7.0",
     "lerna": "7.1.5",
     "lint-staged": "13.2.3",
     "markdownlint-cli": "0.34.0",
diff --git a/packages/calcite-design-tokens/package.json b/packages/calcite-design-tokens/package.json
index b9cb909a31d..dc28801ac42 100644
--- a/packages/calcite-design-tokens/package.json
+++ b/packages/calcite-design-tokens/package.json
@@ -12,17 +12,21 @@
   "type": "module",
   "exports": {
     "./css": "./dist/css/calcite-headless.css",
-    "./css/brand/dark": "./dist/css/brand-dark.css",
-    "./css/brand/light": "./dist/css/brand-light.css",
     "./css/calcite/dark": "./dist/css/calcite-dark.css",
     "./css/calcite/light": "./dist/css/calcite-light.css",
     "./css/headless": "./dist/css/calcite-headless.css",
     "./scss": "./dist/scss/calcite-headless.scss",
-    "./scss/brand/dark": "./dist/scss/brand-dark.scss",
-    "./scss/brand/light": "./dist/scss/brand-light.scss",
     "./scss/calcite/dark": "./dist/scss/calcite-dark.scss",
     "./scss/calcite/light": "./dist/scss/calcite-light.scss",
-    "./scss/headless": "./dist/scss/calcite-headless.scss"
+    "./scss/headless": "./dist/scss/calcite-headless.scss",
+    "./js": "./dist/js/calcite-headless.js",
+    "./js/calcite/dark": "./dist/js/calcite-dark.js",
+    "./js/calcite/light": "./dist/js/calcite-light.js",
+    "./js/headless": "./dist/js/calcite-headless.js",
+    "./es6": "./dist/es6/calcite-headless.js",
+    "./es6/calcite/dark": "./dist/es6/calcite-dark.js",
+    "./es6/calcite/light": "./dist/es6/calcite-light.js",
+    "./es6/headless": "./dist/es6/calcite-headless.js"
   },
   "repository": {
     "type": "git",
diff --git a/packages/calcite-design-tokens/support/token-transformer/format/javascript.ts b/packages/calcite-design-tokens/support/token-transformer/format/javascript.ts
new file mode 100644
index 00000000000..b7f715d40fa
--- /dev/null
+++ b/packages/calcite-design-tokens/support/token-transformer/format/javascript.ts
@@ -0,0 +1,22 @@
+import StyleDictionary, { Dictionary, File } from "style-dictionary";
+import { default as JsonToTS } from "json-to-ts";
+
+type FormatOptions = { dictionary: Dictionary; file: File };
+
+export function formatJs({ dictionary, file }: FormatOptions): string {
+  return (
+    StyleDictionary.formatHelpers.fileHeader({ file }) +
+    "export default" +
+    JSON.stringify(dictionary.tokens, null, 2) +
+    ";\n"
+  );
+}
+
+export function formatTs({ dictionary, file }: FormatOptions): string {
+  return (
+    StyleDictionary.formatHelpers.fileHeader({ file }) +
+    "declare const root: RootObject\n" +
+    "export default root\n" +
+    JsonToTS(dictionary.properties).join("\n")
+  );
+}
diff --git a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts
index f2e152513fd..c68480cfac3 100644
--- a/packages/calcite-design-tokens/support/token-transformer/sd-run.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/sd-run.ts
@@ -8,6 +8,7 @@ import { nameCamelCase } from "./transform/nameCamelCase.js";
 import { nameKebabCase } from "./transform/nameKebabCase.js";
 import { parseName } from "./utils/parseName.js";
 import { Theme } from "./getThemes.js";
+import { formatJs, formatTs } from "./format/javascript.js";
 
 /**
  * Style Dictionary runner configuration overrides.
@@ -49,6 +50,16 @@ export const run = async (
     formatter: formatSCSS,
   });
 
+  StyleDictionary.registerFormat({
+    name: "calcite/js-module",
+    formatter: formatJs,
+  });
+
+  StyleDictionary.registerFormat({
+    name: "calcite/ts-module",
+    formatter: formatTs,
+  });
+
   // Registering Style Dictionary transformers https://amzn.github.io/style-dictionary/#/transforms?id=defining-custom-transforms
   StyleDictionary.registerTransform({
     name: "name/calcite/camel",
@@ -73,6 +84,39 @@ export const run = async (
     source,
     include,
     platforms: {
+      js: {
+        buildPath: `${buildPath}/js/`,
+        files: [
+          {
+            destination: `${fileName}.js`,
+            format: "calcite/js-module",
+            filter: "filterSource",
+          },
+          {
+            destination: `${fileName}.d.ts`,
+            format: "calcite/ts-module",
+            filter: "filterSource",
+          },
+        ],
+      },
+      es6: {
+        transformGroup: "js",
+        buildPath: `${buildPath}/es6/`,
+        files: [
+          {
+            format: "javascript/es6",
+            destination: `${fileName}.js`,
+            filter: "filterSource",
+            options: { ...options, outputReferences: true },
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: `${fileName}.d.ts`,
+            filter: "filterSource",
+            options: { ...options, outputReferences: true },
+          },
+        ],
+      },
       css: {
         prefix: "calcite",
         transforms: [