From 4b19c5f68829c1da0941c053409057096649af94 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Thu, 21 May 2026 15:56:15 -0400
Subject: [PATCH 1/5] use directories to control output files

---
 build/css/spacing.css                         |  2 +-
 build/scss/_spacing.scss                      |  2 +-
 config/style-dictionary.config.js             | 32 ++++---------------
 internals/token-helpers/index.test.ts         |  6 ++--
 internals/token-helpers/index.ts              | 23 ++-----------
 .../breakpoints.json                          |  0
 .../{color => colors}/black-transparent.json  |  0
 tokens/{color => colors}/blue-cool.json       |  0
 tokens/{color => colors}/blue-warm.json       |  0
 tokens/{color => colors}/blue.json            |  0
 tokens/{color => colors}/cyan.json            |  0
 tokens/{color => colors}/global.json          |  0
 tokens/{color => colors}/gold.json            |  0
 tokens/{color => colors}/gray-cool.json       |  0
 tokens/{color => colors}/gray-warm.json       |  0
 tokens/{color => colors}/gray.json            |  0
 tokens/{color => colors}/green-cool.json      |  0
 tokens/{color => colors}/green-warm.json      |  0
 tokens/{color => colors}/green.json           |  0
 tokens/{color => colors}/indigo-cool.json     |  0
 tokens/{color => colors}/indigo-warm.json     |  0
 tokens/{color => colors}/indigo.json          |  0
 tokens/{color => colors}/magenta.json         |  0
 tokens/{color => colors}/mint-cool.json       |  0
 tokens/{color => colors}/mint.json            |  0
 tokens/{color => colors}/orange-warm.json     |  0
 tokens/{color => colors}/orange.json          |  0
 tokens/{color => colors}/red-cool.json        |  0
 tokens/{color => colors}/red-warm.json        |  0
 tokens/{color => colors}/red.json             |  0
 tokens/{color => colors}/violet-warm.json     |  0
 tokens/{color => colors}/violet.json          |  0
 .../{color => colors}/white-transparent.json  |  0
 tokens/{color => colors}/yellow.json          |  0
 tokens/index.js                               |  8 +++++
 tokens/{dimension => spacing}/spacing.json    |  0
 36 files changed, 22 insertions(+), 51 deletions(-)
 rename tokens/{dimension => breakpoints}/breakpoints.json (100%)
 rename tokens/{color => colors}/black-transparent.json (100%)
 rename tokens/{color => colors}/blue-cool.json (100%)
 rename tokens/{color => colors}/blue-warm.json (100%)
 rename tokens/{color => colors}/blue.json (100%)
 rename tokens/{color => colors}/cyan.json (100%)
 rename tokens/{color => colors}/global.json (100%)
 rename tokens/{color => colors}/gold.json (100%)
 rename tokens/{color => colors}/gray-cool.json (100%)
 rename tokens/{color => colors}/gray-warm.json (100%)
 rename tokens/{color => colors}/gray.json (100%)
 rename tokens/{color => colors}/green-cool.json (100%)
 rename tokens/{color => colors}/green-warm.json (100%)
 rename tokens/{color => colors}/green.json (100%)
 rename tokens/{color => colors}/indigo-cool.json (100%)
 rename tokens/{color => colors}/indigo-warm.json (100%)
 rename tokens/{color => colors}/indigo.json (100%)
 rename tokens/{color => colors}/magenta.json (100%)
 rename tokens/{color => colors}/mint-cool.json (100%)
 rename tokens/{color => colors}/mint.json (100%)
 rename tokens/{color => colors}/orange-warm.json (100%)
 rename tokens/{color => colors}/orange.json (100%)
 rename tokens/{color => colors}/red-cool.json (100%)
 rename tokens/{color => colors}/red-warm.json (100%)
 rename tokens/{color => colors}/red.json (100%)
 rename tokens/{color => colors}/violet-warm.json (100%)
 rename tokens/{color => colors}/violet.json (100%)
 rename tokens/{color => colors}/white-transparent.json (100%)
 rename tokens/{color => colors}/yellow.json (100%)
 create mode 100644 tokens/index.js
 rename tokens/{dimension => spacing}/spacing.json (100%)

diff --git a/build/css/spacing.css b/build/css/spacing.css
index 9c7ce6ae..a125686c 100644
--- a/build/css/spacing.css
+++ b/build/css/spacing.css
@@ -9,7 +9,7 @@
   --usa-spacing-4: 2rem;
   --usa-spacing-5: 2.5rem;
   --usa-spacing-6: 3rem;
-  --usa-spacing-05: .025rem;
+  --usa-spacing-05: .25rem;
   --usa-site-margins-mobile-width: 1rem;
   --usa-site-margins-width: 2rem;
   --usa-size-touch-target: 3rem;
diff --git a/build/scss/_spacing.scss b/build/scss/_spacing.scss
index f17d45b2..19561704 100644
--- a/build/scss/_spacing.scss
+++ b/build/scss/_spacing.scss
@@ -7,7 +7,7 @@ $usa-spacing-3: 1.5rem;
 $usa-spacing-4: 2rem;
 $usa-spacing-5: 2.5rem;
 $usa-spacing-6: 3rem;
-$usa-spacing-05: .025rem;
+$usa-spacing-05: .25rem;
 $usa-site-margins-mobile-width: 1rem;
 $usa-site-margins-width: 2rem;
 $usa-size-touch-target: 3rem;
diff --git a/config/style-dictionary.config.js b/config/style-dictionary.config.js
index 0970cab5..4d5f5cf1 100644
--- a/config/style-dictionary.config.js
+++ b/config/style-dictionary.config.js
@@ -1,4 +1,5 @@
 import StyleDictionary from "style-dictionary";
