From af6284a97f82c824d05a11cf8b34bb6c0ae1a924 Mon Sep 17 00:00:00 2001
From: Une Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Fri, 14 Jun 2024 13:14:57 +0200
Subject: [PATCH] feat: Add the @digir/create-tokens CLI tool

---
 packages/create-tokens/.eslintrc.cjs          |   7 +
 packages/create-tokens/index.js               |   5 +
 packages/create-tokens/package.json           |  33 +
 .../create-tokens/src/bin/create-tokens.ts    |  21 +
 .../create-tokens/src/createTokensPackage.ts  | 335 +++++++++++
 .../create-tokens/src/generateMetadataJson.ts |  27 +
 .../create-tokens/src/generateThemesJson.ts   |  69 +++
 .../create-tokens/src/nextStepsMarkdown.ts    | 101 ++++
 packages/create-tokens/src/utils.ts           |  19 +
 .../template/default-files/.gitignore         | 130 ++++
 .../template/default-files/README.md          |  10 +
 .../default-files/design-tokens/README.md     |   3 +
 .../design-tokens/primitives/globals.json     | 197 ++++++
 .../primitives/typography/default.json        |  86 +++
 .../design-tokens/semantic/color.json         | 562 ++++++++++++++++++
 .../design-tokens/semantic/style.json         | 543 +++++++++++++++++
 .../template/prettier.config.mjs              |   9 +
 .../primitives/colors/contrast/global.json    | 376 ++++++++++++
 .../colors/contrast/theme-template.json       | 314 ++++++++++
 .../primitives/colors/dark/global.json        | 376 ++++++++++++
 .../colors/dark/theme-template.json           | 314 ++++++++++
 .../primitives/colors/light/global.json       | 376 ++++++++++++
 .../colors/light/theme-template.json          | 314 ++++++++++
 .../design-tokens/themes/theme-template.json  | 314 ++++++++++
 .../template/template-files/package.json      |  23 +
 packages/create-tokens/tsconfig.json          |   8 +
 yarn.lock                                     |  27 +
 27 files changed, 4599 insertions(+)
 create mode 100644 packages/create-tokens/.eslintrc.cjs
 create mode 100755 packages/create-tokens/index.js
 create mode 100644 packages/create-tokens/package.json
 create mode 100644 packages/create-tokens/src/bin/create-tokens.ts
 create mode 100644 packages/create-tokens/src/createTokensPackage.ts
 create mode 100644 packages/create-tokens/src/generateMetadataJson.ts
 create mode 100644 packages/create-tokens/src/generateThemesJson.ts
 create mode 100644 packages/create-tokens/src/nextStepsMarkdown.ts
 create mode 100644 packages/create-tokens/src/utils.ts
 create mode 100644 packages/create-tokens/template/default-files/.gitignore
 create mode 100644 packages/create-tokens/template/default-files/README.md
 create mode 100644 packages/create-tokens/template/default-files/design-tokens/README.md
 create mode 100644 packages/create-tokens/template/default-files/design-tokens/primitives/globals.json
 create mode 100644 packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json
 create mode 100644 packages/create-tokens/template/default-files/design-tokens/semantic/color.json
 create mode 100644 packages/create-tokens/template/default-files/design-tokens/semantic/style.json
 create mode 100644 packages/create-tokens/template/prettier.config.mjs
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json
 create mode 100644 packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json
 create mode 100644 packages/create-tokens/template/template-files/package.json
 create mode 100644 packages/create-tokens/tsconfig.json

