diff --git a/.theo/formats/stories.mdx.js b/.theo/formats/stories.mdx.js
index d731ce0f5..9c0010ab8 100644
--- a/.theo/formats/stories.mdx.js
+++ b/.theo/formats/stories.mdx.js
@@ -1,4 +1,5 @@
 const groupBy = require('lodash/groupBy');
+const camelCase = require('lodash/camelCase');
 const kebabCase = require('lodash/kebabCase');
 const startCase = require('lodash/startCase');
 const { basename, extname } = require('path');
@@ -129,6 +130,10 @@ function mdxStoriesFormat(result) {
   const slug = basename(filename, extname(filename));
   const title = startCase(slug);
   const props = result.get('props').toJS();
+  const firstProp = props[0];
+  firstProp.sassName = `$${kebabCase(firstProp.name)}`;
+  firstProp.jsName = camelCase(firstProp.name);
+  firstProp.jsonValue = JSON.stringify(firstProp.value);
   const categories = groupBy(props, 'category');
   const mdxCategories = Object.keys(categories).map((category) =>
     categoryToMdx(category, categories[category])
@@ -141,8 +146,12 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 # ${title}
 
 \`\`\`scss
-@use 'path/to/${filename}';
-$example: ${slug}.$${kebabCase(props[0].name)}; // => ${props[0].value}
+@use "../../design-tokens/${filename}";
+$example: ${slug}.${firstProp.sassName}; // => ${firstProp.value}
+\`\`\`
+\`\`\`javascript
+import { ${firstProp.jsName} } from '../../design-tokens/generated/${slug}.js';
+console.log(${firstProp.jsName}); // => ${firstProp.jsonValue}
 \`\`\`
 
 ${mdxCategories.join('\n\n')}`.trim();
diff --git a/gulpfile.js/index.js b/gulpfile.js/index.js
index 2808f473f..44f2fb8a6 100644
--- a/gulpfile.js/index.js
+++ b/gulpfile.js/index.js
@@ -6,7 +6,7 @@
 
 module.exports = {
   watchPreprocess: require('./tasks/watch-preprocess'),
-  theoToMDX: require('./tasks/theo-to-mdx'),
+  theo: require('./tasks/theo'),
   svgToTwig: require('./tasks/svg-to-twig'),
   buildSass: require('./tasks/build-sass'),
   buildJS: require('./tasks/build-scripts').buildJS,
diff --git a/gulpfile.js/tasks/theo-to-mdx.js b/gulpfile.js/tasks/theo-to-mdx.js
deleted file mode 100644
index 10c084c5e..000000000
--- a/gulpfile.js/tasks/theo-to-mdx.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const { src, dest } = require('gulp');
-const gulpTheo = require('gulp-theo');
-// Requiring this file applies our Theo customizations to gulp-theo
-require('../../.theo');
-const prettier = require('gulp-prettier');
-
-// Gulp task
-function theoToMdx() {
-  // Ignore any files with leading underscores
-  return src(['src/design-tokens/*.yml', '!src/design-tokens/_*'])
-    .pipe(
-      gulpTheo({
-        transform: {
-          type: 'web',
-        },
-        format: {
-          type: 'stories.mdx',
-        },
-      })
-    )
-    .pipe(prettier())
-    .pipe(dest('src/design-tokens/generated'));
-}
-
-module.exports = theoToMdx;
diff --git a/gulpfile.js/tasks/theo.js b/gulpfile.js/tasks/theo.js
new file mode 100644
index 000000000..8abb15435
--- /dev/null
+++ b/gulpfile.js/tasks/theo.js
@@ -0,0 +1,48 @@
+const { src, dest, parallel } = require('gulp');
+const gulpTheo = require('gulp-theo');
+// Requiring this file applies our Theo customizations to gulp-theo
+require('../../.theo');
+const prettier = require('gulp-prettier');
+const rename = require('gulp-rename');
+
+// Ignore any files with leading underscores
+const srcGlob = ['src/design-tokens/*.yml', '!src/design-tokens/_*'];
+const destGlob = 'src/design-tokens/generated';
+const transform = {
+  type: 'web',
+};
+
+function theoToJs() {
+  return src(srcGlob)
+    .pipe(
+      gulpTheo({
+        transform,
+        format: {
+          type: 'module.js',
+        },
+      })
+    )
+    .pipe(prettier())
+    .pipe(
+      rename((path) => {
+        path.basename = path.basename.replace('.module', '');
+      })
+    )
+    .pipe(dest(destGlob));
+}
+
+function theoToMdx() {
+  return src(srcGlob)
+    .pipe(
+      gulpTheo({
+        transform,
+        format: {
+          type: 'stories.mdx',
+        },
+      })
+    )
+    .pipe(prettier())
+    .pipe(dest(destGlob));
+}
+
+module.exports = parallel(theoToJs, theoToMdx);
diff --git a/gulpfile.js/tasks/watch-preprocess.js b/gulpfile.js/tasks/watch-preprocess.js
index 737bc5882..449160cbf 100644
--- a/gulpfile.js/tasks/watch-preprocess.js
+++ b/gulpfile.js/tasks/watch-preprocess.js
@@ -1,8 +1,8 @@
 const { watch } = require('gulp');
 const svgToTwig = require('./svg-to-twig');
-const theoToMdx = require('./theo-to-mdx');
+const theo = require('./theo');
 
 module.exports = function () {
   watch('src/assets/**/*.svg', svgToTwig);
-  watch('src/design-tokens/**/*.yml', theoToMdx);
+  watch('src/design-tokens/**/*.yml', theo);
 };
diff --git a/package.json b/package.json
index 8173e848a..8e7521aec 100644
--- a/package.json
+++ b/package.json
@@ -118,12 +118,12 @@
     "build-storybook": "npm run preprocess && build-storybook -s static",
     "preprocess": "run-p preprocess:*",
     "preprocess:svg-to-twig": "gulp svgToTwig",
-    "preprocess:theo-to-mdx": "gulp theoToMDX",
+    "preprocess:theo": "gulp theo",
     "watch-preprocess": "gulp watchPreprocess",
     "build:js": "gulp buildJS",
     "build:types": "npm run type && gulp buildTypes",
     "build:sass": "gulp buildSass",
-    "build": "npm run clean && run-p build:*",
+    "build": "run-s clean preprocess && run-p build:*",
     "clean": "eliminate dist",
     "type": "tsc",
     "type:watch": "tsc --watch",
diff --git a/tsconfig.json b/tsconfig.json
index d737cb268..65826e9c4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,9 @@
     "skipLibCheck": true
   },
   "include": ["src", "cypress"],
-  "exclude": ["src/prototypes", "src/vendor/prism/demo/samples"]
+  "exclude": [
+    "src/prototypes",
+    "src/vendor/prism/demo/samples",
+    "src/design-tokens/generated"
+  ]
 }