+import tokenGroups from "../tokens/index.js";
 import {
   generateTokenName,
   getTokenValueWithUnit,
@@ -16,25 +17,6 @@ StyleDictionary.registerTransform({
   transform: getTokenValueWithUnit,
 });
 
-const outputs = [
-  {
-    name: "breakpoints",
-    filter: (token) => token.path[0] === "breakpoint",
-  },
-  {
-    name: "colors",
-    filter: (token) =>
-      token.filePath && token.filePath.includes("tokens/color/"),
-  },
-  {
-    name: "spacing",
-    filter: (token) =>
-      token.path[0] === "spacing" ||
-      token.path[0] === "site-margins" ||
-      token.path[0] === "size",
-  },
-];
-
 export default {
   source: ["tokens/**/*.json"],
   platforms: {
@@ -42,20 +24,20 @@ export default {
       transforms: ["name/uswds-theme", "value/uswds-units"],
       prefix: "usa",
       buildPath: "build/scss/",
-      files: outputs.map(({ name, filter }) => ({
-        destination: `_${name}.scss`,
+      files: tokenGroups.map((group) => ({
+        destination: `_${group}.scss`,
         format: "scss/variables",
-        filter,
+        filter: (token) => token.filePath.includes(`tokens/${group}/`),
       })),
     },
     css: {
       transforms: ["name/uswds-theme", "value/uswds-units"],
       prefix: "usa",
       buildPath: "build/css/",
-      files: outputs.map(({ name, filter }) => ({
-        destination: `${name}.css`,
+      files: tokenGroups.map((group) => ({
+        destination: `${group}.css`,
         format: "css/variables",
-        filter,
+        filter: (token) => token.filePath.includes(`tokens/${group}/`),
       })),
     },
   },
diff --git a/internals/token-helpers/index.test.ts b/internals/token-helpers/index.test.ts
index 861c82fd..2bea2b4e 100644
--- a/internals/token-helpers/index.test.ts
+++ b/internals/token-helpers/index.test.ts
@@ -5,7 +5,7 @@ import { generateTokenName, getTokenValueWithUnit } from "./index";
 describe("generateTokenName", () => {
   const token: TransformedToken = {
     $value: { value: "75", unit: "rem" },
-    filePath: "tokens/dimension/breakpoints.json",
+    filePath: "tokens/breakpoints/breakpoints.json",
     isSource: true,
     $type: "dimension",
     key: "{breakpoint.desktop-lg}",
@@ -45,7 +45,7 @@ describe("generateTokenName", () => {
   it("should generate token name for color directory with single path key", () => {
     const colorTokenSingle: TransformedToken = {
       ...token,
-      filePath: "tokens/color/primary.json",
+      filePath: "tokens/colors/primary.json",
       path: ["black"],
     };
     const result = generateTokenName(colorTokenSingle, options);
@@ -55,7 +55,7 @@ describe("generateTokenName", () => {
   it("should generate token name for color directory with multiple path keys", () => {
     const colorTokenMulti: TransformedToken = {
       ...token,
-      filePath: "tokens/color/primary.json",
+      filePath: "tokens/colors/primary.json",
       path: ["primary", "light"],
     };
     const result = generateTokenName(colorTokenMulti, options);
diff --git a/internals/token-helpers/index.ts b/internals/token-helpers/index.ts
index b796c29d..a5ca6933 100644
--- a/internals/token-helpers/index.ts
+++ b/internals/token-helpers/index.ts
@@ -4,28 +4,9 @@ export const generateTokenName = (
   token: TransformedToken,
   options: PlatformConfig,
 ) => {
-  if (token.path[0] === "spacing") {
-    return `${options.prefix}-spacing-${token.path[1]}`;
+  if (token.filePath?.includes("tokens/colors/")) {
+    return `${options.prefix}-color-${token.path.join("-")}`;
   }
-
-  if (token.path[0] === "breakpoint") {
-    return `${options.prefix}-breakpoint-${token.path[1]}`;
-  }
-
-  const isFromColorDirectory =
-    token.filePath && token.filePath.includes("tokens/color/");
-
-  if (isFromColorDirectory) {
-    if (
-      token.path.length === 1 &&
-      ["transparent", "black", "white"].includes(token.path[0])
-    ) {
-      return `${options.prefix}-color-${token.path[0]}`;
-    } else {
-      return `${options.prefix}-color-${token.path.join("-")}`;
-    }
-  }
-
   return `${options.prefix}-${token.path.join("-")}`;
 };
 
diff --git a/tokens/dimension/breakpoints.json b/tokens/breakpoints/breakpoints.json
similarity index 100%
rename from tokens/dimension/breakpoints.json
rename to tokens/breakpoints/breakpoints.json
diff --git a/tokens/color/black-transparent.json b/tokens/colors/black-transparent.json
similarity index 100%
rename from tokens/color/black-transparent.json
rename to tokens/colors/black-transparent.json
diff --git a/tokens/color/blue-cool.json b/tokens/colors/blue-cool.json
similarity index 100%
rename from tokens/color/blue-cool.json
rename to tokens/colors/blue-cool.json
diff --git a/tokens/color/blue-warm.json b/tokens/colors/blue-warm.json
similarity index 100%
rename from tokens/color/blue-warm.json
rename to tokens/colors/blue-warm.json
diff --git a/tokens/color/blue.json b/tokens/colors/blue.json
similarity index 100%
rename from tokens/color/blue.json
rename to tokens/colors/blue.json
diff --git a/tokens/color/cyan.json b/tokens/colors/cyan.json
similarity index 100%
rename from tokens/color/cyan.json
rename to tokens/colors/cyan.json
diff --git a/tokens/color/global.json b/tokens/colors/global.json
similarity index 100%
rename from tokens/color/global.json
rename to tokens/colors/global.json
diff --git a/tokens/color/gold.json b/tokens/colors/gold.json
similarity index 100%
rename from tokens/color/gold.json
rename to tokens/colors/gold.json
diff --git a/tokens/color/gray-cool.json b/tokens/colors/gray-cool.json
similarity index 100%
rename from tokens/color/gray-cool.json
rename to tokens/colors/gray-cool.json
diff --git a/tokens/color/gray-warm.json b/tokens/colors/gray-warm.json
similarity index 100%
rename from tokens/color/gray-warm.json
rename to tokens/colors/gray-warm.json
diff --git a/tokens/color/gray.json b/tokens/colors/gray.json
similarity index 100%
rename from tokens/color/gray.json
rename to tokens/colors/gray.json
diff --git a/tokens/color/green-cool.json b/tokens/colors/green-cool.json
similarity index 100%
rename from tokens/color/green-cool.json
rename to tokens/colors/green-cool.json
diff --git a/tokens/color/green-warm.json b/tokens/colors/green-warm.json
similarity index 100%
rename from tokens/color/green-warm.json
rename to tokens/colors/green-warm.json
diff --git a/tokens/color/green.json b/tokens/colors/green.json
similarity index 100%
rename from tokens/color/green.json
rename to tokens/colors/green.json
diff --git a/tokens/color/indigo-cool.json b/tokens/colors/indigo-cool.json
similarity index 100%
rename from tokens/color/indigo-cool.json
rename to tokens/colors/indigo-cool.json
diff --git a/tokens/color/indigo-warm.json b/tokens/colors/indigo-warm.json
similarity index 100%
rename from tokens/color/indigo-warm.json
rename to tokens/colors/indigo-warm.json
diff --git a/tokens/color/indigo.json b/tokens/colors/indigo.json
similarity index 100%
rename from tokens/color/indigo.json
rename to tokens/colors/indigo.json
diff --git a/tokens/color/magenta.json b/tokens/colors/magenta.json
similarity index 100%
rename from tokens/color/magenta.json
rename to tokens/colors/magenta.json
diff --git a/tokens/color/mint-cool.json b/tokens/colors/mint-cool.json
similarity index 100%
rename from tokens/color/mint-cool.json
rename to tokens/colors/mint-cool.json
diff --git a/tokens/color/mint.json b/tokens/colors/mint.json
similarity index 100%
rename from tokens/color/mint.json
rename to tokens/colors/mint.json
diff --git a/tokens/color/orange-warm.json b/tokens/colors/orange-warm.json
similarity index 100%
rename from tokens/color/orange-warm.json
rename to tokens/colors/orange-warm.json
diff --git a/tokens/color/orange.json b/tokens/colors/orange.json
similarity index 100%
rename from tokens/color/orange.json
rename to tokens/colors/orange.json
diff --git a/tokens/color/red-cool.json b/tokens/colors/red-cool.json
similarity index 100%
rename from tokens/color/red-cool.json
rename to tokens/colors/red-cool.json
diff --git a/tokens/color/red-warm.json b/tokens/colors/red-warm.json
similarity index 100%
rename from tokens/color/red-warm.json
rename to tokens/colors/red-warm.json
diff --git a/tokens/color/red.json b/tokens/colors/red.json
similarity index 100%
rename from tokens/color/red.json
rename to tokens/colors/red.json
diff --git a/tokens/color/violet-warm.json b/tokens/colors/violet-warm.json
similarity index 100%
rename from tokens/color/violet-warm.json
rename to tokens/colors/violet-warm.json
diff --git a/tokens/color/violet.json b/tokens/colors/violet.json
similarity index 100%
rename from tokens/color/violet.json
rename to tokens/colors/violet.json
diff --git a/tokens/color/white-transparent.json b/tokens/colors/white-transparent.json
similarity index 100%
rename from tokens/color/white-transparent.json
rename to tokens/colors/white-transparent.json
diff --git a/tokens/color/yellow.json b/tokens/colors/yellow.json
similarity index 100%
rename from tokens/color/yellow.json
rename to tokens/colors/yellow.json
diff --git a/tokens/index.js b/tokens/index.js
new file mode 100644
index 00000000..f0f6e531
--- /dev/null
+++ b/tokens/index.js
@@ -0,0 +1,8 @@
+import { readdirSync } from "node:fs";
+
+const dirs = (p) =>
+  readdirSync(p, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
+
+export default dirs(import.meta.dirname);
diff --git a/tokens/dimension/spacing.json b/tokens/spacing/spacing.json
similarity index 100%
rename from tokens/dimension/spacing.json
rename to tokens/spacing/spacing.json

From 6191e381b04a892b410fc42be1f26935b539f913 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <ethan.gardner@gsa.gov>
Date: Thu, 21 May 2026 17:33:21 -0400
Subject: [PATCH 2/5] update color tokens with top level key and fix naming
 collision.

---
 internals/token-helpers/index.test.ts | 24 +++++--
 internals/token-helpers/index.ts      |  3 -
 tokens/breakpoints/breakpoints.json   |  4 +-
 tokens/colors/black-transparent.json  | 66 +++++++++---------
 tokens/colors/blue-cool.json          | 88 ++++++++++++------------
 tokens/colors/blue-warm.json          | 88 ++++++++++++------------
 tokens/colors/blue.json               | 88 ++++++++++++------------
 tokens/colors/cyan.json               | 88 ++++++++++++------------
 tokens/colors/global.json             | 24 ++++---
 tokens/colors/gold.json               | 88 ++++++++++++------------
 tokens/colors/gray-cool.json          | 90 +++++++++++++------------
 tokens/colors/gray-warm.json          | 90 +++++++++++++------------
 tokens/colors/gray.json               | 96 ++++++++++++++-------------
 tokens/colors/green-cool.json         | 88 ++++++++++++------------
 tokens/colors/green-warm.json         | 88 ++++++++++++------------
 tokens/colors/green.json              | 88 ++++++++++++------------
 tokens/colors/indigo-cool.json        | 88 ++++++++++++------------
 tokens/colors/indigo-warm.json        | 88 ++++++++++++------------
 tokens/colors/indigo.json             | 88 ++++++++++++------------
 tokens/colors/magenta.json            | 88 ++++++++++++------------
 tokens/colors/mint-cool.json          | 88 ++++++++++++------------
 tokens/colors/mint.json               | 88 ++++++++++++------------
 tokens/colors/orange-warm.json        | 88 ++++++++++++------------
 tokens/colors/orange.json             | 88 ++++++++++++------------
 tokens/colors/red-cool.json           | 88 ++++++++++++------------
 tokens/colors/red-warm.json           | 88 ++++++++++++------------
 tokens/colors/red.json                | 88 ++++++++++++------------
 tokens/colors/violet-warm.json        | 88 ++++++++++++------------
 tokens/colors/violet.json             | 88 ++++++++++++------------
 tokens/colors/white-transparent.json  | 66 +++++++++---------
 tokens/colors/yellow.json             | 88 ++++++++++++------------
 tokens/spacing/spacing.json           |  6 +-
 32 files changed, 1236 insertions(+), 1169 deletions(-)

diff --git a/internals/token-helpers/index.test.ts b/internals/token-helpers/index.test.ts
index 2bea2b4e..d376db0a 100644
--- a/internals/token-helpers/index.test.ts
+++ b/internals/token-helpers/index.test.ts
@@ -42,24 +42,34 @@ describe("generateTokenName", () => {
     expect(result).toBe("usa-site-margins-width");
   });
 
-  it("should generate token name for color directory with single path key", () => {
+  it("should generate token name for color with single nested key", () => {
     const colorTokenSingle: TransformedToken = {
       ...token,
-      filePath: "tokens/colors/primary.json",
-      path: ["black"],
+      filePath: "tokens/colors/global.json",
+      path: ["color", "black"],
     };
     const result = generateTokenName(colorTokenSingle, options);
     expect(result).toBe("usa-color-black");
   });
 
-  it("should generate token name for color directory with multiple path keys", () => {
+  it("should generate token name for color with multiple nested keys", () => {
     const colorTokenMulti: TransformedToken = {
       ...token,
-      filePath: "tokens/colors/primary.json",
-      path: ["primary", "light"],
+      filePath: "tokens/colors/blue.json",
+      path: ["color", "blue", "5"],
     };
     const result = generateTokenName(colorTokenMulti, options);
-    expect(result).toBe("usa-color-primary-light");
+    expect(result).toBe("usa-color-blue-5");
+  });
+
+  it("should generate token name for color with vivid variant", () => {
+    const colorTokenVivid: TransformedToken = {
+      ...token,
+      filePath: "tokens/colors/blue.json",
+      path: ["color", "blue", "vivid", "50"],
+    };
+    const result = generateTokenName(colorTokenVivid, options);
+    expect(result).toBe("usa-color-blue-vivid-50");
   });
 
   it("should generate token name fallback for other cases", () => {
diff --git a/internals/token-helpers/index.ts b/internals/token-helpers/index.ts
index a5ca6933..c42bc816 100644
--- a/internals/token-helpers/index.ts
+++ b/internals/token-helpers/index.ts
@@ -4,9 +4,6 @@ export const generateTokenName = (
   token: TransformedToken,
   options: PlatformConfig,
 ) => {
-  if (token.filePath?.includes("tokens/colors/")) {
-    return `${options.prefix}-color-${token.path.join("-")}`;
-  }
   return `${options.prefix}-${token.path.join("-")}`;
 };
 
diff --git a/tokens/breakpoints/breakpoints.json b/tokens/breakpoints/breakpoints.json
index 9c415fd2..ecdc4ff3 100644
--- a/tokens/breakpoints/breakpoints.json
+++ b/tokens/breakpoints/breakpoints.json
@@ -1,5 +1,6 @@
 {
   "breakpoint": {
+    "$type": "dimension",
     "card": {
       "$value": { "value": "10", "unit": "rem" }
     },
@@ -27,6 +28,5 @@
     "widescreen": {
       "$value": { "value": "87.5", "unit": "rem" }
     }
-  },
-  "$type": "dimension"
+  }
 }
diff --git a/tokens/colors/black-transparent.json b/tokens/colors/black-transparent.json
index 6bdee83c..a412f689 100644
--- a/tokens/colors/black-transparent.json
+++ b/tokens/colors/black-transparent.json
@@ -1,35 +1,37 @@
 {
-  "black-transparent": {
-    "5": {
-      "$value": "rgba(0,0,0,0.01)"
-    },
-    "10": {
-      "$value": "rgba(0,0,0,0.1)"
-    },
-    "20": {
-      "$value": "rgba(0,0,0,0.2)"
-    },
-    "30": {
-      "$value": "rgba(0,0,0,0.3)"
-    },
-    "40": {
-      "$value": "rgba(0,0,0,0.4)"
-    },
-    "50": {
-      "$value": "rgba(0,0,0,0.5)"
-    },
-    "60": {
-      "$value": "rgba(0,0,0,0.6)"
-    },
-    "70": {
-      "$value": "rgba(0,0,0,0.7)"
-    },
-    "80": {
-      "$value": "rgba(0,0,0,0.8)"
-    },
-    "90": {
-      "$value": "rgba(0,0,0,0.9)"
+  "color": {
+    "black-transparent": {
+      "$type": "color",
+      "5": {
+        "$value": "rgba(0,0,0,0.01)"
+      },
+      "10": {
+        "$value": "rgba(0,0,0,0.1)"
+      },
+      "20": {
+        "$value": "rgba(0,0,0,0.2)"
+      },
+      "30": {
+        "$value": "rgba(0,0,0,0.3)"
+      },
+      "40": {
+        "$value": "rgba(0,0,0,0.4)"
+      },
+      "50": {
+        "$value": "rgba(0,0,0,0.5)"
+      },
+      "60": {
+        "$value": "rgba(0,0,0,0.6)"
+      },
+      "70": {
+        "$value": "rgba(0,0,0,0.7)"
+      },
+      "80": {
+        "$value": "rgba(0,0,0,0.8)"
+      },
+      "90": {
+        "$value": "rgba(0,0,0,0.9)"
+      }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/blue-cool.json b/tokens/colors/blue-cool.json
index 30d32569..1f39106d 100644
--- a/tokens/colors/blue-cool.json
+++ b/tokens/colors/blue-cool.json
@@ -1,64 +1,66 @@
 {
-  "blue-cool": {
-    "5": {
-      "$value": "#e7f2f5"
-    },
-    "10": {
-      "$value": "#dae9ee"
-    },
-    "20": {
-      "$value": "#adcfdc"
-    },
-    "30": {
-      "$value": "#82b4c9"
-    },
-    "40": {
-      "$value": "#6499af"
-    },
-    "50": {
-      "$value": "#3a7d95"
-    },
-    "60": {
-      "$value": "#2e6276"
-    },
-    "70": {
-      "$value": "#224a58"
-    },
-    "80": {
-      "$value": "#14333d"
-    },
-    "90": {
-      "$value": "#0f191c"
-    },
-    "vivid": {
+  "color": {
+    "blue-cool": {
+      "$type": "color",
       "5": {
-        "$value": "#e1f3f8"
+        "$value": "#e7f2f5"
       },
       "10": {
-        "$value": "#c3ebfa"
+        "$value": "#dae9ee"
       },
       "20": {
-        "$value": "#97d4ea"
+        "$value": "#adcfdc"
       },
       "30": {
-        "$value": "#59b9de"
+        "$value": "#82b4c9"
       },
       "40": {
-        "$value": "#28a0cb"
+        "$value": "#6499af"
       },
       "50": {
-        "$value": "#0d7ea2"
+        "$value": "#3a7d95"
       },
       "60": {
-        "$value": "#07648d"
+        "$value": "#2e6276"
       },
       "70": {
-        "$value": "#074b69"
+        "$value": "#224a58"
       },
       "80": {
-        "$value": "#002d3f"
+        "$value": "#14333d"
+      },
+      "90": {
+        "$value": "#0f191c"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#e1f3f8"
+        },
+        "10": {
+          "$value": "#c3ebfa"
+        },
+        "20": {
+          "$value": "#97d4ea"
+        },
+        "30": {
+          "$value": "#59b9de"
+        },
+        "40": {
+          "$value": "#28a0cb"
+        },
+        "50": {
+          "$value": "#0d7ea2"
+        },
+        "60": {
+          "$value": "#07648d"
+        },
+        "70": {
+          "$value": "#074b69"
+        },
+        "80": {
+          "$value": "#002d3f"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/blue-warm.json b/tokens/colors/blue-warm.json
index 5e89a63b..f3d9d113 100644
--- a/tokens/colors/blue-warm.json
+++ b/tokens/colors/blue-warm.json
@@ -1,64 +1,66 @@
 {
-  "blue-warm": {
-    "5": {
-      "$value": "#ecf1f7"
-    },
-    "10": {
-      "$value": "#e1e7f1"
-    },
-    "20": {
-      "$value": "#bbcae4"
-    },
-    "30": {
-      "$value": "#98afd2"
-    },
-    "40": {
-      "$value": "#7292c7"
-    },
-    "50": {
-      "$value": "#4a77b4"
-    },
-    "60": {
-      "$value": "#345d96"
-    },
-    "70": {
-      "$value": "#2f4668"
-    },
-    "80": {
-      "$value": "#252f3e"
-    },
-    "90": {
-      "$value": "#13171f"
-    },
-    "vivid": {
+  "color": {
+    "blue-warm": {
+      "$type": "color",
       "5": {
-        "$value": "#edf5ff"
+        "$value": "#ecf1f7"
       },
       "10": {
-        "$value": "#d4e5ff"
+        "$value": "#e1e7f1"
       },
       "20": {
-        "$value": "#adcdff"
+        "$value": "#bbcae4"
       },
       "30": {
-        "$value": "#81aefc"
+        "$value": "#98afd2"
       },
       "40": {
-        "$value": "#5994f6"
+        "$value": "#7292c7"
       },
       "50": {
-        "$value": "#2672de"
+        "$value": "#4a77b4"
       },
       "60": {
-        "$value": "#0050d8"
+        "$value": "#345d96"
       },
       "70": {
-        "$value": "#1a4480"
+        "$value": "#2f4668"
       },
       "80": {
-        "$value": "#162e51"
+        "$value": "#252f3e"
+      },
+      "90": {
+        "$value": "#13171f"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#edf5ff"
+        },
+        "10": {
+          "$value": "#d4e5ff"
+        },
+        "20": {
+          "$value": "#adcdff"
+        },
+        "30": {
+          "$value": "#81aefc"
+        },
+        "40": {
+          "$value": "#5994f6"
+        },
+        "50": {
+          "$value": "#2672de"
+        },
+        "60": {
+          "$value": "#0050d8"
+        },
+        "70": {
+          "$value": "#1a4480"
+        },
+        "80": {
+          "$value": "#162e51"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/blue.json b/tokens/colors/blue.json
index 1d1c8320..d1008b65 100644
--- a/tokens/colors/blue.json
+++ b/tokens/colors/blue.json
@@ -1,64 +1,66 @@
 {
-  "blue": {
-    "5": {
-      "$value": "#eff6fb"
-    },
-    "10": {
-      "$value": "#d9e8f6"
-    },
-    "20": {
-      "$value": "#aacdec"
-    },
-    "30": {
-      "$value": "#73b3e7"
-    },
-    "40": {
-      "$value": "#4f97d1"
-    },
-    "50": {
-      "$value": "#2378c3"
-    },
-    "60": {
-      "$value": "#2c608a"
-    },
-    "70": {
-      "$value": "#274863"
-    },
-    "80": {
-      "$value": "#1f303e"
-    },
-    "90": {
-      "$value": "#11181d"
-    },
-    "vivid": {
+  "color": {
+    "blue": {
+      "$type": "color",
       "5": {
-        "$value": "#e8f5ff"
+        "$value": "#eff6fb"
       },
       "10": {
-        "$value": "#cfe8ff"
+        "$value": "#d9e8f6"
       },
       "20": {
-        "$value": "#a1d3ff"
+        "$value": "#aacdec"
       },
       "30": {
-        "$value": "#58b4ff"
+        "$value": "#73b3e7"
       },
       "40": {
-        "$value": "#2491ff"
+        "$value": "#4f97d1"
       },
       "50": {
-        "$value": "#0076d6"
+        "$value": "#2378c3"
       },
       "60": {
-        "$value": "#005ea2"
+        "$value": "#2c608a"
       },
       "70": {
-        "$value": "#0b4778"
+        "$value": "#274863"
       },
       "80": {
-        "$value": "#112f4e"
+        "$value": "#1f303e"
+      },
+      "90": {
+        "$value": "#11181d"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#e8f5ff"
+        },
+        "10": {
+          "$value": "#cfe8ff"
+        },
+        "20": {
+          "$value": "#a1d3ff"
+        },
+        "30": {
+          "$value": "#58b4ff"
+        },
+        "40": {
+          "$value": "#2491ff"
+        },
+        "50": {
+          "$value": "#0076d6"
+        },
+        "60": {
+          "$value": "#005ea2"
+        },
+        "70": {
+          "$value": "#0b4778"
+        },
+        "80": {
+          "$value": "#112f4e"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/cyan.json b/tokens/colors/cyan.json
index 413f43c5..3bbc2411 100644
--- a/tokens/colors/cyan.json
+++ b/tokens/colors/cyan.json
@@ -1,64 +1,66 @@
 {
-  "cyan": {
-    "5": {
-      "$value": "#e7f6f8"
-    },
-    "10": {
-      "$value": "#ccecf2"
-    },
-    "20": {
-      "$value": "#99deea"
-    },
-    "30": {
-      "$value": "#5dc0d1"
-    },
-    "40": {
-      "$value": "#449dac"
-    },
-    "50": {
-      "$value": "#168092"
-    },
-    "60": {
-      "$value": "#2a646d"
-    },
-    "70": {
-      "$value": "#2c4a4e"
-    },
-    "80": {
-      "$value": "#203133"
-    },
-    "90": {
-      "$value": "#111819"
-    },
-    "vivid": {
+  "color": {
+    "cyan": {
+      "$type": "color",
       "5": {
-        "$value": "#e5faff"
+        "$value": "#e7f6f8"
       },
       "10": {
-        "$value": "#a8f2ff"
+        "$value": "#ccecf2"
       },
       "20": {
-        "$value": "#52daf2"
+        "$value": "#99deea"
       },
       "30": {
-        "$value": "#00bde3"
+        "$value": "#5dc0d1"
       },
       "40": {
-        "$value": "#009ec1"
+        "$value": "#449dac"
       },
       "50": {
-        "$value": "#0081a1"
+        "$value": "#168092"
       },
       "60": {
-        "$value": "#00687d"
+        "$value": "#2a646d"
       },
       "70": {
-        "$value": "#0e4f5c"
+        "$value": "#2c4a4e"
       },
       "80": {
-        "$value": "#093b44"
+        "$value": "#203133"
+      },
+      "90": {
+        "$value": "#111819"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#e5faff"
+        },
+        "10": {
+          "$value": "#a8f2ff"
+        },
+        "20": {
+          "$value": "#52daf2"
+        },
+        "30": {
+          "$value": "#00bde3"
+        },
+        "40": {
+          "$value": "#009ec1"
+        },
+        "50": {
+          "$value": "#0081a1"
+        },
+        "60": {
+          "$value": "#00687d"
+        },
+        "70": {
+          "$value": "#0e4f5c"
+        },
+        "80": {
+          "$value": "#093b44"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/global.json b/tokens/colors/global.json
index 6f41e205..bb761640 100644
--- a/tokens/colors/global.json
+++ b/tokens/colors/global.json
@@ -1,12 +1,16 @@
 {
-  "transparent": {
-    "$value": "rgba(0,0,0,0)"
-  },
-  "black": {
-    "$value": "#000"
-  },
-  "white": {
-    "$value": "#fff"
-  },
-  "$type": "color"
+  "color": {
+    "transparent": {
+      "$type": "color",
+      "$value": "rgba(0,0,0,0)"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "#000"
+    },
+    "white": {
+      "$type": "color",
+      "$value": "#fff"
+    }
+  }
 }
diff --git a/tokens/colors/gold.json b/tokens/colors/gold.json
index 4a06e863..c80a9af8 100644
--- a/tokens/colors/gold.json
+++ b/tokens/colors/gold.json
@@ -1,64 +1,66 @@
 {
-  "gold": {
-    "5": {
-      "$value": "#f5f0e6"
-    },
-    "10": {
-      "$value": "#f1e5cd"
-    },
-    "20": {
-      "$value": "#dec69a"
-    },
-    "30": {
-      "$value": "#c7a97b"
-    },
-    "40": {
-      "$value": "#ad8b65"
-    },
-    "50": {
-      "$value": "#8e704f"
-    },
-    "60": {
-      "$value": "#6b5947"
-    },
-    "70": {
-      "$value": "#4d4438"
-    },
-    "80": {
-      "$value": "#322d26"
-    },
-    "90": {
-      "$value": "#191714"
-    },
-    "vivid": {
+  "color": {
+    "gold": {
+      "$type": "color",
       "5": {
-        "$value": "#fef0c8"
+        "$value": "#f5f0e6"
       },
       "10": {
-        "$value": "#ffe396"
+        "$value": "#f1e5cd"
       },
       "20": {
-        "$value": "#ffbe2e"
+        "$value": "#dec69a"
       },
       "30": {
-        "$value": "#e5a000"
+        "$value": "#c7a97b"
       },
       "40": {
-        "$value": "#c2850c"
+        "$value": "#ad8b65"
       },
       "50": {
-        "$value": "#936f38"
+        "$value": "#8e704f"
       },
       "60": {
-        "$value": "#7a591a"
+        "$value": "#6b5947"
       },
       "70": {
-        "$value": "#5c410a"
+        "$value": "#4d4438"
       },
       "80": {
-        "$value": "#3b2b15"
+        "$value": "#322d26"
+      },
+      "90": {
+        "$value": "#191714"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fef0c8"
+        },
+        "10": {
+          "$value": "#ffe396"
+        },
+        "20": {
+          "$value": "#ffbe2e"
+        },
+        "30": {
+          "$value": "#e5a000"
+        },
+        "40": {
+          "$value": "#c2850c"
+        },
+        "50": {
+          "$value": "#936f38"
+        },
+        "60": {
+          "$value": "#7a591a"
+        },
+        "70": {
+          "$value": "#5c410a"
+        },
+        "80": {
+          "$value": "#3b2b15"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/gray-cool.json b/tokens/colors/gray-cool.json
index 0bedb8db..036aa182 100644
--- a/tokens/colors/gray-cool.json
+++ b/tokens/colors/gray-cool.json
@@ -1,47 +1,49 @@
 {
-  "gray-cool": {
-    "1": {
-      "$value": "#fbfcfd"
-    },
-    "2": {
-      "$value": "#f7f9fa"
-    },
-    "3": {
-      "$value": "#f5f6f7"
-    },
-    "4": {
-      "$value": "#f1f3f6"
-    },
-    "5": {
-      "$value": "#edeff0"
-    },
-    "10": {
-      "$value": "#dfe1e2"
-    },
-    "20": {
-      "$value": "#c6cace"
-    },
-    "30": {
-      "$value": "#a9aeb1"
-    },
-    "40": {
-      "$value": "#8d9297"
-    },
-    "50": {
-      "$value": "#71767a"
-    },
-    "60": {
-      "$value": "#565c65"
-    },
-    "70": {
-      "$value": "#3d4551"
-    },
-    "80": {
-      "$value": "#2d2e2f"
-    },
-    "90": {
-      "$value": "#1c1d1f"
+  "color": {
+    "gray-cool": {
+      "$type": "color",
+      "1": {
+        "$value": "#fbfcfd"
+      },
+      "2": {
+        "$value": "#f7f9fa"
+      },
+      "3": {
+        "$value": "#f5f6f7"
+      },
+      "4": {
+        "$value": "#f1f3f6"
+      },
+      "5": {
+        "$value": "#edeff0"
+      },
+      "10": {
+        "$value": "#dfe1e2"
+      },
+      "20": {
+        "$value": "#c6cace"
+      },
+      "30": {
+        "$value": "#a9aeb1"
+      },
+      "40": {
+        "$value": "#8d9297"
+      },
+      "50": {
+        "$value": "#71767a"
+      },
+      "60": {
+        "$value": "#565c65"
+      },
+      "70": {
+        "$value": "#3d4551"
+      },
+      "80": {
+        "$value": "#2d2e2f"
+      },
+      "90": {
+        "$value": "#1c1d1f"
+      }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/gray-warm.json b/tokens/colors/gray-warm.json
index 31ae5b5b..31fcb765 100644
--- a/tokens/colors/gray-warm.json
+++ b/tokens/colors/gray-warm.json
@@ -1,47 +1,49 @@
 {
-  "gray-warm": {
-    "1": {
-      "$value": "#fcfcfb"
-    },
-    "2": {
-      "$value": "#f9f9f7"
-    },
-    "3": {
-      "$value": "#f6f6f2"
-    },
-    "4": {
-      "$value": "#f5f5f0"
-    },
-    "5": {
-      "$value": "#f0f0ec"
-    },
-    "10": {
-      "$value": "#e6e6e2"
-    },
-    "20": {
-      "$value": "#cac9c0"
-    },
-    "30": {
-      "$value": "#afaea2"
-    },
-    "40": {
-      "$value": "#929285"
-    },
-    "50": {
-      "$value": "#76766a"
-    },
-    "60": {
-      "$value": "#5d5d52"
-    },
-    "70": {
-      "$value": "#454540"
-    },
-    "80": {
-      "$value": "#2e2e2a"
-    },
-    "90": {
-      "$value": "#171716"
+  "color": {
+    "gray-warm": {
+      "$type": "color",
+      "1": {
+        "$value": "#fcfcfb"
+      },
+      "2": {
+        "$value": "#f9f9f7"
+      },
+      "3": {
+        "$value": "#f6f6f2"
+      },
+      "4": {
+        "$value": "#f5f5f0"
+      },
+      "5": {
+        "$value": "#f0f0ec"
+      },
+      "10": {
+        "$value": "#e6e6e2"
+      },
+      "20": {
+        "$value": "#cac9c0"
+      },
+      "30": {
+        "$value": "#afaea2"
+      },
+      "40": {
+        "$value": "#929285"
+      },
+      "50": {
+        "$value": "#76766a"
+      },
+      "60": {
+        "$value": "#5d5d52"
+      },
+      "70": {
+        "$value": "#454540"
+      },
+      "80": {
+        "$value": "#2e2e2a"
+      },
+      "90": {
+        "$value": "#171716"
+      }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/gray.json b/tokens/colors/gray.json
index f72ac871..11d03bca 100644
--- a/tokens/colors/gray.json
+++ b/tokens/colors/gray.json
@@ -1,50 +1,52 @@
 {
-  "gray": {
-    "1": {
-      "$value": "#fcfcfc"
-    },
-    "2": {
-      "$value": "#f9f9f9"
-    },
-    "3": {
-      "$value": "#f6f6f6"
-    },
-    "4": {
-      "$value": "#f3f3f3"
-    },
-    "5": {
-      "$value": "#f0f0f0"
-    },
-    "10": {
-      "$value": "#e6e6e6"
-    },
-    "20": {
-      "$value": "#c9c9c9"
-    },
-    "30": {
-      "$value": "#adadad"
-    },
-    "40": {
-      "$value": "#919191"
-    },
-    "50": {
-      "$value": "#757575"
-    },
-    "60": {
-      "$value": "#5c5c5c"
-    },
-    "70": {
-      "$value": "#454545"
-    },
-    "80": {
-      "$value": "#2e2e2e"
-    },
-    "90": {
-      "$value": "#1b1b1b"
-    },
-    "100": {
-      "$value": "#000"
+  "color": {
+    "gray": {
+      "$type": "color",
+      "1": {
+        "$value": "#fcfcfc"
+      },
+      "2": {
+        "$value": "#f9f9f9"
+      },
+      "3": {
+        "$value": "#f6f6f6"
+      },
+      "4": {
+        "$value": "#f3f3f3"
+      },
+      "5": {
+        "$value": "#f0f0f0"
+      },
+      "10": {
+        "$value": "#e6e6e6"
+      },
+      "20": {
+        "$value": "#c9c9c9"
+      },
+      "30": {
+        "$value": "#adadad"
+      },
+      "40": {
+        "$value": "#919191"
+      },
+      "50": {
+        "$value": "#757575"
+      },
+      "60": {
+        "$value": "#5c5c5c"
+      },
+      "70": {
+        "$value": "#454545"
+      },
+      "80": {
+        "$value": "#2e2e2e"
+      },
+      "90": {
+        "$value": "#1b1b1b"
+      },
+      "100": {
+        "$value": "#000"
+      }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/green-cool.json b/tokens/colors/green-cool.json
index fd5569cd..ef3f2a6a 100644
--- a/tokens/colors/green-cool.json
+++ b/tokens/colors/green-cool.json
@@ -1,64 +1,66 @@
 {
-  "green-cool": {
-    "5": {
-      "$value": "#ecf3ec"
-    },
-    "10": {
-      "$value": "#dbebde"
-    },
-    "20": {
-      "$value": "#b4d0b9"
-    },
-    "30": {
-      "$value": "#86b98e"
-    },
-    "40": {
-      "$value": "#5e9f69"
-    },
-    "50": {
-      "$value": "#4d8055"
-    },
-    "60": {
-      "$value": "#446443"
-    },
-    "70": {
-      "$value": "#37493b"
-    },
-    "80": {
-      "$value": "#28312a"
-    },
-    "90": {
-      "$value": "#1a1f1a"
-    },
-    "vivid": {
+  "color": {
+    "green-cool": {
+      "$type": "color",
       "5": {
-        "$value": "#e3f5e1"
+        "$value": "#ecf3ec"
       },
       "10": {
-        "$value": "#b7f5bd"
+        "$value": "#dbebde"
       },
       "20": {
-        "$value": "#70e17b"
+        "$value": "#b4d0b9"
       },
       "30": {
-        "$value": "#21c834"
+        "$value": "#86b98e"
       },
       "40": {
-        "$value": "#00a91c"
+        "$value": "#5e9f69"
       },
       "50": {
-        "$value": "#008817"
+        "$value": "#4d8055"
       },
       "60": {
-        "$value": "#216e1f"
+        "$value": "#446443"
       },
       "70": {
-        "$value": "#154c21"
+        "$value": "#37493b"
       },
       "80": {
-        "$value": "#19311e"
+        "$value": "#28312a"
+      },
+      "90": {
+        "$value": "#1a1f1a"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#e3f5e1"
+        },
+        "10": {
+          "$value": "#b7f5bd"
+        },
+        "20": {
+          "$value": "#70e17b"
+        },
+        "30": {
+          "$value": "#21c834"
+        },
+        "40": {
+          "$value": "#00a91c"
+        },
+        "50": {
+          "$value": "#008817"
+        },
+        "60": {
+          "$value": "#216e1f"
+        },
+        "70": {
+          "$value": "#154c21"
+        },
+        "80": {
+          "$value": "#19311e"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/green-warm.json b/tokens/colors/green-warm.json
index 81711146..6b78940a 100644
--- a/tokens/colors/green-warm.json
+++ b/tokens/colors/green-warm.json
@@ -1,64 +1,66 @@
 {
-  "green-warm": {
-    "5": {
-      "$value": "#f1f4d7"
-    },
-    "10": {
-      "$value": "#e7eab7"
-    },
-    "20": {
-      "$value": "#cbd17a"
-    },
-    "30": {
-      "$value": "#a6b557"
-    },
-    "40": {
-      "$value": "#8a984b"
-    },
-    "50": {
-      "$value": "#6f7a41"
-    },
-    "60": {
-      "$value": "#5a5f38"
-    },
-    "70": {
-      "$value": "#45472f"
-    },
-    "80": {
-      "$value": "#2d2f21"
-    },
-    "90": {
-      "$value": "#171712"
-    },
-    "vivid": {
+  "color": {
+    "green-warm": {
+      "$type": "color",
       "5": {
-        "$value": "#f5fbc1"
+        "$value": "#f1f4d7"
       },
       "10": {
-        "$value": "#e7f434"
+        "$value": "#e7eab7"
       },
       "20": {
-        "$value": "#c5d30a"
+        "$value": "#cbd17a"
       },
       "30": {
-        "$value": "#a3b72c"
+        "$value": "#a6b557"
       },
       "40": {
-        "$value": "#7e9c1d"
+        "$value": "#8a984b"
       },
       "50": {
-        "$value": "#6a7d00"
+        "$value": "#6f7a41"
       },
       "60": {
-        "$value": "#5a6613"
+        "$value": "#5a5f38"
       },
       "70": {
-        "$value": "#4b4e10"
+        "$value": "#45472f"
       },
       "80": {
-        "$value": "#38380b"
+        "$value": "#2d2f21"
+      },
+      "90": {
+        "$value": "#171712"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#f5fbc1"
+        },
+        "10": {
+          "$value": "#e7f434"
+        },
+        "20": {
+          "$value": "#c5d30a"
+        },
+        "30": {
+          "$value": "#a3b72c"
+        },
+        "40": {
+          "$value": "#7e9c1d"
+        },
+        "50": {
+          "$value": "#6a7d00"
+        },
+        "60": {
+          "$value": "#5a6613"
+        },
+        "70": {
+          "$value": "#4b4e10"
+        },
+        "80": {
+          "$value": "#38380b"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/green.json b/tokens/colors/green.json
index b7a36678..41b42fad 100644
--- a/tokens/colors/green.json
+++ b/tokens/colors/green.json
@@ -1,64 +1,66 @@
 {
-  "green": {
-    "5": {
-      "$value": "#eaf4dd"
-    },
-    "10": {
-      "$value": "#dfeacd"
-    },
-    "20": {
-      "$value": "#b8d293"
-    },
-    "30": {
-      "$value": "#9bb672"
-    },
-    "40": {
-      "$value": "#7d9b4e"
-    },
-    "50": {
-      "$value": "#607f35"
-    },
-    "60": {
-      "$value": "#4c6424"
-    },
-    "70": {
-      "$value": "#3c4a29"
-    },
-    "80": {
-      "$value": "#293021"
-    },
-    "90": {
-      "$value": "#161814"
-    },
-    "vivid": {
+  "color": {
+    "green": {
+      "$type": "color",
       "5": {
-        "$value": "#ddf9c7"
+        "$value": "#eaf4dd"
       },
       "10": {
-        "$value": "#c5ee93"
+        "$value": "#dfeacd"
       },
       "20": {
-        "$value": "#98d035"
+        "$value": "#b8d293"
       },
       "30": {
-        "$value": "#7fb135"
+        "$value": "#9bb672"
       },
       "40": {
-        "$value": "#719f2a"
+        "$value": "#7d9b4e"
       },
       "50": {
-        "$value": "#538200"
+        "$value": "#607f35"
       },
       "60": {
-        "$value": "#466c04"
+        "$value": "#4c6424"
       },
       "70": {
-        "$value": "#2f4a0b"
+        "$value": "#3c4a29"
       },
       "80": {
-        "$value": "#243413"
+        "$value": "#293021"
+      },
+      "90": {
+        "$value": "#161814"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#ddf9c7"
+        },
+        "10": {
+          "$value": "#c5ee93"
+        },
+        "20": {
+          "$value": "#98d035"
+        },
+        "30": {
+          "$value": "#7fb135"
+        },
+        "40": {
+          "$value": "#719f2a"
+        },
+        "50": {
+          "$value": "#538200"
+        },
+        "60": {
+          "$value": "#466c04"
+        },
+        "70": {
+          "$value": "#2f4a0b"
+        },
+        "80": {
+          "$value": "#243413"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/indigo-cool.json b/tokens/colors/indigo-cool.json
index 2b3d7c30..9ca2ce45 100644
--- a/tokens/colors/indigo-cool.json
+++ b/tokens/colors/indigo-cool.json
@@ -1,64 +1,66 @@
 {
-  "indigo-cool": {
-    "5": {
-      "$value": "#eef0f9"
-    },
-    "10": {
-      "$value": "#e1e6f9"
-    },
-    "20": {
-      "$value": "#bbc8f5"
-    },
-    "30": {
-      "$value": "#96abee"
-    },
-    "40": {
-      "$value": "#6b8ee8"
-    },
-    "50": {
-      "$value": "#496fd8"
-    },
-    "60": {
-      "$value": "#3f57a6"
-    },
-    "70": {
-      "$value": "#374274"
-    },
-    "80": {
-      "$value": "#292d42"
-    },
-    "90": {
-      "$value": "#151622"
-    },
-    "vivid": {
+  "color": {
+    "indigo-cool": {
+      "$type": "color",
       "5": {
-        "$value": "#edf0ff"
+        "$value": "#eef0f9"
       },
       "10": {
-        "$value": "#dee5ff"
+        "$value": "#e1e6f9"
       },
       "20": {
-        "$value": "#b8c8ff"
+        "$value": "#bbc8f5"
       },
       "30": {
-        "$value": "#94adff"
+        "$value": "#96abee"
       },
       "40": {
-        "$value": "#628ef4"
+        "$value": "#6b8ee8"
       },
       "50": {
-        "$value": "#4866ff"
+        "$value": "#496fd8"
       },
       "60": {
-        "$value": "#3e4ded"
+        "$value": "#3f57a6"
       },
       "70": {
-        "$value": "#222fbf"
+        "$value": "#374274"
       },
       "80": {
-        "$value": "#1b2b85"
+        "$value": "#292d42"
+      },
+      "90": {
+        "$value": "#151622"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#edf0ff"
+        },
+        "10": {
+          "$value": "#dee5ff"
+        },
+        "20": {
+          "$value": "#b8c8ff"
+        },
+        "30": {
+          "$value": "#94adff"
+        },
+        "40": {
+          "$value": "#628ef4"
+        },
+        "50": {
+          "$value": "#4866ff"
+        },
+        "60": {
+          "$value": "#3e4ded"
+        },
+        "70": {
+          "$value": "#222fbf"
+        },
+        "80": {
+          "$value": "#1b2b85"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/indigo-warm.json b/tokens/colors/indigo-warm.json
index 86780b60..80800b9c 100644
--- a/tokens/colors/indigo-warm.json
+++ b/tokens/colors/indigo-warm.json
@@ -1,64 +1,66 @@
 {
-  "indigo-warm": {
-    "5": {
-      "$value": "#f1eff7"
-    },
-    "10": {
-      "$value": "#e7e3fa"
-    },
-    "20": {
-      "$value": "#cbc4f2"
-    },
-    "30": {
-      "$value": "#afa5e8"
-    },
-    "40": {
-      "$value": "#9287d8"
-    },
-    "50": {
-      "$value": "#7665d1"
-    },
-    "60": {
-      "$value": "#5e519e"
-    },
-    "70": {
-      "$value": "#453c7b"
-    },
-    "80": {
-      "$value": "#2e2c40"
-    },
-    "90": {
-      "$value": "#18161d"
-    },
-    "vivid": {
+  "color": {
+    "indigo-warm": {
+      "$type": "color",
       "5": {
-        "$value": "#f5f2ff"
+        "$value": "#f1eff7"
       },
       "10": {
-        "$value": "#e4deff"
+        "$value": "#e7e3fa"
       },
       "20": {
-        "$value": "#cfc4fd"
+        "$value": "#cbc4f2"
       },
       "30": {
-        "$value": "#b69fff"
+        "$value": "#afa5e8"
       },
       "40": {
-        "$value": "#967efb"
+        "$value": "#9287d8"
       },
       "50": {
-        "$value": "#745fe9"
+        "$value": "#7665d1"
       },
       "60": {
-        "$value": "#5942d2"
+        "$value": "#5e519e"
       },
       "70": {
-        "$value": "#3d2c9d"
+        "$value": "#453c7b"
       },
       "80": {
-        "$value": "#261f5b"
+        "$value": "#2e2c40"
+      },
+      "90": {
+        "$value": "#18161d"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#f5f2ff"
+        },
+        "10": {
+          "$value": "#e4deff"
+        },
+        "20": {
+          "$value": "#cfc4fd"
+        },
+        "30": {
+          "$value": "#b69fff"
+        },
+        "40": {
+          "$value": "#967efb"
+        },
+        "50": {
+          "$value": "#745fe9"
+        },
+        "60": {
+          "$value": "#5942d2"
+        },
+        "70": {
+          "$value": "#3d2c9d"
+        },
+        "80": {
+          "$value": "#261f5b"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/indigo.json b/tokens/colors/indigo.json
index ff60a40b..f5b06e15 100644
--- a/tokens/colors/indigo.json
+++ b/tokens/colors/indigo.json
@@ -1,64 +1,66 @@
 {
-  "indigo": {
-    "5": {
-      "$value": "#efeff8"
-    },
-    "10": {
-      "$value": "#e5e4fa"
-    },
-    "20": {
-      "$value": "#c5c5f3"
-    },
-    "30": {
-      "$value": "#a5a8eb"
-    },
-    "40": {
-      "$value": "#8889db"
-    },
-    "50": {
-      "$value": "#676cc8"
-    },
-    "60": {
-      "$value": "#4d52af"
-    },
-    "70": {
-      "$value": "#3d4076"
-    },
-    "80": {
-      "$value": "#2b2c40"
-    },
-    "90": {
-      "$value": "#16171f"
-    },
-    "vivid": {
+  "color": {
+    "indigo": {
+      "$type": "color",
       "5": {
-        "$value": "#f0f0ff"
+        "$value": "#efeff8"
       },
       "10": {
-        "$value": "#e0e0ff"
+        "$value": "#e5e4fa"
       },
       "20": {
-        "$value": "#ccceff"
+        "$value": "#c5c5f3"
       },
       "30": {
-        "$value": "#a3a7fa"
+        "$value": "#a5a8eb"
       },
       "40": {
-        "$value": "#8289ff"
+        "$value": "#8889db"
       },
       "50": {
-        "$value": "#656bd7"
+        "$value": "#676cc8"
       },
       "60": {
-        "$value": "#4a50c4"
+        "$value": "#4d52af"
       },
       "70": {
-        "$value": "#3333a3"
+        "$value": "#3d4076"
       },
       "80": {
-        "$value": "#212463"
+        "$value": "#2b2c40"
+      },
+      "90": {
+        "$value": "#16171f"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#f0f0ff"
+        },
+        "10": {
+          "$value": "#e0e0ff"
+        },
+        "20": {
+          "$value": "#ccceff"
+        },
+        "30": {
+          "$value": "#a3a7fa"
+        },
+        "40": {
+          "$value": "#8289ff"
+        },
+        "50": {
+          "$value": "#656bd7"
+        },
+        "60": {
+          "$value": "#4a50c4"
+        },
+        "70": {
+          "$value": "#3333a3"
+        },
+        "80": {
+          "$value": "#212463"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/magenta.json b/tokens/colors/magenta.json
index 1c583b9d..3bf80b64 100644
--- a/tokens/colors/magenta.json
+++ b/tokens/colors/magenta.json
@@ -1,64 +1,66 @@
 {
-  "magenta": {
-    "5": {
-      "$value": "#f9f0f2"
-    },
-    "10": {
-      "$value": "#f6e1e8"
-    },
-    "20": {
-      "$value": "#f0bbcc"
-    },
-    "30": {
-      "$value": "#e895b3"
-    },
-    "40": {
-      "$value": "#e0699f"
-    },
-    "50": {
-      "$value": "#c84281"
-    },
-    "60": {
-      "$value": "#8b4566"
-    },
-    "70": {
-      "$value": "#66364b"
-    },
-    "80": {
-      "$value": "#402731"
-    },
-    "90": {
-      "$value": "#1b1617"
-    },
-    "vivid": {
+  "color": {
+    "magenta": {
+      "$type": "color",
       "5": {
-        "$value": "#fff2f5"
+        "$value": "#f9f0f2"
       },
       "10": {
-        "$value": "#ffddea"
+        "$value": "#f6e1e8"
       },
       "20": {
-        "$value": "#ffb4cf"
+        "$value": "#f0bbcc"
       },
       "30": {
-        "$value": "#ff87b2"
+        "$value": "#e895b3"
       },
       "40": {
-        "$value": "#fd4496"
+        "$value": "#e0699f"
       },
       "50": {
-        "$value": "#d72d79"
+        "$value": "#c84281"
       },
       "60": {
-        "$value": "#ab2165"
+        "$value": "#8b4566"
       },
       "70": {
-        "$value": "#731f44"
+        "$value": "#66364b"
       },
       "80": {
-        "$value": "#4f172e"
+        "$value": "#402731"
+      },
+      "90": {
+        "$value": "#1b1617"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fff2f5"
+        },
+        "10": {
+          "$value": "#ffddea"
+        },
+        "20": {
+          "$value": "#ffb4cf"
+        },
+        "30": {
+          "$value": "#ff87b2"
+        },
+        "40": {
+          "$value": "#fd4496"
+        },
+        "50": {
+          "$value": "#d72d79"
+        },
+        "60": {
+          "$value": "#ab2165"
+        },
+        "70": {
+          "$value": "#731f44"
+        },
+        "80": {
+          "$value": "#4f172e"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/mint-cool.json b/tokens/colors/mint-cool.json
index 4cbbdd6a..124325e0 100644
--- a/tokens/colors/mint-cool.json
+++ b/tokens/colors/mint-cool.json
@@ -1,64 +1,66 @@
 {
-  "mint-cool": {
-    "5": {
-      "$value": "#e0f7f6"
-    },
-    "10": {
-      "$value": "#c4eeeb"
-    },
-    "20": {
-      "$value": "#9bd4cf"
-    },
-    "30": {
-      "$value": "#6fbab3"
-    },
-    "40": {
-      "$value": "#4f9e99"
-    },
-    "50": {
-      "$value": "#40807e"
-    },
-    "60": {
-      "$value": "#376462"
-    },
-    "70": {
-      "$value": "#2a4b45"
-    },
-    "80": {
-      "$value": "#203131"
-    },
-    "90": {
-      "$value": "#111818"
-    },
-    "vivid": {
+  "color": {
+    "mint-cool": {
+      "$type": "color",
       "5": {
-        "$value": "#d5fbf3"
+        "$value": "#e0f7f6"
       },
       "10": {
-        "$value": "#7efbe1"
+        "$value": "#c4eeeb"
       },
       "20": {
-        "$value": "#29e1cb"
+        "$value": "#9bd4cf"
       },
       "30": {
-        "$value": "#1dc2ae"
+        "$value": "#6fbab3"
       },
       "40": {
-        "$value": "#00a398"
+        "$value": "#4f9e99"
       },
       "50": {
-        "$value": "#008480"
+        "$value": "#40807e"
       },
       "60": {
-        "$value": "#0f6460"
+        "$value": "#376462"
       },
       "70": {
-        "$value": "#0b4b3f"
+        "$value": "#2a4b45"
       },
       "80": {
-        "$value": "#123131"
+        "$value": "#203131"
+      },
+      "90": {
+        "$value": "#111818"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#d5fbf3"
+        },
+        "10": {
+          "$value": "#7efbe1"
+        },
+        "20": {
+          "$value": "#29e1cb"
+        },
+        "30": {
+          "$value": "#1dc2ae"
+        },
+        "40": {
+          "$value": "#00a398"
+        },
+        "50": {
+          "$value": "#008480"
+        },
+        "60": {
+          "$value": "#0f6460"
+        },
+        "70": {
+          "$value": "#0b4b3f"
+        },
+        "80": {
+          "$value": "#123131"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/mint.json b/tokens/colors/mint.json
index a7fb75ce..93648490 100644
--- a/tokens/colors/mint.json
+++ b/tokens/colors/mint.json
@@ -1,64 +1,66 @@
 {
-  "mint": {
-    "5": {
-      "$value": "#dbf6ed"
-    },
-    "10": {
-      "$value": "#c7efe2"
-    },
-    "20": {
-      "$value": "#92d9bb"
-    },
-    "30": {
-      "$value": "#5abf95"
-    },
-    "40": {
-      "$value": "#34a37e"
-    },
-    "50": {
-      "$value": "#2e8367"
-    },
-    "60": {
-      "$value": "#286846"
-    },
-    "70": {
-      "$value": "#204e34"
-    },
-    "80": {
-      "$value": "#193324"
-    },
-    "90": {
-      "$value": "#0d1a12"
-    },
-    "vivid": {
+  "color": {
+    "mint": {
+      "$type": "color",
       "5": {
-        "$value": "#c9fbeb"
+        "$value": "#dbf6ed"
       },
       "10": {
-        "$value": "#83fcd4"
+        "$value": "#c7efe2"
       },
       "20": {
-        "$value": "#0ceda6"
+        "$value": "#92d9bb"
       },
       "30": {
-        "$value": "#04c585"
+        "$value": "#5abf95"
       },
       "40": {
-        "$value": "#00a871"
+        "$value": "#34a37e"
       },
       "50": {
-        "$value": "#008659"
+        "$value": "#2e8367"
       },
       "60": {
-        "$value": "#146947"
+        "$value": "#286846"
       },
       "70": {
-        "$value": "#0c4e29"
+        "$value": "#204e34"
       },
       "80": {
-        "$value": "#0d351e"
+        "$value": "#193324"
+      },
+      "90": {
+        "$value": "#0d1a12"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#c9fbeb"
+        },
+        "10": {
+          "$value": "#83fcd4"
+        },
+        "20": {
+          "$value": "#0ceda6"
+        },
+        "30": {
+          "$value": "#04c585"
+        },
+        "40": {
+          "$value": "#00a871"
+        },
+        "50": {
+          "$value": "#008659"
+        },
+        "60": {
+          "$value": "#146947"
+        },
+        "70": {
+          "$value": "#0c4e29"
+        },
+        "80": {
+          "$value": "#0d351e"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/orange-warm.json b/tokens/colors/orange-warm.json
index 98b188f5..7d750eae 100644
--- a/tokens/colors/orange-warm.json
+++ b/tokens/colors/orange-warm.json
@@ -1,64 +1,66 @@
 {
-  "orange-warm": {
-    "5": {
-      "$value": "#faeee5"
-    },
-    "10": {
-      "$value": "#fbe0d0"
-    },
-    "20": {
-      "$value": "#f7bca2"
-    },
-    "30": {
-      "$value": "#f3966d"
-    },
-    "40": {
-      "$value": "#e17141"
-    },
-    "50": {
-      "$value": "#bd5727"
-    },
-    "60": {
-      "$value": "#914734"
-    },
-    "70": {
-      "$value": "#633a32"
-    },
-    "80": {
-      "$value": "#3d2925"
-    },
-    "90": {
-      "$value": "#1c1615"
-    },
-    "vivid": {
+  "color": {
+    "orange-warm": {
+      "$type": "color",
       "5": {
-        "$value": "#fff3ea"
+        "$value": "#faeee5"
       },
       "10": {
-        "$value": "#ffe2d1"
+        "$value": "#fbe0d0"
       },
       "20": {
-        "$value": "#fbbaa7"
+        "$value": "#f7bca2"
       },
       "30": {
-        "$value": "#fc906d"
+        "$value": "#f3966d"
       },
       "40": {
-        "$value": "#ff580a"
+        "$value": "#e17141"
       },
       "50": {
-        "$value": "#cf4900"
+        "$value": "#bd5727"
       },
       "60": {
-        "$value": "#a72f10"
+        "$value": "#914734"
       },
       "70": {
-        "$value": "#782312"
+        "$value": "#633a32"
       },
       "80": {
-        "$value": "#3d231d"
+        "$value": "#3d2925"
+      },
+      "90": {
+        "$value": "#1c1615"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fff3ea"
+        },
+        "10": {
+          "$value": "#ffe2d1"
+        },
+        "20": {
+          "$value": "#fbbaa7"
+        },
+        "30": {
+          "$value": "#fc906d"
+        },
+        "40": {
+          "$value": "#ff580a"
+        },
+        "50": {
+          "$value": "#cf4900"
+        },
+        "60": {
+          "$value": "#a72f10"
+        },
+        "70": {
+          "$value": "#782312"
+        },
+        "80": {
+          "$value": "#3d231d"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/orange.json b/tokens/colors/orange.json
index f54de9f4..1dc75d22 100644
--- a/tokens/colors/orange.json
+++ b/tokens/colors/orange.json
@@ -1,64 +1,66 @@
 {
-  "orange": {
-    "5": {
-      "$value": "#f6efe9"
-    },
-    "10": {
-      "$value": "#f2e4d4"
-    },
-    "20": {
-      "$value": "#f3bf90"
-    },
-    "30": {
-      "$value": "#f09860"
-    },
-    "40": {
-      "$value": "#dd7533"
-    },
-    "50": {
-      "$value": "#a86437"
-    },
-    "60": {
-      "$value": "#775540"
-    },
-    "70": {
-      "$value": "#524236"
-    },
-    "80": {
-      "$value": "#332d27"
-    },
-    "90": {
-      "$value": "#1b1614"
-    },
-    "vivid": {
+  "color": {
+    "orange": {
+      "$type": "color",
       "5": {
-        "$value": "#fef2e4"
+        "$value": "#f6efe9"
       },
       "10": {
-        "$value": "#fce2c5"
+        "$value": "#f2e4d4"
       },
       "20": {
-        "$value": "#ffbc78"
+        "$value": "#f3bf90"
       },
       "30": {
-        "$value": "#fa9441"
+        "$value": "#f09860"
       },
       "40": {
-        "$value": "#e66f0e"
+        "$value": "#dd7533"
       },
       "50": {
-        "$value": "#c05600"
+        "$value": "#a86437"
       },
       "60": {
-        "$value": "#8c471c"
+        "$value": "#775540"
       },
       "70": {
-        "$value": "#5f3617"
+        "$value": "#524236"
       },
       "80": {
-        "$value": "#352313"
+        "$value": "#332d27"
+      },
+      "90": {
+        "$value": "#1b1614"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fef2e4"
+        },
+        "10": {
+          "$value": "#fce2c5"
+        },
+        "20": {
+          "$value": "#ffbc78"
+        },
+        "30": {
+          "$value": "#fa9441"
+        },
+        "40": {
+          "$value": "#e66f0e"
+        },
+        "50": {
+          "$value": "#c05600"
+        },
+        "60": {
+          "$value": "#8c471c"
+        },
+        "70": {
+          "$value": "#5f3617"
+        },
+        "80": {
+          "$value": "#352313"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/red-cool.json b/tokens/colors/red-cool.json
index 18567e71..ad80b6db 100644
--- a/tokens/colors/red-cool.json
+++ b/tokens/colors/red-cool.json
@@ -1,64 +1,66 @@
 {
-  "red-cool": {
-    "5": {
-      "$value": "#f8eff1"
-    },
-    "10": {
-      "$value": "#f3e1e4"
-    },
-    "20": {
-      "$value": "#ecbec6"
-    },
-    "30": {
-      "$value": "#e09aa6"
-    },
-    "40": {
-      "$value": "#e16b80"
-    },
-    "50": {
-      "$value": "#cd425b"
-    },
-    "60": {
-      "$value": "#9e394b"
-    },
-    "70": {
-      "$value": "#68363f"
-    },
-    "80": {
-      "$value": "#40282c"
-    },
-    "90": {
-      "$value": "#1e1517"
-    },
-    "vivid": {
+  "color": {
+    "red-cool": {
+      "$type": "color",
       "5": {
-        "$value": "#fff2f5"
+        "$value": "#f8eff1"
       },
       "10": {
-        "$value": "#f8dfe2"
+        "$value": "#f3e1e4"
       },
       "20": {
-        "$value": "#f8b9c5"
+        "$value": "#ecbec6"
       },
       "30": {
-        "$value": "#fd8ba0"
+        "$value": "#e09aa6"
       },
       "40": {
-        "$value": "#f45d79"
+        "$value": "#e16b80"
       },
       "50": {
-        "$value": "#e41d3d"
+        "$value": "#cd425b"
       },
       "60": {
-        "$value": "#b21d38"
+        "$value": "#9e394b"
       },
       "70": {
-        "$value": "#822133"
+        "$value": "#68363f"
       },
       "80": {
-        "$value": "#4f1c24"
+        "$value": "#40282c"
+      },
+      "90": {
+        "$value": "#1e1517"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fff2f5"
+        },
+        "10": {
+          "$value": "#f8dfe2"
+        },
+        "20": {
+          "$value": "#f8b9c5"
+        },
+        "30": {
+          "$value": "#fd8ba0"
+        },
+        "40": {
+          "$value": "#f45d79"
+        },
+        "50": {
+          "$value": "#e41d3d"
+        },
+        "60": {
+          "$value": "#b21d38"
+        },
+        "70": {
+          "$value": "#822133"
+        },
+        "80": {
+          "$value": "#4f1c24"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/red-warm.json b/tokens/colors/red-warm.json
index 3b485cca..82e14d2d 100644
--- a/tokens/colors/red-warm.json
+++ b/tokens/colors/red-warm.json
@@ -1,64 +1,66 @@
 {
-  "red-warm": {
-    "5": {
-      "$value": "#f6efea"
-    },
-    "10": {
-      "$value": "#f4e3db"
-    },
-    "20": {
-      "$value": "#ecc0a7"
-    },
-    "30": {
-      "$value": "#dca081"
-    },
-    "40": {
-      "$value": "#d27a56"
-    },
-    "50": {
-      "$value": "#c3512c"
-    },
-    "60": {
-      "$value": "#805039"
-    },
-    "70": {
-      "$value": "#524236"
-    },
-    "80": {
-      "$value": "#332d29"
-    },
-    "90": {
-      "$value": "#1f1c18"
-    },
-    "vivid": {
+  "color": {
+    "red-warm": {
+      "$type": "color",
       "5": {
-        "$value": "#fff5ee"
+        "$value": "#f6efea"
       },
       "10": {
-        "$value": "#fce1d4"
+        "$value": "#f4e3db"
       },
       "20": {
-        "$value": "#f6bd9c"
+        "$value": "#ecc0a7"
       },
       "30": {
-        "$value": "#f39268"
+        "$value": "#dca081"
       },
       "40": {
-        "$value": "#ef5e25"
+        "$value": "#d27a56"
       },
       "50": {
-        "$value": "#d54309"
+        "$value": "#c3512c"
       },
       "60": {
-        "$value": "#9c3d10"
+        "$value": "#805039"
       },
       "70": {
-        "$value": "#63340f"
+        "$value": "#524236"
       },
       "80": {
-        "$value": "#3e2a1e"
+        "$value": "#332d29"
+      },
+      "90": {
+        "$value": "#1f1c18"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fff5ee"
+        },
+        "10": {
+          "$value": "#fce1d4"
+        },
+        "20": {
+          "$value": "#f6bd9c"
+        },
+        "30": {
+          "$value": "#f39268"
+        },
+        "40": {
+          "$value": "#ef5e25"
+        },
+        "50": {
+          "$value": "#d54309"
+        },
+        "60": {
+          "$value": "#9c3d10"
+        },
+        "70": {
+          "$value": "#63340f"
+        },
+        "80": {
+          "$value": "#3e2a1e"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/red.json b/tokens/colors/red.json
index 70db0aa5..7585a4fc 100644
--- a/tokens/colors/red.json
+++ b/tokens/colors/red.json
@@ -1,64 +1,66 @@
 {
-  "red": {
-    "5": {
-      "$value": "#f9eeee"
-    },
-    "10": {
-      "$value": "#f8e1de"
-    },
-    "20": {
-      "$value": "#f7bbb1"
-    },
-    "30": {
-      "$value": "#f2938c"
-    },
-    "40": {
-      "$value": "#e9695f"
-    },
-    "50": {
-      "$value": "#d83933"
-    },
-    "60": {
-      "$value": "#a23737"
-    },
-    "70": {
-      "$value": "#6f3331"
-    },
-    "80": {
-      "$value": "#3e2927"
-    },
-    "90": {
-      "$value": "#1b1616"
-    },
-    "vivid": {
+  "color": {
+    "red": {
+      "$type": "color",
       "5": {
-        "$value": "#fff3f2"
+        "$value": "#f9eeee"
       },
       "10": {
-        "$value": "#fde0db"
+        "$value": "#f8e1de"
       },
       "20": {
-        "$value": "#fdb8ae"
+        "$value": "#f7bbb1"
       },
       "30": {
-        "$value": "#ff8d7b"
+        "$value": "#f2938c"
       },
       "40": {
-        "$value": "#fb5a47"
+        "$value": "#e9695f"
       },
       "50": {
-        "$value": "#e52207"
+        "$value": "#d83933"
       },
       "60": {
-        "$value": "#b50909"
+        "$value": "#a23737"
       },
       "70": {
-        "$value": "#8b0a03"
+        "$value": "#6f3331"
       },
       "80": {
-        "$value": "#5c1111"
+        "$value": "#3e2927"
+      },
+      "90": {
+        "$value": "#1b1616"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fff3f2"
+        },
+        "10": {
+          "$value": "#fde0db"
+        },
+        "20": {
+          "$value": "#fdb8ae"
+        },
+        "30": {
+          "$value": "#ff8d7b"
+        },
+        "40": {
+          "$value": "#fb5a47"
+        },
+        "50": {
+          "$value": "#e52207"
+        },
+        "60": {
+          "$value": "#b50909"
+        },
+        "70": {
+          "$value": "#8b0a03"
+        },
+        "80": {
+          "$value": "#5c1111"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/violet-warm.json b/tokens/colors/violet-warm.json
index d5947861..78fb0e07 100644
--- a/tokens/colors/violet-warm.json
+++ b/tokens/colors/violet-warm.json
@@ -1,64 +1,66 @@
 {
-  "violet-warm": {
-    "5": {
-      "$value": "#f8f0f9"
-    },
-    "10": {
-      "$value": "#f6dff8"
-    },
-    "20": {
-      "$value": "#e2bee4"
-    },
-    "30": {
-      "$value": "#d29ad8"
-    },
-    "40": {
-      "$value": "#bf77c8"
-    },
-    "50": {
-      "$value": "#b04abd"
-    },
-    "60": {
-      "$value": "#864381"
-    },
-    "70": {
-      "$value": "#5c395a"
-    },
-    "80": {
-      "$value": "#382936"
-    },
-    "90": {
-      "$value": "#1b151b"
-    },
-    "vivid": {
+  "color": {
+    "violet-warm": {
+      "$type": "color",
       "5": {
-        "$value": "#fef2ff"
+        "$value": "#f8f0f9"
       },
       "10": {
-        "$value": "#fbdcff"
+        "$value": "#f6dff8"
       },
       "20": {
-        "$value": "#f4b2ff"
+        "$value": "#e2bee4"
       },
       "30": {
-        "$value": "#ee83ff"
+        "$value": "#d29ad8"
       },
       "40": {
-        "$value": "#d85bef"
+        "$value": "#bf77c8"
       },
       "50": {
-        "$value": "#be32d0"
+        "$value": "#b04abd"
       },
       "60": {
-        "$value": "#93348c"
+        "$value": "#864381"
       },
       "70": {
-        "$value": "#711e6c"
+        "$value": "#5c395a"
       },
       "80": {
-        "$value": "#481441"
+        "$value": "#382936"
+      },
+      "90": {
+        "$value": "#1b151b"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fef2ff"
+        },
+        "10": {
+          "$value": "#fbdcff"
+        },
+        "20": {
+          "$value": "#f4b2ff"
+        },
+        "30": {
+          "$value": "#ee83ff"
+        },
+        "40": {
+          "$value": "#d85bef"
+        },
+        "50": {
+          "$value": "#be32d0"
+        },
+        "60": {
+          "$value": "#93348c"
+        },
+        "70": {
+          "$value": "#711e6c"
+        },
+        "80": {
+          "$value": "#481441"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/violet.json b/tokens/colors/violet.json
index b5ebe553..46025a86 100644
--- a/tokens/colors/violet.json
+++ b/tokens/colors/violet.json
@@ -1,64 +1,66 @@
 {
-  "violet": {
-    "5": {
-      "$value": "#f4f1f9"
-    },
-    "10": {
-      "$value": "#ebe3f9"
-    },
-    "20": {
-      "$value": "#d0c3e9"
-    },
-    "30": {
-      "$value": "#b8a2e3"
-    },
-    "40": {
-      "$value": "#9d84d2"
-    },
-    "50": {
-      "$value": "#8168b3"
-    },
-    "60": {
-      "$value": "#665190"
-    },
-    "70": {
-      "$value": "#4c3d69"
-    },
-    "80": {
-      "$value": "#312b3f"
-    },
-    "90": {
-      "$value": "#18161d"
-    },
-    "vivid": {
+  "color": {
+    "violet": {
+      "$type": "color",
       "5": {
-        "$value": "#f7f2ff"
+        "$value": "#f4f1f9"
       },
       "10": {
-        "$value": "#ede3ff"
+        "$value": "#ebe3f9"
       },
       "20": {
-        "$value": "#d5bfff"
+        "$value": "#d0c3e9"
       },
       "30": {
-        "$value": "#c39deb"
+        "$value": "#b8a2e3"
       },
       "40": {
-        "$value": "#ad79e9"
+        "$value": "#9d84d2"
       },
       "50": {
-        "$value": "#9355dc"
+        "$value": "#8168b3"
       },
       "60": {
-        "$value": "#783cb9"
+        "$value": "#665190"
       },
       "70": {
-        "$value": "#54278f"
+        "$value": "#4c3d69"
       },
       "80": {
-        "$value": "#39215e"
+        "$value": "#312b3f"
+      },
+      "90": {
+        "$value": "#18161d"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#f7f2ff"
+        },
+        "10": {
+          "$value": "#ede3ff"
+        },
+        "20": {
+          "$value": "#d5bfff"
+        },
+        "30": {
+          "$value": "#c39deb"
+        },
+        "40": {
+          "$value": "#ad79e9"
+        },
+        "50": {
+          "$value": "#9355dc"
+        },
+        "60": {
+          "$value": "#783cb9"
+        },
+        "70": {
+          "$value": "#54278f"
+        },
+        "80": {
+          "$value": "#39215e"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/white-transparent.json b/tokens/colors/white-transparent.json
index 5caf0214..b5175ceb 100644
--- a/tokens/colors/white-transparent.json
+++ b/tokens/colors/white-transparent.json
@@ -1,35 +1,37 @@
 {
-  "white-transparent": {
-    "5": {
-      "$value": "rgba(255,255,255,0.01)"
-    },
-    "10": {
-      "$value": "rgba(255,255,255,0.1)"
-    },
-    "20": {
-      "$value": "rgba(255,255,255,0.2)"
-    },
-    "30": {
-      "$value": "rgba(255,255,255,0.3)"
-    },
-    "40": {
-      "$value": "rgba(255,255,255,0.4)"
-    },
-    "50": {
-      "$value": "rgba(255,255,255,0.5)"
-    },
-    "60": {
-      "$value": "rgba(255,255,255,0.6)"
-    },
-    "70": {
-      "$value": "rgba(255,255,255,0.7)"
-    },
-    "80": {
-      "$value": "rgba(255,255,255,0.8)"
-    },
-    "90": {
-      "$value": "rgba(255,255,255,0.9)"
+  "color": {
+    "white-transparent": {
+      "$type": "color",
+      "5": {
+        "$value": "rgba(255,255,255,0.01)"
+      },
+      "10": {
+        "$value": "rgba(255,255,255,0.1)"
+      },
+      "20": {
+        "$value": "rgba(255,255,255,0.2)"
+      },
+      "30": {
+        "$value": "rgba(255,255,255,0.3)"
+      },
+      "40": {
+        "$value": "rgba(255,255,255,0.4)"
+      },
+      "50": {
+        "$value": "rgba(255,255,255,0.5)"
+      },
+      "60": {
+        "$value": "rgba(255,255,255,0.6)"
+      },
+      "70": {
+        "$value": "rgba(255,255,255,0.7)"
+      },
+      "80": {
+        "$value": "rgba(255,255,255,0.8)"
+      },
+      "90": {
+        "$value": "rgba(255,255,255,0.9)"
+      }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/colors/yellow.json b/tokens/colors/yellow.json
index 827d9c84..186597e1 100644
--- a/tokens/colors/yellow.json
+++ b/tokens/colors/yellow.json
@@ -1,64 +1,66 @@
 {
-  "yellow": {
-    "5": {
-      "$value": "#faf3d1"
-    },
-    "10": {
-      "$value": "#f5e6af"
-    },
-    "20": {
-      "$value": "#e6c74c"
-    },
-    "30": {
-      "$value": "#c9ab48"
-    },
-    "40": {
-      "$value": "#a88f48"
-    },
-    "50": {
-      "$value": "#8a7237"
-    },
-    "60": {
-      "$value": "#6b5a39"
-    },
-    "70": {
-      "$value": "#504332"
-    },
-    "80": {
-      "$value": "#332d27"
-    },
-    "90": {
-      "$value": "#1a1614"
-    },
-    "vivid": {
+  "color": {
+    "yellow": {
+      "$type": "color",
       "5": {
-        "$value": "#fff5c2"
+        "$value": "#faf3d1"
       },
       "10": {
-        "$value": "#fee685"
+        "$value": "#f5e6af"
       },
       "20": {
-        "$value": "#face00"
+        "$value": "#e6c74c"
       },
       "30": {
-        "$value": "#ddaa01"
+        "$value": "#c9ab48"
       },
       "40": {
-        "$value": "#b38c00"
+        "$value": "#a88f48"
       },
       "50": {
-        "$value": "#947100"
+        "$value": "#8a7237"
       },
       "60": {
-        "$value": "#776017"
+        "$value": "#6b5a39"
       },
       "70": {
-        "$value": "#5c4809"
+        "$value": "#504332"
       },
       "80": {
-        "$value": "#422d19"
+        "$value": "#332d27"
+      },
+      "90": {
+        "$value": "#1a1614"
+      },
+      "vivid": {
+        "5": {
+          "$value": "#fff5c2"
+        },
+        "10": {
+          "$value": "#fee685"
+        },
+        "20": {
+          "$value": "#face00"
+        },
+        "30": {
+          "$value": "#ddaa01"
+        },
+        "40": {
+          "$value": "#b38c00"
+        },
+        "50": {
+          "$value": "#947100"
+        },
+        "60": {
+          "$value": "#776017"
+        },
+        "70": {
+          "$value": "#5c4809"
+        },
+        "80": {
+          "$value": "#422d19"
+        }
       }
     }
-  },
-  "$type": "color"
+  }
 }
diff --git a/tokens/spacing/spacing.json b/tokens/spacing/spacing.json
index ad6087b0..63b3f011 100644
--- a/tokens/spacing/spacing.json
+++ b/tokens/spacing/spacing.json
@@ -1,5 +1,6 @@
 {
   "spacing": {
+    "$type": "dimension",
     "05": {
       "$value": { "value": ".25", "unit": "rem" }
     },
@@ -23,6 +24,7 @@
     }
   },
   "site-margins": {
+    "$type": "dimension",
     "mobile-width": {
       "$value": "{spacing.2}"
     },
@@ -31,9 +33,9 @@
     }
   },
   "size": {
+    "$type": "dimension",
     "touch-target": {
       "$value": "{spacing.6}"
     }
-  },
-  "$type": "dimension"
+  }
 }

From ede9723be5fbc33a8b916f9ad7324804ea3aed81 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <ethan.gardner@gsa.gov>
Date: Thu, 21 May 2026 17:43:15 -0400
Subject: [PATCH 3/5] clean up repetitive test setup

---
 internals/token-helpers/index.test.ts | 140 ++++++++++++--------------
 1 file changed, 64 insertions(+), 76 deletions(-)

diff --git a/internals/token-helpers/index.test.ts b/internals/token-helpers/index.test.ts
index d376db0a..b1eb8ca8 100644
--- a/internals/token-helpers/index.test.ts
+++ b/internals/token-helpers/index.test.ts
@@ -2,122 +2,110 @@ import { describe, it, expect } from "vitest";
 import type { TransformedToken, PlatformConfig } from "style-dictionary/types";
 import { generateTokenName, getTokenValueWithUnit } from "./index";
 
-describe("generateTokenName", () => {
-  const token: TransformedToken = {
+const baseToken: TransformedToken = {
+  $value: { value: "75", unit: "rem" },
+  filePath: "tokens/breakpoints/breakpoints.json",
+  isSource: true,
+  $type: "dimension",
+  key: "{breakpoint.desktop-lg}",
+  original: {
     $value: { value: "75", unit: "rem" },
-    filePath: "tokens/breakpoints/breakpoints.json",
-    isSource: true,
     $type: "dimension",
     key: "{breakpoint.desktop-lg}",
-    original: {
-      $value: { value: "75", unit: "rem" },
-      $type: "dimension",
-      key: "{breakpoint.desktop-lg}",
-    },
-    name: "desktop-lg",
-    attributes: {},
-    path: ["breakpoint", "desktop-lg"],
-  };
+  },
+  name: "desktop-lg",
+  attributes: {},
+  path: ["breakpoint", "desktop-lg"],
+};
+
+const options: PlatformConfig = {
+  prefix: "usa",
+  transforms: [],
+  buildPath: "",
+  files: [],
+  log: {},
+  actions: [],
+};
 
-  const options: PlatformConfig = {
-    prefix: "usa",
-    transforms: [],
-    buildPath: "",
-    files: [],
-    log: {},
-    actions: [],
-  };
+function createToken(
+  overrides: Partial<TransformedToken> = {},
+): TransformedToken {
+  return { ...baseToken, ...overrides };
+}
 
+describe("generateTokenName", () => {
   it("should generate token name for breakpoint prefix", () => {
-    const result = generateTokenName(token, options);
+    const result = generateTokenName(baseToken, options);
     expect(result).toBe("usa-breakpoint-desktop-lg");
   });
 
   it("should generate token name for spacing prefix", () => {
-    const spacingToken: TransformedToken = {
-      ...token,
-      path: ["site-margins", "width"],
-    };
-    const result = generateTokenName(spacingToken, options);
+    const result = generateTokenName(
+      createToken({ path: ["site-margins", "width"] }),
+      options,
+    );
     expect(result).toBe("usa-site-margins-width");
   });
 
   it("should generate token name for color with single nested key", () => {
-    const colorTokenSingle: TransformedToken = {
-      ...token,
-      filePath: "tokens/colors/global.json",
-      path: ["color", "black"],
-    };
-    const result = generateTokenName(colorTokenSingle, options);
+    const result = generateTokenName(
+      createToken({
+        filePath: "tokens/colors/global.json",
+        path: ["color", "black"],
+      }),
+      options,
+    );
     expect(result).toBe("usa-color-black");
   });
 
   it("should generate token name for color with multiple nested keys", () => {
-    const colorTokenMulti: TransformedToken = {
-      ...token,
-      filePath: "tokens/colors/blue.json",
-      path: ["color", "blue", "5"],
-    };
-    const result = generateTokenName(colorTokenMulti, options);
+    const result = generateTokenName(
+      createToken({
+        filePath: "tokens/colors/blue.json",
+        path: ["color", "blue", "5"],
+      }),
+      options,
+    );
     expect(result).toBe("usa-color-blue-5");
   });
 
   it("should generate token name for color with vivid variant", () => {
-    const colorTokenVivid: TransformedToken = {
-      ...token,
-      filePath: "tokens/colors/blue.json",
-      path: ["color", "blue", "vivid", "50"],
-    };
-    const result = generateTokenName(colorTokenVivid, options);
+    const result = generateTokenName(
+      createToken({
+        filePath: "tokens/colors/blue.json",
+        path: ["color", "blue", "vivid", "50"],
+      }),
+      options,
+    );
     expect(result).toBe("usa-color-blue-vivid-50");
   });
 
   it("should generate token name fallback for other cases", () => {
-    const otherToken: TransformedToken = {
-      ...token,
-      path: ["font", "base-size"],
-    };
-    const result = generateTokenName(otherToken, options);
+    const result = generateTokenName(
+      createToken({ path: ["font", "base-size"] }),
+      options,
+    );
     expect(result).toBe("usa-font-base-size");
   });
 });
 
 describe("getTokenValueWithUnit", () => {
-  const defaultToken: TransformedToken = {
-    $value: { value: "75", unit: "rem" },
-    $type: "dimension",
-    isSource: true,
-    key: "desktop-lg",
-    name: "desktop-lg",
-    attributes: {},
-    path: ["breakpoint", "desktop-lg"],
-    original: {
-      $value: { value: "75", unit: "rem" },
-      $type: "dimension",
-      key: "desktop-lg",
-    },
-  };
-
   it("should return value + unit for dimension tokens with object value", () => {
-    const result = getTokenValueWithUnit(defaultToken);
+    const result = getTokenValueWithUnit(baseToken);
     expect(result).toBe("75rem");
   });
 
   it("should return value string when unit is missing in dimension object", () => {
-    const token = {
-      ...defaultToken,
-      $value: { value: "30" },
-    };
-    const result = getTokenValueWithUnit(token);
+    const result = getTokenValueWithUnit(
+      createToken({ $value: { value: "30" } }),
+    );
     expect(result).toBe("30");
   });
 
   it("should return raw value if token type is not dimension", () => {
-    const token = {
-      $value: "#fff2f5",
-      $type: "color",
-    };
-    const result = getTokenValueWithUnit(token);
+    const result = getTokenValueWithUnit(
+      createToken({ $value: "#fff2f5", $type: "color" }),
+    );
     expect(result).toBe("#fff2f5");
   });
 });

From 0d51293131619b07a773540d5880b525b01b5bb7 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <ethan.gardner@gsa.gov>
Date: Thu, 21 May 2026 17:47:34 -0400
Subject: [PATCH 4/5] use func for token output format

---
 config/style-dictionary.config.js | 35 +++++++++++++------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/config/style-dictionary.config.js b/config/style-dictionary.config.js
index 4d5f5cf1..5c4191c8 100644
--- a/config/style-dictionary.config.js
+++ b/config/style-dictionary.config.js
@@ -17,28 +17,23 @@ StyleDictionary.registerTransform({
   transform: getTokenValueWithUnit,
 });
 
+function makePlatform(format) {
+  return {
+    transforms: ["name/uswds-theme", "value/uswds-units"],
+    prefix: "usa",
+    buildPath: `build/${format}/`,
+    files: tokenGroups.map((group) => ({
+      destination: format === "scss" ? `_${group}.scss` : `${group}.css`,
+      format: `${format}/variables`,
+      filter: (token) => token.filePath.includes(`tokens/${group}/`),
+    })),
+  };
+}
+
 export default {
   source: ["tokens/**/*.json"],
   platforms: {
-    scss: {
-      transforms: ["name/uswds-theme", "value/uswds-units"],
-      prefix: "usa",
-      buildPath: "build/scss/",
-      files: tokenGroups.map((group) => ({
-        destination: `_${group}.scss`,
-        format: "scss/variables",
-        filter: (token) => token.filePath.includes(`tokens/${group}/`),
-      })),
-    },
-    css: {
-      transforms: ["name/uswds-theme", "value/uswds-units"],
-      prefix: "usa",
-      buildPath: "build/css/",
-      files: tokenGroups.map((group) => ({
-        destination: `${group}.css`,
-        format: "css/variables",
-        filter: (token) => token.filePath.includes(`tokens/${group}/`),
-      })),
-    },
+    scss: makePlatform("scss"),
+    css: makePlatform("css"),
   },
 };

From 84d261b001f876b10ae2cd293cbfa97a06dfb8f7 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <edgincvg@gmail.com>
Date: Thu, 21 May 2026 19:47:00 -0400
Subject: [PATCH 5/5] use chaining for filepath

---
 config/style-dictionary.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/style-dictionary.config.js b/config/style-dictionary.config.js
index 5c4191c8..b4550737 100644
--- a/config/style-dictionary.config.js
+++ b/config/style-dictionary.config.js
@@ -25,7 +25,7 @@ function makePlatform(format) {
     files: tokenGroups.map((group) => ({
       destination: format === "scss" ? `_${group}.scss` : `${group}.css`,
       format: `${format}/variables`,
-      filter: (token) => token.filePath.includes(`tokens/${group}/`),
+      filter: (token) => token.filePath?.includes(`tokens/${group}/`),
     })),
   };
 }