diff --git a/packages/create-tokens/.eslintrc.cjs b/packages/create-tokens/.eslintrc.cjs
new file mode 100644
index 0000000000..17b2c863b7
--- /dev/null
+++ b/packages/create-tokens/.eslintrc.cjs
@@ -0,0 +1,7 @@
+module.exports = {
+  root: false,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+};
diff --git a/packages/create-tokens/index.js b/packages/create-tokens/index.js
new file mode 100755
index 0000000000..741b50aa1e
--- /dev/null
+++ b/packages/create-tokens/index.js
@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { require } from 'tsx/cjs/api';
+
+require('./src/bin/create-tokens.ts', import.meta.url);
diff --git a/packages/create-tokens/package.json b/packages/create-tokens/package.json
new file mode 100644
index 0000000000..cb309828db
--- /dev/null
+++ b/packages/create-tokens/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@digdir/create-tokens",
+  "version": "0.1.0-alpha.7",
+  "description": "CLI tool to create an initial token structure for Designsystemet",
+  "author": "Designsystemet team",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digdir/designsystemet.git"
+  },
+  "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/create-tokens",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.js",
+  "bin": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "@commander-js/extra-typings": "^12.0.1",
+    "change-case": "^5.3.0",
+    "commander": "^12.0.0",
+    "kleur": "^3.0.3",
+    "prompts": "^2.4.0",
+    "tsx": "^4.11.2"
+  },
+  "devDependencies": {
+    "@tokens-studio/types": "^0.4.0",
+    "@types/prompts": "^2.4.9"
+  }
+}
diff --git a/packages/create-tokens/src/bin/create-tokens.ts b/packages/create-tokens/src/bin/create-tokens.ts
new file mode 100644
index 0000000000..1719b62d03
--- /dev/null
+++ b/packages/create-tokens/src/bin/create-tokens.ts
@@ -0,0 +1,21 @@
+import { Argument, program } from '@commander-js/extra-typings';
+
+import { createTokensPackage } from '../createTokensPackage';
+
+program
+  .name('npm create @digdir/tokens')
+  .description(
+    'CLI tool to create an initial token structure for Designsystemet',
+  );
+
+program
+  .addArgument(
+    new Argument('<targetDir>', 'Target directory for the generated code'),
+  )
+  .action(async (targetDir) => {
+    await createTokensPackage(targetDir);
+  });
+
+program.showHelpAfterError();
+
+void program.parseAsync(process.argv);
diff --git a/packages/create-tokens/src/createTokensPackage.ts b/packages/create-tokens/src/createTokensPackage.ts
new file mode 100644
index 0000000000..6a2ee00d3d
--- /dev/null
+++ b/packages/create-tokens/src/createTokensPackage.ts
@@ -0,0 +1,335 @@
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+import { bold, dim, red, green } from 'kleur';
+import type { Choice, Options } from 'prompts';
+import prompts from 'prompts';
+
+import packageJsonTemplate from '../template/template-files/package.json';
+
+import generateMetadata from './generateMetadataJson.js';
+import generateThemes from './generateThemesJson.js';
+import {
+  toGeneratedCssFileName,
+  normalizeTokenSetName,
+  toValidPackageName,
+} from './utils.js';
+import { nextStepsMarkdown } from './nextStepsMarkdown.js';
+
+const DEFAULT_FILES_PATH = path.join(__dirname, '../template/default-files');
+
+const TOKEN_TEMPLATE_FILES_PATH = path.join(
+  __dirname,
+  '../template/template-files/design-tokens',
+);
+
+const MODES = ['Light', 'Dark', 'Contrast'] as const;
+export type Mode = (typeof MODES)[number];
+
+interface DirectoryAnswers {
+  directoryAction?: 'clean' | 'ignore' | 'exit';
+}
+interface PackageAnswers {
+  packageName: string;
+}
+
+interface TokensAnswers {
+  tokensDir: string;
+  themeCount: number;
+  modes: Mode[];
+}
+
+interface ThemeAnswers {
+  name: string;
+}
+
+const promptOptions: Options = {
+  onCancel: () => {
+    console.log(`${red('✖')} Operation cancelled`);
+    process.exit();
+  },
+};
+
+export async function createTokensPackage(targetDir: string) {
+  const TARGET_DIR = path.resolve(process.cwd(), targetDir);
+  const initialPackageName = toValidPackageName(path.basename(TARGET_DIR));
+
+  // Check target directory contents
+  let isTargetDirEmpty = true;
+  try {
+    const files = await fs.readdir(TARGET_DIR);
+    isTargetDirEmpty = files.length === 0;
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      // Directory doesn't exist, so we're good
+    } else {
+      console.error(err);
+      console.log('Continuing...');
+    }
+  }
+
+  const { directoryAction } = (await prompts(
+    {
+      name: 'directoryAction',
+      type: isTargetDirEmpty ? null : 'select',
+      message: 'Target directory is not empty. How should we proceed?',
+      choices: [
+        {
+          title: 'Clean',
+          value: 'clean',
+          description: 'Empty the directory and continue',
+        },
+        {
+          title: 'Ignore',
+          value: 'ignore',
+          description:
+            'Keep directory as is. Files may be overwritten with new output.',
+        },
+        {
+          title: 'Exit',
+          value: 'exit',
+          description: 'Exit without doing anything.',
+        },
+      ],
+    },
+    promptOptions,
+  )) as DirectoryAnswers;
+
+  if (directoryAction === 'exit') {
+    process.exit();
+  }
+
+  const { packageName } = (await prompts(
+    [
+      {
+        name: 'packageName',
+        type: 'text',
+        message: 'Enter a package name (for package.json)',
+        initial: initialPackageName,
+      },
+    ],
+    promptOptions,
+  )) as PackageAnswers;
+
+  const { modes, themeCount, tokensDir } = (await prompts(
+    [
+      {
+        name: 'themeCount',
+        type: 'number',
+        message: 'How many themes do you want?',
+        initial: 1,
+        min: 1,
+      },
+      {
+        name: 'modes',
+        type: 'multiselect',
+        choices: MODES.filter((x) => x !== 'Light').map((mode) => ({
+          title: mode,
+          value: mode,
+        })),
+        message: 'Which color modes do you want?',
+        instructions: `
+  Instructions:
+    ↑/↓: Highlight option
+    ←/→/[space]: Toggle selection
+    a: Toggle all
+    enter/return: Complete answer
+${green('◉')}   Light ${dim('- This is the default mode, and cannot be disabled')}`,
+        onState: (obj: { value: Choice[] }) => {
+          obj.value.unshift({ title: 'Light', value: 'Light', selected: true });
+        },
+      },
+      {
+        name: 'tokensDir',
+        type: 'text',
+        initial: 'design-tokens',
+        message: `Enter the desired path for the design tokens`,
+      },
+    ],
+    promptOptions,
+  )) as TokensAnswers;
+
+  const themes: string[] = [];
+  const TOKENS_TARGET_DIR = path.join(TARGET_DIR, tokensDir);
+
+  for (let n = 1; n <= themeCount; n++) {
+    const theme: ThemeAnswers = await prompts(
+      [
+        {
+          name: 'name',
+          type: 'text',
+          message: `Enter the name of the ${ordinal(n)} theme`,
+          validate: (value: string) => isValidThemeName(themes, value),
+        },
+      ],
+      promptOptions,
+    );
+    themes.push(theme.name);
+  }
+
+  const { defaultTheme = themes[0] } = (await prompts(
+    {
+      name: 'defaultTheme',
+      type: themeCount === 1 ? null : 'select',
+      message: 'Select the default theme to export in package.json',
+      choices: themes.map((theme) => ({ title: theme, value: theme })),
+      initial: 0,
+    },
+    promptOptions,
+  )) as { defaultTheme?: string };
+  console.log(
+    `
+Will now create the following:
+  ${bold('Package name')}: ${packageName}
+  ${bold('Directory')}: ${TARGET_DIR}
+  ${bold('Tokens directory')}: ${TOKENS_TARGET_DIR}
+  ${bold('Themes')}: ${themes.join(', ')}
+  ${bold('Default theme')}: ${defaultTheme}
+  ${bold('Color modes')}: ${modes.join(', ')}
+`,
+  );
+  if (directoryAction === 'clean') {
+    console.log(
+      bold().red(`Warning: Contents of ${TARGET_DIR} will be deleted`),
+    );
+  }
+  if (directoryAction === 'ignore') {
+    console.log(
+      bold().yellow(
+        `Warning: Existing files in ${TARGET_DIR} may be overwritten`,
+      ),
+    );
+  }
+
+  const res = await prompts(
+    {
+      name: 'proceed',
+      type: 'confirm',
+      message: 'Proceed?',
+      initial: directoryAction === undefined, // default to proceeding if the output directory is empty
+    },
+    promptOptions,
+  );
+
+  if (!res.proceed) {
+    process.exit();
+  }
+
+  if (directoryAction === 'clean') {
+    await fs.rm(TARGET_DIR, { recursive: true });
+  }
+
+  await fs.cp(DEFAULT_FILES_PATH, path.join(TARGET_DIR), {
+    recursive: true,
+  });
+  if (tokensDir !== 'design-tokens') {
+    await fs.rename(
+      path.join(TARGET_DIR, 'design-tokens'),
+      path.join(TOKENS_TARGET_DIR),
+    );
+  }
+
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'themes'));
+  } catch {
+    // Directory creation failed, probably because the directory already exists
+  }
+
+  for (const theme of themes.map(normalizeTokenSetName)) {
+    for (const mode of modes.map(normalizeTokenSetName)) {
+      // Copy the global file for the color mode
+      await fs.cp(
+        path.join(
+          TOKEN_TEMPLATE_FILES_PATH,
+          `primitives/colors/${mode}/global.json`,
+        ),
+        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`),
+        { recursive: true },
+      );
+
+      // Create theme primitives for the color mode
+      const template = await fs.readFile(
+        path.join(
+          TOKEN_TEMPLATE_FILES_PATH,
+          `primitives/colors/${mode}/theme-template.json`,
+        ),
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`),
+        template.toString('utf-8').replaceAll('<theme>', theme),
+      );
+    }
+
+    // Create main theme token set
+    const template = await fs.readFile(
+      path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`),
+    );
+    await fs.writeFile(
+      path.join(TOKENS_TARGET_DIR, `themes/${theme}.json`),
+      template.toString('utf-8').replaceAll('<theme>', theme),
+    );
+
+    await fs.writeFile(
+      path.join(TOKENS_TARGET_DIR, '$metadata.json'),
+      JSON.stringify(generateMetadata(modes, themes), undefined, 2),
+    );
+
+    await fs.writeFile(
+      path.join(TOKENS_TARGET_DIR, '$themes.json'),
+      JSON.stringify(generateThemes(modes, themes), undefined, 2),
+    );
+  }
+
+  // Configure package.json file
+  packageJsonTemplate.name = packageName;
+  packageJsonTemplate.main = packageJsonTemplate.main.replace(
+    '<default-theme>',
+    toGeneratedCssFileName(defaultTheme),
+  );
+  await fs.writeFile(
+    path.join(TARGET_DIR, 'package.json'),
+    JSON.stringify(packageJsonTemplate, undefined, 2),
+  );
+
+  const readmePath = path.join(TARGET_DIR, 'README.md');
+  const currentReadme = await fs.readFile(readmePath);
+  await fs.writeFile(
+    readmePath,
+    [
+      currentReadme.toString('utf-8'),
+      nextStepsMarkdown(themes, modes, tokensDir, packageName),
+    ].join('\n'),
+  );
+
+  console.log('🎉 Files successfully generated!');
+  console.log(
+    `Read about the next steps in the generated README at ${readmePath}`,
+  );
+}
+
+function isValidThemeName(themes: string[], value: string): true | string {
+  const s = value.trim();
+  if (s.length === 0) {
+    return 'Theme name cannot be empty.';
+  }
+  if (themes.includes(s)) {
+    return 'Theme names must be unique.';
+  }
+  if (/[^a-zæøå0-9 _-]/i.test(s)) {
+    return 'Theme name can only contain letters, numbers, dashes and underscores.';
+  }
+  return true;
+}
+
+function ordinal(n: number): string {
+  switch (n) {
+    case 1:
+      return '1st';
+    case 2:
+      return '2nd';
+    case 3:
+      return '3rd';
+    default:
+      return `${n}th`;
+  }
+}
diff --git a/packages/create-tokens/src/generateMetadataJson.ts b/packages/create-tokens/src/generateMetadataJson.ts
new file mode 100644
index 0000000000..651c2e5f53
--- /dev/null
+++ b/packages/create-tokens/src/generateMetadataJson.ts
@@ -0,0 +1,27 @@
+import { normalizeTokenSetName } from './utils.js';
+
+interface Metadata {
+  tokenSetOrder: string[];
+}
+
+export default function generateMetadataJson(
+  modes: Array<'Light' | 'Dark' | 'Contrast'>,
+  themes: string[],
+): Metadata {
+  return {
+    tokenSetOrder: [
+      'primitives/globals',
+      'primitives/typography/default',
+      ...modes.flatMap((mode) => [
+        `primitives/colors/${normalizeTokenSetName(mode)}/global`,
+        ...themes.map(
+          (theme) =>
+            `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+        ),
+      ]),
+      ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
+      'semantic/color',
+      'semantic/style',
+    ],
+  };
+}
diff --git a/packages/create-tokens/src/generateThemesJson.ts b/packages/create-tokens/src/generateThemesJson.ts
new file mode 100644
index 0000000000..d801433041
--- /dev/null
+++ b/packages/create-tokens/src/generateThemesJson.ts
@@ -0,0 +1,69 @@
+import { randomUUID } from 'node:crypto';
+
+import { TokenSetStatus, type ThemeObject } from '@tokens-studio/types';
+
+import { normalizeTokenSetName } from './utils.js';
+
+export default function generateThemesJson(
+  modes: Array<'Light' | 'Dark' | 'Contrast'>,
+  themes: string[],
+): ThemeObject[] {
+  return [
+    ...generateModesGroup(modes, themes),
+    ...generateThemesGroup(themes),
+    generateSemanticGroup(),
+  ];
+}
+
+function generateModesGroup(
+  modes: Array<'Light' | 'Dark' | 'Contrast'>,
+  themes: string[],
+): ThemeObject[] {
+  return modes.map(
+    (mode): ThemeObject => ({
+      id: randomUUID(),
+      name: mode,
+      selectedTokenSets: Object.fromEntries([
+        [
+          `primitives/colors/${normalizeTokenSetName(mode)}/global`,
+          TokenSetStatus.ENABLED,
+        ],
+        ...themes.map(
+          (theme) =>
+            [
+              `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+              TokenSetStatus.ENABLED,
+            ] as const,
+        ),
+      ]),
+      group: 'Mode',
+    }),
+  );
+}
+
+function generateThemesGroup(themes: string[]): ThemeObject[] {
+  return themes.map(
+    (theme): ThemeObject => ({
+      id: randomUUID(),
+      name: theme,
+      selectedTokenSets: {
+        [`themes/${normalizeTokenSetName(theme)}`]: TokenSetStatus.ENABLED,
+      },
+      group: 'Theme',
+    }),
+  );
+}
+
+function generateSemanticGroup(): ThemeObject {
+  return {
+    id: randomUUID(),
+    name: 'Semantic',
+    selectedTokenSets: {
+      'semantic/style': TokenSetStatus.ENABLED,
+      'semantic/color': TokenSetStatus.ENABLED,
+      'primitives/globals': TokenSetStatus.SOURCE,
+      'primitives/typography/default': TokenSetStatus.SOURCE,
+    },
+    group: 'Semantic',
+  };
+}
diff --git a/packages/create-tokens/src/nextStepsMarkdown.ts b/packages/create-tokens/src/nextStepsMarkdown.ts
new file mode 100644
index 0000000000..66aae6fa1d
--- /dev/null
+++ b/packages/create-tokens/src/nextStepsMarkdown.ts
@@ -0,0 +1,101 @@
+import { normalizeTokenSetName, toGeneratedCssFileName } from './utils.js';
+import type { Mode } from './createTokensPackage.js';
+
+export function nextStepsMarkdown(
+  themes: string[],
+  modes: Mode[],
+  tokensTargetDir: string,
+  packageName: string,
+) {
+  const themeModeCombinations = themes.flatMap((theme) =>
+    modes.map((mode): [theme: string, mode: string] => [theme, mode]),
+  );
+  const themeOrThemes = `theme${themes.length > 1 ? 's' : ''}`;
+  const isOrAre = themes.length > 1 ? 'are' : 'is';
+
+  return `
+## Next steps
+
+### Using the ${themeOrThemes} in Figma
+
+1. Initialise a git repository in the current directory
+2. Push the tokens to GitHub, GitLab or Azure DevOps
+3. [Open the Figma component library](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) and save it to your project
+4. Install the [Tokens Studio plugin](https://www.figma.com/community/plugin/843461159747178978/Tokens-Studio-for-Figma-(Figma-Tokens)) in Figma
+5. [Set up sync](https://docs.tokens.studio/sync/sync) in Tokens Studio for Figma
+6. Use the ["Create variables" action](https://docs.tokens.studio/variables/creating-variables) in Tokens Studio
+7. Push the resulting variables from Tokens Studio to Git
+
+### Customizing the ${themeOrThemes}
+
+1. Go to https://theme.designsystemet.no and set up a color theme
+2. Press "Kopier tema"
+3. Under "Json til Figma", copy the contents under ${modes.join(' / ')} to
+   the corresponding file under \`${tokensTargetDir}\`:  
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join('\n')}
+   This can also be done in Tokens Studio for Figma.
+4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
+   with the correct theme identifier, depending on the theme you're customizing.
+   This is the same as the json filename without extension (e.g. ${themes.map((x) => `\`${normalizeTokenSetName(x)}\``).join(', ')}).
+${themes.length > 1 ? '5. Repeat steps 1—4 for the remaining themes' : ''}
+
+### Using the correct ${themeOrThemes} in Figma components
+
+The "Designsystemet - Core UI Kit" component library is set up with the themes
+"Theme1" and "Theme2" by default. To ensure our custom ${themeOrThemes} ${isOrAre} used, follow these steps:
+
+1. Open your copy of "Designsystemet - Core UI Kit" in Figma
+2. Pull any changes from Git using Tokens Studio
+3. Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio
+4. Access the [Variables modal](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables)
+5. Select the "Theme" collection in the upper left dropdown
+6. Select "All variables"
+7. Right click the modes "Theme1" and click "Delete mode"
+8. Repeat for "Theme2"
+9. Publish the library
+
+### Updating the Figma components after theme changes
+
+1. Open your copy of "Designsystemet - Core UI Kit" in Figma
+2. Pull any changes from Git using Tokens Studio
+3. Update the Figma variables using the "Styles & Variables" > "Sync variables" action in Tokens Studio
+4. Publish the library
+
+### Using the ${themeOrThemes} in code
+
+The current directory is set up to easily publish the ${themeOrThemes} as an npm package.
+
+1. Check that the package.json file is set up to your liking
+2. \`npm install\`
+3. \`npm run build\` - builds the css files for each theme and outputs them to \`./dist\`
+4. \`npm publish\`   - publishes the package to npm as \`${packageName}\`, unless you manually changed \`package.json\`
+
+In a different npm package (e.g. a frontend web app), follow the "Get started"
+instructions at https://github.com/digdir/designsystemet but replace
+\`@digdir/designsystemet-theme\` with \`${packageName}\`. In short:
+
+#### Install packages
+
+\`\`\`
+npm i ${packageName} @digdir/designsystemet-css @digdir/designsystemet-react
+\`\`\`
+
+#### Import the default theme and use components
+
+\`\`\`js
+import '${packageName}';
+import '@digdir/designsystemet-css';
+import { Button } from '@digdir/designsystemet-react';
+\`\`\`
+
+${
+  themes.length > 1
+    ? `
+#### Or import a specific theme
+\`\`\`js
+import '${packageName}/${toGeneratedCssFileName(themes[1])}';
+\`\`\`
+`.trim()
+    : ''
+}`;
+}
diff --git a/packages/create-tokens/src/utils.ts b/packages/create-tokens/src/utils.ts
new file mode 100644
index 0000000000..f5672134c2
--- /dev/null
+++ b/packages/create-tokens/src/utils.ts
@@ -0,0 +1,19 @@
+import { kebabCase } from 'change-case';
+
+export function normalizeTokenSetName(name: string): string {
+  return kebabCase(name);
+}
+
+export function toGeneratedCssFileName(name: string): string {
+  // This needs to match the output from `npx @digdir/designsystemet tokens`
+  return `${name.toLowerCase()}.css`;
+}
+
+export function toValidPackageName(projectName: string) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z\d\-~]+/g, '-');
+}
diff --git a/packages/create-tokens/template/default-files/.gitignore b/packages/create-tokens/template/default-files/.gitignore
new file mode 100644
index 0000000000..c6bba59138
--- /dev/null
+++ b/packages/create-tokens/template/default-files/.gitignore
@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/packages/create-tokens/template/default-files/README.md b/packages/create-tokens/template/default-files/README.md
new file mode 100644
index 0000000000..418646b244
--- /dev/null
+++ b/packages/create-tokens/template/default-files/README.md
@@ -0,0 +1,10 @@
+# Design tokens for @digdir/designsystemet
+
+## Getting started
+
+```
+npm install
+npm run build
+```
+
+The package is set up for publishing as an NPM library with `npm publish`. Ensure `package.json` is satisfactory before you do this.
diff --git a/packages/create-tokens/template/default-files/design-tokens/README.md b/packages/create-tokens/template/default-files/design-tokens/README.md
new file mode 100644
index 0000000000..414b1a8b98
--- /dev/null
+++ b/packages/create-tokens/template/default-files/design-tokens/README.md
@@ -0,0 +1,3 @@
+# Design tokens
+
+Design tokens structure from [Designsystemet](https://github.com/digdir/designsystemet)
diff --git a/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json b/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json
new file mode 100644
index 0000000000..c6a71c9a88
--- /dev/null
+++ b/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json
@@ -0,0 +1,197 @@
+{
+  "border-width": {
+    "1": {
+      "type": "borderWidth",
+      "value": "1px"
+    },
+    "2": {
+      "type": "borderWidth",
+      "value": "2px"
+    }
+  },
+  "shadow": {
+    "100": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.16)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "200": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.15)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.1)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "300": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.14)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "4",
+          "blur": "8",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "400": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.13)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.13)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "3",
+          "blur": "5",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "6",
+          "blur": "12",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.14)",
+          "type": "dropShadow"
+        }
+      ]
+    },
+    "500": {
+      "type": "boxShadow",
+      "value": [
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.16)",
+          "type": "dropShadow",
+          "x": "0",
+          "y": "4",
+          "blur": "8",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "12",
+          "blur": "24",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.16)",
+          "type": "dropShadow"
+        }
+      ]
+    }
+  },
+  "border-radius": {
+    "2": {
+      "type": "borderRadius",
+      "value": "2"
+    },
+    "4": {
+      "type": "borderRadius",
+      "value": "4"
+    },
+    "8": {
+      "type": "borderRadius",
+      "value": "8"
+    },
+    "12": {
+      "type": "borderRadius",
+      "value": "12"
+    },
+    "16": {
+      "type": "borderRadius",
+      "value": "16"
+    },
+    "24": {
+      "type": "borderRadius",
+      "value": "24"
+    },
+    "32": {
+      "type": "borderRadius",
+      "value": "32"
+    },
+    "9999": {
+      "type": "borderRadius",
+      "value": "9999"
+    }
+  },
+  "opacity": {
+    "30": {
+      "type": "opacity",
+      "value": "30%"
+    }
+  },
+  "sizing": {
+    "base": {
+      "type": "sizing",
+      "value": "4"
+    }
+  }
+}
diff --git a/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json b/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json
new file mode 100644
index 0000000000..8ec654585f
--- /dev/null
+++ b/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json
@@ -0,0 +1,86 @@
+{
+  "font-family": {
+    "main": {
+      "type": "fontFamilies",
+      "value": "Inter"
+    }
+  },
+  "line-height": {
+    "300": {
+      "type": "lineHeights",
+      "value": "130%"
+    },
+    "500": {
+      "type": "lineHeights",
+      "value": "150%"
+    },
+    "600": {
+      "type": "lineHeights",
+      "value": "160%"
+    },
+    "700": {
+      "type": "lineHeights",
+      "value": "170%"
+    }
+  },
+  "font-weight": {
+    "medium": {
+      "type": "fontWeights",
+      "value": "500"
+    },
+    "semibold": {
+      "type": "fontWeights",
+      "value": "600"
+    },
+    "regular": {
+      "type": "fontWeights",
+      "value": "400"
+    }
+  },
+  "font-size": {
+    "f-3": {
+      "type": "fontSizes",
+      "value": "12"
+    },
+    "f-2": {
+      "type": "fontSizes",
+      "value": "13"
+    },
+    "f-1": {
+      "type": "fontSizes",
+      "value": "14"
+    },
+    "f0": {
+      "type": "fontSizes",
+      "value": "16"
+    },
+    "f1": {
+      "type": "fontSizes",
+      "value": "18"
+    },
+    "f2": {
+      "type": "fontSizes",
+      "value": "21"
+    },
+    "f3": {
+      "type": "fontSizes",
+      "value": "24"
+    },
+    "f4": {
+      "type": "fontSizes",
+      "value": "30"
+    },
+    "f5": {
+      "type": "fontSizes",
+      "value": "36"
+    },
+    "f6": {
+      "type": "fontSizes",
+      "value": "48"
+    },
+    "f7": {
+      "type": "fontSizes",
+      "value": "60"
+    }
+  }
+}
diff --git a/packages/create-tokens/template/default-files/design-tokens/semantic/color.json b/packages/create-tokens/template/default-files/design-tokens/semantic/color.json
new file mode 100644
index 0000000000..037e6c7877
--- /dev/null
+++ b/packages/create-tokens/template/default-files/design-tokens/semantic/color.json
@@ -0,0 +1,562 @@
+{
+  "color": {
+    "accent": {
+      "background-default": {
+        "type": "color",
+        "value": "{color.accent.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{color.accent.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{color.accent.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{color.accent.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{color.accent.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{color.accent.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{color.accent.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{color.accent.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{color.accent.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{color.accent.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{color.accent.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{color.accent.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{color.accent.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{color.accent.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{color.accent.contrast-2}"
+      }
+    },
+    "neutral": {
+      "background-default": {
+        "type": "color",
+        "value": "{color.neutral.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{color.neutral.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{color.neutral.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{color.neutral.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{color.neutral.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{color.neutral.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{color.neutral.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{color.neutral.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{color.neutral.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{color.neutral.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{color.neutral.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{color.neutral.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{color.neutral.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{color.neutral.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{color.neutral.contrast-2}"
+      }
+    },
+    "brand1": {
+      "background-default": {
+        "type": "color",
+        "value": "{color.brand1.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{color.brand1.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{color.brand1.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{color.brand1.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{color.brand1.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{color.brand1.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{color.brand1.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{color.brand1.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{color.brand1.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{color.brand1.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{color.brand1.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{color.brand1.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{color.brand1.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{color.brand1.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{color.brand1.contrast-2}"
+      }
+    },
+    "brand2": {
+      "background-default": {
+        "type": "color",
+        "value": "{color.brand2.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{color.brand2.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{color.brand2.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{color.brand2.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{color.brand2.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{color.brand2.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{color.brand2.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{color.brand2.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{color.brand2.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{color.brand2.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{color.brand2.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{color.brand2.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{color.brand2.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{color.brand2.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{color.brand2.contrast-2}"
+      }
+    },
+    "brand3": {
+      "background-default": {
+        "type": "color",
+        "value": "{color.brand3.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{color.brand3.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{color.brand3.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{color.brand3.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{color.brand3.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{color.brand3.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{color.brand3.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{color.brand3.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{color.brand3.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{color.brand3.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{color.brand3.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{color.brand3.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{color.brand3.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{color.brand3.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{color.brand3.contrast-2}"
+      }
+    },
+    "success": {
+      "background-default": {
+        "type": "color",
+        "value": "{global.green.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{global.green.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{global.green.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{global.green.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{global.green.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{global.green.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{global.green.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{global.green.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{global.green.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{global.green.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{global.green.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{global.green.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{global.green.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{global.green.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{global.green.contrast-2}"
+      }
+    },
+    "danger": {
+      "background-default": {
+        "type": "color",
+        "value": "{global.red.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{global.red.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{global.red.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{global.red.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{global.red.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{global.red.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{global.red.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{global.red.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{global.red.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{global.red.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{global.red.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{global.red.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{global.red.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{global.red.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{global.red.contrast-2}"
+      }
+    },
+    "info": {
+      "background-default": {
+        "type": "color",
+        "value": "{global.blue.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{global.blue.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{global.blue.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{global.blue.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{global.blue.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{global.blue.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{global.blue.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{global.blue.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{global.blue.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{global.blue.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{global.blue.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{global.blue.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{global.blue.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{global.blue.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{global.blue.contrast-2}"
+      }
+    },
+    "warning": {
+      "background-default": {
+        "type": "color",
+        "value": "{global.yellow.1}"
+      },
+      "background-subtle": {
+        "type": "color",
+        "value": "{global.yellow.2}"
+      },
+      "surface-default": {
+        "type": "color",
+        "value": "{global.yellow.3}"
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{global.yellow.4}"
+      },
+      "surface-active": {
+        "type": "color",
+        "value": "{global.yellow.5}"
+      },
+      "border-subtle": {
+        "type": "color",
+        "value": "{global.yellow.6}"
+      },
+      "border-default": {
+        "type": "color",
+        "value": "{global.yellow.7}"
+      },
+      "border-strong": {
+        "type": "color",
+        "value": "{global.yellow.8}"
+      },
+      "base-default": {
+        "type": "color",
+        "value": "{global.orange.9}"
+      },
+      "base-hover": {
+        "type": "color",
+        "value": "{global.orange.10}"
+      },
+      "base-active": {
+        "type": "color",
+        "value": "{global.orange.11}"
+      },
+      "text-subtle": {
+        "type": "color",
+        "value": "{global.orange.12}"
+      },
+      "text-default": {
+        "type": "color",
+        "value": "{global.orange.13}"
+      },
+      "contrast-default": {
+        "type": "color",
+        "value": "{global.yellow.contrast-1}"
+      },
+      "contrast-subtle": {
+        "type": "color",
+        "value": "{global.yellow.contrast-2}"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/default-files/design-tokens/semantic/style.json b/packages/create-tokens/template/default-files/design-tokens/semantic/style.json
new file mode 100644
index 0000000000..dabf65db81
--- /dev/null
+++ b/packages/create-tokens/template/default-files/design-tokens/semantic/style.json
@@ -0,0 +1,543 @@
+{
+  "typography": {
+    "heading": {
+      "2xl": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f7}"
+        }
+      },
+      "xl": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f6}"
+        },
+        "description": "H1"
+      },
+      "lg": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f5}"
+        },
+        "description": "H2"
+      },
+      "md": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f4}"
+        },
+        "description": "H3"
+      },
+      "sm": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f3}"
+        },
+        "description": "H4"
+      },
+      "xs": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f2}"
+        },
+        "description": "H5"
+      },
+      "2xs": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f1}"
+        },
+        "description": "H6"
+      }
+    },
+    "ingress": {
+      "lg": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.700}",
+          "fontSize": "{font-size.f4}"
+        }
+      },
+      "md": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.700}",
+          "fontSize": "{font-size.f3}"
+        }
+      },
+      "sm": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.700}",
+          "fontSize": "{font-size.f2}"
+        }
+      },
+      "xs": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.700}",
+          "fontSize": "{font-size.f1}"
+        }
+      }
+    },
+    "paragraph": {
+      "lg": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.500}",
+          "fontSize": "{font-size.f2}"
+        }
+      },
+      "md": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.500}",
+          "fontSize": "{font-size.f1}"
+        }
+      },
+      "sm": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.500}",
+          "fontSize": "{font-size.f0}"
+        }
+      },
+      "xs": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.500}",
+          "fontSize": "{font-size.f-1}"
+        }
+      },
+      "short": {
+        "lg": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.300}",
+            "fontSize": "{font-size.f2}"
+          }
+        },
+        "md": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.300}",
+            "fontSize": "{font-size.f1}"
+          }
+        },
+        "sm": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.300}",
+            "fontSize": "{font-size.f0}"
+          }
+        },
+        "xs": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.300}",
+            "fontSize": "{font-size.f-1}"
+          }
+        }
+      },
+      "long": {
+        "lg": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.700}",
+            "fontSize": "{font-size.f1}"
+          }
+        },
+        "md": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.700}",
+            "fontSize": "{font-size.f0}"
+          }
+        },
+        "sm": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.700}",
+            "fontSize": "{font-size.f-1}"
+          }
+        },
+        "xs": {
+          "type": "typography",
+          "value": {
+            "fontFamily": "{font-family.main}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.700}",
+            "fontSize": "{font-size.f-2}"
+          }
+        }
+      }
+    },
+    "label": {
+      "lg": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f2}"
+        }
+      },
+      "md": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f1}"
+        }
+      },
+      "sm": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f0}"
+        }
+      },
+      "xs": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.medium}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f-1}"
+        }
+      }
+    },
+    "error_message": {
+      "lg": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f2}"
+        }
+      },
+      "md": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f1}"
+        }
+      },
+      "sm": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f0}"
+        }
+      },
+      "xs": {
+        "type": "typography",
+        "value": {
+          "fontFamily": "{font-family.main}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": "{line-height.300}",
+          "fontSize": "{font-size.f-1}"
+        }
+      }
+    }
+  },
+  "opacity": {
+    "disabled": {
+      "type": "opacity",
+      "value": "{opacity.30}"
+    }
+  },
+  "border-radius": {
+    "sm": {
+      "type": "borderRadius",
+      "value": "{border-radius.2}"
+    },
+    "md": {
+      "type": "borderRadius",
+      "value": "{border-radius.4}"
+    },
+    "lg": {
+      "type": "borderRadius",
+      "value": "{border-radius.8}"
+    },
+    "xl": {
+      "type": "borderRadius",
+      "value": "{border-radius.12}"
+    },
+    "2xl": {
+      "type": "borderRadius",
+      "value": "{border-radius.16}"
+    },
+    "3xl": {
+      "type": "borderRadius",
+      "value": "{border-radius.24}"
+    },
+    "4xl": {
+      "type": "borderRadius",
+      "value": "{border-radius.32}"
+    },
+    "full": {
+      "type": "borderRadius",
+      "value": "{border-radius.9999}"
+    }
+  },
+  "spacing": {
+    "0": {
+      "type": "spacing",
+      "value": "{sizing.base}*0"
+    },
+    "1": {
+      "type": "spacing",
+      "value": "{sizing.base}*1"
+    },
+    "2": {
+      "type": "spacing",
+      "value": "{sizing.base}*2"
+    },
+    "3": {
+      "type": "spacing",
+      "value": "{sizing.base}*3"
+    },
+    "4": {
+      "type": "spacing",
+      "value": "{sizing.base}*4"
+    },
+    "5": {
+      "type": "spacing",
+      "value": "{sizing.base}*5"
+    },
+    "6": {
+      "type": "spacing",
+      "value": "{sizing.base}*6"
+    },
+    "7": {
+      "type": "spacing",
+      "value": "{sizing.base}*7"
+    },
+    "8": {
+      "type": "spacing",
+      "value": "{sizing.base}*8"
+    },
+    "9": {
+      "type": "spacing",
+      "value": "{sizing.base}*9"
+    },
+    "10": {
+      "type": "spacing",
+      "value": "{sizing.base}*10"
+    },
+    "11": {
+      "type": "spacing",
+      "value": "{sizing.base}*11"
+    },
+    "12": {
+      "type": "spacing",
+      "value": "{sizing.base}*12"
+    },
+    "13": {
+      "type": "spacing",
+      "value": "{sizing.base}*13"
+    },
+    "14": {
+      "type": "spacing",
+      "value": "{sizing.base}*14"
+    },
+    "15": {
+      "type": "spacing",
+      "value": "{sizing.base}*15"
+    },
+    "18": {
+      "type": "spacing",
+      "value": "{sizing.base}*18"
+    },
+    "22": {
+      "type": "spacing",
+      "value": "{sizing.base}*22"
+    },
+    "26": {
+      "type": "spacing",
+      "value": "{sizing.base}*26"
+    },
+    "30": {
+      "type": "spacing",
+      "value": "{sizing.base}*30"
+    }
+  },
+  "sizing": {
+    "0": {
+      "type": "sizing",
+      "value": "{sizing.base}*0"
+    },
+    "1": {
+      "type": "sizing",
+      "value": "{sizing.base}*1"
+    },
+    "2": {
+      "type": "sizing",
+      "value": "{sizing.base}*2"
+    },
+    "3": {
+      "type": "sizing",
+      "value": "{sizing.base}*3"
+    },
+    "4": {
+      "type": "sizing",
+      "value": "{sizing.base}*4"
+    },
+    "5": {
+      "type": "sizing",
+      "value": "{sizing.base}*5"
+    },
+    "6": {
+      "type": "sizing",
+      "value": "{sizing.base}*6"
+    },
+    "7": {
+      "type": "sizing",
+      "value": "{sizing.base}*7"
+    },
+    "8": {
+      "type": "sizing",
+      "value": "{sizing.base}*8"
+    },
+    "9": {
+      "type": "sizing",
+      "value": "{sizing.base}*9"
+    },
+    "10": {
+      "type": "sizing",
+      "value": "{sizing.base}*10"
+    },
+    "11": {
+      "type": "sizing",
+      "value": "{sizing.base}*11"
+    },
+    "12": {
+      "type": "sizing",
+      "value": "{sizing.base}*12"
+    },
+    "13": {
+      "type": "sizing",
+      "value": "{sizing.base}*13"
+    },
+    "14": {
+      "type": "sizing",
+      "value": "{sizing.base}*14"
+    },
+    "15": {
+      "type": "sizing",
+      "value": "{sizing.base}*15"
+    },
+    "18": {
+      "type": "sizing",
+      "value": "{sizing.base}*18"
+    },
+    "22": {
+      "type": "sizing",
+      "value": "{sizing.base}*22"
+    },
+    "26": {
+      "type": "sizing",
+      "value": "{sizing.base}*26"
+    },
+    "30": {
+      "type": "sizing",
+      "value": "{sizing.base}*30"
+    }
+  },
+  "border-width": {
+    "default": {
+      "type": "borderWidth",
+      "value": "{border-width.1}"
+    },
+    "active": {
+      "type": "borderWidth",
+      "value": "{border-width.2}"
+    },
+    "tab_focus": {
+      "type": "borderWidth",
+      "value": "{border-width.2}"
+    }
+  },
+  "shadow": {
+    "xs": {
+      "type": "boxShadow",
+      "value": "{shadow.100}"
+    },
+    "sm": {
+      "type": "boxShadow",
+      "value": "{shadow.200}"
+    },
+    "md": {
+      "type": "boxShadow",
+      "value": "{shadow.300}"
+    },
+    "lg": {
+      "type": "boxShadow",
+      "value": "{shadow.400}"
+    },
+    "xl": {
+      "type": "boxShadow",
+      "value": "{shadow.500}"
+    }
+  }
+}
diff --git a/packages/create-tokens/template/prettier.config.mjs b/packages/create-tokens/template/prettier.config.mjs
new file mode 100644
index 0000000000..67be8eec58
--- /dev/null
+++ b/packages/create-tokens/template/prettier.config.mjs
@@ -0,0 +1,9 @@
+/**
+ * NOTE: This config exists to ensure files in the template dir are
+ * formatted using the default prettier rules
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const config = {};
+
+export default config;
diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json
new file mode 100644
index 0000000000..c12da3fcf6
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json
@@ -0,0 +1,376 @@
+{
+  "global": {
+    "blue": {
+      "1": {
+        "value": "#000408",
+        "type": "color"
+      },
+      "2": {
+        "value": "#021423",
+        "type": "color"
+      },
+      "3": {
+        "value": "#032540",
+        "type": "color"
+      },
+      "4": {
+        "value": "#043256",
+        "type": "color"
+      },
+      "5": {
+        "value": "#063f6c",
+        "type": "color"
+      },
+      "6": {
+        "value": "#4291ce",
+        "type": "color"
+      },
+      "7": {
+        "value": "#78b1dc",
+        "type": "color"
+      },
+      "8": {
+        "value": "#aed0ea",
+        "type": "color"
+      },
+      "9": {
+        "value": "#0A71C0",
+        "type": "color"
+      },
+      "10": {
+        "value": "#085ea0",
+        "type": "color"
+      },
+      "11": {
+        "value": "#074b80",
+        "type": "color"
+      },
+      "12": {
+        "value": "#a6cbe8",
+        "type": "color"
+      },
+      "13": {
+        "value": "#e8f1f9",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#f3f8fc",
+        "type": "color"
+      }
+    },
+    "green": {
+      "1": {
+        "value": "#000401",
+        "type": "color"
+      },
+      "2": {
+        "value": "#011704",
+        "type": "color"
+      },
+      "3": {
+        "value": "#022b08",
+        "type": "color"
+      },
+      "4": {
+        "value": "#03380a",
+        "type": "color"
+      },
+      "5": {
+        "value": "#04480d",
+        "type": "color"
+      },
+      "6": {
+        "value": "#2f9f3e",
+        "type": "color"
+      },
+      "7": {
+        "value": "#6dbc78",
+        "type": "color"
+      },
+      "8": {
+        "value": "#a8d7ae",
+        "type": "color"
+      },
+      "9": {
+        "value": "#078D19",
+        "type": "color"
+      },
+      "10": {
+        "value": "#067615",
+        "type": "color"
+      },
+      "11": {
+        "value": "#056011",
+        "type": "color"
+      },
+      "12": {
+        "value": "#a0d3a7",
+        "type": "color"
+      },
+      "13": {
+        "value": "#e7f4e9",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#000401",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "1": {
+        "value": "#070301",
+        "type": "color"
+      },
+      "2": {
+        "value": "#200f05",
+        "type": "color"
+      },
+      "3": {
+        "value": "#3a1b0a",
+        "type": "color"
+      },
+      "4": {
+        "value": "#50240d",
+        "type": "color"
+      },
+      "5": {
+        "value": "#652e10",
+        "type": "color"
+      },
+      "6": {
+        "value": "#d1713e",
+        "type": "color"
+      },
+      "7": {
+        "value": "#df9b77",
+        "type": "color"
+      },
+      "8": {
+        "value": "#ecc4ae",
+        "type": "color"
+      },
+      "9": {
+        "value": "#CA5C21",
+        "type": "color"
+      },
+      "10": {
+        "value": "#a94d1c",
+        "type": "color"
+      },
+      "11": {
+        "value": "#8a3f17",
+        "type": "color"
+      },
+      "12": {
+        "value": "#e9bda5",
+        "type": "color"
+      },
+      "13": {
+        "value": "#faefe9",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#0d0602",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "1": {
+        "value": "#060308",
+        "type": "color"
+      },
+      "2": {
+        "value": "#1a0d26",
+        "type": "color"
+      },
+      "3": {
+        "value": "#301748",
+        "type": "color"
+      },
+      "4": {
+        "value": "#402060",
+        "type": "color"
+      },
+      "5": {
+        "value": "#52287a",
+        "type": "color"
+      },
+      "6": {
+        "value": "#9e7dbf",
+        "type": "color"
+      },
+      "7": {
+        "value": "#b9a1d0",
+        "type": "color"
+      },
+      "8": {
+        "value": "#d5c7e3",
+        "type": "color"
+      },
+      "9": {
+        "value": "#663299",
+        "type": "color"
+      },
+      "10": {
+        "value": "#4f2777",
+        "type": "color"
+      },
+      "11": {
+        "value": "#381b54",
+        "type": "color"
+      },
+      "12": {
+        "value": "#d0c0e0",
+        "type": "color"
+      },
+      "13": {
+        "value": "#f2eef7",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#eee8f3",
+        "type": "color"
+      }
+    },
+    "red": {
+      "1": {
+        "value": "#0b0101",
+        "type": "color"
+      },
+      "2": {
+        "value": "#2b0606",
+        "type": "color"
+      },
+      "3": {
+        "value": "#4b0a0a",
+        "type": "color"
+      },
+      "4": {
+        "value": "#620e0e",
+        "type": "color"
+      },
+      "5": {
+        "value": "#7c1212",
+        "type": "color"
+      },
+      "6": {
+        "value": "#d66b6b",
+        "type": "color"
+      },
+      "7": {
+        "value": "#e29797",
+        "type": "color"
+      },
+      "8": {
+        "value": "#eec1c1",
+        "type": "color"
+      },
+      "9": {
+        "value": "#C01B1B",
+        "type": "color"
+      },
+      "10": {
+        "value": "#9a1616",
+        "type": "color"
+      },
+      "11": {
+        "value": "#771111",
+        "type": "color"
+      },
+      "12": {
+        "value": "#ecbaba",
+        "type": "color"
+      },
+      "13": {
+        "value": "#faeded",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fffefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#f6e0e0",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "1": {
+        "value": "#040301",
+        "type": "color"
+      },
+      "2": {
+        "value": "#181304",
+        "type": "color"
+      },
+      "3": {
+        "value": "#2b2307",
+        "type": "color"
+      },
+      "4": {
+        "value": "#3a300a",
+        "type": "color"
+      },
+      "5": {
+        "value": "#4a3d0d",
+        "type": "color"
+      },
+      "6": {
+        "value": "#a7881c",
+        "type": "color"
+      },
+      "7": {
+        "value": "#cca723",
+        "type": "color"
+      },
+      "8": {
+        "value": "#edc94b",
+        "type": "color"
+      },
+      "9": {
+        "value": "#EABF28",
+        "type": "color"
+      },
+      "10": {
+        "value": "#d0aa24",
+        "type": "color"
+      },
+      "11": {
+        "value": "#b7951f",
+        "type": "color"
+      },
+      "12": {
+        "value": "#ebc232",
+        "type": "color"
+      },
+      "13": {
+        "value": "#faf0cd",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#382d0a",
+        "type": "color"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json
new file mode 100644
index 0000000000..e424f5b596
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json
@@ -0,0 +1,314 @@
+{
+  "<theme>": {
+    "accent": {
+      "1": {
+        "value": "#000409",
+        "type": "color"
+      },
+      "2": {
+        "value": "#001427",
+        "type": "color"
+      },
+      "3": {
+        "value": "#002445",
+        "type": "color"
+      },
+      "4": {
+        "value": "#00315c",
+        "type": "color"
+      },
+      "5": {
+        "value": "#003d75",
+        "type": "color"
+      },
+      "6": {
+        "value": "#4b90ce",
+        "type": "color"
+      },
+      "7": {
+        "value": "#7eb0dc",
+        "type": "color"
+      },
+      "8": {
+        "value": "#b0cfea",
+        "type": "color"
+      },
+      "9": {
+        "value": "#0062BA",
+        "type": "color"
+      },
+      "10": {
+        "value": "#005099",
+        "type": "color"
+      },
+      "11": {
+        "value": "#003d75",
+        "type": "color"
+      },
+      "12": {
+        "value": "#a9cae8",
+        "type": "color"
+      },
+      "13": {
+        "value": "#e8f1f9",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#ddeaf6",
+        "type": "color"
+      }
+    },
+    "neutral": {
+      "1": {
+        "value": "#020405",
+        "type": "color"
+      },
+      "2": {
+        "value": "#0e141b",
+        "type": "color"
+      },
+      "3": {
+        "value": "#192433",
+        "type": "color"
+      },
+      "4": {
+        "value": "#243142",
+        "type": "color"
+      },
+      "5": {
+        "value": "#333e4e",
+        "type": "color"
+      },
+      "6": {
+        "value": "#858c96",
+        "type": "color"
+      },
+      "7": {
+        "value": "#a6abb2",
+        "type": "color"
+      },
+      "8": {
+        "value": "#c9ccd0",
+        "type": "color"
+      },
+      "9": {
+        "value": "#1E2B3C",
+        "type": "color"
+      },
+      "10": {
+        "value": "#303c4b",
+        "type": "color"
+      },
+      "11": {
+        "value": "#444e5d",
+        "type": "color"
+      },
+      "12": {
+        "value": "#c3c6cb",
+        "type": "color"
+      },
+      "13": {
+        "value": "#eff0f1",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#bbbfc4",
+        "type": "color"
+      }
+    },
+    "brand1": {
+      "1": {
+        "value": "#060303",
+        "type": "color"
+      },
+      "2": {
+        "value": "#230d0e",
+        "type": "color"
+      },
+      "3": {
+        "value": "#3c1819",
+        "type": "color"
+      },
+      "4": {
+        "value": "#522021",
+        "type": "color"
+      },
+      "5": {
+        "value": "#68292a",
+        "type": "color"
+      },
+      "6": {
+        "value": "#eb5b5f",
+        "type": "color"
+      },
+      "7": {
+        "value": "#f78d8f",
+        "type": "color"
+      },
+      "8": {
+        "value": "#fabcbd",
+        "type": "color"
+      },
+      "9": {
+        "value": "#F45F63",
+        "type": "color"
+      },
+      "10": {
+        "value": "#d15155",
+        "type": "color"
+      },
+      "11": {
+        "value": "#b04447",
+        "type": "color"
+      },
+      "12": {
+        "value": "#fab4b5",
+        "type": "color"
+      },
+      "13": {
+        "value": "#feeced",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#000000",
+        "type": "color"
+      }
+    },
+    "brand2": {
+      "1": {
+        "value": "#050301",
+        "type": "color"
+      },
+      "2": {
+        "value": "#191303",
+        "type": "color"
+      },
+      "3": {
+        "value": "#2d2206",
+        "type": "color"
+      },
+      "4": {
+        "value": "#3d2e09",
+        "type": "color"
+      },
+      "5": {
+        "value": "#4f3b0b",
+        "type": "color"
+      },
+      "6": {
+        "value": "#b28419",
+        "type": "color"
+      },
+      "7": {
+        "value": "#daa21f",
+        "type": "color"
+      },
+      "8": {
+        "value": "#eec76c",
+        "type": "color"
+      },
+      "9": {
+        "value": "#E5AA20",
+        "type": "color"
+      },
+      "10": {
+        "value": "#c9951c",
+        "type": "color"
+      },
+      "11": {
+        "value": "#ae8118",
+        "type": "color"
+      },
+      "12": {
+        "value": "#ecc059",
+        "type": "color"
+      },
+      "13": {
+        "value": "#faefd6",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#2b2006",
+        "type": "color"
+      }
+    },
+    "brand3": {
+      "1": {
+        "value": "#010407",
+        "type": "color"
+      },
+      "2": {
+        "value": "#041421",
+        "type": "color"
+      },
+      "3": {
+        "value": "#07253c",
+        "type": "color"
+      },
+      "4": {
+        "value": "#0a3251",
+        "type": "color"
+      },
+      "5": {
+        "value": "#0d4068",
+        "type": "color"
+      },
+      "6": {
+        "value": "#1c90e8",
+        "type": "color"
+      },
+      "7": {
+        "value": "#57b2f8",
+        "type": "color"
+      },
+      "8": {
+        "value": "#9cd2fb",
+        "type": "color"
+      },
+      "9": {
+        "value": "#1E98F5",
+        "type": "color"
+      },
+      "10": {
+        "value": "#1a83d3",
+        "type": "color"
+      },
+      "11": {
+        "value": "#166eb2",
+        "type": "color"
+      },
+      "12": {
+        "value": "#90ccfa",
+        "type": "color"
+      },
+      "13": {
+        "value": "#e3f2fe",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#010407",
+        "type": "color"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json
new file mode 100644
index 0000000000..9c9a1c7a18
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json
@@ -0,0 +1,376 @@
+{
+  "global": {
+    "blue": {
+      "1": {
+        "value": "#031d30",
+        "type": "color"
+      },
+      "2": {
+        "value": "#032540",
+        "type": "color"
+      },
+      "3": {
+        "value": "#043256",
+        "type": "color"
+      },
+      "4": {
+        "value": "#063f6c",
+        "type": "color"
+      },
+      "5": {
+        "value": "#074d84",
+        "type": "color"
+      },
+      "6": {
+        "value": "#075490",
+        "type": "color"
+      },
+      "7": {
+        "value": "#0c72c1",
+        "type": "color"
+      },
+      "8": {
+        "value": "#98c3e5",
+        "type": "color"
+      },
+      "9": {
+        "value": "#0c72c1",
+        "type": "color"
+      },
+      "10": {
+        "value": "#085ea0",
+        "type": "color"
+      },
+      "11": {
+        "value": "#074b80",
+        "type": "color"
+      },
+      "12": {
+        "value": "#62a4d7",
+        "type": "color"
+      },
+      "13": {
+        "value": "#cde2f2",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#f3f8fc",
+        "type": "color"
+      }
+    },
+    "green": {
+      "1": {
+        "value": "#022106",
+        "type": "color"
+      },
+      "2": {
+        "value": "#022b08",
+        "type": "color"
+      },
+      "3": {
+        "value": "#03380a",
+        "type": "color"
+      },
+      "4": {
+        "value": "#04480d",
+        "type": "color"
+      },
+      "5": {
+        "value": "#045810",
+        "type": "color"
+      },
+      "6": {
+        "value": "#056011",
+        "type": "color"
+      },
+      "7": {
+        "value": "#068117",
+        "type": "color"
+      },
+      "8": {
+        "value": "#90cc98",
+        "type": "color"
+      },
+      "9": {
+        "value": "#078d19",
+        "type": "color"
+      },
+      "10": {
+        "value": "#067615",
+        "type": "color"
+      },
+      "11": {
+        "value": "#056011",
+        "type": "color"
+      },
+      "12": {
+        "value": "#54b061",
+        "type": "color"
+      },
+      "13": {
+        "value": "#cbe7cf",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#000401",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "1": {
+        "value": "#2e1508",
+        "type": "color"
+      },
+      "2": {
+        "value": "#3a1b0a",
+        "type": "color"
+      },
+      "3": {
+        "value": "#50240d",
+        "type": "color"
+      },
+      "4": {
+        "value": "#652e10",
+        "type": "color"
+      },
+      "5": {
+        "value": "#7a3814",
+        "type": "color"
+      },
+      "6": {
+        "value": "#863d16",
+        "type": "color"
+      },
+      "7": {
+        "value": "#b5531e",
+        "type": "color"
+      },
+      "8": {
+        "value": "#e6b398",
+        "type": "color"
+      },
+      "9": {
+        "value": "#c95c21",
+        "type": "color"
+      },
+      "10": {
+        "value": "#a94d1c",
+        "type": "color"
+      },
+      "11": {
+        "value": "#8a3f17",
+        "type": "color"
+      },
+      "12": {
+        "value": "#d98a5f",
+        "type": "color"
+      },
+      "13": {
+        "value": "#f3dbcd",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#0d0602",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "1": {
+        "value": "#251238",
+        "type": "color"
+      },
+      "2": {
+        "value": "#301748",
+        "type": "color"
+      },
+      "3": {
+        "value": "#402060",
+        "type": "color"
+      },
+      "4": {
+        "value": "#52287a",
+        "type": "color"
+      },
+      "5": {
+        "value": "#643196",
+        "type": "color"
+      },
+      "6": {
+        "value": "#6b399d",
+        "type": "color"
+      },
+      "7": {
+        "value": "#865daf",
+        "type": "color"
+      },
+      "8": {
+        "value": "#c9b7db",
+        "type": "color"
+      },
+      "9": {
+        "value": "#663399",
+        "type": "color"
+      },
+      "10": {
+        "value": "#4f2777",
+        "type": "color"
+      },
+      "11": {
+        "value": "#381b54",
+        "type": "color"
+      },
+      "12": {
+        "value": "#ae93c9",
+        "type": "color"
+      },
+      "13": {
+        "value": "#e4dbed",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#eee8f3",
+        "type": "color"
+      }
+    },
+    "red": {
+      "1": {
+        "value": "#3b0808",
+        "type": "color"
+      },
+      "2": {
+        "value": "#4b0a0a",
+        "type": "color"
+      },
+      "3": {
+        "value": "#620e0e",
+        "type": "color"
+      },
+      "4": {
+        "value": "#7c1212",
+        "type": "color"
+      },
+      "5": {
+        "value": "#961515",
+        "type": "color"
+      },
+      "6": {
+        "value": "#a31717",
+        "type": "color"
+      },
+      "7": {
+        "value": "#c93c3c",
+        "type": "color"
+      },
+      "8": {
+        "value": "#e9b0b0",
+        "type": "color"
+      },
+      "9": {
+        "value": "#bf1b1b",
+        "type": "color"
+      },
+      "10": {
+        "value": "#9a1616",
+        "type": "color"
+      },
+      "11": {
+        "value": "#771111",
+        "type": "color"
+      },
+      "12": {
+        "value": "#dd8585",
+        "type": "color"
+      },
+      "13": {
+        "value": "#f5d9d9",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fffefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#f6dfdf",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "1": {
+        "value": "#221b06",
+        "type": "color"
+      },
+      "2": {
+        "value": "#2b2307",
+        "type": "color"
+      },
+      "3": {
+        "value": "#3a300a",
+        "type": "color"
+      },
+      "4": {
+        "value": "#4a3d0d",
+        "type": "color"
+      },
+      "5": {
+        "value": "#5a4a0f",
+        "type": "color"
+      },
+      "6": {
+        "value": "#635011",
+        "type": "color"
+      },
+      "7": {
+        "value": "#856d17",
+        "type": "color"
+      },
+      "8": {
+        "value": "#e4ba27",
+        "type": "color"
+      },
+      "9": {
+        "value": "#eabf28",
+        "type": "color"
+      },
+      "10": {
+        "value": "#d0aa24",
+        "type": "color"
+      },
+      "11": {
+        "value": "#b7951f",
+        "type": "color"
+      },
+      "12": {
+        "value": "#bd9a20",
+        "type": "color"
+      },
+      "13": {
+        "value": "#f4de8f",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#382d0a",
+        "type": "color"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json
new file mode 100644
index 0000000000..e09aa09fec
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json
@@ -0,0 +1,314 @@
+{
+  "<theme>": {
+    "accent": {
+      "1": {
+        "value": "#001c36",
+        "type": "color"
+      },
+      "2": {
+        "value": "#002445",
+        "type": "color"
+      },
+      "3": {
+        "value": "#00315c",
+        "type": "color"
+      },
+      "4": {
+        "value": "#003d75",
+        "type": "color"
+      },
+      "5": {
+        "value": "#004b8f",
+        "type": "color"
+      },
+      "6": {
+        "value": "#00529d",
+        "type": "color"
+      },
+      "7": {
+        "value": "#1972c1",
+        "type": "color"
+      },
+      "8": {
+        "value": "#9cc2e4",
+        "type": "color"
+      },
+      "9": {
+        "value": "#0062BA",
+        "type": "color"
+      },
+      "10": {
+        "value": "#005099",
+        "type": "color"
+      },
+      "11": {
+        "value": "#003d75",
+        "type": "color"
+      },
+      "12": {
+        "value": "#69a2d6",
+        "type": "color"
+      },
+      "13": {
+        "value": "#cee1f2",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#ddeaf6",
+        "type": "color"
+      }
+    },
+    "neutral": {
+      "1": {
+        "value": "#131c27",
+        "type": "color"
+      },
+      "2": {
+        "value": "#192433",
+        "type": "color"
+      },
+      "3": {
+        "value": "#243142",
+        "type": "color"
+      },
+      "4": {
+        "value": "#333e4e",
+        "type": "color"
+      },
+      "5": {
+        "value": "#424d5b",
+        "type": "color"
+      },
+      "6": {
+        "value": "#495361",
+        "type": "color"
+      },
+      "7": {
+        "value": "#67707c",
+        "type": "color"
+      },
+      "8": {
+        "value": "#bbbfc4",
+        "type": "color"
+      },
+      "9": {
+        "value": "#1E2B3C",
+        "type": "color"
+      },
+      "10": {
+        "value": "#303c4b",
+        "type": "color"
+      },
+      "11": {
+        "value": "#444e5d",
+        "type": "color"
+      },
+      "12": {
+        "value": "#989ea5",
+        "type": "color"
+      },
+      "13": {
+        "value": "#dddfe1",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#bbbfc4",
+        "type": "color"
+      }
+    },
+    "brand1": {
+      "1": {
+        "value": "#2f1213",
+        "type": "color"
+      },
+      "2": {
+        "value": "#3c1819",
+        "type": "color"
+      },
+      "3": {
+        "value": "#522021",
+        "type": "color"
+      },
+      "4": {
+        "value": "#68292a",
+        "type": "color"
+      },
+      "5": {
+        "value": "#7f3234",
+        "type": "color"
+      },
+      "6": {
+        "value": "#8b3639",
+        "type": "color"
+      },
+      "7": {
+        "value": "#bc494c",
+        "type": "color"
+      },
+      "8": {
+        "value": "#f9a9ab",
+        "type": "color"
+      },
+      "9": {
+        "value": "#F45F63",
+        "type": "color"
+      },
+      "10": {
+        "value": "#d15155",
+        "type": "color"
+      },
+      "11": {
+        "value": "#b04447",
+        "type": "color"
+      },
+      "12": {
+        "value": "#f67679",
+        "type": "color"
+      },
+      "13": {
+        "value": "#fcd5d6",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#000000",
+        "type": "color"
+      }
+    },
+    "brand2": {
+      "1": {
+        "value": "#231a05",
+        "type": "color"
+      },
+      "2": {
+        "value": "#2d2206",
+        "type": "color"
+      },
+      "3": {
+        "value": "#3d2e09",
+        "type": "color"
+      },
+      "4": {
+        "value": "#4f3b0b",
+        "type": "color"
+      },
+      "5": {
+        "value": "#60470d",
+        "type": "color"
+      },
+      "6": {
+        "value": "#684e0f",
+        "type": "color"
+      },
+      "7": {
+        "value": "#8e6914",
+        "type": "color"
+      },
+      "8": {
+        "value": "#e9b742",
+        "type": "color"
+      },
+      "9": {
+        "value": "#E5AA20",
+        "type": "color"
+      },
+      "10": {
+        "value": "#c9951c",
+        "type": "color"
+      },
+      "11": {
+        "value": "#ae8118",
+        "type": "color"
+      },
+      "12": {
+        "value": "#c9951c",
+        "type": "color"
+      },
+      "13": {
+        "value": "#f5dda7",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#2b2006",
+        "type": "color"
+      }
+    },
+    "brand3": {
+      "1": {
+        "value": "#061d30",
+        "type": "color"
+      },
+      "2": {
+        "value": "#07253c",
+        "type": "color"
+      },
+      "3": {
+        "value": "#0a3251",
+        "type": "color"
+      },
+      "4": {
+        "value": "#0d4068",
+        "type": "color"
+      },
+      "5": {
+        "value": "#0f4e7f",
+        "type": "color"
+      },
+      "6": {
+        "value": "#11558a",
+        "type": "color"
+      },
+      "7": {
+        "value": "#1773b9",
+        "type": "color"
+      },
+      "8": {
+        "value": "#81c5f9",
+        "type": "color"
+      },
+      "9": {
+        "value": "#1E98F5",
+        "type": "color"
+      },
+      "10": {
+        "value": "#1a83d3",
+        "type": "color"
+      },
+      "11": {
+        "value": "#166eb2",
+        "type": "color"
+      },
+      "12": {
+        "value": "#38a4f6",
+        "type": "color"
+      },
+      "13": {
+        "value": "#c4e4fc",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#010407",
+        "type": "color"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json
new file mode 100644
index 0000000000..4e3c7330d5
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json
@@ -0,0 +1,376 @@
+{
+  "global": {
+    "blue": {
+      "1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "2": {
+        "value": "#edf5fa",
+        "type": "color"
+      },
+      "3": {
+        "value": "#d3e5f4",
+        "type": "color"
+      },
+      "4": {
+        "value": "#b7d5ed",
+        "type": "color"
+      },
+      "5": {
+        "value": "#9bc5e5",
+        "type": "color"
+      },
+      "6": {
+        "value": "#94c1e3",
+        "type": "color"
+      },
+      "7": {
+        "value": "#2f86c9",
+        "type": "color"
+      },
+      "8": {
+        "value": "#075089",
+        "type": "color"
+      },
+      "9": {
+        "value": "#0c72c1",
+        "type": "color"
+      },
+      "10": {
+        "value": "#085ea0",
+        "type": "color"
+      },
+      "11": {
+        "value": "#074b80",
+        "type": "color"
+      },
+      "12": {
+        "value": "#0966ac",
+        "type": "color"
+      },
+      "13": {
+        "value": "#043256",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#f3f8fc",
+        "type": "color"
+      }
+    },
+    "green": {
+      "1": {
+        "value": "#fcfefc",
+        "type": "color"
+      },
+      "2": {
+        "value": "#ecf6ed",
+        "type": "color"
+      },
+      "3": {
+        "value": "#cfe9d3",
+        "type": "color"
+      },
+      "4": {
+        "value": "#b3dcb8",
+        "type": "color"
+      },
+      "5": {
+        "value": "#95ce9d",
+        "type": "color"
+      },
+      "6": {
+        "value": "#8bca94",
+        "type": "color"
+      },
+      "7": {
+        "value": "#189528",
+        "type": "color"
+      },
+      "8": {
+        "value": "#045a10",
+        "type": "color"
+      },
+      "9": {
+        "value": "#078d19",
+        "type": "color"
+      },
+      "10": {
+        "value": "#067615",
+        "type": "color"
+      },
+      "11": {
+        "value": "#056011",
+        "type": "color"
+      },
+      "12": {
+        "value": "#067314",
+        "type": "color"
+      },
+      "13": {
+        "value": "#03380a",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#000401",
+        "type": "color"
+      }
+    },
+    "orange": {
+      "1": {
+        "value": "#fffefd",
+        "type": "color"
+      },
+      "2": {
+        "value": "#fbf1ec",
+        "type": "color"
+      },
+      "3": {
+        "value": "#f4ddd0",
+        "type": "color"
+      },
+      "4": {
+        "value": "#eecab7",
+        "type": "color"
+      },
+      "5": {
+        "value": "#e7b69c",
+        "type": "color"
+      },
+      "6": {
+        "value": "#e5b094",
+        "type": "color"
+      },
+      "7": {
+        "value": "#cc632b",
+        "type": "color"
+      },
+      "8": {
+        "value": "#7e3a15",
+        "type": "color"
+      },
+      "9": {
+        "value": "#c95c21",
+        "type": "color"
+      },
+      "10": {
+        "value": "#a94d1c",
+        "type": "color"
+      },
+      "11": {
+        "value": "#8a3f17",
+        "type": "color"
+      },
+      "12": {
+        "value": "#a1491a",
+        "type": "color"
+      },
+      "13": {
+        "value": "#50240d",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#0d0602",
+        "type": "color"
+      }
+    },
+    "purple": {
+      "1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "2": {
+        "value": "#f5f2f9",
+        "type": "color"
+      },
+      "3": {
+        "value": "#e7dfef",
+        "type": "color"
+      },
+      "4": {
+        "value": "#d9cce6",
+        "type": "color"
+      },
+      "5": {
+        "value": "#ccbadd",
+        "type": "color"
+      },
+      "6": {
+        "value": "#c7b4da",
+        "type": "color"
+      },
+      "7": {
+        "value": "#9572b9",
+        "type": "color"
+      },
+      "8": {
+        "value": "#663399",
+        "type": "color"
+      },
+      "9": {
+        "value": "#663399",
+        "type": "color"
+      },
+      "10": {
+        "value": "#4f2777",
+        "type": "color"
+      },
+      "11": {
+        "value": "#381b54",
+        "type": "color"
+      },
+      "12": {
+        "value": "#7b4ea7",
+        "type": "color"
+      },
+      "13": {
+        "value": "#402060",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#eee8f3",
+        "type": "color"
+      }
+    },
+    "red": {
+      "1": {
+        "value": "#fffefe",
+        "type": "color"
+      },
+      "2": {
+        "value": "#fbf1f1",
+        "type": "color"
+      },
+      "3": {
+        "value": "#f5dcdc",
+        "type": "color"
+      },
+      "4": {
+        "value": "#f0c7c7",
+        "type": "color"
+      },
+      "5": {
+        "value": "#eab3b3",
+        "type": "color"
+      },
+      "6": {
+        "value": "#e8acac",
+        "type": "color"
+      },
+      "7": {
+        "value": "#d25b5b",
+        "type": "color"
+      },
+      "8": {
+        "value": "#9a1616",
+        "type": "color"
+      },
+      "9": {
+        "value": "#bf1b1b",
+        "type": "color"
+      },
+      "10": {
+        "value": "#9a1616",
+        "type": "color"
+      },
+      "11": {
+        "value": "#771111",
+        "type": "color"
+      },
+      "12": {
+        "value": "#c22020",
+        "type": "color"
+      },
+      "13": {
+        "value": "#620e0e",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fffefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#f6dfdf",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "1": {
+        "value": "#fffefc",
+        "type": "color"
+      },
+      "2": {
+        "value": "#fbf2d3",
+        "type": "color"
+      },
+      "3": {
+        "value": "#f5e19b",
+        "type": "color"
+      },
+      "4": {
+        "value": "#efcf5d",
+        "type": "color"
+      },
+      "5": {
+        "value": "#e6bc27",
+        "type": "color"
+      },
+      "6": {
+        "value": "#e0b726",
+        "type": "color"
+      },
+      "7": {
+        "value": "#9a7e1a",
+        "type": "color"
+      },
+      "8": {
+        "value": "#5d4c10",
+        "type": "color"
+      },
+      "9": {
+        "value": "#eabf28",
+        "type": "color"
+      },
+      "10": {
+        "value": "#d0aa24",
+        "type": "color"
+      },
+      "11": {
+        "value": "#b7951f",
+        "type": "color"
+      },
+      "12": {
+        "value": "#776114",
+        "type": "color"
+      },
+      "13": {
+        "value": "#3a300a",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#382d0a",
+        "type": "color"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json
new file mode 100644
index 0000000000..ba2b9b9190
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json
@@ -0,0 +1,314 @@
+{
+  "<theme>": {
+    "accent": {
+      "1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "2": {
+        "value": "#eef4fa",
+        "type": "color"
+      },
+      "3": {
+        "value": "#d4e5f3",
+        "type": "color"
+      },
+      "4": {
+        "value": "#bad5ec",
+        "type": "color"
+      },
+      "5": {
+        "value": "#a1c5e5",
+        "type": "color"
+      },
+      "6": {
+        "value": "#97bfe3",
+        "type": "color"
+      },
+      "7": {
+        "value": "#3a85ca",
+        "type": "color"
+      },
+      "8": {
+        "value": "#004d93",
+        "type": "color"
+      },
+      "9": {
+        "value": "#0062BA",
+        "type": "color"
+      },
+      "10": {
+        "value": "#005099",
+        "type": "color"
+      },
+      "11": {
+        "value": "#003d75",
+        "type": "color"
+      },
+      "12": {
+        "value": "#0163ba",
+        "type": "color"
+      },
+      "13": {
+        "value": "#00315c",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefeff",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#ddeaf6",
+        "type": "color"
+      }
+    },
+    "neutral": {
+      "1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "2": {
+        "value": "#f3f4f5",
+        "type": "color"
+      },
+      "3": {
+        "value": "#e1e3e5",
+        "type": "color"
+      },
+      "4": {
+        "value": "#ced1d4",
+        "type": "color"
+      },
+      "5": {
+        "value": "#bdc1c6",
+        "type": "color"
+      },
+      "6": {
+        "value": "#b8bcc1",
+        "type": "color"
+      },
+      "7": {
+        "value": "#7a818c",
+        "type": "color"
+      },
+      "8": {
+        "value": "#444e5d",
+        "type": "color"
+      },
+      "9": {
+        "value": "#1E2B3C",
+        "type": "color"
+      },
+      "10": {
+        "value": "#303c4b",
+        "type": "color"
+      },
+      "11": {
+        "value": "#444e5d",
+        "type": "color"
+      },
+      "12": {
+        "value": "#5b6471",
+        "type": "color"
+      },
+      "13": {
+        "value": "#243142",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#fefefe",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#bbbfc4",
+        "type": "color"
+      }
+    },
+    "brand1": {
+      "1": {
+        "value": "#fffefe",
+        "type": "color"
+      },
+      "2": {
+        "value": "#fef0f1",
+        "type": "color"
+      },
+      "3": {
+        "value": "#fcdadb",
+        "type": "color"
+      },
+      "4": {
+        "value": "#fbc4c5",
+        "type": "color"
+      },
+      "5": {
+        "value": "#f9adaf",
+        "type": "color"
+      },
+      "6": {
+        "value": "#f9a5a7",
+        "type": "color"
+      },
+      "7": {
+        "value": "#d95558",
+        "type": "color"
+      },
+      "8": {
+        "value": "#843336",
+        "type": "color"
+      },
+      "9": {
+        "value": "#F45F63",
+        "type": "color"
+      },
+      "10": {
+        "value": "#d15155",
+        "type": "color"
+      },
+      "11": {
+        "value": "#b04447",
+        "type": "color"
+      },
+      "12": {
+        "value": "#a84144",
+        "type": "color"
+      },
+      "13": {
+        "value": "#522021",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#000000",
+        "type": "color"
+      }
+    },
+    "brand2": {
+      "1": {
+        "value": "#fffefc",
+        "type": "color"
+      },
+      "2": {
+        "value": "#fbf3e0",
+        "type": "color"
+      },
+      "3": {
+        "value": "#f5dfac",
+        "type": "color"
+      },
+      "4": {
+        "value": "#f0ce7e",
+        "type": "color"
+      },
+      "5": {
+        "value": "#eaba4a",
+        "type": "color"
+      },
+      "6": {
+        "value": "#e8b338",
+        "type": "color"
+      },
+      "7": {
+        "value": "#a57a17",
+        "type": "color"
+      },
+      "8": {
+        "value": "#634a0e",
+        "type": "color"
+      },
+      "9": {
+        "value": "#E5AA20",
+        "type": "color"
+      },
+      "10": {
+        "value": "#c9951c",
+        "type": "color"
+      },
+      "11": {
+        "value": "#ae8118",
+        "type": "color"
+      },
+      "12": {
+        "value": "#7e5d12",
+        "type": "color"
+      },
+      "13": {
+        "value": "#3d2e09",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#2b2006",
+        "type": "color"
+      }
+    },
+    "brand3": {
+      "1": {
+        "value": "#fdfeff",
+        "type": "color"
+      },
+      "2": {
+        "value": "#eaf6fe",
+        "type": "color"
+      },
+      "3": {
+        "value": "#c8e6fd",
+        "type": "color"
+      },
+      "4": {
+        "value": "#a9d7fb",
+        "type": "color"
+      },
+      "5": {
+        "value": "#84c7fa",
+        "type": "color"
+      },
+      "6": {
+        "value": "#7ac2f9",
+        "type": "color"
+      },
+      "7": {
+        "value": "#1a85d6",
+        "type": "color"
+      },
+      "8": {
+        "value": "#105082",
+        "type": "color"
+      },
+      "9": {
+        "value": "#1E98F5",
+        "type": "color"
+      },
+      "10": {
+        "value": "#1a83d3",
+        "type": "color"
+      },
+      "11": {
+        "value": "#166eb2",
+        "type": "color"
+      },
+      "12": {
+        "value": "#1466a5",
+        "type": "color"
+      },
+      "13": {
+        "value": "#0a3251",
+        "type": "color"
+      },
+      "contrast-1": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "contrast-2": {
+        "value": "#010407",
+        "type": "color"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json b/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json
new file mode 100644
index 0000000000..ba9a158aa2
--- /dev/null
+++ b/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json
@@ -0,0 +1,314 @@
+{
+  "color": {
+    "accent": {
+      "1": {
+        "type": "color",
+        "value": "{<theme>.accent.1}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{<theme>.accent.2}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{<theme>.accent.3}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{<theme>.accent.4}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{<theme>.accent.5}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{<theme>.accent.6}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{<theme>.accent.7}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{<theme>.accent.8}"
+      },
+      "9": {
+        "type": "color",
+        "value": "{<theme>.accent.9}"
+      },
+      "10": {
+        "type": "color",
+        "value": "{<theme>.accent.10}"
+      },
+      "11": {
+        "type": "color",
+        "value": "{<theme>.accent.11}"
+      },
+      "12": {
+        "type": "color",
+        "value": "{<theme>.accent.12}"
+      },
+      "13": {
+        "type": "color",
+        "value": "{<theme>.accent.13}"
+      },
+      "contrast-1": {
+        "type": "color",
+        "value": "{<theme>.accent.contrast-1}"
+      },
+      "contrast-2": {
+        "type": "color",
+        "value": "{<theme>.accent.contrast-2}"
+      }
+    },
+    "neutral": {
+      "1": {
+        "type": "color",
+        "value": "{<theme>.neutral.1}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{<theme>.neutral.2}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{<theme>.neutral.3}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{<theme>.neutral.4}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{<theme>.neutral.5}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{<theme>.neutral.6}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{<theme>.neutral.7}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{<theme>.neutral.8}"
+      },
+      "9": {
+        "type": "color",
+        "value": "{<theme>.neutral.9}"
+      },
+      "10": {
+        "type": "color",
+        "value": "{<theme>.neutral.10}"
+      },
+      "11": {
+        "type": "color",
+        "value": "{<theme>.neutral.11}"
+      },
+      "12": {
+        "type": "color",
+        "value": "{<theme>.neutral.12}"
+      },
+      "13": {
+        "type": "color",
+        "value": "{<theme>.neutral.13}"
+      },
+      "contrast-1": {
+        "type": "color",
+        "value": "{<theme>.neutral.contrast-1}"
+      },
+      "contrast-2": {
+        "type": "color",
+        "value": "{<theme>.neutral.contrast-2}"
+      }
+    },
+    "brand1": {
+      "1": {
+        "type": "color",
+        "value": "{<theme>.brand1.1}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{<theme>.brand1.2}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{<theme>.brand1.3}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{<theme>.brand1.4}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{<theme>.brand1.5}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{<theme>.brand1.6}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{<theme>.brand1.7}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{<theme>.brand1.8}"
+      },
+      "9": {
+        "type": "color",
+        "value": "{<theme>.brand1.9}"
+      },
+      "10": {
+        "type": "color",
+        "value": "{<theme>.brand1.10}"
+      },
+      "11": {
+        "type": "color",
+        "value": "{<theme>.brand1.11}"
+      },
+      "12": {
+        "type": "color",
+        "value": "{<theme>.brand1.12}"
+      },
+      "13": {
+        "type": "color",
+        "value": "{<theme>.brand1.13}"
+      },
+      "contrast-1": {
+        "type": "color",
+        "value": "{<theme>.brand1.contrast-1}"
+      },
+      "contrast-2": {
+        "type": "color",
+        "value": "{<theme>.brand1.contrast-2}"
+      }
+    },
+    "brand2": {
+      "1": {
+        "type": "color",
+        "value": "{<theme>.brand2.1}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{<theme>.brand2.2}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{<theme>.brand2.3}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{<theme>.brand2.4}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{<theme>.brand2.5}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{<theme>.brand2.6}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{<theme>.brand2.7}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{<theme>.brand2.8}"
+      },
+      "9": {
+        "type": "color",
+        "value": "{<theme>.brand2.9}"
+      },
+      "10": {
+        "type": "color",
+        "value": "{<theme>.brand2.10}"
+      },
+      "11": {
+        "type": "color",
+        "value": "{<theme>.brand2.11}"
+      },
+      "12": {
+        "type": "color",
+        "value": "{<theme>.brand2.12}"
+      },
+      "13": {
+        "type": "color",
+        "value": "{<theme>.brand2.13}"
+      },
+      "contrast-1": {
+        "type": "color",
+        "value": "{<theme>.brand2.contrast-1}"
+      },
+      "contrast-2": {
+        "type": "color",
+        "value": "{<theme>.brand2.contrast-2}"
+      }
+    },
+    "brand3": {
+      "1": {
+        "type": "color",
+        "value": "{<theme>.brand3.1}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{<theme>.brand3.2}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{<theme>.brand3.3}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{<theme>.brand3.4}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{<theme>.brand3.5}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{<theme>.brand3.6}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{<theme>.brand3.7}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{<theme>.brand3.8}"
+      },
+      "9": {
+        "type": "color",
+        "value": "{<theme>.brand3.9}"
+      },
+      "10": {
+        "type": "color",
+        "value": "{<theme>.brand3.10}"
+      },
+      "11": {
+        "type": "color",
+        "value": "{<theme>.brand3.11}"
+      },
+      "12": {
+        "type": "color",
+        "value": "{<theme>.brand3.12}"
+      },
+      "13": {
+        "type": "color",
+        "value": "{<theme>.brand3.13}"
+      },
+      "contrast-1": {
+        "type": "color",
+        "value": "{<theme>.brand3.contrast-1}"
+      },
+      "contrast-2": {
+        "type": "color",
+        "value": "{<theme>.brand3.contrast-2}"
+      }
+    }
+  }
+}
diff --git a/packages/create-tokens/template/template-files/package.json b/packages/create-tokens/template/template-files/package.json
new file mode 100644
index 0000000000..3896e6fbc3
--- /dev/null
+++ b/packages/create-tokens/template/template-files/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "package-name-here",
+  "version": "1.0.0",
+  "description": "CSS variables for @digdir/designsystemet",
+  "type": "module",
+  "main": "dist/<default-theme>",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./*": "./dist/*"
+  },
+  "scripts": {
+    "build": "npm run clean && designsystemet tokens -o ./dist",
+    "clean": "rimraf dist"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@digdir/designsystemet": "^0.1.0-alpha.7",
+    "rimraf": "^5.0.7"
+  }
+}
diff --git a/packages/create-tokens/tsconfig.json b/packages/create-tokens/tsconfig.json
new file mode 100644
index 0000000000..04f45c2126
--- /dev/null
+++ b/packages/create-tokens/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": false
+  },
+  "rootDir": "./src",
+  "include": ["src", "template"]
+}
diff --git a/yarn.lock b/yarn.lock
index f7aa674981..34bf9f9adb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2198,6 +2198,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@digdir/create-tokens@workspace:packages/create-tokens":
+  version: 0.0.0-use.local
+  resolution: "@digdir/create-tokens@workspace:packages/create-tokens"
+  dependencies:
+    "@commander-js/extra-typings": "npm:^12.0.1"
+    "@tokens-studio/types": "npm:^0.4.0"
+    "@types/prompts": "npm:^2.4.9"
+    change-case: "npm:^5.3.0"
+    commander: "npm:^12.0.0"
+    kleur: "npm:^3.0.3"
+    prompts: "npm:^2.4.0"
+    tsx: "npm:^4.11.2"
+  bin:
+    create-tokens: index.js
+  languageName: unknown
+  linkType: soft
+
 "@digdir/design-system-react@workspace:packages/react-old":
   version: 0.0.0-use.local
   resolution: "@digdir/design-system-react@workspace:packages/react-old"
@@ -6812,6 +6829,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prompts@npm:^2.4.9":
+  version: 2.4.9
+  resolution: "@types/prompts@npm:2.4.9"
+  dependencies:
+    "@types/node": "npm:*"
+    kleur: "npm:^3.0.3"
+  checksum: 10/69b8372f4c790b45fea16a46ff8d1bcc71b14579481776b67bd6263637118a7ecb1f12e1311506c29fadc81bf618dc64f1a91f903cfd5be67a0455a227b3e462
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0":
   version: 15.7.5
   resolution: "@types/prop-types@npm:15.7.5"