From 3c6d1c9aa9705b61a326cc0bd6e34f289b0ae022 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 03:27:23 +0200
Subject: [PATCH 1/3] feat(tokens): switch the build to the 2.0 variable export

The tokens.json export now comes from the WB Token Export plugin:
Numerals is gone, Canvas (root-scoped) and per-theme Effects sets are
in, and font-size primitives are emitted in rem while the other
dimensions stay in px, as the design docs specify. The provisional
stylesheet and both of its wire-ups go away - every value it carried
ships in tokens.css now.
---
 packages/tokens/config.ts               |   14 +-
 packages/tokens/src/tokens-to-css.ts    |    9 +-
 packages/tokens/tokens.json             | 5267 +++++++++++------------
 packages/ui/combine-css-bundle.mts      |    2 +-
 packages/ui/src/index.ts                |    1 -
 packages/ui/src/styles/_provisional.css |   41 -
 packages/ui/vite.config.mts             |    2 +-
 7 files changed, 2637 insertions(+), 2699 deletions(-)
 delete mode 100644 packages/ui/src/styles/_provisional.css

diff --git a/packages/tokens/config.ts b/packages/tokens/config.ts
index 6005e97ce..5f498808e 100644
--- a/packages/tokens/config.ts
+++ b/packages/tokens/config.ts
@@ -3,8 +3,12 @@ import { Config } from './src/types';
 // Set names must match tokens.json exports verbatim - buildManifest() validates
 // this at build start and derives all file paths from them.
 export const config: Config = {
-  primitives: ['Numerals/Mode 1', 'Primitives/Mode 1'],
+  primitives: ['Primitives/Mode 1'],
   themes: [
+    {
+      set: 'Canvas/value',
+      selector: ':root',
+    },
     {
       set: 'Tokens/Dark',
       selector: "html[data-theme='dark']",
@@ -13,5 +17,13 @@ export const config: Config = {
       set: 'Tokens/Light',
       selector: "html[data-theme='light']",
     },
+    {
+      set: 'Effects/dark',
+      selector: "html[data-theme='dark']",
+    },
+    {
+      set: 'Effects/light',
+      selector: "html[data-theme='light']",
+    },
   ],
 };
diff --git a/packages/tokens/src/tokens-to-css.ts b/packages/tokens/src/tokens-to-css.ts
index 05284d4ac..8816df827 100644
--- a/packages/tokens/src/tokens-to-css.ts
+++ b/packages/tokens/src/tokens-to-css.ts
@@ -7,6 +7,13 @@ import { Manifest, TokenSetEntry } from './types';
 
 register(StyleDictionary);
 
+StyleDictionary.registerTransform({
+  name: 'wb/font-size-rem',
+  type: 'value',
+  filter: (token) => token.path.includes('font-size'),
+  transform: (token) => `${Number.parseFloat(String(token.value)) / 16}rem`,
+});
+
 export async function tokensToCss(manifest: Manifest) {
   await processPrimitiveTokens(manifest.primitives);
   await processThemeTokens(manifest);
@@ -51,7 +58,7 @@ function createSDConfig({ fileName, selector, source, filter }: SDConfigParams)
     platforms: {
       css: {
         transformGroup: 'tokens-studio',
-        transforms: ['name/kebab'],
+        transforms: ['name/kebab', 'wb/font-size-rem'],
         buildPath: OUTPUT_DIR,
         options: {
           outputReferences: true,
diff --git a/packages/tokens/tokens.json b/packages/tokens/tokens.json
index 728b803d8..dca8134cb 100644
--- a/packages/tokens/tokens.json
+++ b/packages/tokens/tokens.json
@@ -1,6 +1,6 @@
 {
   "Primitives/Mode 1": {
-    "ax": {
+    "wb": {
       "colors": {
         "gray-100": {
           "value": "#ffffff",
@@ -63,59 +63,59 @@
           "type": "color"
         },
         "green-100": {
-          "value": "#e9f7ee",
+          "value": "#dcfce7",
           "type": "color"
         },
         "green-200": {
-          "value": "#c2edd1",
+          "value": "#bbf7d0",
           "type": "color"
         },
         "green-300": {
-          "value": "#29974e",
+          "value": "#4ade80",
           "type": "color"
         },
         "green-400": {
-          "value": "#007c29",
+          "value": "#16a34a",
           "type": "color"
         },
         "orange-100": {
-          "value": "#f7f2e9",
+          "value": "#fef3c7",
           "type": "color"
         },
         "orange-200": {
-          "value": "#eddfc2",
+          "value": "#fde68a",
           "type": "color"
         },
         "orange-300": {
-          "value": "#ffaf10",
+          "value": "#fcd34d",
           "type": "color"
         },
         "orange-400": {
-          "value": "#e59800",
+          "value": "#f59e0b",
           "type": "color"
         },
         "red-100": {
-          "value": "#f7e9e9",
+          "value": "#fee2e2",
           "type": "color"
         },
         "red-200": {
-          "value": "#edc2c2",
+          "value": "#fca5a5",
           "type": "color"
         },
         "red-300": {
-          "value": "#deadad",
+          "value": "#f87171",
           "type": "color"
         },
         "red-400": {
-          "value": "#962929",
+          "value": "#e02020",
           "type": "color"
         },
         "red-500": {
-          "value": "#7d0000",
+          "value": "#c41a1a",
           "type": "color"
         },
         "red-600": {
-          "value": "#670000",
+          "value": "#a51515",
           "type": "color"
         },
         "gray-650": {
@@ -127,131 +127,131 @@
           "type": "color"
         },
         "green-400-10": {
-          "value": "#007c291a",
+          "value": "rgba(22, 163, 74, 0.1)",
           "type": "color"
         },
         "orange-400-10": {
-          "value": "#e598001a",
+          "value": "rgba(245, 158, 11, 0.1)",
           "type": "color"
         },
         "red-400-10": {
-          "value": "#9629291a",
+          "value": "rgba(224, 32, 32, 0.1)",
           "type": "color"
         },
         "red-400-20": {
-          "value": "#96292933",
+          "value": "rgba(224, 32, 32, 0.2)",
           "type": "color"
         },
         "red-400-50": {
-          "value": "#96292980",
+          "value": "rgba(224, 32, 32, 0.5)",
           "type": "color"
         },
         "gray-100-50": {
-          "value": "#ffffff80",
+          "value": "rgba(255, 255, 255, 0.5)",
           "type": "color"
         },
         "gray-100-30": {
-          "value": "#ffffff4d",
+          "value": "rgba(255, 255, 255, 0.3)",
           "type": "color"
         },
         "gray-900-50": {
-          "value": "#07070880",
+          "value": "rgba(7, 7, 8, 0.5)",
           "type": "color"
         },
         "gray-900-30": {
-          "value": "#0707084d",
+          "value": "rgba(7, 7, 8, 0.3)",
           "type": "color"
         },
         "gray-100-75": {
-          "value": "#ffffffbf",
+          "value": "rgba(255, 255, 255, 0.75)",
           "type": "color"
         },
         "red-400-30": {
-          "value": "#9629294d",
+          "value": "rgba(224, 32, 32, 0.3)",
           "type": "color"
         },
         "red-100-10": {
-          "value": "#f7e9e91a",
+          "value": "rgba(254, 226, 226, 0.1)",
           "type": "color"
         },
         "red-100-20": {
-          "value": "#f7e9e933",
+          "value": "rgba(254, 226, 226, 0.2)",
           "type": "color"
         },
         "red-100-30": {
-          "value": "#f7e9e94d",
+          "value": "rgba(254, 226, 226, 0.3)",
           "type": "color"
         },
         "red-100-50": {
-          "value": "#f7e9e980",
+          "value": "rgba(254, 226, 226, 0.5)",
           "type": "color"
         },
         "blue-400-10": {
-          "value": "#336dff1a",
+          "value": "rgba(51, 109, 255, 0.1)",
           "type": "color"
         },
         "blue-400-20": {
-          "value": "#336dff33",
+          "value": "rgba(51, 109, 255, 0.2)",
           "type": "color"
         },
         "blue-400-30": {
-          "value": "#336dff4d",
+          "value": "rgba(51, 109, 255, 0.3)",
           "type": "color"
         },
         "blue-400-50": {
-          "value": "#336dff80",
+          "value": "rgba(51, 109, 255, 0.5)",
           "type": "color"
         },
         "green-400-20": {
-          "value": "#007c2933",
+          "value": "rgba(22, 163, 74, 0.2)",
           "type": "color"
         },
         "green-400-30": {
-          "value": "#007c294d",
+          "value": "rgba(22, 163, 74, 0.3)",
           "type": "color"
         },
         "green-400-50": {
-          "value": "#007c2980",
+          "value": "rgba(22, 163, 74, 0.5)",
           "type": "color"
         },
         "orange-400-20": {
-          "value": "#e5980033",
+          "value": "rgba(245, 158, 11, 0.2)",
           "type": "color"
         },
         "orange-400-30": {
-          "value": "#e598004d",
+          "value": "rgba(245, 158, 11, 0.3)",
           "type": "color"
         },
         "orange-400-50": {
-          "value": "#e5980080",
+          "value": "rgba(245, 158, 11, 0.5)",
           "type": "color"
         },
         "gray-100-10": {
-          "value": "#ffffff1a",
+          "value": "rgba(255, 255, 255, 0.1)",
           "type": "color"
         },
         "gray-100-20": {
-          "value": "#ffffff33",
+          "value": "rgba(255, 255, 255, 0.2)",
           "type": "color"
         },
         "gray-900-10": {
-          "value": "#0707081a",
+          "value": "rgba(7, 7, 8, 0.1)",
           "type": "color"
         },
         "gray-900-20": {
-          "value": "#07070833",
+          "value": "rgba(7, 7, 8, 0.2)",
           "type": "color"
         },
         "gray-900-5": {
-          "value": "#0707080d",
+          "value": "rgba(7, 7, 8, 0.05)",
           "type": "color"
         },
         "gray-900-75": {
-          "value": "#07070880",
+          "value": "rgba(7, 7, 8, 0.75)",
           "type": "color"
         },
         "gray-100-5": {
-          "value": "#ffffff0d",
+          "value": "rgba(255, 255, 255, 0.05)",
           "type": "color"
         },
         "blue-350": {
@@ -259,87 +259,87 @@
           "type": "color"
         },
         "acc1-50": {
-          "value": "#f0f8ff",
+          "value": "#edf2ff",
           "type": "color"
         },
         "acc1-100": {
-          "value": "#e0f0fe",
+          "value": "#ccd9ff",
           "type": "color"
         },
         "acc1-200": {
-          "value": "#bbe2fc",
+          "value": "#99b3ff",
           "type": "color"
         },
         "acc1-300": {
-          "value": "#5fbefa",
+          "value": "#6b90ff",
           "type": "color"
         },
         "acc1-400": {
-          "value": "#3ab0f6",
+          "value": "#527dff",
           "type": "color"
         },
         "acc1-500": {
-          "value": "#1096e7",
+          "value": "#3969ff",
           "type": "color"
         },
         "acc1-600": {
-          "value": "#0477c5",
+          "value": "#144cf5",
           "type": "color"
         },
         "acc1-700": {
-          "value": "#045fa0",
+          "value": "#0f3fcc",
           "type": "color"
         },
         "acc1-800": {
-          "value": "#085184",
+          "value": "#11349c",
           "type": "color"
         },
         "acc1-900": {
-          "value": "#0d446d",
+          "value": "#132c76",
           "type": "color"
         },
         "acc1-950": {
-          "value": "#092b48",
+          "value": "#111f4b",
           "type": "color"
         },
         "acc1-500-10": {
-          "value": "#1096e71a",
+          "value": "rgba(57, 105, 255, 0.1)",
           "type": "color"
         },
         "acc1-500-20": {
-          "value": "#1096e733",
+          "value": "rgba(57, 105, 255, 0.2)",
           "type": "color"
         },
         "acc1-500-30": {
-          "value": "#1096e74d",
+          "value": "rgba(57, 105, 255, 0.3)",
           "type": "color"
         },
         "acc1-500-50": {
-          "value": "#1096e780",
+          "value": "rgba(57, 105, 255, 0.5)",
           "type": "color"
         },
         "acc1-500-40": {
-          "value": "#1096e766",
+          "value": "rgba(57, 105, 255, 0.4)",
           "type": "color"
         },
         "acc1-950-10": {
-          "value": "#092b481a",
+          "value": "rgba(17, 31, 75, 0.1)",
           "type": "color"
         },
         "acc1-950-20": {
-          "value": "#092b4833",
+          "value": "rgba(17, 31, 75, 0.2)",
           "type": "color"
         },
         "acc1-950-30": {
-          "value": "#092b484d",
+          "value": "rgba(17, 31, 75, 0.3)",
           "type": "color"
         },
         "acc1-950-50": {
-          "value": "#092b4880",
+          "value": "rgba(17, 31, 75, 0.5)",
           "type": "color"
         },
         "acc1-950-40": {
-          "value": "#092b4866",
+          "value": "rgba(17, 31, 75, 0.4)",
           "type": "color"
         },
         "acc2-50": {
@@ -367,23 +367,23 @@
           "type": "color"
         },
         "acc2-500-10": {
-          "value": "#ed4c461a",
+          "value": "rgba(237, 76, 70, 0.1)",
           "type": "color"
         },
         "acc2-500-20": {
-          "value": "#ed4c4633",
+          "value": "rgba(237, 76, 70, 0.2)",
           "type": "color"
         },
         "acc2-500-30": {
-          "value": "#ed4c464d",
+          "value": "rgba(237, 76, 70, 0.3)",
           "type": "color"
         },
         "acc2-500-40": {
-          "value": "#ed4c4666",
+          "value": "rgba(237, 76, 70, 0.4)",
           "type": "color"
         },
         "acc2-500-50": {
-          "value": "#ed4c4680",
+          "value": "rgba(237, 76, 70, 0.5)",
           "type": "color"
         },
         "acc2-600": {
@@ -407,23 +407,23 @@
           "type": "color"
         },
         "acc2-950-10": {
-          "value": "#440d0b1a",
+          "value": "rgba(68, 13, 11, 0.1)",
           "type": "color"
         },
         "acc2-950-20": {
-          "value": "#440d0b33",
+          "value": "rgba(68, 13, 11, 0.2)",
           "type": "color"
         },
         "acc2-950-30": {
-          "value": "#440d0b4d",
+          "value": "rgba(68, 13, 11, 0.3)",
           "type": "color"
         },
         "acc2-950-40": {
-          "value": "#440d0b66",
+          "value": "rgba(68, 13, 11, 0.4)",
           "type": "color"
         },
         "acc2-950-50": {
-          "value": "#440d0b80",
+          "value": "rgba(68, 13, 11, 0.5)",
           "type": "color"
         },
         "acc3-50": {
@@ -559,2850 +559,2811 @@
           "type": "color"
         },
         "acc3-500-10": {
-          "value": "#0bc1751a",
+          "value": "rgba(11, 193, 117, 0.1)",
           "type": "color"
         },
         "acc3-500-20": {
-          "value": "#0bc17533",
+          "value": "rgba(11, 193, 117, 0.2)",
           "type": "color"
         },
         "acc3-500-30": {
-          "value": "#0bc1754d",
+          "value": "rgba(11, 193, 117, 0.3)",
           "type": "color"
         },
         "acc3-500-50": {
-          "value": "#0bc17580",
+          "value": "rgba(11, 193, 117, 0.5)",
           "type": "color"
         },
         "acc4-500-10": {
-          "value": "#ba5af21a",
+          "value": "rgba(186, 90, 242, 0.1)",
           "type": "color"
         },
         "acc4-500-20": {
-          "value": "#ba5af233",
+          "value": "rgba(186, 90, 242, 0.2)",
           "type": "color"
         },
         "acc4-500-30": {
-          "value": "#ba5af24d",
+          "value": "rgba(186, 90, 242, 0.3)",
           "type": "color"
         },
         "acc4-500-50": {
-          "value": "#ba5af280",
+          "value": "rgba(186, 90, 242, 0.5)",
           "type": "color"
         },
         "acc5-500-10": {
-          "value": "#f4841b1a",
+          "value": "rgba(244, 132, 27, 0.1)",
           "type": "color"
         },
         "acc5-500-20": {
-          "value": "#f4841b33",
+          "value": "rgba(244, 132, 27, 0.2)",
           "type": "color"
         },
         "acc5-500-30": {
-          "value": "#f4841b4d",
+          "value": "rgba(244, 132, 27, 0.3)",
           "type": "color"
         },
         "acc5-500-50": {
-          "value": "#f4841b80",
+          "value": "rgba(244, 132, 27, 0.5)",
           "type": "color"
         },
         "acc3-500-40": {
-          "value": "#0bc17566",
+          "value": "rgba(11, 193, 117, 0.4)",
           "type": "color"
         },
         "acc4-500-40": {
-          "value": "#ba5af266",
+          "value": "rgba(186, 90, 242, 0.4)",
           "type": "color"
         },
         "acc5-500-40": {
-          "value": "#f4841b66",
+          "value": "rgba(244, 132, 27, 0.4)",
           "type": "color"
         },
-        "acc6-50": {
-          "value": "#f1f2ff",
+        "blue-50": {
+          "value": "#f4f7fd",
           "type": "color"
         },
-        "acc6-100": {
-          "value": "#dddffe",
+        "blue-700": {
+          "value": "#062277",
           "type": "color"
         },
-        "acc6-200": {
-          "value": "#bbbefc",
+        "blue-800": {
+          "value": "#000752",
           "type": "color"
         },
-        "acc6-300": {
-          "value": "#999efb",
+        "blue-900": {
+          "value": "#000032",
           "type": "color"
         },
-        "acc6-400": {
-          "value": "#777df9",
+        "blue-950": {
+          "value": "#000025",
           "type": "color"
         },
-        "acc6-500": {
-          "value": "#555df8",
+        "green-50": {
+          "value": "#f0fdf4",
           "type": "color"
         },
-        "acc6-600": {
-          "value": "#444ac6",
+        "green-500": {
+          "value": "#15803d",
           "type": "color"
         },
-        "acc6-700": {
-          "value": "#333895",
+        "green-600": {
+          "value": "#166534",
           "type": "color"
         },
-        "acc6-800": {
-          "value": "#222563",
+        "green-700": {
+          "value": "#14532d",
           "type": "color"
         },
-        "acc6-900": {
-          "value": "#111332",
+        "green-800": {
+          "value": "#0f3d20",
           "type": "color"
         },
-        "acc6-950": {
-          "value": "#080a24",
+        "green-900": {
+          "value": "#0a2e14",
           "type": "color"
         },
-        "acc7-50": {
-          "value": "#e3e3e3",
+        "green-950": {
+          "value": "#051a0c",
           "type": "color"
         },
-        "acc7- 100": {
-          "value": "#cfd0d6",
+        "orange-50": {
+          "value": "#fffbeb",
           "type": "color"
         },
-        "acc7- 200": {
-          "value": "#a0a1ad",
+        "orange-500": {
+          "value": "#d97706",
           "type": "color"
         },
-        "acc7- 300": {
-          "value": "#707184",
+        "orange-600": {
+          "value": "#c07c00",
           "type": "color"
         },
-        "acc7- 400": {
-          "value": "#41425b",
+        "orange-700": {
+          "value": "#955f00",
           "type": "color"
         },
-        "acc7- 500": {
-          "value": "#111332",
+        "orange-800": {
+          "value": "#6b4300",
           "type": "color"
         },
-        "acc7- 600": {
-          "value": "#0e0f28",
+        "orange-900": {
+          "value": "#3d2800",
           "type": "color"
         },
-        "acc7- 700": {
-          "value": "#0a0b1e",
+        "orange-950": {
+          "value": "#221700",
           "type": "color"
         },
-        "acc7- 800": {
-          "value": "#070814",
+        "red-50": {
+          "value": "#fff5f5",
           "type": "color"
         },
-        "acc7- 900": {
-          "value": "#03040a",
+        "red-700": {
+          "value": "#861010",
           "type": "color"
         },
-        "acc7- 950": {
-          "value": "#010208",
+        "red-800": {
+          "value": "#5c0a0a",
           "type": "color"
         },
-        "acc7-100": {
-          "value": "#cfd0d6",
+        "red-900": {
+          "value": "#3b0606",
           "type": "color"
         },
-        "acc7-200": {
-          "value": "#a0a1ad",
+        "red-950": {
+          "value": "#250404",
           "type": "color"
         },
-        "acc7-300": {
-          "value": "#707184",
+        "acc3-950-10": {
+          "value": "rgba(2, 49, 33, 0.1)",
           "type": "color"
         },
-        "acc7-400": {
-          "value": "#41425b",
+        "acc3-950-20": {
+          "value": "rgba(2, 49, 33, 0.2)",
           "type": "color"
         },
-        "acc7-500": {
-          "value": "#111332",
+        "acc3-950-30": {
+          "value": "rgba(2, 49, 33, 0.3)",
           "type": "color"
         },
-        "acc7-600": {
-          "value": "#0e0f28",
+        "acc3-950-40": {
+          "value": "rgba(2, 49, 33, 0.4)",
           "type": "color"
         },
-        "acc7-700": {
-          "value": "#0a0b1e",
+        "acc3-950-50": {
+          "value": "rgba(2, 49, 33, 0.5)",
           "type": "color"
         },
-        "acc7-800": {
-          "value": "#070814",
+        "acc4-950-10": {
+          "value": "rgba(69, 10, 97, 0.1)",
           "type": "color"
         },
-        "acc7-900": {
-          "value": "#03040a",
+        "acc4-950-20": {
+          "value": "rgba(69, 10, 97, 0.2)",
           "type": "color"
         },
-        "acc7-950": {
-          "value": "#010208",
+        "acc4-950-30": {
+          "value": "rgba(69, 10, 97, 0.3)",
           "type": "color"
-        }
-      }
-    }
-  },
-  "Tokens/Light": {
-    "ax": {
-      "button-primary-bg-default": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "button-primary-bg-hover": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "button-primary-bg-active": {
-        "value": "{ax.colors.acc1-700}",
-        "type": "color"
-      },
-      "button-primary-bg-focus": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "button-primary-bg-loading": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "button-primary-bg-disabled": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "button-gray-bg-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "button-gray-bg-hover": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "button-gray-bg-active": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "button-gray-bg-focus": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "button-gray-bg-loading": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "button-gray-bg-disabled": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "button-red-bg-default": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "button-red-bg-hover": {
-        "value": "{ax.colors.red-500}",
-        "type": "color"
-      },
-      "button-red-bg-active": {
-        "value": "{ax.colors.red-600}",
-        "type": "color"
-      },
-      "button-red-bg-focus": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "button-red-bg-loading": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "button-red-bg-disabled": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "button-green-bg-default": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-hover": {
-        "value": "{ax.colors.green-400}",
-        "type": "color"
-      },
-      "button-green-bg-active": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-focus": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-loading": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-disabled": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "button-orange-bg-default": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "button-orange-bg-hover": {
-        "value": "{ax.colors.orange-400}",
-        "type": "color"
-      },
-      "button-orange-bg-active": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "button-orange-bg-focus": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "button-orange-bg-loading": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "ui-bg-primary-default": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "ui-stroke-primary-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "node-bg-primary-default": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-stroke-primary-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "node-stroke-primary-hover": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "txt-primary-default": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "ui-bg-secondary-default": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "txt-secondary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "txt-tertiary-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "ui-bg-tertiary-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "node-bg-secondary-default": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "input-stroke-primary-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "input-stroke-primary-focus": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "input-stroke-primary-error": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "input-stroke-primary-success": {
-        "value": "{ax.colors.green-400}",
-        "type": "color"
-      },
-      "txt-quaternary-default": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "txt-error-default": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "txt-success-default": {
-        "value": "{ax.colors.green-400}",
-        "type": "color"
-      },
-      "input-bg-primary-success": {
-        "value": "{ax.colors.green-400-10}",
-        "type": "color"
-      },
-      "input-bg-primary-error": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "dropdown-bg-primary-default": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "dropdown-bg-secondary-active": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "dropdown-bg-destructive-hover": {
-        "value": "{ax.colors.red-400-20}",
-        "type": "color"
-      },
-      "dropdown-bg-secondary-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "ui-bg-tertiary-selected": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "nav-button-bg-primary-hover": {
-        "value": "{ax.colors.gray-900-5}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-active": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-disabled": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "ui-stroke-primary-focus": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "txt-primary-white": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "ui-separator-primary-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "ui-stroke-secondary-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "txt-primary-disabled": {
-        "value": "{ax.colors.gray-100-75}",
-        "type": "color"
-      },
-      "pt-bg-primary-default": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "pt-stroke-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "txt-secondary-inverse": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-default": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-hover": {
-        "value": "{ax.colors.red-400-20}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-active": {
-        "value": "{ax.colors.red-400-30}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-focus": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-loading": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-disabled": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-stroke-default": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "txt-destuctive-default": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "txt-destructive-disabled": {
-        "value": "{ax.colors.red-400-50}",
-        "type": "color"
-      },
-      "dropdown-bg-destructive-default": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "snackbar-bg-default": {
-        "value": "{ax.colors.gray-900-5}",
-        "type": "color"
-      },
-      "snackbar-bg-information": {
-        "value": "{ax.colors.acc1-500-10}",
-        "type": "color"
-      },
-      "snackbar-bg-warning": {
-        "value": "{ax.colors.orange-400-10}",
-        "type": "color"
-      },
-      "snackbar-bg-success": {
-        "value": "{ax.colors.green-400-10}",
-        "type": "color"
-      },
-      "snackbar-bg-error": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "txt-info-default": {
-        "value": "{ax.colors.acc1-700}",
-        "type": "color"
-      },
-      "txt-warning-default": {
-        "value": "{ax.colors.orange-400}",
-        "type": "color"
-      },
-      "node-icon-primary-default": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "node-icon-primary-disabled": {
-        "value": "{ax.colors.gray-900-30}",
-        "type": "color"
-      },
-      "node-txt-disabled": {
-        "value": "{ax.colors.gray-900-30}",
-        "type": "color"
-      },
-      "node-bg-primary-disabled": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "tooltip-bg-default": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "tooltip-bg-blue": {
-        "value": "{ax.colors.acc1-800}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-hover": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "node-bg-primary-hover": {
-        "value": "{ax.colors.acc1-50}",
-        "type": "color"
-      },
-      "ui-canvas-dots-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "txt-tooltip-bw": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "txt-tooltip-blue": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-port-fill-default": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-port-fill-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "node-port-stroke-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "node-port-stroke-active": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-notify-bg-default": {
-        "value": "{ax.colors.orange-400}",
-        "type": "color"
-      },
-      "node-notify-ico-default": {
-        "value": "{ax.colors.orange-100}",
-        "type": "color"
-      },
-      "scrollbar-bg-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "chips-neutral-txt": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "chips-neutral-bg": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "chips-neutral-icon": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "chips-neutral-x": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "shadow": {
-        "value": "{ax.colors.gray-900-20}",
-        "type": "color"
-      },
-      "focus-ring-node-active": {
-        "value": "{ax.colors.acc1-500-40}",
-        "type": "color"
-      },
-      "focus-ring-element": {
-        "value": "{ax.txt-primary-default}",
-        "type": "color"
-      },
-      "chips-acc1-bg": {
-        "value": "{ax.colors.acc1-500-10}",
-        "type": "color"
-      },
-      "chips-acc1-txt": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "chips-acc1-icon": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "chips-acc1-x": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "chips-acc1-stroke": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "chips-acc2-bg": {
-        "value": "{ax.colors.acc2-500-10}",
-        "type": "color"
-      },
-      "chips-acc2-stroke": {
-        "value": "{ax.colors.acc2-600}",
-        "type": "color"
-      },
-      "chips-acc2-txt": {
-        "value": "{ax.colors.acc2-600}",
-        "type": "color"
-      },
-      "chips-acc2-icon": {
-        "value": "{ax.colors.acc2-600}",
-        "type": "color"
-      },
-      "chips-acc2-x": {
-        "value": "{ax.colors.acc2-600}",
-        "type": "color"
-      },
-      "chips-acc3-bg": {
-        "value": "{ax.colors.acc3-500-10}",
-        "type": "color"
-      },
-      "chips-acc3-stroke": {
-        "value": "{ax.colors.acc3-700}",
-        "type": "color"
-      },
-      "chips-acc3-txt": {
-        "value": "{ax.colors.acc3-700}",
-        "type": "color"
-      },
-      "chips-acc3-icon": {
-        "value": "{ax.colors.acc3-700}",
-        "type": "color"
-      },
-      "chips-acc3-x": {
-        "value": "{ax.colors.acc3-700}",
-        "type": "color"
-      },
-      "chips-acc4-bg": {
-        "value": "{ax.colors.acc4-500-10}",
-        "type": "color"
-      },
-      "chips-acc4-stroke": {
-        "value": "{ax.colors.acc4-600}",
-        "type": "color"
-      },
-      "chips-acc4-txt": {
-        "value": "{ax.colors.acc4-600}",
-        "type": "color"
-      },
-      "chips-acc4-icon": {
-        "value": "{ax.colors.acc4-600}",
-        "type": "color"
-      },
-      "chips-acc4-x": {
-        "value": "{ax.colors.acc4-600}",
-        "type": "color"
-      },
-      "chips-acc5-bg": {
-        "value": "{ax.colors.acc5-500-10}",
-        "type": "color"
-      },
-      "chips-acc5-stroke": {
-        "value": "{ax.colors.acc5-700}",
-        "type": "color"
-      },
-      "chips-acc5-txt": {
-        "value": "{ax.colors.acc5-700}",
-        "type": "color"
-      },
-      "chips-acc5-icon": {
-        "value": "{ax.colors.acc5-700}",
-        "type": "color"
-      },
-      "chips-acc5-x": {
-        "value": "{ax.colors.acc5-700}",
-        "type": "color"
-      },
-      "focus-ring-node-warning": {
-        "value": "{ax.colors.acc5-500-40}",
-        "type": "color"
-      },
-      "focus-ring-node-error": {
-        "value": "{ax.colors.acc2-500-40}",
-        "type": "color"
-      },
-      "txt-primary-inverse": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-bg-tertiary-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "node-bg-tertiary-hover": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-pressed": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "ui-stroke-primary-highlight": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "tab-stroke-line": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "tab-stroke-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "tab-stroke-hover": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "tab-stroke-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "dropzone-bg-default": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "dropzone-bg-hover": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "dropzone-bg-dragging": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "dropzone-bg-error": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "dropzone-stroke-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "dropzone-stroke-hover": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "dropzone-stroke-dragging": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "dropzone-stroke-error": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "avatar-stroke-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "avatar-fill-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "link-primary-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "link-primary-hover": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "link-primary-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "link-primary-disabled": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "label-stroke-primary-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "label-stroke-primary-hover": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "label-stroke-primary-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "label-stroke-primary-disabled": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "edge-primary-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "edge-primary-hover": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "edge-primary-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "edge-primary-disabled": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "widget-swatches-acc1": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "widget-swatches-acc2": {
-        "value": "{ax.colors.acc2-500}",
-        "type": "color"
-      },
-      "widget-swatches-acc3": {
-        "value": "{ax.colors.acc3-500}",
-        "type": "color"
-      },
-      "widget-swatches-acc4": {
-        "value": "{ax.colors.acc4-500}",
-        "type": "color"
-      },
-      "widget-swatches-acc5": {
-        "value": "{ax.colors.acc5-500}",
-        "type": "color"
-      },
-      "widget-swatches-acc6": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "datepicker-bg-primary": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "datepicker-bg-secondary": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      }
-    }
-  },
-  "Tokens/Dark": {
-    "ax": {
-      "button-primary-bg-default": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "button-primary-bg-hover": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "button-primary-bg-active": {
-        "value": "{ax.colors.acc1-700}",
-        "type": "color"
-      },
-      "button-primary-bg-focus": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "button-primary-bg-loading": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "button-primary-bg-disabled": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "button-gray-bg-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "button-gray-bg-hover": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "button-gray-bg-active": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "button-gray-bg-focus": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "button-gray-bg-loading": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "button-gray-bg-disabled": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "button-red-bg-default": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "button-red-bg-hover": {
-        "value": "{ax.colors.red-500}",
-        "type": "color"
-      },
-      "button-red-bg-active": {
-        "value": "{ax.colors.red-600}",
-        "type": "color"
-      },
-      "button-red-bg-focus": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "button-red-bg-loading": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "button-red-bg-disabled": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "button-green-bg-default": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-hover": {
-        "value": "{ax.colors.green-400}",
-        "type": "color"
-      },
-      "button-green-bg-active": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-focus": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-loading": {
-        "value": "{ax.colors.green-300}",
-        "type": "color"
-      },
-      "button-green-bg-disabled": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "button-orange-bg-default": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "button-orange-bg-hover": {
-        "value": "{ax.colors.orange-400}",
-        "type": "color"
-      },
-      "button-orange-bg-active": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "button-orange-bg-focus": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "button-orange-bg-loading": {
-        "value": "{ax.colors.orange-300}",
-        "type": "color"
-      },
-      "ui-bg-primary-default": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "ui-stroke-primary-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "node-bg-primary-default": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "node-stroke-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "node-stroke-primary-hover": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "txt-primary-default": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "ui-bg-secondary-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "txt-secondary-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "txt-tertiary-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "ui-bg-tertiary-default": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "node-bg-secondary-default": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "input-stroke-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "input-stroke-primary-focus": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "input-stroke-primary-error": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "input-stroke-primary-success": {
-        "value": "{ax.colors.green-400}",
-        "type": "color"
-      },
-      "txt-quaternary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "txt-error-default": {
-        "value": "{ax.colors.red-100}",
-        "type": "color"
-      },
-      "txt-success-default": {
-        "value": "{ax.colors.green-200}",
-        "type": "color"
-      },
-      "input-bg-primary-success": {
-        "value": "{ax.colors.green-400-10}",
-        "type": "color"
-      },
-      "input-bg-primary-error": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "dropdown-bg-primary-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "dropdown-bg-secondary-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "dropdown-bg-destructive-hover": {
-        "value": "{ax.colors.red-400-50}",
-        "type": "color"
-      },
-      "dropdown-bg-secondary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "ui-bg-tertiary-selected": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "nav-button-bg-primary-hover": {
-        "value": "{ax.colors.gray-100-5}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-default": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-active": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-disabled": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "ui-stroke-primary-focus": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "txt-primary-white": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "ui-separator-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "ui-stroke-secondary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "txt-primary-disabled": {
-        "value": "{ax.colors.gray-100-30}",
-        "type": "color"
-      },
-      "pt-bg-primary-default": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "pt-stroke-primary-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "txt-secondary-inverse": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-default": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-hover": {
-        "value": "{ax.colors.red-400-20}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-active": {
-        "value": "{ax.colors.red-400-30}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-focus": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-loading": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-bg-disabled": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "button-ghost-destructive-stroke-default": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "txt-destuctive-default": {
-        "value": "{ax.colors.red-100}",
-        "type": "color"
-      },
-      "txt-destructive-disabled": {
-        "value": "{ax.colors.red-100-30}",
-        "type": "color"
-      },
-      "dropdown-bg-destructive-default": {
-        "value": "{ax.colors.red-400-30}",
-        "type": "color"
-      },
-      "snackbar-bg-default": {
-        "value": "{ax.colors.gray-100-10}",
-        "type": "color"
-      },
-      "snackbar-bg-information": {
-        "value": "{ax.colors.acc1-500-10}",
-        "type": "color"
-      },
-      "snackbar-bg-warning": {
-        "value": "{ax.colors.orange-400-10}",
-        "type": "color"
-      },
-      "snackbar-bg-success": {
-        "value": "{ax.colors.green-400-10}",
-        "type": "color"
-      },
-      "snackbar-bg-error": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "txt-info-default": {
-        "value": "{ax.colors.acc1-200}",
-        "type": "color"
-      },
-      "txt-warning-default": {
-        "value": "{ax.colors.orange-100}",
-        "type": "color"
-      },
-      "node-icon-primary-default": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "node-icon-primary-disabled": {
-        "value": "{ax.colors.gray-100-30}",
-        "type": "color"
-      },
-      "node-txt-disabled": {
-        "value": "{ax.colors.gray-100-30}",
-        "type": "color"
-      },
-      "node-bg-primary-disabled": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "tooltip-bg-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "tooltip-bg-blue": {
-        "value": "{ax.colors.acc1-800}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-hover": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-bg-primary-hover": {
-        "value": "{ax.colors.acc1-950-10}",
-        "type": "color"
-      },
-      "ui-canvas-dots-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "txt-tooltip-bw": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "txt-tooltip-blue": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-port-fill-default": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-port-fill-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "node-port-stroke-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "node-port-stroke-active": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "node-notify-bg-default": {
-        "value": "{ax.colors.orange-400}",
-        "type": "color"
-      },
-      "node-notify-ico-default": {
-        "value": "{ax.colors.orange-100}",
-        "type": "color"
-      },
-      "scrollbar-bg-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "chips-neutral-txt": {
-        "value": "{ax.colors.gray-100}",
-        "type": "color"
-      },
-      "chips-neutral-bg": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "chips-neutral-icon": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "chips-neutral-x": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "shadow": {
-        "value": "{ax.colors.gray-900-50}",
-        "type": "color"
-      },
-      "focus-ring-node-active": {
-        "value": "{ax.colors.acc1-500-40}",
-        "type": "color"
-      },
-      "focus-ring-element": {
-        "value": "{ax.txt-primary-default}",
-        "type": "color"
-      },
-      "chips-acc1-bg": {
-        "value": "{ax.colors.acc1-500-10}",
-        "type": "color"
-      },
-      "chips-acc1-txt": {
-        "value": "{ax.colors.acc1-300}",
-        "type": "color"
-      },
-      "chips-acc1-icon": {
-        "value": "{ax.colors.acc1-300}",
-        "type": "color"
-      },
-      "chips-acc1-x": {
-        "value": "{ax.colors.acc1-300}",
-        "type": "color"
-      },
-      "chips-acc1-stroke": {
-        "value": "{ax.colors.acc1-300}",
-        "type": "color"
-      },
-      "chips-acc2-bg": {
-        "value": "{ax.colors.acc2-500-10}",
-        "type": "color"
-      },
-      "chips-acc2-stroke": {
-        "value": "{ax.colors.acc2-300}",
-        "type": "color"
-      },
-      "chips-acc2-txt": {
-        "value": "{ax.colors.acc2-300}",
-        "type": "color"
-      },
-      "chips-acc2-icon": {
-        "value": "{ax.colors.acc2-300}",
-        "type": "color"
-      },
-      "chips-acc2-x": {
-        "value": "{ax.colors.acc2-300}",
-        "type": "color"
-      },
-      "chips-acc3-bg": {
-        "value": "{ax.colors.acc3-500-10}",
-        "type": "color"
-      },
-      "chips-acc3-stroke": {
-        "value": "{ax.colors.acc3-300}",
-        "type": "color"
-      },
-      "chips-acc3-txt": {
-        "value": "{ax.colors.acc3-300}",
-        "type": "color"
-      },
-      "chips-acc3-icon": {
-        "value": "{ax.colors.acc3-300}",
-        "type": "color"
-      },
-      "chips-acc3-x": {
-        "value": "{ax.colors.acc3-300}",
-        "type": "color"
-      },
-      "chips-acc4-bg": {
-        "value": "{ax.colors.acc4-500-10}",
-        "type": "color"
-      },
-      "chips-acc4-stroke": {
-        "value": "{ax.colors.acc4-300}",
-        "type": "color"
-      },
-      "chips-acc4-txt": {
-        "value": "{ax.colors.acc4-300}",
-        "type": "color"
-      },
-      "chips-acc4-icon": {
-        "value": "{ax.colors.acc4-300}",
-        "type": "color"
-      },
-      "chips-acc4-x": {
-        "value": "{ax.colors.acc4-300}",
-        "type": "color"
-      },
-      "chips-acc5-bg": {
-        "value": "{ax.colors.acc5-500-10}",
-        "type": "color"
-      },
-      "chips-acc5-stroke": {
-        "value": "{ax.colors.acc5-200}",
-        "type": "color"
-      },
-      "chips-acc5-txt": {
-        "value": "{ax.colors.acc5-200}",
-        "type": "color"
-      },
-      "chips-acc5-icon": {
-        "value": "{ax.colors.acc5-200}",
-        "type": "color"
-      },
-      "chips-acc5-x": {
-        "value": "{ax.colors.acc5-200}",
-        "type": "color"
-      },
-      "focus-ring-node-warning": {
-        "value": "{ax.colors.acc5-500-40}",
-        "type": "color"
-      },
-      "focus-ring-node-error": {
-        "value": "{ax.colors.acc2-500-40}",
-        "type": "color"
-      },
-      "txt-primary-inverse": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      },
-      "node-bg-tertiary-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "node-bg-tertiary-hover": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "nav-button-icon-primary-pressed": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "ui-stroke-primary-highlight": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "tab-stroke-line": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "tab-stroke-default": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "tab-stroke-hover": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "tab-stroke-active": {
-        "value": "{ax.colors.acc1-500}",
-        "type": "color"
-      },
-      "dropzone-bg-default": {
-        "value": "{ax.colors.gray-700}",
-        "type": "color"
-      },
-      "dropzone-bg-hover": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "dropzone-bg-dragging": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "dropzone-bg-error": {
-        "value": "{ax.colors.red-400-10}",
-        "type": "color"
-      },
-      "dropzone-stroke-default": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "dropzone-stroke-hover": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "dropzone-stroke-dragging": {
-        "value": "{ax.colors.gray-200}",
-        "type": "color"
-      },
-      "dropzone-stroke-error": {
-        "value": "{ax.colors.red-400}",
-        "type": "color"
-      },
-      "avatar-stroke-default": {
-        "value": "{ax.colors.gray-300}",
-        "type": "color"
-      },
-      "avatar-fill-default": {
-        "value": "{ax.colors.gray-450}",
-        "type": "color"
-      },
-      "link-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "link-primary-hover": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "link-primary-active": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "link-primary-disabled": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "label-stroke-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "label-stroke-primary-hover": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "label-stroke-primary-active": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "label-stroke-primary-disabled": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "edge-primary-default": {
-        "value": "{ax.colors.gray-600}",
-        "type": "color"
-      },
-      "edge-primary-hover": {
-        "value": "{ax.colors.gray-500}",
-        "type": "color"
-      },
-      "edge-primary-active": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "edge-primary-disabled": {
-        "value": "{ax.colors.gray-650}",
-        "type": "color"
-      },
-      "widget-swatches-acc1": {
-        "value": "{ax.colors.acc1-400}",
-        "type": "color"
-      },
-      "widget-swatches-acc2": {
-        "value": "{ax.colors.acc2-400}",
-        "type": "color"
-      },
-      "widget-swatches-acc3": {
-        "value": "{ax.colors.acc3-400}",
-        "type": "color"
-      },
-      "widget-swatches-acc4": {
-        "value": "{ax.colors.acc4-400}",
-        "type": "color"
-      },
-      "widget-swatches-acc5": {
-        "value": "{ax.colors.acc5-400}",
-        "type": "color"
-      },
-      "widget-swatches-acc6": {
-        "value": "{ax.colors.gray-400}",
-        "type": "color"
-      },
-      "datepicker-bg-primary": {
-        "value": "{ax.colors.acc1-600}",
-        "type": "color"
-      },
-      "datepicker-bg-secondary": {
-        "value": "{ax.colors.gray-800}",
-        "type": "color"
-      }
-    }
-  },
-  "Numerals/Mode 1": {
-    "ax": {
-      "token-spacing": {
-        "spacing-32": {
-          "value": "{ax.primitive-4rule.32}",
-          "type": "dimension"
-        },
-        "spacing-24": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "spacing-20": {
-          "value": "{ax.primitive-4rule.20}",
-          "type": "dimension"
-        },
-        "spacing-16": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "spacing-12": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "spacing-8": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "spacing-4": {
-          "value": "{ax.primitive-4rule.4}",
-          "type": "dimension"
-        },
-        "spacing-10": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "button-xl-h-pad-1": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "button-xl-h-pad-2": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "button-xl-gap": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-xl-v-pad-1": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "button-xl-v-pad-2": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "button-l-h-pad-1": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "button-l-h-pad-2": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "button-l-v-pad-1": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "button-l-v-pad-2": {
-          "value": "{ax.primitive-odd.11}",
-          "type": "dimension"
-        },
-        "button-l-gap": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-m-h-pad-1": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "button-m-h-pad-2": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "button-m-v-pad-1": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "button-m-v-pad-2": {
-          "value": "{ax.primitive-odd.9}",
-          "type": "dimension"
-        },
-        "button-m-gap": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-s-h-pad-1": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "button-s-h-pad-2": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "button-s-v-pad-1": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "button-s-v-pad-2": {
-          "value": "{ax.primitive-odd.7}",
-          "type": "dimension"
-        },
-        "button-s-gap": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-xs-h-pad-1": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-xs-h-pad-2": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-xs-v-pad-1": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-xs-v-pad-2": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xs-gap": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "button-xxs-h-pad": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxs-v-pad": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxxs-h-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xxxs-v-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xxxxs-h-pad": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
-        },
-        "button-xxxxs-v-pad": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
-        },
-        "input-l-h-pad": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "input-l-v-pad": {
-          "value": "{ax.primitive-odd.11}",
-          "type": "dimension"
-        },
-        "input-l-gap": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "input-m-h-pad": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "input-m-v-pad": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "input-m-gap": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "input-s-h-pad": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "input-s-v-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "input-s-gap": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-item-l-h-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-item-l-v-pad": {
-          "value": "{ax.primitive-odd.11}",
-          "type": "dimension"
-        },
-        "dropdown-item-l-gap": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "dropdown-item-m-h-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-item-m-v-pad": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "dropdown-item-m-gap": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "dropdown-item-s-h-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-item-s-v-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-item-s-gap": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "snackbar-h-pad-1": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "snackbar-v-pad-1": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "snackbar-v-pad-2": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "snackbar-gap-1": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "snackbar-gap-2": {
-          "value": "{ax.primitive-4rule.32}",
-          "type": "dimension"
-        },
-        "node-head-icon": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "node-head-h-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "node-head-v-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "node-head-gap": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "modal-m-header-pad": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "modal-m-header-gap": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "modal-m-content-h-pad": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "modal-m-content-gap": {
-          "value": "{ax.primitive-4rule.20}",
-          "type": "dimension"
-        },
-        "modal-l-header-pad": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "modal-l-header-gap": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "modal-l-content-h-pad": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "modal-l-content-gap": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "modal-m-content-v-pad": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "modal-l-content-v-pad": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "product-tour-pad": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "product-tour-gap": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "chips-l-h-pad": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "chips-l-v-pad": {
-          "value": "{ax.primitive-odd.5}",
-          "type": "dimension"
-        },
-        "chips-l-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-m-h-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-m-v-pad": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
-        },
-        "chips-m-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-s-h-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-s-v-pad": {
-          "value": "{ax.primitive-even.2}",
-          "type": "dimension"
-        },
-        "chips-s-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-xl-h-pad": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "chips-xl-v-pad": {
-          "value": "{ax.primitive-odd.5}",
-          "type": "dimension"
-        },
-        "chips-xl-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "tooltip-h-pad": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "tooltip-v-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "tooltip-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "top-navbar-h-pad": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "top-navbar-v-pad": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "top-navbar-gap": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-s-h-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-s-v-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-s-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-m-h-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-m-v-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-m-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-l-h-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-l-v-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-l-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "checkbox-m-pad": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
-        },
-        "checkbox-s-pad": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
-        },
-        "checkbox-xs-pad": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
-        },
-        "radiobutton-m-pad": {
-          "value": "{ax.primitive-odd.5}",
-          "type": "dimension"
-        },
-        "radiobutton-s-pad": {
-          "value": "{ax.primitive-odd.5}",
-          "type": "dimension"
-        },
-        "radiobutton-xs-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xxs-h-pad-1": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxs-v-pad-1": {
-          "value": "{ax.primitive-odd.7}",
-          "type": "dimension"
-        },
-        "button-xxxs-h-pad-1": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "toolbar-hor-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "toolbar-vert-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "toolbar-hor-gap": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "toolbar-vert-gap": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxxs-v-pad-1": {
-          "value": "{ax.primitive-odd.5}",
-          "type": "dimension"
-        },
-        "button-xxs-gap": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxxs-gap": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxxs-h-pad-2": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxxs-v-pad-2": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xxs-h-pad-2": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-xxs-v-pad-2": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "seg-picker-xl-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-xl-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-l-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-l-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-m-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-m-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-s-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-s-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
         },
-        "seg-picker-xs-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-xs-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-xxs-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-xxs-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-xxxs-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "seg-picker-xxxs-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "label-gap": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "label-l-v-pad": {
-          "value": "{ax.primitive-even.18}",
-          "type": "dimension"
-        },
-        "label-l-h-pad": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "label-m-v-pad": {
-          "value": "{ax.primitive-even.18}",
-          "type": "dimension"
-        },
-        "label-m-h-pad": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "label-s-v-pad": {
-          "value": "{ax.primitive-even.16}",
-          "type": "dimension"
-        },
-        "label-s-h-pad": {
-          "value": "{ax.primitive-odd.9}",
-          "type": "dimension"
-        },
-        "label-s-v-pad-1": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "label-s-h-pad-1": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "label-m-v-pad-1": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "label-m-h-pad-1": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "label-xs-v-pad-1": {
-          "value": "{ax.primitive-odd.9}",
-          "type": "dimension"
-        },
-        "label-xs-h-pad-1": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
-        },
-        "label-m-h-pad-2": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "label-m-v-pad-2": {
-          "value": "{ax.primitive-odd.9}",
-          "type": "dimension"
+        "acc4-950-40": {
+          "value": "rgba(69, 10, 97, 0.4)",
+          "type": "color"
         },
-        "label-s-h-pad-2": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
+        "acc4-950-50": {
+          "value": "rgba(69, 10, 97, 0.5)",
+          "type": "color"
         },
-        "label-s-v-pad-2": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
+        "acc5-950-10": {
+          "value": "rgba(66, 22, 8, 0.1)",
+          "type": "color"
         },
-        "label-xs-h-pad-2": {
-          "value": "{ax.primitive-even.10}",
-          "type": "dimension"
+        "acc5-950-20": {
+          "value": "rgba(66, 22, 8, 0.2)",
+          "type": "color"
         },
-        "label-xs-v-pad-2": {
-          "value": "{ax.primitive-odd.7}",
-          "type": "dimension"
+        "acc5-950-30": {
+          "value": "rgba(66, 22, 8, 0.3)",
+          "type": "color"
         },
-        "seg-picker-pad": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
+        "acc5-950-40": {
+          "value": "rgba(66, 22, 8, 0.4)",
+          "type": "color"
         },
-        "seg-picker-gap": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
+        "acc5-950-50": {
+          "value": "rgba(66, 22, 8, 0.5)",
+          "type": "color"
         },
-        "datepicker-header-pad": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
+        "gray-100-85": {
+          "value": "rgba(255, 255, 255, 0.85)",
+          "type": "color"
         },
-        "datepicker-weekdays-pad-h": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
+        "red-400-40": {
+          "value": "rgba(224, 32, 32, 0.4)",
+          "type": "color"
         },
-        "datepicker-weekdays-pad-v": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
+        "green-400-40": {
+          "value": "rgba(22, 163, 74, 0.4)",
+          "type": "color"
         },
-        "datepicker-table-pad": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
+        "orange-400-40": {
+          "value": "rgba(245, 158, 11, 0.4)",
+          "type": "color"
         },
-        "datepicker-table-gap": {
-          "value": "{ax.primitive-even.2}",
-          "type": "dimension"
+        "transparent": {
+          "value": "rgba(0, 0, 0, 0)",
+          "type": "color"
         }
       },
-      "token-radius": {
-        "element-4": {
-          "value": "{ax.primitive-4rule.4}",
-          "type": "dimension"
-        },
-        "element-8": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "element-12": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "element-16": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "element-20": {
-          "value": "{ax.primitive-4rule.20}",
-          "type": "dimension"
-        },
-        "element-24": {
-          "value": "{ax.primitive-4rule.24}",
-          "type": "dimension"
-        },
-        "button-xl": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "button-l": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "button-m": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "button-s": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xs": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-round": {
-          "value": "{ax.primitive-even.100}",
-          "type": "dimension"
-        },
-        "button-xxs": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xxxs": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "button-xxxxs": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "segment_picker_shell": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "segment_picker_element": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "input-l": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "input-m": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "input-s": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "dropdown-item-l": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "dropdown-item-m": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "dropdown-item-s": {
-          "value": "{ax.primitive-even.6}",
-          "type": "dimension"
-        },
-        "snackbar": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "node-head-icon": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "node-head": {
-          "value": "{ax.primitive-4rule.12}",
-          "type": "dimension"
-        },
-        "modal-l": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "modal-m": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "product-tour": {
-          "value": "{ax.primitive-4rule.16}",
-          "type": "dimension"
-        },
-        "product-tour-img": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "chips-l": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-m": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-s": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "chips-xl": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "tooltip": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "shell": {
-          "value": "{ax.primitive-even.12}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-l": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-m": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "dropdown-wrap-s": {
-          "value": "{ax.primitive-even.8}",
-          "type": "dimension"
-        },
-        "checkbox-m": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "checkbox-s": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "checkbox-xs": {
-          "value": "{ax.primitive-even.4}",
-          "type": "dimension"
-        },
-        "radiobutton": {
-          "value": "{ax.primitive-even.100}",
+      "space": {
+        "0": {
+          "value": "0px",
           "type": "dimension"
         },
-        "toolbar-hor-s": {
-          "value": "{ax.primitive-even.8}",
+        "25": {
+          "value": "2px",
           "type": "dimension"
         },
-        "toolbar-hor-m": {
-          "value": "{ax.primitive-even.10}",
+        "37": {
+          "value": "3px",
           "type": "dimension"
         },
-        "toolbar-hor-l": {
-          "value": "{ax.primitive-even.12}",
+        "50": {
+          "value": "4px",
           "type": "dimension"
         },
-        "toolbar-hor-xl": {
-          "value": "{ax.primitive-even.12}",
+        "62": {
+          "value": "5px",
           "type": "dimension"
         },
-        "toolbar-vert-s": {
-          "value": "{ax.primitive-even.8}",
+        "75": {
+          "value": "6px",
           "type": "dimension"
         },
-        "toolbar-vert-m": {
-          "value": "{ax.primitive-even.10}",
+        "87": {
+          "value": "7px",
           "type": "dimension"
         },
-        "toolbar-vert-l": {
-          "value": "{ax.primitive-even.12}",
+        "100": {
+          "value": "8px",
           "type": "dimension"
         },
-        "toolbar-vert-xl": {
-          "value": "{ax.primitive-even.12}",
+        "112": {
+          "value": "9px",
           "type": "dimension"
         },
-        "seg-picker-xl": {
-          "value": "{ax.primitive-even.12}",
+        "125": {
+          "value": "10px",
           "type": "dimension"
         },
-        "seg-picker-l": {
-          "value": "{ax.primitive-even.12}",
+        "137": {
+          "value": "11px",
           "type": "dimension"
         },
-        "seg-picker-m": {
-          "value": "{ax.primitive-even.10}",
+        "150": {
+          "value": "12px",
           "type": "dimension"
         },
-        "segt-picker-s": {
-          "value": "{ax.primitive-even.8}",
+        "175": {
+          "value": "14px",
           "type": "dimension"
         },
-        "seg-picker-xs": {
-          "value": "{ax.primitive-even.8}",
+        "200": {
+          "value": "16px",
           "type": "dimension"
         },
-        "seg-picker-xxs": {
-          "value": "{ax.primitive-even.8}",
+        "250": {
+          "value": "20px",
           "type": "dimension"
         },
-        "seg-picker-xxxs": {
-          "value": "{ax.primitive-even.8}",
+        "300": {
+          "value": "24px",
           "type": "dimension"
         },
-        "label-sharp": {
-          "value": "{ax.primitive-even.0}",
+        "400": {
+          "value": "32px",
           "type": "dimension"
         },
-        "label-rounded": {
-          "value": "{ax.primitive-even.8}",
+        "500": {
+          "value": "40px",
           "type": "dimension"
         },
-        "label-oval": {
-          "value": "{ax.primitive-even.100}",
+        "600": {
+          "value": "48px",
           "type": "dimension"
         },
-        "label-m": {
-          "value": "{ax.primitive-even.6}",
+        "700": {
+          "value": "56px",
           "type": "dimension"
         },
-        "label-s": {
-          "value": "{ax.primitive-even.4}",
+        "800": {
+          "value": "64px",
           "type": "dimension"
         },
-        "label-xs": {
-          "value": "{ax.primitive-even.4}",
+        "1000": {
+          "value": "80px",
           "type": "dimension"
         },
-        "seg-picker-s": {
-          "value": "{ax.primitive-even.8}",
+        "1200": {
+          "value": "96px",
           "type": "dimension"
         },
-        "datepicker-component": {
-          "value": "{ax.primitive-4rule.8}",
+        "negative-50": {
+          "value": "-4px",
           "type": "dimension"
         },
-        "datepicker-day-rounded": {
-          "value": "{ax.primitive-4rule.4}",
+        "negative-100": {
+          "value": "-8px",
           "type": "dimension"
         },
-        "datepicker-day-sharp": {
-          "value": "{ax.primitive-4rule.0}",
+        "negative-200": {
+          "value": "-16px",
           "type": "dimension"
         }
       },
-      "primitive-4rule": {
+      "radius": {
         "0": {
-          "value": "0rem",
-          "type": "dimension"
-        },
-        "4": {
-          "value": "0.25rem",
-          "type": "dimension"
-        },
-        "8": {
-          "value": "0.5rem",
-          "type": "dimension"
-        },
-        "12": {
-          "value": "0.75rem",
-          "type": "dimension"
-        },
-        "16": {
-          "value": "1rem",
-          "type": "dimension"
-        },
-        "20": {
-          "value": "1.25rem",
-          "type": "dimension"
-        },
-        "24": {
-          "value": "1.5rem",
+          "value": "0px",
           "type": "dimension"
         },
-        "28": {
-          "value": "1.75rem",
+        "25": {
+          "value": "2px",
           "type": "dimension"
         },
-        "32": {
-          "value": "2rem",
+        "50": {
+          "value": "4px",
           "type": "dimension"
         },
-        "36": {
-          "value": "2.25rem",
+        "75": {
+          "value": "6px",
           "type": "dimension"
         },
-        "40": {
-          "value": "2.5rem",
+        "100": {
+          "value": "8px",
           "type": "dimension"
         },
-        "44": {
-          "value": "2.75rem",
+        "125": {
+          "value": "10px",
           "type": "dimension"
         },
-        "48": {
-          "value": "3rem",
+        "150": {
+          "value": "12px",
           "type": "dimension"
         },
-        "52": {
-          "value": "3.25rem",
+        "200": {
+          "value": "16px",
           "type": "dimension"
         },
-        "56": {
-          "value": "3.5rem",
+        "250": {
+          "value": "20px",
           "type": "dimension"
         },
-        "60": {
-          "value": "3.75rem",
+        "300": {
+          "value": "24px",
           "type": "dimension"
         },
-        "64": {
-          "value": "4rem",
+        "full": {
+          "value": "9999px",
           "type": "dimension"
         }
       },
-      "primitive-even": {
-        "0": {
-          "value": "0rem",
-          "type": "dimension"
-        },
-        "2": {
-          "value": "0.125rem",
-          "type": "dimension"
-        },
-        "4": {
-          "value": "0.25rem",
-          "type": "dimension"
-        },
-        "6": {
-          "value": "0.375rem",
-          "type": "dimension"
-        },
-        "8": {
-          "value": "0.5rem",
-          "type": "dimension"
-        },
-        "10": {
-          "value": "0.625rem",
-          "type": "dimension"
-        },
+      "size": {
         "12": {
-          "value": "0.75rem",
-          "type": "dimension"
-        },
-        "14": {
-          "value": "0.875rem",
+          "value": "1px",
           "type": "dimension"
         },
-        "16": {
-          "value": "1rem",
+        "25": {
+          "value": "2px",
           "type": "dimension"
         },
-        "18": {
-          "value": "1.125rem",
+        "37": {
+          "value": "3px",
           "type": "dimension"
         },
-        "20": {
-          "value": "1.25rem",
+        "50": {
+          "value": "4px",
           "type": "dimension"
         },
         "100": {
-          "value": "6.25rem",
-          "type": "dimension"
-        }
-      },
-      "primitive-odd": {
-        "1": {
-          "value": "0.062rem",
-          "type": "dimension"
-        },
-        "3": {
-          "value": "0.188rem",
-          "type": "dimension"
-        },
-        "5": {
-          "value": "0.312rem",
-          "type": "dimension"
-        },
-        "7": {
-          "value": "0.438rem",
-          "type": "dimension"
-        },
-        "9": {
-          "value": "0.562rem",
+          "value": "8px",
           "type": "dimension"
         },
-        "11": {
-          "value": "0.688rem",
+        "150": {
+          "value": "12px",
           "type": "dimension"
         },
-        "13": {
-          "value": "0.812rem",
+        "200": {
+          "value": "16px",
           "type": "dimension"
         },
-        "15": {
-          "value": "0.938rem",
-          "type": "dimension"
-        }
-      },
-      "token-shadow": {
-        "shadow-xs-x": {
-          "value": "{ax.primitive-even.0}",
-          "type": "dimension"
-        },
-        "shadow-xs-y": {
-          "value": "{ax.primitive-4rule.4}",
-          "type": "dimension"
-        },
-        "shadow-xs-blur": {
-          "value": "{ax.primitive-4rule.8}",
-          "type": "dimension"
-        },
-        "shadow-xs-spread": {
-          "value": "{ax.primitive-even-negative.-2}",
-          "type": "dimension"
-        },
-        "shadow-s-x": {
-          "value": "{ax.primitive-even.0}",
+        "300": {
+          "value": "24px",
           "type": "dimension"
         },
-        "shadow-s-y": {
-          "value": "{ax.primitive-4rule.8}",
+        "400": {
+          "value": "32px",
           "type": "dimension"
         },
-        "shadow-s-blur": {
-          "value": "{ax.primitive-4rule.16}",
+        "500": {
+          "value": "40px",
           "type": "dimension"
         },
-        "shadow-s-spread": {
-          "value": "{ax.primitive-even-negative.-4}",
+        "600": {
+          "value": "48px",
           "type": "dimension"
         },
-        "shadow-m-x": {
-          "value": "{ax.primitive-even.0}",
+        "700": {
+          "value": "56px",
           "type": "dimension"
         },
-        "shadow-m-y": {
-          "value": "{ax.primitive-4rule.12}",
+        "800": {
+          "value": "64px",
           "type": "dimension"
         },
-        "shadow-m-blur": {
-          "value": "{ax.primitive-4rule.24}",
+        "1000": {
+          "value": "80px",
           "type": "dimension"
         },
-        "shadow-m-spread": {
-          "value": "{ax.primitive-even-negative.-6}",
+        "1200": {
+          "value": "96px",
           "type": "dimension"
         },
-        "shadow-l-blur": {
-          "value": "{ax.primitive-4rule.32}",
+        "1600": {
+          "value": "128px",
           "type": "dimension"
-        },
-        "shadow-l-spread": {
-          "value": "{ax.primitive-even-negative.-8}",
+        }
+      },
+      "font-size": {
+        "125": {
+          "value": "10px",
           "type": "dimension"
         },
-        "shadow-l-x": {
-          "value": "{ax.primitive-even.0}",
+        "137": {
+          "value": "11px",
           "type": "dimension"
         },
-        "shadow-l-y": {
-          "value": "{ax.primitive-4rule.16}",
+        "150": {
+          "value": "12px",
           "type": "dimension"
         },
-        "shadow-xl-x": {
-          "value": "{ax.primitive-even.0}",
+        "162": {
+          "value": "13px",
           "type": "dimension"
         },
-        "shadow-xl-y": {
-          "value": "{ax.primitive-4rule.24}",
+        "175": {
+          "value": "14px",
           "type": "dimension"
         },
-        "shadow-xl-blur": {
-          "value": "{ax.primitive-4rule.48}",
+        "200": {
+          "value": "16px",
           "type": "dimension"
         },
-        "shadow-xl-spread": {
-          "value": "{ax.primitive-even-negative.-12}",
+        "225": {
+          "value": "18px",
           "type": "dimension"
         },
-        "focus-node-active-blur": {
-          "value": "{ax.primitive-even.0}",
+        "250": {
+          "value": "20px",
           "type": "dimension"
         },
-        "focus-node-active-spread": {
-          "value": "{ax.primitive-even.4}",
+        "275": {
+          "value": "22px",
           "type": "dimension"
         },
-        "focus-node-active-x": {
-          "value": "{ax.primitive-even.0}",
+        "300": {
+          "value": "24px",
           "type": "dimension"
         },
-        "focus-node-active-y": {
-          "value": "{ax.primitive-even.0}",
+        "350": {
+          "value": "28px",
           "type": "dimension"
         },
-        "focus-element-x": {
-          "value": "{ax.primitive-even.0}",
+        "400": {
+          "value": "32px",
           "type": "dimension"
         },
-        "focus-element-y": {
-          "value": "{ax.primitive-even.0}",
+        "450": {
+          "value": "36px",
           "type": "dimension"
+        }
+      }
+    }
+  },
+  "Tokens/Light": {
+    "wb": {
+      "components": {
+        "button": {
+          "solid": {
+            "primary": {
+              "default": {
+                "value": "{wb.ui.brand.fill}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.ui.brand.fill-hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.ui.brand.fill-active}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.ui.brand.fill}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.ui.brand.fill}",
+                "type": "color"
+              }
+            },
+            "disabled": {
+              "value": "{wb.colors.gray-400}",
+              "type": "color"
+            },
+            "gray": {
+              "default": {
+                "value": "{wb.colors.gray-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.gray-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.gray-650}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.gray-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.gray-500}",
+                "type": "color"
+              }
+            },
+            "critical": {
+              "default": {
+                "value": "{wb.colors.red-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.red-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.red-700}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.red-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.red-500}",
+                "type": "color"
+              }
+            },
+            "success": {
+              "default": {
+                "value": "{wb.colors.green-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.green-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.green-700}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.green-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.green-500}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "default": {
+                "value": "{wb.colors.orange-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.orange-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.orange-700}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.orange-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.orange-500}",
+                "type": "color"
+              }
+            }
+          },
+          "ghost": {
+            "critical": {
+              "default": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.red-400-20}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.red-400-30}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.colors.red-400}",
+                "type": "color"
+              }
+            },
+            "primary": {
+              "default": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.ui.brand.fill-subtle-hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.ui.brand.fill-subtle-active}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.ui.brand.border}",
+                "type": "color"
+              }
+            },
+            "success": {
+              "default": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.green-400-20}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.green-400-30}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.colors.green-400}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "default": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.orange-400-20}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.orange-400-30}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.colors.orange-400}",
+                "type": "color"
+              }
+            }
+          }
+        },
+        "text-field": {
+          "stroke-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "stroke-focus": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          },
+          "stroke-success": {
+            "value": "{wb.colors.green-400}",
+            "type": "color"
+          },
+          "bg-primary-success": {
+            "value": "{wb.colors.green-400-10}",
+            "type": "color"
+          },
+          "bg-primary-critical": {
+            "value": "{wb.colors.red-400-10}",
+            "type": "color"
+          }
+        },
+        "selector": {
+          "fill-checked": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          }
+        },
+        "nav-button": {
+          "bg-primary-hover": {
+            "value": "{wb.colors.gray-900-5}",
+            "type": "color"
+          },
+          "icon-primary-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "icon-primary-pressed": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          },
+          "icon-primary-disabled": {
+            "value": "{wb.colors.gray-900-30}",
+            "type": "color"
+          },
+          "icon-primary-hover": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "icon-primary-active": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "bg-primary-pressed": {
+            "value": "{wb.colors.gray-900-5}",
+            "type": "color"
+          },
+          "bg-primary-active": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          },
+          "bg-primary-focus": {
+            "value": "{wb.colors.gray-900-5}",
+            "type": "color"
+          },
+          "bg-primary-default": {
+            "value": "{wb.colors.transparent}",
+            "type": "color"
+          },
+          "bg-primary-disabled": {
+            "value": "{wb.colors.transparent}",
+            "type": "color"
+          }
+        },
+        "tour": {
+          "bg-primary-default": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          }
         },
-        "focus-element-blur": {
-          "value": "{ax.primitive-even.0}",
-          "type": "dimension"
+        "snackbar": {
+          "bg-info": {
+            "value": "{wb.colors.blue-400-10}",
+            "type": "color"
+          },
+          "bg-warning": {
+            "value": "{wb.colors.orange-400-10}",
+            "type": "color"
+          },
+          "bg-success": {
+            "value": "{wb.colors.green-400-10}",
+            "type": "color"
+          },
+          "bg-critical": {
+            "value": "{wb.colors.red-400-10}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.ui.stroke.subtle}",
+            "type": "color"
+          },
+          "stroke-info": {
+            "value": "{wb.colors.blue-400}",
+            "type": "color"
+          },
+          "stroke-warning": {
+            "value": "{wb.colors.orange-300}",
+            "type": "color"
+          },
+          "stroke-success": {
+            "value": "{wb.colors.green-300}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          }
         },
-        "focus-element-spread": {
-          "value": "{ax.primitive-even.2}",
-          "type": "dimension"
+        "tooltip": {
+          "bg-default": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "bg-info": {
+            "value": "{wb.colors.acc1-800}",
+            "type": "color"
+          }
+        },
+        "scrollbar": {
+          "bg-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          }
+        },
+        "chips": {
+          "solid-text": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "solid": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "inset-outline": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "overlay-outline": {
+            "value": "{wb.colors.gray-100-85}",
+            "type": "color"
+          }
+        },
+        "dropzone": {
+          "bg-default": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          },
+          "bg-hover": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "stroke-hover": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "bg-dragging": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          },
+          "stroke-dragging": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "bg-critical": {
+            "value": "{wb.colors.red-400-10}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          }
+        },
+        "tab": {
+          "stroke-hover": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "stroke-active": {
+            "value": "{wb.ui.brand.border}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          }
+        },
+        "avatar": {
+          "stroke-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "fill-default": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          }
+        },
+        "datepicker": {
+          "bg-primary": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          },
+          "bg-secondary": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          }
         }
       },
-      "primitive-even-negative": {
-        "-2": {
-          "value": "-0.125rem",
-          "type": "dimension"
-        },
-        "-4": {
-          "value": "-0.25rem",
-          "type": "dimension"
-        },
-        "-6": {
-          "value": "-0.375rem",
-          "type": "dimension"
-        },
-        "-8": {
-          "value": "-0.5rem",
-          "type": "dimension"
-        },
-        "-10": {
-          "value": "-0.625rem",
-          "type": "dimension"
-        },
-        "-12": {
-          "value": "-0.75rem",
-          "type": "dimension"
+      "ui": {
+        "bg": {
+          "base": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "elevated": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "inset": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "canvas-dots": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "canvas": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "app": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "fill-hover": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "fill-active": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "fill-disabled": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "fill-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          }
+        },
+        "stroke": {
+          "default": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "divider": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "subtle": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "highlight": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "warning": {
+            "value": "{wb.colors.orange-300}",
+            "type": "color"
+          },
+          "info": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          }
+        },
+        "text": {
+          "default": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          },
+          "subtle-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "muted-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "ghost-default": {
+            "value": "{wb.colors.gray-450}",
+            "type": "color"
+          },
+          "critical-default": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          },
+          "success-default": {
+            "value": "{wb.colors.green-400}",
+            "type": "color"
+          },
+          "onaccent-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{wb.colors.gray-900-30}",
+            "type": "color"
+          },
+          "inverse-subtle-default": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "critical-disabled": {
+            "value": "{wb.colors.red-400-50}",
+            "type": "color"
+          },
+          "info-default": {
+            "value": "{wb.colors.acc1-700}",
+            "type": "color"
+          },
+          "warning-default": {
+            "value": "{wb.colors.orange-400}",
+            "type": "color"
+          },
+          "tooltip-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "tooltip-accent-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "inverse-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "action-default": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "action-disabled": {
+            "value": "{wb.colors.acc1-500-40}",
+            "type": "color"
+          },
+          "success-disabled": {
+            "value": "{wb.colors.green-400-50}",
+            "type": "color"
+          },
+          "warning-disabled": {
+            "value": "{wb.colors.orange-400-50}",
+            "type": "color"
+          }
+        },
+        "focus-ring": {
+          "value": "{wb.ui.text.default}",
+          "type": "color"
+        },
+        "icon": {
+          "warning-default": {
+            "value": "{wb.colors.orange-400}",
+            "type": "color"
+          },
+          "critical-default": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          },
+          "action-default": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "success-default": {
+            "value": "{wb.colors.green-400}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{wb.colors.gray-900-30}",
+            "type": "color"
+          },
+          "inverse-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "subtle-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "info-default": {
+            "value": "{wb.colors.acc1-800}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          }
+        },
+        "brand": {
+          "fill": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "fill-hover": {
+            "value": "{wb.colors.acc1-600}",
+            "type": "color"
+          },
+          "border": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "text-on": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "identity": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "fill-active": {
+            "value": "{wb.colors.acc1-700}",
+            "type": "color"
+          },
+          "fill-subtle": {
+            "value": "{wb.colors.acc1-500-10}",
+            "type": "color"
+          },
+          "fill-subtle-hover": {
+            "value": "{wb.colors.acc1-500-20}",
+            "type": "color"
+          },
+          "fill-subtle-active": {
+            "value": "{wb.colors.acc1-500-30}",
+            "type": "color"
+          }
+        }
+      },
+      "canvas": {
+        "node": {
+          "focus-active": {
+            "value": "{wb.colors.acc1-500-40}",
+            "type": "color"
+          },
+          "focus-warning": {
+            "value": "{wb.colors.orange-400-40}",
+            "type": "color"
+          },
+          "focus-critical": {
+            "value": "{wb.colors.red-400-40}",
+            "type": "color"
+          },
+          "focus-success": {
+            "value": "{wb.colors.green-400-40}",
+            "type": "color"
+          },
+          "bg-primary-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "bg-primary-hover": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "bg-primary-active": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "bg-primary-disabled": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "bg-secondary-default": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "stroke-hover": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "icon-primary": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "text-disabled": {
+            "value": "{wb.colors.gray-900-30}",
+            "type": "color"
+          },
+          "text": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          },
+          "text-subtle": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "bg-content-default": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "decor-primary": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          }
+        },
+        "widget-swatches": {
+          "acc3": {
+            "value": "{wb.colors.acc3-500}",
+            "type": "color"
+          },
+          "acc4": {
+            "value": "{wb.colors.acc4-500}",
+            "type": "color"
+          },
+          "acc5": {
+            "value": "{wb.colors.acc5-500}",
+            "type": "color"
+          },
+          "acc6": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "acc2": {
+            "value": "{wb.colors.acc2-500}",
+            "type": "color"
+          },
+          "acc1": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          }
+        },
+        "badge-notify": {
+          "warning-bg-default": {
+            "value": "{wb.colors.orange-500}",
+            "type": "color"
+          },
+          "critical-icon": {
+            "value": "{wb.colors.red-50}",
+            "type": "color"
+          },
+          "critical-bg-default": {
+            "value": "{wb.colors.red-500}",
+            "type": "color"
+          },
+          "success-bg-default": {
+            "value": "{wb.colors.green-500}",
+            "type": "color"
+          },
+          "success-icon": {
+            "value": "{wb.colors.green-50}",
+            "type": "color"
+          },
+          "warning-icon": {
+            "value": "{wb.colors.orange-50}",
+            "type": "color"
+          }
+        },
+        "port": {
+          "fill-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "fill-active": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "stroke-active": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          }
+        },
+        "edge": {
+          "stroke-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "stroke-hover": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "stroke-active": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "stroke-disabled": {
+            "value": "{wb.colors.gray-450}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-500}",
+            "type": "color"
+          },
+          "stroke-warning": {
+            "value": "{wb.colors.orange-500}",
+            "type": "color"
+          },
+          "stroke-success": {
+            "value": "{wb.colors.green-500}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
+  "Tokens/Dark": {
+    "wb": {
+      "components": {
+        "button": {
+          "solid": {
+            "primary": {
+              "default": {
+                "value": "{wb.ui.brand.fill}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.ui.brand.fill-hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.ui.brand.fill-active}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.ui.brand.fill}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.ui.brand.fill}",
+                "type": "color"
+              }
+            },
+            "disabled": {
+              "value": "{wb.colors.gray-600}",
+              "type": "color"
+            },
+            "gray": {
+              "default": {
+                "value": "{wb.colors.gray-650}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.gray-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.gray-500}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.gray-650}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.gray-650}",
+                "type": "color"
+              }
+            },
+            "critical": {
+              "default": {
+                "value": "{wb.colors.red-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.red-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.red-700}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.red-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.red-500}",
+                "type": "color"
+              }
+            },
+            "success": {
+              "default": {
+                "value": "{wb.colors.green-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.green-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.green-700}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.green-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.green-500}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "default": {
+                "value": "{wb.colors.orange-500}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.orange-600}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.orange-700}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.orange-500}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.orange-500}",
+                "type": "color"
+              }
+            }
+          },
+          "ghost": {
+            "critical": {
+              "default": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.red-400-20}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.red-400-30}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.colors.red-400-10}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.colors.red-400}",
+                "type": "color"
+              }
+            },
+            "primary": {
+              "default": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.ui.brand.fill-subtle-hover}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.ui.brand.fill-subtle-active}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.ui.brand.fill-subtle}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.ui.brand.border}",
+                "type": "color"
+              }
+            },
+            "success": {
+              "default": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.green-400-20}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.green-400-30}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.colors.green-400-10}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.colors.green-400}",
+                "type": "color"
+              }
+            },
+            "warning": {
+              "default": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "hover": {
+                "value": "{wb.colors.orange-400-20}",
+                "type": "color"
+              },
+              "active": {
+                "value": "{wb.colors.orange-400-30}",
+                "type": "color"
+              },
+              "focus": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "loading": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "disabled": {
+                "value": "{wb.colors.orange-400-10}",
+                "type": "color"
+              },
+              "stroke-default": {
+                "value": "{wb.colors.orange-400}",
+                "type": "color"
+              }
+            }
+          }
+        },
+        "text-field": {
+          "stroke-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "stroke-focus": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          },
+          "stroke-success": {
+            "value": "{wb.colors.green-400}",
+            "type": "color"
+          },
+          "bg-primary-success": {
+            "value": "{wb.colors.green-400-10}",
+            "type": "color"
+          },
+          "bg-primary-critical": {
+            "value": "{wb.colors.red-400-10}",
+            "type": "color"
+          }
+        },
+        "selector": {
+          "fill-checked": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          }
+        },
+        "nav-button": {
+          "bg-primary-hover": {
+            "value": "{wb.colors.gray-100-5}",
+            "type": "color"
+          },
+          "icon-primary-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "icon-primary-pressed": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          },
+          "icon-primary-disabled": {
+            "value": "{wb.colors.gray-100-30}",
+            "type": "color"
+          },
+          "icon-primary-hover": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "icon-primary-active": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "bg-primary-pressed": {
+            "value": "{wb.colors.gray-100-5}",
+            "type": "color"
+          },
+          "bg-primary-active": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          },
+          "bg-primary-focus": {
+            "value": "{wb.colors.gray-100-5}",
+            "type": "color"
+          },
+          "bg-primary-default": {
+            "value": "{wb.colors.transparent}",
+            "type": "color"
+          },
+          "bg-primary-disabled": {
+            "value": "{wb.colors.transparent}",
+            "type": "color"
+          }
+        },
+        "tour": {
+          "bg-primary-default": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          }
         },
-        "-14": {
-          "value": "-0.875rem",
-          "type": "dimension"
+        "snackbar": {
+          "bg-info": {
+            "value": "{wb.colors.blue-400-10}",
+            "type": "color"
+          },
+          "bg-warning": {
+            "value": "{wb.colors.orange-400-10}",
+            "type": "color"
+          },
+          "bg-success": {
+            "value": "{wb.colors.green-400-10}",
+            "type": "color"
+          },
+          "bg-critical": {
+            "value": "{wb.colors.red-400-10}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.ui.stroke.subtle}",
+            "type": "color"
+          },
+          "stroke-info": {
+            "value": "{wb.colors.blue-400}",
+            "type": "color"
+          },
+          "stroke-warning": {
+            "value": "{wb.colors.orange-300}",
+            "type": "color"
+          },
+          "stroke-success": {
+            "value": "{wb.colors.green-300}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          }
         },
-        "-16": {
-          "value": "-1rem",
-          "type": "dimension"
+        "tooltip": {
+          "bg-default": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "bg-info": {
+            "value": "{wb.colors.acc1-800}",
+            "type": "color"
+          }
+        },
+        "scrollbar": {
+          "bg-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          }
+        },
+        "chips": {
+          "solid-text": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "solid": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "inset-outline": {
+            "value": "{wb.colors.acc1-400}",
+            "type": "color"
+          },
+          "overlay-outline": {
+            "value": "{wb.colors.gray-900-75}",
+            "type": "color"
+          }
+        },
+        "dropzone": {
+          "bg-default": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          },
+          "bg-hover": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "stroke-hover": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "bg-dragging": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          },
+          "stroke-dragging": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "bg-critical": {
+            "value": "{wb.colors.red-400-10}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          }
+        },
+        "tab": {
+          "stroke-hover": {
+            "value": "{wb.colors.gray-200}",
+            "type": "color"
+          },
+          "stroke-active": {
+            "value": "{wb.ui.brand.border}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          }
+        },
+        "avatar": {
+          "stroke-default": {
+            "value": "{wb.colors.gray-300}",
+            "type": "color"
+          },
+          "fill-default": {
+            "value": "{wb.colors.gray-450}",
+            "type": "color"
+          }
+        },
+        "datepicker": {
+          "bg-primary": {
+            "value": "{wb.ui.brand.fill}",
+            "type": "color"
+          },
+          "bg-secondary": {
+            "value": "{wb.ui.bg.inset}",
+            "type": "color"
+          }
         }
       },
-      "token-stroke": {
-        "edge-regular": {
-          "value": "{ax.primitive-even.2}",
-          "type": "dimension"
-        },
-        "edge-bold": {
-          "value": "{ax.primitive-odd.3}",
-          "type": "dimension"
+      "ui": {
+        "bg": {
+          "base": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "elevated": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "inset": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "canvas-dots": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "canvas": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "app": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          },
+          "fill-hover": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "fill-active": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "fill-disabled": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "fill-default": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          }
+        },
+        "stroke": {
+          "default": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "divider": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "subtle": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "highlight": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "warning": {
+            "value": "{wb.colors.orange-100}",
+            "type": "color"
+          },
+          "info": {
+            "value": "{wb.colors.acc1-400}",
+            "type": "color"
+          }
+        },
+        "text": {
+          "default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "subtle-default": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "muted-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "ghost-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "critical-default": {
+            "value": "{wb.colors.red-100}",
+            "type": "color"
+          },
+          "success-default": {
+            "value": "{wb.colors.green-200}",
+            "type": "color"
+          },
+          "onaccent-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{wb.colors.gray-100-30}",
+            "type": "color"
+          },
+          "inverse-subtle-default": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "critical-disabled": {
+            "value": "{wb.colors.red-100-30}",
+            "type": "color"
+          },
+          "info-default": {
+            "value": "{wb.colors.acc1-200}",
+            "type": "color"
+          },
+          "warning-default": {
+            "value": "{wb.colors.orange-100}",
+            "type": "color"
+          },
+          "tooltip-default": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "tooltip-accent-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "inverse-default": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          },
+          "action-default": {
+            "value": "{wb.colors.acc1-100}",
+            "type": "color"
+          },
+          "action-disabled": {
+            "value": "{wb.colors.acc1-500-20}",
+            "type": "color"
+          },
+          "success-disabled": {
+            "value": "{wb.colors.green-400-20}",
+            "type": "color"
+          },
+          "warning-disabled": {
+            "value": "{wb.colors.orange-400-20}",
+            "type": "color"
+          }
+        },
+        "focus-ring": {
+          "value": "{wb.ui.text.default}",
+          "type": "color"
+        },
+        "icon": {
+          "warning-default": {
+            "value": "{wb.colors.orange-100}",
+            "type": "color"
+          },
+          "critical-default": {
+            "value": "{wb.colors.red-100}",
+            "type": "color"
+          },
+          "action-default": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "success-default": {
+            "value": "{wb.colors.green-100}",
+            "type": "color"
+          },
+          "disabled": {
+            "value": "{wb.colors.gray-100-30}",
+            "type": "color"
+          },
+          "inverse-default": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          },
+          "subtle-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "info-default": {
+            "value": "{wb.colors.acc1-300}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          }
+        },
+        "brand": {
+          "fill": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "fill-hover": {
+            "value": "{wb.colors.acc1-600}",
+            "type": "color"
+          },
+          "border": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "text-on": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "identity": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "fill-active": {
+            "value": "{wb.colors.acc1-700}",
+            "type": "color"
+          },
+          "fill-subtle": {
+            "value": "{wb.colors.acc1-500-10}",
+            "type": "color"
+          },
+          "fill-subtle-hover": {
+            "value": "{wb.colors.acc1-500-20}",
+            "type": "color"
+          },
+          "fill-subtle-active": {
+            "value": "{wb.colors.acc1-500-30}",
+            "type": "color"
+          }
+        }
+      },
+      "canvas": {
+        "node": {
+          "focus-active": {
+            "value": "{wb.colors.acc1-500-40}",
+            "type": "color"
+          },
+          "focus-warning": {
+            "value": "{wb.colors.orange-400-40}",
+            "type": "color"
+          },
+          "focus-critical": {
+            "value": "{wb.colors.red-400-40}",
+            "type": "color"
+          },
+          "focus-success": {
+            "value": "{wb.colors.green-400-40}",
+            "type": "color"
+          },
+          "bg-primary-default": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "bg-primary-hover": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "bg-primary-active": {
+            "value": "{wb.colors.gray-700}",
+            "type": "color"
+          },
+          "bg-primary-disabled": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "bg-secondary-default": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "stroke-hover": {
+            "value": "{wb.colors.acc1-400}",
+            "type": "color"
+          },
+          "icon-primary": {
+            "value": "{wb.colors.acc1-400}",
+            "type": "color"
+          },
+          "text-disabled": {
+            "value": "{wb.colors.gray-100-30}",
+            "type": "color"
+          },
+          "text": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "text-subtle": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "bg-content-default": {
+            "value": "{wb.colors.gray-800}",
+            "type": "color"
+          },
+          "decor-primary": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          }
+        },
+        "widget-swatches": {
+          "acc3": {
+            "value": "{wb.colors.acc3-400}",
+            "type": "color"
+          },
+          "acc4": {
+            "value": "{wb.colors.acc4-400}",
+            "type": "color"
+          },
+          "acc5": {
+            "value": "{wb.colors.acc5-400}",
+            "type": "color"
+          },
+          "acc6": {
+            "value": "{wb.colors.gray-400}",
+            "type": "color"
+          },
+          "acc2": {
+            "value": "{wb.colors.acc2-400}",
+            "type": "color"
+          },
+          "acc1": {
+            "value": "{wb.colors.acc1-400}",
+            "type": "color"
+          }
+        },
+        "badge-notify": {
+          "warning-bg-default": {
+            "value": "{wb.colors.orange-500}",
+            "type": "color"
+          },
+          "critical-icon": {
+            "value": "{wb.colors.red-50}",
+            "type": "color"
+          },
+          "critical-bg-default": {
+            "value": "{wb.colors.red-500}",
+            "type": "color"
+          },
+          "success-bg-default": {
+            "value": "{wb.colors.green-500}",
+            "type": "color"
+          },
+          "success-icon": {
+            "value": "{wb.colors.green-50}",
+            "type": "color"
+          },
+          "warning-icon": {
+            "value": "{wb.colors.orange-50}",
+            "type": "color"
+          }
+        },
+        "port": {
+          "fill-default": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          },
+          "fill-active": {
+            "value": "{wb.colors.acc1-500}",
+            "type": "color"
+          },
+          "stroke-default": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "stroke-active": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          }
+        },
+        "edge": {
+          "stroke-default": {
+            "value": "{wb.colors.gray-600}",
+            "type": "color"
+          },
+          "stroke-hover": {
+            "value": "{wb.colors.gray-500}",
+            "type": "color"
+          },
+          "stroke-active": {
+            "value": "{wb.colors.acc1-400}",
+            "type": "color"
+          },
+          "stroke-disabled": {
+            "value": "{wb.colors.gray-650}",
+            "type": "color"
+          },
+          "stroke-critical": {
+            "value": "{wb.colors.red-400}",
+            "type": "color"
+          },
+          "stroke-warning": {
+            "value": "{wb.colors.orange-400}",
+            "type": "color"
+          },
+          "stroke-success": {
+            "value": "{wb.colors.green-400}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
+  "Canvas/value": {
+    "wb": {
+      "canvas": {
+        "node": {
+          "gap-sm": {
+            "value": "{wb.space.300}",
+            "type": "dimension"
+          },
+          "gap-md": {
+            "value": "{wb.space.400}",
+            "type": "dimension"
+          },
+          "gap-lg": {
+            "value": "{wb.space.600}",
+            "type": "dimension"
+          },
+          "inset": {
+            "value": "{wb.space.200}",
+            "type": "dimension"
+          },
+          "gap-inner": {
+            "value": "{wb.space.150}",
+            "type": "dimension"
+          },
+          "head-h-pad": {
+            "value": "{wb.space.100}",
+            "type": "dimension"
+          },
+          "head-v-pad": {
+            "value": "{wb.space.100}",
+            "type": "dimension"
+          },
+          "head-gap": {
+            "value": "{wb.space.100}",
+            "type": "dimension"
+          },
+          "head-icon": {
+            "value": "{wb.space.125}",
+            "type": "dimension"
+          },
+          "head-radius": {
+            "value": "{wb.radius.150}",
+            "type": "dimension"
+          },
+          "head-icon-radius": {
+            "value": "{wb.radius.100}",
+            "type": "dimension"
+          },
+          "badge-radius": {
+            "value": "{wb.radius.full}",
+            "type": "dimension"
+          },
+          "badge-h-pad": {
+            "value": "{wb.space.50}",
+            "type": "dimension"
+          },
+          "badge-v-pad": {
+            "value": "{wb.space.50}",
+            "type": "dimension"
+          },
+          "shell-radius": {
+            "value": "{wb.radius.150}",
+            "type": "dimension"
+          },
+          "content-radius": {
+            "value": "{wb.radius.100}",
+            "type": "dimension"
+          }
+        },
+        "port": {
+          "gap": {
+            "value": "{wb.space.100}",
+            "type": "dimension"
+          },
+          "offset": {
+            "value": "{wb.space.50}",
+            "type": "dimension"
+          }
+        },
+        "edge": {
+          "padding": {
+            "value": "{wb.space.400}",
+            "type": "dimension"
+          },
+          "label": {
+            "gap": {
+              "value": "{wb.space.100}",
+              "type": "dimension"
+            },
+            "xs-radius": {
+              "value": "{wb.radius.50}",
+              "type": "dimension"
+            },
+            "xs-v-pad-1": {
+              "value": "{wb.space.112}",
+              "type": "dimension"
+            },
+            "xs-v-pad-2": {
+              "value": "{wb.space.87}",
+              "type": "dimension"
+            },
+            "xs-h-pad-2": {
+              "value": "{wb.space.125}",
+              "type": "dimension"
+            },
+            "s-radius": {
+              "value": "{wb.radius.50}",
+              "type": "dimension"
+            },
+            "s-h-pad-1": {
+              "value": "{wb.space.125}",
+              "type": "dimension"
+            },
+            "s-h-pad-2": {
+              "value": "{wb.space.125}",
+              "type": "dimension"
+            },
+            "s-v-pad-1": {
+              "value": "{wb.space.125}",
+              "type": "dimension"
+            },
+            "s-v-pad-2": {
+              "value": "{wb.space.100}",
+              "type": "dimension"
+            },
+            "m-radius": {
+              "value": "{wb.radius.75}",
+              "type": "dimension"
+            },
+            "m-h-pad-1": {
+              "value": "{wb.space.150}",
+              "type": "dimension"
+            },
+            "m-h-pad-2": {
+              "value": "{wb.space.150}",
+              "type": "dimension"
+            },
+            "m-v-pad-1": {
+              "value": "{wb.space.150}",
+              "type": "dimension"
+            },
+            "m-v-pad-2": {
+              "value": "{wb.space.112}",
+              "type": "dimension"
+            }
+          },
+          "stroke-regular": {
+            "value": "{wb.size.25}",
+            "type": "dimension"
+          },
+          "stroke-bold": {
+            "value": "{wb.size.37}",
+            "type": "dimension"
+          },
+          "corner-radius": {
+            "value": "{wb.radius.25}",
+            "type": "dimension"
+          }
+        },
+        "widget": {
+          "s-pad": {
+            "value": "{wb.space.125}",
+            "type": "dimension"
+          },
+          "s-gap": {
+            "value": "{wb.space.200}",
+            "type": "dimension"
+          },
+          "s-radius": {
+            "value": "{wb.radius.100}",
+            "type": "dimension"
+          },
+          "m-pad": {
+            "value": "{wb.space.125}",
+            "type": "dimension"
+          },
+          "m-gap": {
+            "value": "{wb.space.200}",
+            "type": "dimension"
+          },
+          "m-radius": {
+            "value": "{wb.radius.100}",
+            "type": "dimension"
+          },
+          "l-pad": {
+            "value": "{wb.space.125}",
+            "type": "dimension"
+          },
+          "l-gap": {
+            "value": "{wb.space.200}",
+            "type": "dimension"
+          },
+          "l-radius": {
+            "value": "{wb.radius.100}",
+            "type": "dimension"
+          },
+          "element-radius": {
+            "value": "{wb.radius.100}",
+            "type": "dimension"
+          },
+          "paragraph-pad": {
+            "value": "{wb.space.75}",
+            "type": "dimension"
+          },
+          "paragraph-gap": {
+            "value": "{wb.space.100}",
+            "type": "dimension"
+          },
+          "button": {
+            "xxs-radius": {
+              "value": "{wb.radius.50}",
+              "type": "dimension"
+            },
+            "xxs-v-pad-1": {
+              "value": "{wb.space.87}",
+              "type": "dimension"
+            },
+            "xxxs-v-pad-1": {
+              "value": "{wb.space.62}",
+              "type": "dimension"
+            },
+            "xs-radius": {
+              "value": "{wb.radius.50}",
+              "type": "dimension"
+            },
+            "xs-h-pad-2": {
+              "value": "{wb.space.100}",
+              "type": "dimension"
+            },
+            "xs-v-pad-2": {
+              "value": "{wb.space.75}",
+              "type": "dimension"
+            },
+            "xs-gap": {
+              "value": "{wb.space.100}",
+              "type": "dimension"
+            }
+          }
+        }
+      }
+    }
+  },
+  "Effects/light": {
+    "wb": {
+      "shadow": {
+        "ui": {
+          "xs": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "4px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "8px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-2px",
+              "type": "dimension"
+            }
+          },
+          "s": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "8px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "16px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-4px",
+              "type": "dimension"
+            }
+          },
+          "m": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "12px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "24px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-6px",
+              "type": "dimension"
+            }
+          },
+          "l": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "16px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "32px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-8px",
+              "type": "dimension"
+            }
+          },
+          "xl": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "24px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "48px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-12px",
+              "type": "dimension"
+            }
+          },
+          "focus-element": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "2px",
+              "type": "dimension"
+            }
+          },
+          "color": {
+            "value": "{wb.colors.gray-900-20}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{wb.colors.gray-900}",
+            "type": "color"
+          }
+        },
+        "canvas": {
+          "focus-node": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "4px",
+              "type": "dimension"
+            }
+          }
+        }
+      }
+    }
+  },
+  "Effects/dark": {
+    "wb": {
+      "shadow": {
+        "ui": {
+          "xs": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "4px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "8px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-2px",
+              "type": "dimension"
+            }
+          },
+          "s": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "8px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "16px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-4px",
+              "type": "dimension"
+            }
+          },
+          "m": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "12px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "24px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-6px",
+              "type": "dimension"
+            }
+          },
+          "l": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "16px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "32px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-8px",
+              "type": "dimension"
+            }
+          },
+          "xl": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "24px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "48px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "-12px",
+              "type": "dimension"
+            }
+          },
+          "focus-element": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "2px",
+              "type": "dimension"
+            }
+          },
+          "color": {
+            "value": "{wb.colors.gray-900-50}",
+            "type": "color"
+          },
+          "focus": {
+            "value": "{wb.colors.gray-100}",
+            "type": "color"
+          }
+        },
+        "canvas": {
+          "focus-node": {
+            "x": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "y": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "blur": {
+              "value": "0px",
+              "type": "dimension"
+            },
+            "spread": {
+              "value": "4px",
+              "type": "dimension"
+            }
+          }
         }
       }
     }
   },
   "$themes": [],
   "$metadata": {
-    "tokenSetOrder": ["Primitives/Mode 1", "Tokens/Light", "Tokens/Dark", "Numerals/Mode 1"]
+    "tokenSetOrder": [
+      "Primitives/Mode 1",
+      "Tokens/Light",
+      "Tokens/Dark",
+      "Canvas/value",
+      "Effects/light",
+      "Effects/dark"
+    ]
   }
 }
diff --git a/packages/ui/combine-css-bundle.mts b/packages/ui/combine-css-bundle.mts
index 83777da77..351944def 100644
--- a/packages/ui/combine-css-bundle.mts
+++ b/packages/ui/combine-css-bundle.mts
@@ -75,7 +75,7 @@ function writeCombinedStylesheet(distributionDirectory: string, stylesDirectory:
 }
 
 function writeGlobalStylesheet(distributionDirectory: string, stylesDirectory: string) {
-  const globals = ['layers.css', 'globals.css', '_provisional.css', 'typography.css']
+  const globals = ['layers.css', 'globals.css', 'typography.css']
     .map((file) => fs.readFileSync(path.resolve(stylesDirectory, file), 'utf8'))
     .join('\n');
 
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 932463d2c..d21caad50 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,4 +1,3 @@
-import './styles/_provisional.css';
 import './styles/fonts.css';
 import './styles/globals.css';
 import './styles/layers.css';
diff --git a/packages/ui/src/styles/_provisional.css b/packages/ui/src/styles/_provisional.css
deleted file mode 100644
index 27849bc7b..000000000
--- a/packages/ui/src/styles/_provisional.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* PROVISIONAL — this whole file is scheduled for deletion.
-   Tokens the Figma token export does not ship yet, defined here so the
-   classes that consume them work today. When the export lands in tokens.css
-   its unlayered definitions override this layered block automatically; then
-   delete this file together with its two wire-ups (src/index.ts import and
-   the combine-css-bundle globals list) — both fail the build if forgotten. */
-@layer ui.base {
-  :root {
-    /* wb/font-size/NNN, NNN ≈ px × 12.5 (truncated). */
-    --wb-font-size-125: 0.625rem;
-    --wb-font-size-137: 0.6875rem;
-    --wb-font-size-150: 0.75rem;
-    --wb-font-size-162: 0.8125rem;
-    --wb-font-size-175: 0.875rem;
-    --wb-font-size-200: 1rem;
-    --wb-font-size-225: 1.125rem;
-    --wb-font-size-250: 1.25rem;
-    --wb-font-size-275: 1.375rem;
-    --wb-font-size-300: 1.5rem;
-    --wb-font-size-350: 1.75rem;
-    --wb-font-size-400: 2rem;
-
-    --wb-radius-50: 0.25rem;
-    --wb-space-50: 0.25rem;
-    --wb-space-75: 0.375rem;
-    --wb-size-12: 0.0625rem;
-    --wb-components-chips-inset-outline: var(--ax-colors-acc1-500);
-  }
-
-  html[data-theme='light'] {
-    --wb-components-chips-solid: var(--ax-colors-gray-300);
-    --wb-components-chips-solid-text: var(--ax-colors-gray-800);
-    --wb-components-chips-overlay-outline: color-mix(in srgb, var(--ax-colors-gray-100) 85%, transparent);
-  }
-
-  html[data-theme='dark'] {
-    --wb-components-chips-solid: var(--ax-colors-gray-650);
-    --wb-components-chips-solid-text: var(--ax-colors-gray-100);
-    --wb-components-chips-overlay-outline: color-mix(in srgb, var(--ax-colors-gray-900) 75%, transparent);
-  }
-}
diff --git a/packages/ui/vite.config.mts b/packages/ui/vite.config.mts
index daf4d3cd3..a255a4642 100644
--- a/packages/ui/vite.config.mts
+++ b/packages/ui/vite.config.mts
@@ -57,7 +57,7 @@ function isExternal(id: string): boolean {
 }
 
 function copyTokenStyles() {
-  const files = ['tokens.css', 'numerals-mode-1.css', 'primitives-mode-1.css'];
+  const files = ['tokens.css', 'primitives-mode-1.css'];
 
   for (const file of files) {
     if (!existsSync(path.resolve(rootDirectory, `../tokens/dist/${file}`))) {

From b14536527da7c40a5d84fb8a1b52836b474ed17b Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 03:27:28 +0200
Subject: [PATCH 2/3] refactor: adopt the wb token names across the workspaces

Mechanical rewrite of every var(--ax-...) usage to its wb equivalent:
renames and prefix rules from the migration map plus value-matched
dimension tokens (the old numeral scales map 1:1 onto wb/space,
wb/size and wb/radius; two 100px pill radii become radius-full).
Hand-mapped leftovers keep their old rendered values per theme: the
accent chips in the sdk message and branch-card controls and the
list-item selected/destructive backgrounds, which the retired
dropdown tokens used to carry. No compatibility bridge: consumers
theme through the unchanged ax-public contract, and the stylelint
guard fails the build on any name this rewrite might have missed.
---
 .changeset/token-set-2.md                     |  6 ++
 .../disclaimer/disclaimer-modal.module.css    | 30 +++----
 .../src/components/execution/highlighting.css | 23 +++--
 .../components/execution/log-panel.module.css | 10 +--
 .../components/visualize/renderers.module.css | 42 +++++-----
 .../visualize/visualize-card.module.css       | 20 ++---
 .../visualize/visualize-modal.module.css      | 20 ++---
 .../content/docs/ui-library/design-tokens.mdx | 31 ++++---
 .../button-submit/button-submit.module.css    |  4 +-
 .../components/form/label/label.module.css    |  4 +-
 .../form/message/message.module.css           | 18 ++--
 .../src/components/loader/loader.module.css   |  2 +-
 .../sdk/src/components/sidebar/variables.css  |  6 +-
 .../sdk/src/features/app-bar/variables.css    | 12 +--
 .../diagram/edges/label-edge/variables.css    |  8 +-
 .../ai-agent-node-template.module.css         |  8 +-
 .../icon-placeholder.module.css               |  4 +-
 .../node-wrapper-info.module.css              |  4 +-
 .../connectable-item.module.css               |  4 +-
 .../node-section/node-section.module.css      |  4 +-
 .../import-export-modal.module.css            |  2 +-
 .../saving-status/saving-status.module.css    |  6 +-
 .../indicator-dot/indicator-dot.module.css    |  2 +-
 .../branch-card/branch-card.module.css        | 12 ++-
 .../dynamic-conditions-control.module.css     |  2 +-
 .../conditions-form-field.module.css          |  6 +-
 .../rich-text-control.module.css              |  2 +-
 .../delete-confirmation.module.css            |  2 +-
 .../components/tile.module.css                | 12 +--
 .../template-selector.module.css              |  2 +-
 .../sdk/src/features/palette/variables.css    |  2 +-
 .../components/syntax-highlighter.module.css  | 30 +++----
 .../dynamic-typed-input.module.css            |  4 +-
 .../variable-select.module.css                |  2 +-
 .../variable-text/variable-text.module.css    | 26 +++---
 .../modals/modal-settings.module.css          |  8 +-
 .../settings/settings-navigation.module.css   | 12 +--
 .../pane-list/pane-list.module.css            |  4 +-
 .../pane-remove-variable.module.css           | 12 +--
 .../variable-form/variable-form.module.css    |  2 +-
 .../variable-preview/variable-meta.module.css |  2 +-
 .../variable-preview.module.css               | 10 +--
 .../modals/tab/tab-header.module.css          |  4 +-
 packages/sdk/src/index.css                    |  4 +-
 .../src/components/avatar/avatar.module.css   |  4 +-
 .../button/base-button/base-button.module.css |  8 +-
 .../nav-button-icon-padding.module.css        |  4 +-
 .../nav-icon-button.module.css                |  2 +-
 .../nav-button-gap.module.css                 |  5 +-
 .../nav-icon-label-button-padding.module.css  |  6 +-
 .../nav-label-button-padding.module.css       |  6 +-
 .../nav-button-border-radius.module.css       |  4 +-
 .../nav-button/styles/nav-button.module.css   | 12 +--
 .../label-button/loader.module.css            |  2 +-
 .../button/styles/border-radius.module.css    | 12 +--
 .../components/button/styles/gap.module.css   | 10 +--
 .../icon-label-button-padding.module.css      | 15 ++--
 .../button/styles/icon-padding.module.css     | 10 +--
 .../styles/label-button-padding.module.css    | 15 ++--
 .../button/styles/variant.module.css          | 84 +++++++++----------
 .../components/checkbox/checkbox.module.css   | 24 +++---
 .../ui/src/components/chips/chips.module.css  |  2 +-
 .../src/components/date-picker/variables.css  | 22 ++---
 .../edge-label/edge-label-size.module.css     | 36 ++++----
 .../edge/edge-label/edge-label.module.css     | 20 ++---
 .../edge/use-edge-styles/use-edge-styles.css  |  8 +-
 .../ui/src/components/input/variables.css     | 16 ++--
 .../ui/src/components/modal/modal.module.css  | 56 ++++++-------
 .../node-description.module.css               |  4 +-
 .../node/node-icon/node-icon.module.css       | 10 +--
 .../node/node-panel/handle.module.css         |  8 +-
 .../node/node-panel/node-panel.module.css     | 21 +++--
 .../components/radio-button/radio.module.css  | 18 ++--
 .../border-radius-size.module.css             | 14 ++--
 .../segment-picker/segment-picker.module.css  |  8 +-
 .../select-button/select-button.module.css    | 16 ++--
 .../components/separator/separator.module.css |  2 +-
 .../components/snackbar/snackbar.module.css   | 55 ++++++------
 .../src/components/status/status.module.css   | 10 +--
 .../switch/icon-switch/icon-switch.module.css | 10 +--
 .../src/components/switch/switch.module.css   | 18 ++--
 .../components/text-area/text-area.module.css | 16 ++--
 .../src/components/tooltip/tooltip.module.css | 12 +--
 .../src/shared/styles/input-size.module.css   | 18 ++--
 .../ui/src/shared/styles/list-box.module.css  | 13 ++-
 .../shared/styles/list-item-size.module.css   | 15 ++--
 .../ui/src/shared/styles/list-item.module.css | 28 ++++---
 87 files changed, 551 insertions(+), 558 deletions(-)
 create mode 100644 .changeset/token-set-2.md

diff --git a/.changeset/token-set-2.md b/.changeset/token-set-2.md
new file mode 100644
index 000000000..9d9a7401b
--- /dev/null
+++ b/.changeset/token-set-2.md
@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': minor
+'@workflowbuilder/sdk': minor
+---
+
+The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, and new canvas and shadow (effects) sets. The `--ax-*` token names are gone from `tokens.css`; the `--ax-public-*` per-component override variables are unchanged. Component visuals pick up the refreshed palette (brand `#3969FF`, updated reds/greens/oranges).
diff --git a/apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css b/apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css
index ae3cad078..fbc089d46 100644
--- a/apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css
+++ b/apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css
@@ -16,11 +16,11 @@
   max-width: 460px;
   padding: 2rem;
   font-family: var(--wb-font-family);
-  background: var(--ax-ui-bg-primary-default);
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  background: var(--wb-ui-bg-base);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   border-radius: var(--wb-app-bar-border-radius);
   box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.25);
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .close {
@@ -35,13 +35,13 @@
   border: none;
   border-radius: 0.5rem;
   background: transparent;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   cursor: pointer;
 }
 
 .close:hover {
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-txt-primary-default);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-ui-text-default);
 }
 
 .heading {
@@ -59,22 +59,22 @@
   height: 2.25rem;
   flex-shrink: 0;
   border-radius: 0.6rem;
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-colors-acc1-500);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-colors-acc1-500);
 }
 
 .title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .body {
   margin: 0 0 1.5rem;
   font-size: 0.92rem;
   line-height: 1.6;
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .body p {
@@ -86,7 +86,7 @@
 }
 
 .body strong {
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   font-weight: 600;
 }
 
@@ -98,7 +98,7 @@
   padding: 0.7rem 1rem;
   border: none;
   border-radius: 0.625rem;
-  background: var(--ax-colors-acc1-500);
+  background: var(--wb-colors-acc1-500);
   color: #ffffff;
   font-size: 0.95rem;
   font-weight: 600;
@@ -107,7 +107,7 @@
 }
 
 .cta:hover {
-  background: var(--ax-colors-acc1-600);
+  background: var(--wb-colors-acc1-600);
 }
 
 .reopen {
@@ -123,11 +123,11 @@
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: 50%;
   background: var(--wb-app-bar-background);
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 .reopen:hover {
-  color: var(--ax-colors-acc1-500);
+  color: var(--wb-colors-acc1-500);
 }
diff --git a/apps/ai-studio/src/components/execution/highlighting.css b/apps/ai-studio/src/components/execution/highlighting.css
index fef4548f1..63fcf602f 100644
--- a/apps/ai-studio/src/components/execution/highlighting.css
+++ b/apps/ai-studio/src/components/execution/highlighting.css
@@ -1,31 +1,28 @@
 html[data-theme='light'] {
-  --ai-studio-edge-color--active: var(--ax-colors-green-400);
-  --ai-studio-status-color--completed: var(--ax-colors-green-400);
+  --ai-studio-edge-color--active: var(--wb-colors-green-400);
+  --ai-studio-status-color--completed: var(--wb-colors-green-400);
 }
 
 html[data-theme='dark'] {
-  --ai-studio-edge-color--active: var(--ax-colors-green-200);
-  --ai-studio-status-color--completed: var(--ax-colors-green-200);
+  --ai-studio-edge-color--active: var(--wb-colors-green-200);
+  --ai-studio-status-color--completed: var(--wb-colors-green-200);
 }
 
 :root {
-  --ai-studio-status-color--failed: var(--ax-txt-error-default);
+  --ai-studio-status-color--failed: var(--wb-ui-text-critical-default);
   --ai-studio-status-bg--completed: color-mix(in srgb, var(--ai-studio-status-color--completed), transparent 85%);
   --ai-studio-status-bg--failed: color-mix(in srgb, var(--ai-studio-status-color--failed), transparent 85%);
 
   --ai-studio-node-shadow-color--active: var(--ai-studio-edge-color--active);
   --ai-studio-node-shadow-color--completed: var(--ai-studio-edge-color--active);
-  --ai-studio-node-shadow-color--failed: var(--ax-colors-red-400);
+  --ai-studio-node-shadow-color--failed: var(--wb-colors-red-400);
 
-  --ai-studio-node-shadow--active: var(--ax-token-shadow-focus-node-active-x) var(--ax-token-shadow-focus-node-active-y)
-    var(--ax-token-shadow-focus-node-active-blur) var(--ax-token-shadow-focus-node-active-spread)
+  --ai-studio-node-shadow--active: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
     var(--ai-studio-node-shadow-color--active);
 
-  --ai-studio-node-shadow--completed: var(--ax-token-shadow-focus-node-active-x)
-    var(--ax-token-shadow-focus-node-active-y) var(--ax-token-shadow-focus-node-active-blur)
-    var(--ax-token-shadow-focus-node-active-spread) var(--ai-studio-node-shadow-color--completed);
+  --ai-studio-node-shadow--completed: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
+    var(--ai-studio-node-shadow-color--completed);
 
-  --ai-studio-node-shadow--failed: var(--ax-token-shadow-focus-node-active-x) var(--ax-token-shadow-focus-node-active-y)
-    var(--ax-token-shadow-focus-node-active-blur) var(--ax-token-shadow-focus-node-active-spread)
+  --ai-studio-node-shadow--failed: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
     var(--ai-studio-node-shadow-color--failed);
 }
diff --git a/apps/ai-studio/src/components/execution/log-panel.module.css b/apps/ai-studio/src/components/execution/log-panel.module.css
index e8a962917..7c4e507ab 100644
--- a/apps/ai-studio/src/components/execution/log-panel.module.css
+++ b/apps/ai-studio/src/components/execution/log-panel.module.css
@@ -9,7 +9,7 @@
   background: var(--wb-app-bar-background);
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: var(--wb-app-bar-border-radius);
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   display: flex;
   flex-direction: column;
   z-index: 10;
@@ -91,7 +91,7 @@
 }
 
 .badge--node_started {
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .badge--node_failed,
@@ -100,7 +100,7 @@
 }
 
 .badge--execution_cancelled {
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .node-id {
@@ -160,6 +160,6 @@
 }
 
 .event--highlighted {
-  background: color-mix(in srgb, var(--ax-colors-acc1-500), transparent 88%);
-  box-shadow: inset 0.1875rem 0 0 var(--ax-colors-acc1-500);
+  background: color-mix(in srgb, var(--wb-colors-acc1-500), transparent 88%);
+  box-shadow: inset 0.1875rem 0 0 var(--wb-colors-acc1-500);
 }
diff --git a/apps/ai-studio/src/components/visualize/renderers.module.css b/apps/ai-studio/src/components/visualize/renderers.module.css
index cfcbb0d3f..2cfd72504 100644
--- a/apps/ai-studio/src/components/visualize/renderers.module.css
+++ b/apps/ai-studio/src/components/visualize/renderers.module.css
@@ -1,7 +1,7 @@
 .markdown {
   font-size: 0.85rem;
   line-height: 1.6;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   overflow-wrap: anywhere;
 }
 
@@ -40,7 +40,7 @@
 }
 
 .markdown a {
-  color: var(--ax-colors-acc1-500);
+  color: var(--wb-colors-acc1-500);
   text-decoration: underline;
 }
 
@@ -51,7 +51,7 @@
 .markdown code {
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.82em;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   padding: 0.1em 0.35em;
   border-radius: 0.25rem;
 }
@@ -59,7 +59,7 @@
 .markdown pre {
   margin: 0.6em 0;
   padding: 0.7em 0.85em;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   border-radius: 0.5rem;
   overflow-x: auto;
 }
@@ -72,8 +72,8 @@
 .markdown blockquote {
   margin: 0.6em 0;
   padding-left: 0.85em;
-  border-left: 0.1875rem solid var(--ax-ui-stroke-primary-default);
-  color: var(--ax-txt-secondary-default);
+  border-left: 0.1875rem solid var(--wb-ui-stroke-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .rich p {
@@ -89,13 +89,13 @@
 .rich code {
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.85em;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   padding: 0.05em 0.3em;
   border-radius: 0.2rem;
 }
 
 .rich a {
-  color: var(--ax-colors-acc1-500);
+  color: var(--wb-colors-acc1-500);
   text-decoration: underline;
 }
 
@@ -108,7 +108,7 @@
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.8rem;
   line-height: 1.55;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
@@ -117,7 +117,7 @@
   font-family: 'IBM Plex Mono', ui-monospace, monospace;
   font-size: 0.78rem;
   line-height: 1.5;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .json-row {
@@ -132,18 +132,18 @@
 
 .json-children {
   padding-left: 0.9rem;
-  border-left: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border-left: 0.0625rem solid var(--wb-ui-stroke-default);
   margin-left: 0.25rem;
 }
 
 .json-toggle {
   width: 0.7rem;
   flex-shrink: 0;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .json-key {
-  color: var(--ax-colors-acc1-600);
+  color: var(--wb-colors-acc1-600);
 }
 
 .json-string {
@@ -160,7 +160,7 @@
 }
 
 .json-bracket {
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .table {
@@ -171,14 +171,14 @@
 
 .table th,
 .table td {
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   padding: 0.3em 0.5em;
   text-align: left;
   vertical-align: top;
 }
 
 .table th {
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
   font-weight: 600;
   position: sticky;
   top: 0;
@@ -192,15 +192,15 @@
 
 .stat-card {
   padding: 0.6rem 0.7rem;
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   border-radius: 0.5rem;
-  background: var(--ax-ui-bg-secondary-default);
+  background: var(--wb-ui-bg-elevated);
 }
 
 .stat-value {
   font-size: 1.05rem;
   font-weight: 600;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   overflow-wrap: anywhere;
 }
 
@@ -209,13 +209,13 @@
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .fallback-note {
   margin-bottom: 0.4rem;
   font-size: 0.72rem;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .chart {
diff --git a/apps/ai-studio/src/components/visualize/visualize-card.module.css b/apps/ai-studio/src/components/visualize/visualize-card.module.css
index 0fddfb7d8..0d1304a9c 100644
--- a/apps/ai-studio/src/components/visualize/visualize-card.module.css
+++ b/apps/ai-studio/src/components/visualize/visualize-card.module.css
@@ -2,10 +2,10 @@
   width: 100%;
   margin-top: 0.4rem;
   padding-top: 0.5rem;
-  border-top: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border-top: 0.0625rem solid var(--wb-ui-stroke-default);
   font-family: var(--wb-font-family);
   text-align: left;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 
   &,
   * {
@@ -30,8 +30,8 @@
   font-size: 0.64rem;
   padding: 0.15rem 0.4rem;
   border-radius: 0.3rem;
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-txt-tertiary-default);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .actions {
@@ -50,7 +50,7 @@
   border: none;
   border-radius: 0.3rem;
   background: transparent;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   cursor: pointer;
 }
 
@@ -60,8 +60,8 @@
 }
 
 .action:hover {
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-txt-primary-default);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-ui-text-default);
 }
 
 .action:disabled {
@@ -93,7 +93,7 @@
 .empty-icon {
   width: 1.6rem;
   height: 1.6rem;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   opacity: 0.55;
 }
 
@@ -101,7 +101,7 @@
   margin: 0;
   font-size: 0.74rem;
   line-height: 1.45;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .dots {
@@ -114,7 +114,7 @@
   width: 0.45rem;
   height: 0.45rem;
   border-radius: 50%;
-  background: var(--ax-colors-acc1-500);
+  background: var(--wb-colors-acc1-500);
   animation: md-pulse 1s ease-in-out infinite;
 }
 
diff --git a/apps/ai-studio/src/components/visualize/visualize-modal.module.css b/apps/ai-studio/src/components/visualize/visualize-modal.module.css
index b92dc117f..4d88ef26b 100644
--- a/apps/ai-studio/src/components/visualize/visualize-modal.module.css
+++ b/apps/ai-studio/src/components/visualize/visualize-modal.module.css
@@ -16,11 +16,11 @@
   flex-direction: column;
   width: min(56rem, 92vw);
   max-height: 86vh;
-  background: var(--ax-ui-bg-primary-default);
-  border: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  background: var(--wb-ui-bg-base);
+  border: 0.0625rem solid var(--wb-ui-stroke-default);
   border-radius: 0.9rem;
   box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   overflow: hidden;
 
   &,
@@ -34,7 +34,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
-  border-bottom: 0.0625rem solid var(--ax-ui-stroke-primary-default);
+  border-bottom: 0.0625rem solid var(--wb-ui-stroke-default);
 }
 
 .title {
@@ -47,8 +47,8 @@
   font-size: 0.7rem;
   padding: 0.15rem 0.5rem;
   border-radius: 0.3rem;
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-txt-tertiary-default);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-ui-text-muted-default);
 }
 
 .actions {
@@ -66,7 +66,7 @@
   border: none;
   border-radius: 0.4rem;
   background: transparent;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   cursor: pointer;
 }
 
@@ -76,8 +76,8 @@
 }
 
 .action:hover {
-  background: var(--ax-ui-bg-secondary-default);
-  color: var(--ax-txt-primary-default);
+  background: var(--wb-ui-bg-elevated);
+  color: var(--wb-ui-text-default);
 }
 
 .body {
@@ -87,6 +87,6 @@
 }
 
 .loading {
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   font-size: 0.85rem;
 }
diff --git a/apps/docs/src/content/docs/ui-library/design-tokens.mdx b/apps/docs/src/content/docs/ui-library/design-tokens.mdx
index 195e92bbf..9f986f366 100644
--- a/apps/docs/src/content/docs/ui-library/design-tokens.mdx
+++ b/apps/docs/src/content/docs/ui-library/design-tokens.mdx
@@ -1,10 +1,10 @@
 ---
 title: Design tokens
-description: How @workflowbuilder/ui turns Figma design tokens into the --ax-* CSS custom properties that style every component.
+description: How @workflowbuilder/ui turns Figma design tokens into the --wb-* CSS custom properties that style every component.
 ---
 
 Every `@workflowbuilder/ui` component is styled with CSS custom properties
-(`--ax-*`) rather than hard-coded values. Those properties are generated from a
+(`--wb-*`) rather than hard-coded values. Those properties are generated from a
 single design-token source, so the visual language stays consistent and is
 retunable without touching component code.
 
@@ -17,25 +17,30 @@ and are compiled to CSS with [Style Dictionary](https://styledictionary.com/):
 tokens.json            # Figma export: the design-token source of truth
    │  (style-dictionary, packages/tokens/src)
    ▼
-primitives-mode-1.css  # raw scales (colors, etc.) on :root
-numerals-mode-1.css    # numeric scales (spacing, radius, …) on :root
+primitives-mode-1.css  # raw scales (colors, spacing, radius, …) on :root
+canvas-value.css       # canvas tokens on :root
 tokens-light.css       # semantic tokens, scoped to html[data-theme='light']
 tokens-dark.css        # semantic tokens, scoped to html[data-theme='dark']
+effects-light.css      # shadow tokens, scoped to html[data-theme='light']
+effects-dark.css       # shadow tokens, scoped to html[data-theme='dark']
    │
    ▼
-tokens.css             # the four above, bundled - this is what you import
+tokens.css             # the six above, bundled - this is what you import
 ```
 
-`tokens.json` is exported from Figma and contains four token sets:
-**Primitives/Mode 1**, **Numerals/Mode 1**, **Tokens/Light**, and **Tokens/Dark**.
+`tokens.json` is exported from Figma and contains six token sets:
+**Primitives/Mode 1**, **Tokens/Light**, **Tokens/Dark**, **Canvas/value**,
+**Effects/light**, and **Effects/dark**.
 Style Dictionary flattens each into kebab-cased CSS variables:
 
-- **Primitives / Numerals** become `--ax-colors-*`, `--ax-primitive-*`, etc. on
-  `:root` - the raw palette and scales.
+- **Primitives** become `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, etc.
+  on `:root` - the raw palette and scales.
 - **Tokens/Light** and **Tokens/Dark** become the _semantic_ layer
-  (`--ax-ui-bg-*`, `--ax-txt-*`, `--ax-button-*`, …), each scoped to
+  (`--wb-ui-*`, `--wb-components-*`, …), each scoped to
   `html[data-theme='light']` / `html[data-theme='dark']` so a single attribute
   switch reskins everything.
+- **Effects** carry the shadow values per theme; **Canvas** styles the diagram
+  surface.
 
 Components reference the semantic tokens, which in turn reference the primitives.
 
@@ -57,12 +62,12 @@ import '@workflowbuilder/ui/tokens.css';
 
 There are three override levels, from broadest to most local:
 
-1. **Primitives** (`--ax-colors-*`, `--ax-primitive-*`) - retune the palette/scales globally.
-2. **Semantic tokens** (`--ax-ui-*`, `--ax-txt-*`, `--ax-button-*`, …) - re-map meaning (e.g. make "primary" green).
+1. **Primitives** (`--wb-colors-*`, `--wb-space-*`, …) - retune the palette/scales globally.
+2. **Semantic tokens** (`--wb-ui-*`, `--wb-components-*`, …) - re-map meaning (e.g. make "primary" green).
 3. **Component variables** (`--ax-public-*`) - tweak a single component; see each component's CSS variables table.
 
 For the enterprise path you replace `tokens.json` with one generated from your
-own Figma design kit and rebuild; the `--ax-*` surface stays the same.
+own Figma design kit and rebuild; the `--wb-*` surface stays the same.
 
 ## Regenerating
 
diff --git a/packages/sdk/src/components/button-submit/button-submit.module.css b/packages/sdk/src/components/button-submit/button-submit.module.css
index 2c061d984..adf5e92d2 100644
--- a/packages/sdk/src/components/button-submit/button-submit.module.css
+++ b/packages/sdk/src/components/button-submit/button-submit.module.css
@@ -1,5 +1,5 @@
 :root {
-  --spinner-color: var(--ax-txt-primary-white);
+  --spinner-color: var(--wb-ui-text-onaccent-default);
 }
 
 .container {
@@ -7,7 +7,7 @@
 }
 
 .container--success {
-  --spinner-color: var(--ax-txt-primary-white);
+  --spinner-color: var(--wb-ui-text-onaccent-default);
 }
 
 .container--ghost-destructive {
diff --git a/packages/sdk/src/components/form/label/label.module.css b/packages/sdk/src/components/form/label/label.module.css
index 8a2abf294..a4a382069 100644
--- a/packages/sdk/src/components/form/label/label.module.css
+++ b/packages/sdk/src/components/form/label/label.module.css
@@ -1,8 +1,8 @@
 @layer ui.base, ui.component;
 
 :root {
-  --ax-public-form-label-color: var(--ax-txt-secondary-default);
-  --ax-public-form-label-asterisk-color: var(--ax-txt-error-default);
+  --ax-public-form-label-color: var(--wb-ui-text-subtle-default);
+  --ax-public-form-label-asterisk-color: var(--wb-ui-text-critical-default);
 }
 
 @layer ui.component {
diff --git a/packages/sdk/src/components/form/message/message.module.css b/packages/sdk/src/components/form/message/message.module.css
index 29697bc20..db03fbd8b 100644
--- a/packages/sdk/src/components/form/message/message.module.css
+++ b/packages/sdk/src/components/form/message/message.module.css
@@ -1,9 +1,9 @@
 :root {
   --wb-message-control-error-color: var(--ax-public-snackbar-title-color);
   --wb-message-control-error-background-color: var(--ax-public-snackbar-error-background);
-  --wb-message-control-spacing: var(--ax-primitive-even-8);
-  --wb-message-control-border-radius: var(--ax-primitive-even-8);
-  --wb-message-control-padding: var(--ax-primitive-even-8) var(--ax-primitive-even-16);
+  --wb-message-control-spacing: var(--wb-space-100);
+  --wb-message-control-border-radius: var(--wb-space-100);
+  --wb-message-control-padding: var(--wb-space-100) var(--wb-space-200);
 }
 
 .container {
@@ -20,13 +20,17 @@
 }
 
 .container--neutral {
-  --color: var(--ax-txt-primary-default);
-  --background-color: var(--ax-ui-bg-secondary-default);
+  --color: var(--wb-ui-text-default);
+  --background-color: var(--wb-ui-bg-elevated);
 }
 
 .container--warning {
-  --color: var(--ax-chips-acc5-txt);
-  --background-color: var(--ax-chips-acc5-bg);
+  --color: var(--wb-colors-acc5-700);
+  --background-color: var(--wb-colors-acc5-500-10);
+}
+
+html[data-theme='dark'] .container--warning {
+  --color: var(--wb-colors-acc5-200);
 }
 
 .container--error {
diff --git a/packages/sdk/src/components/loader/loader.module.css b/packages/sdk/src/components/loader/loader.module.css
index 1967d7695..641d60bc2 100644
--- a/packages/sdk/src/components/loader/loader.module.css
+++ b/packages/sdk/src/components/loader/loader.module.css
@@ -1,6 +1,6 @@
 :root {
   --wb-loader-background-opacity: 1;
-  --wb-panel-background-color: var(--ax-ui-bg-primary-default);
+  --wb-panel-background-color: var(--wb-ui-bg-base);
 }
 
 .container {
diff --git a/packages/sdk/src/components/sidebar/variables.css b/packages/sdk/src/components/sidebar/variables.css
index c16a117e5..888cf6612 100644
--- a/packages/sdk/src/components/sidebar/variables.css
+++ b/packages/sdk/src/components/sidebar/variables.css
@@ -1,9 +1,9 @@
 :root {
   --wb-sidebar-vertical-padding: 0.75rem;
   --wb-sidebar-horizontal-padding: 1rem;
-  --wb-sidebar-background: var(--ax-ui-bg-primary-default);
-  --wb-sidebar-text-color: var(--ax-txt-primary-default);
-  --wb-sidebar-border-color: var(--ax-ui-stroke-primary-default);
+  --wb-sidebar-background: var(--wb-ui-bg-base);
+  --wb-sidebar-text-color: var(--wb-ui-text-default);
+  --wb-sidebar-border-color: var(--wb-ui-stroke-default);
   --wb-sidebar-border-radius: 0.75rem;
   --wb-sidebar-content-gap: 1.25rem;
 
diff --git a/packages/sdk/src/features/app-bar/variables.css b/packages/sdk/src/features/app-bar/variables.css
index ebcc99bfd..fa995e586 100644
--- a/packages/sdk/src/features/app-bar/variables.css
+++ b/packages/sdk/src/features/app-bar/variables.css
@@ -1,8 +1,8 @@
 :root {
-  --wb-app-bar-background: var(--ax-ui-bg-primary-default);
-  --wb-app-bar-border-radius: var(--ax-token-radius-shell);
-  --wb-app-bar-border-color: var(--ax-ui-stroke-primary-default);
-  --wb-app-bar-folder-name-color: var(--ax-txt-tertiary-default);
-  --wb-app-bar-diagram-title-color: var(--ax-txt-primary-default);
-  --wb-app-bar-logo-color: var(--ax-txt-primary-default);
+  --wb-app-bar-background: var(--wb-ui-bg-base);
+  --wb-app-bar-border-radius: var(--wb-space-150);
+  --wb-app-bar-border-color: var(--wb-ui-stroke-default);
+  --wb-app-bar-folder-name-color: var(--wb-ui-text-muted-default);
+  --wb-app-bar-diagram-title-color: var(--wb-ui-text-default);
+  --wb-app-bar-logo-color: var(--wb-ui-text-default);
 }
diff --git a/packages/sdk/src/features/diagram/edges/label-edge/variables.css b/packages/sdk/src/features/diagram/edges/label-edge/variables.css
index 3253a4ca8..996c7d563 100644
--- a/packages/sdk/src/features/diagram/edges/label-edge/variables.css
+++ b/packages/sdk/src/features/diagram/edges/label-edge/variables.css
@@ -1,6 +1,6 @@
 :root {
-  --wb-edge-label-color: var(--ax-colors-gray-500);
-  --wb-edge-label-color-hover: var(--ax-edge-primary-hover);
-  --wb-edge-label-color-select: var(--ax-edge-primary-active);
-  --wb-edge-label-background: var(--ax-colors-gray-200);
+  --wb-edge-label-color: var(--wb-colors-gray-500);
+  --wb-edge-label-color-hover: var(--wb-canvas-edge-stroke-hover);
+  --wb-edge-label-color-select: var(--wb-canvas-edge-stroke-active);
+  --wb-edge-label-background: var(--wb-colors-gray-200);
 }
diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css
index ec9f9bb1d..fe8bcf083 100644
--- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css
+++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css
@@ -23,14 +23,14 @@
   }
 
   .selected-model-icon {
-    background-color: var(--ax-txt-primary-default);
-    color: var(--ax-txt-primary-inverse);
+    background-color: var(--wb-ui-text-default);
+    color: var(--wb-ui-text-inverse-default);
     outline: none;
   }
 
   .selected-memory-icon {
-    color: var(--ax-txt-primary-white);
-    background-color: var(--ax-button-gray-bg-default);
+    color: var(--wb-ui-text-onaccent-default);
+    background-color: var(--wb-components-button-solid-gray-default);
     outline: none;
   }
 }
diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css
index a345bdabd..b738f524c 100644
--- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css
+++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--ax-token-radius-button-s);
-  outline: 1px dashed var(--ax-ui-stroke-secondary-default);
+  border-radius: var(--wb-space-50);
+  outline: 1px dashed var(--wb-ui-stroke-subtle);
   padding: 0.4375rem;
 }
diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css
index 045c3323c..63dde5bdc 100644
--- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css
+++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css
@@ -4,8 +4,8 @@
   gap: 0.75rem;
   border-radius: 0.5rem;
   padding: 0.625rem;
-  border: 1px solid var(--ax-ui-stroke-primary-default);
-  color: var(--ax-txt-primary-default);
+  border: 1px solid var(--wb-ui-stroke-default);
+  color: var(--wb-ui-text-default);
 
   composes: ax-public-h10 from global;
 }
diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css
index 2853dae43..1f6417815 100644
--- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css
+++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css
@@ -1,9 +1,9 @@
 :root {
   --wb-connectable-item-horizontal-padding: 0.75rem;
   --wb-connectable-item-vertical-padding: 0.625rem;
-  --wb-connectable-item-background: var(--ax-ui-bg-tertiary-default);
+  --wb-connectable-item-background: var(--wb-ui-bg-inset);
   --wb-connectable-item-border-width: 0.0625rem;
-  --wb-connectable-item-border-color: var(--ax-input-stroke-primary-default);
+  --wb-connectable-item-border-color: var(--wb-components-text-field-stroke-default);
   --wb-connectable-item-border-radius: 0.375rem;
 }
 
diff --git a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css
index d61d468ca..0638d8856 100644
--- a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css
+++ b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css
@@ -2,7 +2,7 @@
   --wb-node-section-gap: 0.75rem;
   --wb-node-section-padding: 0.625rem;
   --wb-node-section-border-radius: 0.5rem;
-  --wb-node-section-border-color: var(--ax-ui-stroke-primary-default);
+  --wb-node-section-border-color: var(--wb-ui-stroke-default);
   --wb-node-section-border-width: 0.0625rem;
 }
 
@@ -13,7 +13,7 @@
   border-radius: var(--wb-node-section-border-radius);
   padding: var(--wb-node-section-padding);
   border: var(--wb-node-section-border-width) solid var(--wb-node-section-border-color);
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 
   composes: ax-public-h10 from global;
 }
diff --git a/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css b/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css
index ef1e759a5..fc9fbdaa9 100644
--- a/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css
+++ b/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css
@@ -13,7 +13,7 @@
 }
 
 .tip {
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .error {
diff --git a/packages/sdk/src/features/integration/components/saving-status/saving-status.module.css b/packages/sdk/src/features/integration/components/saving-status/saving-status.module.css
index 7426c2842..5e07f3af5 100644
--- a/packages/sdk/src/features/integration/components/saving-status/saving-status.module.css
+++ b/packages/sdk/src/features/integration/components/saving-status/saving-status.module.css
@@ -1,7 +1,7 @@
 :root {
-  --wb-saving-status--in-progress-color: var(--ax-colors-acc1-500); /* missing token */
-  --wb-saving-status--saved-color: var(--ax-input-stroke-primary-success); /* missing token */
-  --wb-saving-status--not-saved-color: var(--ax-input-stroke-primary-error); /* missing token */
+  --wb-saving-status--in-progress-color: var(--wb-colors-acc1-500); /* missing token */
+  --wb-saving-status--saved-color: var(--wb-components-text-field-stroke-success); /* missing token */
+  --wb-saving-status--not-saved-color: var(--wb-components-text-field-stroke-critical); /* missing token */
 }
 
 .status {
diff --git a/packages/sdk/src/features/json-form/components/indicator-dot/indicator-dot.module.css b/packages/sdk/src/features/json-form/components/indicator-dot/indicator-dot.module.css
index 861cf4c95..2496f7a0b 100644
--- a/packages/sdk/src/features/json-form/components/indicator-dot/indicator-dot.module.css
+++ b/packages/sdk/src/features/json-form/components/indicator-dot/indicator-dot.module.css
@@ -1,7 +1,7 @@
 :root {
   --wb-indicator-dot-size: 0.75rem;
   --wb-indicator-dot-radius: calc(var(--wb-indicator-dot-size) / 2);
-  --wb-indicator-dot-background-color: var(--ax-colors-orange-400); /* missing token */
+  --wb-indicator-dot-background-color: var(--wb-colors-orange-400); /* missing token */
   --wb-indicator-dot-pulse-radius-size: 0.625rem;
 }
 
diff --git a/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.module.css b/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.module.css
index 84627386c..eeb376a99 100644
--- a/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.module.css
+++ b/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.module.css
@@ -2,16 +2,16 @@
   --wb-branch-card-padding: 0.5rem;
   --wb-branch-card-border-radius: 0.5rem;
   --wb-branch-card-border-width: 0.0625rem;
-  --wb-branch-card-border-color: var(--ax-ui-stroke-secondary-default);
+  --wb-branch-card-border-color: var(--wb-ui-stroke-subtle);
   --wb-branch-card-gap: 0.375rem;
 
   --wb-branch-card-actions-gap: 0.375rem;
 
   --wb-branch-card-chip-padding: 0.3125rem 0.375rem;
   --wb-branch-card-chip-border-radius: 0.25rem;
-  --wb-branch-card-chip-background: var(--ax-ui-stroke-secondary-default);
-  --wb-branch-card-chip-color: var(--ax-chips-acc2-txt);
-  --wb-branch-card-chip-background-no-conditions: var(--ax-chips-acc2-bg);
+  --wb-branch-card-chip-background: var(--wb-ui-stroke-subtle);
+  --wb-branch-card-chip-color: var(--wb-colors-acc2-600);
+  --wb-branch-card-chip-background-no-conditions: var(--wb-colors-acc2-500-10);
   --wb-branch-card-chip-gap: 0.25rem;
 }
 
@@ -52,3 +52,7 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  --wb-branch-card-chip-color: var(--wb-colors-acc2-300);
+}
diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css
index 6c0231e74..df9e6b4cf 100644
--- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css
+++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css
@@ -1,5 +1,5 @@
 :root {
-  --wb-conditions-form-border-color: var(--ax-ui-stroke-primary-default); /* missing token */
+  --wb-conditions-form-border-color: var(--wb-ui-stroke-default); /* missing token */
   --wb-conditions-form-border-radius: 0.75rem; /* missing token */
   --wb-conditions-form-header-color: var(--ax-public-form-label-color);
 }
diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.module.css b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.module.css
index ee72c6997..7d38df09d 100644
--- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.module.css
+++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-form-field/conditions-form-field.module.css
@@ -1,7 +1,7 @@
 :root {
-  --wb-conditions-form-inputs-background: var(--ax-ui-bg-secondary-default); /* missing token */
-  --wb-conditions-form-input-background: var(--ax-ui-bg-primary-default); /* missing token */
-  --wb-conditions-form-input-background-destructive: var(--ax-colors-red-400-10); /* missing token */
+  --wb-conditions-form-inputs-background: var(--wb-ui-bg-elevated); /* missing token */
+  --wb-conditions-form-input-background: var(--wb-ui-bg-base); /* missing token */
+  --wb-conditions-form-input-background-destructive: var(--wb-colors-red-400-10); /* missing token */
 }
 
 .container {
diff --git a/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css b/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css
index 3768a05c1..38f59833f 100644
--- a/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css
+++ b/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css
@@ -1,5 +1,5 @@
 :root {
-  --ax-public-form-rich-text-color: var(--ax-txt-secondary-default);
+  --ax-public-form-rich-text-color: var(--wb-ui-text-subtle-default);
 }
 
 .container {
diff --git a/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css b/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css
index f19f1bac8..afc4d1fda 100644
--- a/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css
+++ b/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 1rem;
 
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 
   b {
     font-weight: 700;
diff --git a/packages/sdk/src/features/modals/template-selector/components/tile.module.css b/packages/sdk/src/features/modals/template-selector/components/tile.module.css
index e9357c085..5d9bd5092 100644
--- a/packages/sdk/src/features/modals/template-selector/components/tile.module.css
+++ b/packages/sdk/src/features/modals/template-selector/components/tile.module.css
@@ -1,10 +1,10 @@
 :root {
-  --wb-template-tile-background: var(--ax-ui-bg-secondary-default); /* missing token */
-  --wb-template-tile-subtitle-color: var(--ax-colors-gray-500); /* missing token */
-  --wb-template-tile-outline-color: var(--ax-colors-gray-400); /* missing token */
-  --wb-template-tile-outline-hover-color: var(--ax-colors-acc1-500); /* missing token */
-  --wb-template-tile-color: var(--ax-txt-primary-default); /* missing token */
-  --wb-template-icon-color: var(--ax-txt-primary-default); /* missing token */
+  --wb-template-tile-background: var(--wb-ui-bg-elevated); /* missing token */
+  --wb-template-tile-subtitle-color: var(--wb-colors-gray-500); /* missing token */
+  --wb-template-tile-outline-color: var(--wb-colors-gray-400); /* missing token */
+  --wb-template-tile-outline-hover-color: var(--wb-colors-acc1-500); /* missing token */
+  --wb-template-tile-color: var(--wb-ui-text-default); /* missing token */
+  --wb-template-icon-color: var(--wb-ui-text-default); /* missing token */
 }
 
 .tile {
diff --git a/packages/sdk/src/features/modals/template-selector/template-selector.module.css b/packages/sdk/src/features/modals/template-selector/template-selector.module.css
index 946121e8b..4c1b8ad1c 100644
--- a/packages/sdk/src/features/modals/template-selector/template-selector.module.css
+++ b/packages/sdk/src/features/modals/template-selector/template-selector.module.css
@@ -1,7 +1,7 @@
 :root {
   --wb-template-title-width: 140px;
   --wb-template-title-padding: 12px;
-  --wb-template-subtitle-color: var(--ax-colors-gray-500) /* missing token */;
+  --wb-template-subtitle-color: var(--wb-colors-gray-500) /* missing token */;
 }
 
 .container {
diff --git a/packages/sdk/src/features/palette/variables.css b/packages/sdk/src/features/palette/variables.css
index 20f3d5fcd..e6c839309 100644
--- a/packages/sdk/src/features/palette/variables.css
+++ b/packages/sdk/src/features/palette/variables.css
@@ -1,4 +1,4 @@
 :root {
-  --wb-palette-item-outline-color-hover: var(--ax-node-stroke-primary-hover);
+  --wb-palette-item-outline-color-hover: var(--wb-canvas-node-stroke-hover);
   --wb-palette-item-shad-color-hover: rgba(21, 21, 22, 0.1);
 }
diff --git a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css
index f208f53fa..cf3b29312 100644
--- a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css
+++ b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css
@@ -1,25 +1,25 @@
 :root {
-  --wb-syntax-highlighter-color: var(--ax-colors-gray-600);
-  --wb-syntax-highlighter-color-variable-key: var(--ax-colors-acc5-700);
-  --wb-syntax-highlighter-color-variable-value: var(--ax-colors-blue-500);
-  --wb-syntax-highlighter-background-color-highlight: var(--ax-colors-green-400-30);
-  --wb-syntax-highlighter-color-cursor: var(--ax-colors-blue-500);
+  --wb-syntax-highlighter-color: var(--wb-colors-gray-600);
+  --wb-syntax-highlighter-color-variable-key: var(--wb-colors-acc5-700);
+  --wb-syntax-highlighter-color-variable-value: var(--wb-colors-blue-500);
+  --wb-syntax-highlighter-background-color-highlight: var(--wb-colors-green-400-30);
+  --wb-syntax-highlighter-color-cursor: var(--wb-colors-blue-500);
 }
 
 html[data-theme='light'] {
-  --wb-syntax-highlighter-color: var(--ax-colors-gray-600);
-  --wb-syntax-highlighter-color-variable-key: var(--ax-colors-acc5-700);
-  --wb-syntax-highlighter-color-variable-value: var(--ax-colors-acc1-600);
-  --wb-syntax-highlighter-background-color-highlight: var(--ax-colors-green-400-30);
-  --wb-syntax-highlighter-color-cursor: var(--ax-txt-secondary-default);
+  --wb-syntax-highlighter-color: var(--wb-colors-gray-600);
+  --wb-syntax-highlighter-color-variable-key: var(--wb-colors-acc5-700);
+  --wb-syntax-highlighter-color-variable-value: var(--wb-colors-acc1-600);
+  --wb-syntax-highlighter-background-color-highlight: var(--wb-colors-green-400-30);
+  --wb-syntax-highlighter-color-cursor: var(--wb-ui-text-subtle-default);
 }
 
 html[data-theme='dark'] {
-  --wb-syntax-highlighter-color: var(--ax-colors-gray-200);
-  --wb-syntax-highlighter-color-variable-key: var(--ax-colors-orange-300);
-  --wb-syntax-highlighter-color-variable-value: var(--ax-colors-acc1-400);
-  --wb-syntax-highlighter-background-color-highlight: var(--ax-colors-green-400-30);
-  --wb-syntax-highlighter-color-cursor: var(--ax-colors-blue-500);
+  --wb-syntax-highlighter-color: var(--wb-colors-gray-200);
+  --wb-syntax-highlighter-color-variable-key: var(--wb-colors-orange-300);
+  --wb-syntax-highlighter-color-variable-value: var(--wb-colors-acc1-400);
+  --wb-syntax-highlighter-background-color-highlight: var(--wb-colors-green-400-30);
+  --wb-syntax-highlighter-color-cursor: var(--wb-colors-blue-500);
 }
 
 /* It shows a tooltip indicating that editing is blocked when disabled */
diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
index d1aadbc3e..1c2718413 100644
--- a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
+++ b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css
@@ -28,7 +28,7 @@
 .adornment--select {
   position: absolute;
   top: 50%;
-  right: calc(var(--ax-token-spacing-input-m-h-pad) + 1rem + var(--ax-token-spacing-input-m-h-pad));
+  right: calc(var(--wb-space-150) + 1rem + var(--wb-space-150));
   transform: translateY(-50%);
   z-index: 1;
 }
@@ -36,7 +36,7 @@
 .adornment--date {
   position: absolute;
   top: 50%;
-  right: calc(var(--ax-token-spacing-input-m-h-pad));
+  right: calc(var(--wb-space-150));
   transform: translateY(-50%);
   z-index: 1;
 }
diff --git a/packages/sdk/src/features/variables/components/variable-select/variable-select.module.css b/packages/sdk/src/features/variables/components/variable-select/variable-select.module.css
index b5f4e16e0..4bb5b51ab 100644
--- a/packages/sdk/src/features/variables/components/variable-select/variable-select.module.css
+++ b/packages/sdk/src/features/variables/components/variable-select/variable-select.module.css
@@ -5,7 +5,7 @@
 .adornment {
   position: absolute;
   top: 50%;
-  right: var(--ax-token-spacing-input-m-h-pad);
+  right: var(--wb-space-150);
   transform: translateY(-50%);
   z-index: 1;
 }
diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
index 2561aeccc..e0cab7521 100644
--- a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
+++ b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
@@ -1,10 +1,10 @@
 :root {
   --wb-color-violet-400-20: rgba(148, 131, 255, 0.2);
   --wb-variable-text-mention-bg: var(--wb-color-violet-400-20);
-  --wb-variable-text-suggestion-bg: var(--ax-ui-bg-primary-default);
-  --wb-variable-text-suggestion-hover: var(--ax-ui-bg-secondary-default);
-  --wb-variable-text-suggestion-border: var(--ax-ui-stroke-primary-default);
-  --wb-variable-text-suggestion-bg-error: var(--ax-ui-bg-primary-default);
+  --wb-variable-text-suggestion-bg: var(--wb-ui-bg-base);
+  --wb-variable-text-suggestion-hover: var(--wb-ui-bg-elevated);
+  --wb-variable-text-suggestion-border: var(--wb-ui-stroke-default);
+  --wb-variable-text-suggestion-bg-error: var(--wb-ui-bg-base);
   --wb-txt-ghost-primary-default: #6b3bff;
 
   --wb-variable-backdrop: color-mix(in srgb, var(--ax-public-modal-backdrop-background), transparent 50%);
@@ -146,7 +146,7 @@ body:has(.suggestionsContainer) {
 
 .suggestionsTitle {
   composes: ax-public-h10 from global;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .suggestionsClose {
@@ -159,7 +159,7 @@ body:has(.suggestionsContainer) {
   border: none;
   border-radius: 0.25rem;
   background: transparent;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   cursor: pointer;
 }
 
@@ -173,21 +173,21 @@ body:has(.suggestionsContainer) {
 
 .groupHeader {
   composes: ax-public-h10 from global;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   display: flex;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   align-items: center;
-  gap: var(--ax-token-spacing-spacing-4);
+  gap: var(--wb-space-50);
   flex: 1 0 0;
   padding: 6px;
 }
 
 .iconWrapper {
   display: flex;
-  padding: var(--ax-token-spacing-button-s-v-pad-2);
+  padding: var(--wb-space-87);
   justify-content: center;
   align-items: center;
-  gap: var(--ax-token-spacing-button-s-gap);
+  gap: var(--wb-space-100);
 
   svg {
     fill: var(--wb-txt-ghost-primary-default);
@@ -217,13 +217,13 @@ body:has(.suggestionsContainer) {
 }
 
 .suggestionLabel {
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   composes: ax-public-h10 from global;
 }
 
 .suggestionDescription {
   composes: ax-public-p11 from global;
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
diff --git a/packages/sdk/src/features/variables/modals/modal-settings.module.css b/packages/sdk/src/features/variables/modals/modal-settings.module.css
index 2d388e5e1..678b692f8 100644
--- a/packages/sdk/src/features/variables/modals/modal-settings.module.css
+++ b/packages/sdk/src/features/variables/modals/modal-settings.module.css
@@ -3,19 +3,19 @@
 }
 
 .container {
-  --modal-padding-x: var(--ax-token-spacing-modal-l-header-pad);
-  --modal-padding-y: var(--ax-token-spacing-modal-l-header-pad);
+  --modal-padding-x: var(--wb-space-300);
+  --modal-padding-y: var(--wb-space-300);
 
   width: 100%;
   display: flex;
   flex-flow: column;
   gap: 2rem;
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 
   @media (width > 800px) {
     flex-flow: row;
     height: 500px;
-    gap: var(--ax-primitive-4rule-48);
+    gap: var(--wb-space-600);
   }
 }
 
diff --git a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
index 09fb56ca3..e3fa26d3e 100644
--- a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
+++ b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
@@ -8,8 +8,8 @@
   flex-shrink: 0;
   align-self: flex-start;
   text-align: left;
-  gap: var(--ax-token-spacing-spacing-4);
-  border-radius: var(--ax-token-radius-dropdown-wrap-s);
+  gap: var(--wb-space-50);
+  border-radius: var(--wb-space-100);
   background: var(--wb-settings-navigation-background);
 }
 
@@ -17,9 +17,9 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-  color: var(--ax-nav-button-icon-primary-default);
+  color: var(--wb-components-nav-button-icon-primary-default);
   height: 2.25rem;
-  padding: 0 var(--ax-token-spacing-button-l-h-pad-1);
+  padding: 0 var(--wb-space-200);
 
   /* Button/Button Medium */
   font-family: Poppins;
@@ -29,7 +29,7 @@
   line-height: 100%; /* 14px */
   font-weight: 600;
   font-size: 0.875rem;
-  border-radius: var(--ax-token-radius-button-l);
+  border-radius: var(--wb-space-100);
   background: transparent;
   border: none;
   transition: all var(--wb-transition);
@@ -40,6 +40,6 @@
   }
 
   &.button--active {
-    color: var(--ax-nav-button-icon-primary-pressed);
+    color: var(--wb-components-nav-button-icon-primary-pressed);
   }
 }
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css
index 4545273fe..19cccaed7 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css
@@ -24,7 +24,7 @@ div.container {
   flex-flow: column;
   gap: 0.5rem;
   overflow: auto;
-  margin-right: calc(-1 * var(--ax-token-spacing-modal-m-content-h-pad));
-  padding-right: var(--ax-token-spacing-modal-m-content-h-pad);
+  margin-right: calc(-1 * var(--wb-space-200));
+  padding-right: var(--wb-space-200);
   padding-bottom: var(--modal-padding-y);
 }
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css
index accf442b1..b72dadc7f 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css
@@ -3,8 +3,8 @@
 }
 
 .description {
-  margin-top: var(--ax-token-spacing-spacing-16);
-  margin-bottom: var(--ax-token-spacing-spacing-20);
+  margin-top: var(--wb-space-200);
+  margin-bottom: var(--wb-space-250);
 }
 
 .list {
@@ -14,14 +14,14 @@
   border-radius: 8px;
   border: 1px solid var(--wb-settings-remove-bg);
   background: var(--wb-settings-remove-bg);
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
   margin: 0;
-  padding: var(--ax-token-spacing-spacing-12) var(--ax-token-spacing-spacing-16) var(--ax-token-spacing-spacing-12) 16px;
+  padding: var(--wb-space-150) var(--wb-space-200) var(--wb-space-150) 16px;
 
   li {
     margin: 0;
     padding: 0;
-    margin-left: var(--ax-token-spacing-spacing-16);
+    margin-left: var(--wb-space-200);
   }
 }
 
@@ -36,7 +36,7 @@
 .buttons {
   margin-top: auto;
   display: flex;
-  padding-top: var(--ax-token-spacing-spacing-16);
+  padding-top: var(--wb-space-200);
 
   > :last-child {
     margin-left: auto;
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.module.css
index 73b248b19..6429f7445 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.module.css
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-form/variable-form.module.css
@@ -4,7 +4,7 @@
   height: 100%;
   width: 100%;
   gap: 1rem;
-  color: var(--ax-txt-secondary-default);
+  color: var(--wb-ui-text-subtle-default);
 }
 
 .buttons {
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css
index 0ae6766f0..d37b40be2 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css
@@ -17,7 +17,7 @@
   font-family: 'Courier New';
   border-radius: 4px;
   padding: 4px 8px 3px 8px;
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
   background: var(--wb-variable-bg);
   display: -webkit-box;
   -webkit-line-clamp: 1;
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.module.css
index d9759dce6..b68be5076 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.module.css
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.module.css
@@ -2,14 +2,14 @@
   display: flex;
   flex-flow: column;
   gap: 0.5rem;
-  padding: var(--ax-token-spacing-spacing-12) var(--ax-token-spacing-spacing-16) var(--ax-token-spacing-spacing-12) 16px;
+  padding: var(--wb-space-150) var(--wb-space-200) var(--wb-space-150) 16px;
   border-radius: 8px;
-  border: 1px solid var(--ax-ui-bg-secondary-default);
-  background: var(--ax-ui-bg-secondary-default);
+  border: 1px solid var(--wb-ui-bg-elevated);
+  background: var(--wb-ui-bg-elevated);
   transition: all var(--wb-transition);
 
   &:hover {
-    border-color: var(--ax-ui-stroke-primary-highlight);
+    border-color: var(--wb-ui-stroke-highlight);
 
     .actions {
       opacity: 1;
@@ -31,7 +31,7 @@
 
 .description {
   margin: 0;
-  color: var(--ax-txt-tertiary-default);
+  color: var(--wb-ui-text-muted-default);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
diff --git a/packages/sdk/src/features/variables/modals/tab/tab-header.module.css b/packages/sdk/src/features/variables/modals/tab/tab-header.module.css
index b5865ff47..64b40d392 100644
--- a/packages/sdk/src/features/variables/modals/tab/tab-header.module.css
+++ b/packages/sdk/src/features/variables/modals/tab/tab-header.module.css
@@ -11,7 +11,7 @@
   border-bottom: var(--settings-tab-header-border);
 
   + * {
-    padding-top: var(--ax-token-spacing-spacing-16);
+    padding-top: var(--wb-space-200);
   }
 }
 
@@ -27,7 +27,7 @@
 }
 
 .title {
-  color: var(--ax-txt-primary-default);
+  color: var(--wb-ui-text-default);
 }
 
 .children {
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index a9cf22c47..3d48d6a52 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -18,10 +18,10 @@
 @layer ui.base {
   :root {
     --wb-transition: 0.1s ease-in;
-    --wb-background-color: var(--ax-ui-bg-tertiary-default);
+    --wb-background-color: var(--wb-ui-bg-inset);
     --wb-scroll-width: 0.375rem;
     --wb-scroll-radius: 0.625rem;
-    --wb-scroll-thumb-color: var(--ax-scrollbar-bg-default);
+    --wb-scroll-thumb-color: var(--wb-components-scrollbar-bg-default);
     --wb-scroll-track-color: transparent;
     /* Candidate for removal at the 3.0.0 close-out: the wb-text-* classes
        carry their own families, so this variable loses reach as components
diff --git a/packages/ui/src/components/avatar/avatar.module.css b/packages/ui/src/components/avatar/avatar.module.css
index 76e1dfa12..6f8edc945 100644
--- a/packages/ui/src/components/avatar/avatar.module.css
+++ b/packages/ui/src/components/avatar/avatar.module.css
@@ -1,6 +1,6 @@
 :root {
-  --ax-public-avatar-border-color: var(--ax-input-stroke-primary-default); /* missing token */
-  --ax-public-avatar-background-color: var(--ax-colors-blue-500); /* missing token */
+  --ax-public-avatar-border-color: var(--wb-components-text-field-stroke-default); /* missing token */
+  --ax-public-avatar-background-color: var(--wb-colors-blue-500); /* missing token */
   --ax-public-avatar-border-size: 0.0625rem;
 }
 
diff --git a/packages/ui/src/components/button/base-button/base-button.module.css b/packages/ui/src/components/button/base-button/base-button.module.css
index a994937b8..d9aa720f0 100644
--- a/packages/ui/src/components/button/base-button/base-button.module.css
+++ b/packages/ui/src/components/button/base-button/base-button.module.css
@@ -1,8 +1,8 @@
 :root {
-  --ax-public-button-background-color-disabled: var(--ax-button-primary-bg-disabled);
-  --ax-public-button-focus-visible-box-shadow-color: var(--ax-txt-primary-default);
-  --ax-public-button-inner-border-color: var(--ax-ui-bg-primary-default);
-  --ax-public-button-color: var(--ax-txt-primary-white);
+  --ax-public-button-background-color-disabled: var(--wb-components-button-solid-disabled);
+  --ax-public-button-focus-visible-box-shadow-color: var(--wb-ui-text-default);
+  --ax-public-button-inner-border-color: var(--wb-ui-bg-base);
+  --ax-public-button-color: var(--wb-ui-text-onaccent-default);
 }
 
 @layer ui.base {
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css
index 04f074757..8d0430719 100644
--- a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css
+++ b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-button-icon-padding.module.css
@@ -1,6 +1,6 @@
 :root {
-  --ax-public-button-icon-padding-xx-small: var(--ax-token-spacing-button-xxs-v-pad);
-  --ax-public-button-icon-padding-xxx-small: var(--ax-token-spacing-button-xxxs-v-pad);
+  --ax-public-button-icon-padding-xx-small: var(--wb-space-75);
+  --ax-public-button-icon-padding-xxx-small: var(--wb-space-50);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css
index a837d10f0..17df928e7 100644
--- a/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css
+++ b/packages/ui/src/components/button/nav-button/nav-icon-button/nav-icon-button.module.css
@@ -1,5 +1,5 @@
 :root {
-  --ax-public-button-nav-color-hover: var(--ax-nav-button-icon-primary-hover);
+  --ax-public-button-nav-color-hover: var(--wb-components-nav-button-icon-primary-hover);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css
index 55780c34c..2197614db 100644
--- a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css
+++ b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css
@@ -1,7 +1,6 @@
 :root {
-  --ax-public-button-gap-xx-small: var(--ax-token-spacing-button-xxs-v-pad-2) var(--ax-token-spacing-button-xxs-h-pad-2);
-  --ax-public-button-gap-xxx-small: var(--ax-token-spacing-button-xxxs-v-pad-2)
-    var(--ax-token-spacing-button-xxxs-h-pad-2);
+  --ax-public-button-gap-xx-small: var(--wb-space-75) var(--wb-space-75);
+  --ax-public-button-gap-xxx-small: var(--wb-space-50) var(--wb-space-75);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css
index eb0aef77d..26c50926d 100644
--- a/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css
+++ b/packages/ui/src/components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css
@@ -1,8 +1,6 @@
 :root {
-  --ax-public-icon-label-button-padding-xx-small: var(--ax-token-spacing-button-xxs-v-pad-2)
-    var(--ax-token-spacing-button-xxs-h-pad-2);
-  --ax-public-icon-label-button-padding-xxx-small: var(--ax-token-spacing-button-xxxs-v-pad-2)
-    var(--ax-token-spacing-button-xxxs-h-pad-2);
+  --ax-public-icon-label-button-padding-xx-small: var(--wb-space-75) var(--wb-space-75);
+  --ax-public-icon-label-button-padding-xxx-small: var(--wb-space-50) var(--wb-space-75);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css b/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css
index 2c6c88aba..5d806dff3 100644
--- a/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css
+++ b/packages/ui/src/components/button/nav-button/nav-label-button/nav-label-button-padding.module.css
@@ -1,8 +1,6 @@
 :root {
-  --ax-public-label-button-padding-xx-small: var(--ax-token-spacing-button-xxs-v-pad-1)
-    var(--ax-token-spacing-button-xxs-h-pad-1);
-  --ax-public-label-button-padding-xxx-small: var(--ax-token-spacing-button-xxxs-v-pad-1)
-    var(--ax-token-spacing-button-xxxs-h-pad-1);
+  --ax-public-label-button-padding-xx-small: var(--wb-space-87) var(--wb-space-75);
+  --ax-public-label-button-padding-xxx-small: var(--wb-space-62) var(--wb-space-75);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
index 36993ef80..4a7bcbeea 100644
--- a/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
+++ b/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
@@ -1,6 +1,6 @@
 :root {
-  --ax-public-button-border-radius-xx-small: var(--ax-token-radius-button-xxs);
-  --ax-public-button-border-radius-xxx-small: var(--ax-token-radius-button-xxxs);
+  --ax-public-button-border-radius-xx-small: var(--wb-space-50);
+  --ax-public-button-border-radius-xxx-small: var(--wb-space-50);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button.module.css
index 250c1a246..fcc35eef2 100644
--- a/packages/ui/src/components/button/nav-button/styles/nav-button.module.css
+++ b/packages/ui/src/components/button/nav-button/styles/nav-button.module.css
@@ -1,8 +1,8 @@
 :root {
-  --ax-public-button-nav-background-color: var(--ax-nav-button-bg-primary-hover);
-  --ax-public-button-nav-color: var(--ax-nav-button-icon-primary-default);
-  --ax-public-button-nav-color-active: var(--ax-nav-button-icon-primary-pressed);
-  --ax-public-button-nav-color-disabled: var(--ax-nav-button-icon-primary-disabled);
+  --ax-public-button-nav-background-color: var(--wb-components-nav-button-bg-primary-hover);
+  --ax-public-button-nav-color: var(--wb-components-nav-button-icon-primary-default);
+  --ax-public-button-nav-color-active: var(--wb-components-nav-button-icon-primary-pressed);
+  --ax-public-button-nav-color-disabled: var(--wb-components-nav-button-icon-primary-disabled);
 }
 
 @layer ui.component {
@@ -30,8 +30,8 @@
 
     &.selected {
       pointer-events: none;
-      background-color: var(--ax-button-primary-bg-default);
-      color: var(--ax-nav-button-icon-primary-active);
+      background-color: var(--wb-components-button-solid-primary-default);
+      color: var(--wb-components-nav-button-icon-primary-active);
     }
   }
 }
diff --git a/packages/ui/src/components/button/regular-button/label-button/loader.module.css b/packages/ui/src/components/button/regular-button/label-button/loader.module.css
index 904870f8f..f4370f8a3 100644
--- a/packages/ui/src/components/button/regular-button/label-button/loader.module.css
+++ b/packages/ui/src/components/button/regular-button/label-button/loader.module.css
@@ -1,7 +1,7 @@
 :root {
   --ax-public-button-loader-dot-size: 0.3125rem;
   --ax-public-button-loader-dot-border-radius: 0.3125rem;
-  --ax-public-button-loader-dot-color: var(--ax-txt-primary-white);
+  --ax-public-button-loader-dot-color: var(--wb-ui-text-onaccent-default);
   --ax-public-button-loader-animation-duration: 0.75s;
 }
 
diff --git a/packages/ui/src/components/button/styles/border-radius.module.css b/packages/ui/src/components/button/styles/border-radius.module.css
index 00c52cc37..b0b83e1e8 100644
--- a/packages/ui/src/components/button/styles/border-radius.module.css
+++ b/packages/ui/src/components/button/styles/border-radius.module.css
@@ -1,11 +1,11 @@
 :root {
-  --ax-public-button-border-radius-extra-large: var(--ax-token-radius-button-xl);
-  --ax-public-button-border-radius-large: var(--ax-token-radius-button-l);
-  --ax-public-button-border-radius-medium: var(--ax-token-radius-button-m);
-  --ax-public-button-border-radius-small: var(--ax-token-radius-button-s);
-  --ax-public-button-border-radius-extra-small: var(--ax-token-radius-button-xs);
+  --ax-public-button-border-radius-extra-large: var(--wb-space-100);
+  --ax-public-button-border-radius-large: var(--wb-space-100);
+  --ax-public-button-border-radius-medium: var(--wb-space-75);
+  --ax-public-button-border-radius-small: var(--wb-space-50);
+  --ax-public-button-border-radius-extra-small: var(--wb-space-50);
 
-  --ax-public-button-border-radius-circle: var(--ax-token-radius-button-round);
+  --ax-public-button-border-radius-circle: var(--wb-radius-full);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/gap.module.css b/packages/ui/src/components/button/styles/gap.module.css
index 574c51ab9..05b4f5a54 100644
--- a/packages/ui/src/components/button/styles/gap.module.css
+++ b/packages/ui/src/components/button/styles/gap.module.css
@@ -1,9 +1,9 @@
 :root {
-  --ax-public-button-gap-extra-large: var(--ax-token-spacing-button-xl-gap);
-  --ax-public-button-gap-large: var(--ax-token-spacing-button-l-gap);
-  --ax-public-button-gap-medium: var(--ax-token-spacing-button-m-gap);
-  --ax-public-button-gap-small: var(--ax-token-spacing-button-s-gap);
-  --ax-public-button-gap-extra-small: var(--ax-token-spacing-button-xs-gap);
+  --ax-public-button-gap-extra-large: var(--wb-space-100);
+  --ax-public-button-gap-large: var(--wb-space-100);
+  --ax-public-button-gap-medium: var(--wb-space-100);
+  --ax-public-button-gap-small: var(--wb-space-100);
+  --ax-public-button-gap-extra-small: var(--wb-space-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/icon-label-button-padding.module.css b/packages/ui/src/components/button/styles/icon-label-button-padding.module.css
index 4684f5a19..6db63d038 100644
--- a/packages/ui/src/components/button/styles/icon-label-button-padding.module.css
+++ b/packages/ui/src/components/button/styles/icon-label-button-padding.module.css
@@ -1,14 +1,9 @@
 :root {
-  --ax-public-icon-label-button-padding-extra-large: var(--ax-token-spacing-button-xl-v-pad-2)
-    var(--ax-token-spacing-button-xl-h-pad-2);
-  --ax-public-icon-label-button-padding-large: var(--ax-token-spacing-button-l-v-pad-2)
-    var(--ax-token-spacing-button-l-h-pad-2);
-  --ax-public-icon-label-button-padding-medium: var(--ax-token-spacing-button-m-v-pad-2)
-    var(--ax-token-spacing-button-m-h-pad-2);
-  --ax-public-icon-label-button-padding-small: var(--ax-token-spacing-button-s-v-pad-2)
-    var(--ax-token-spacing-button-s-h-pad-2);
-  --ax-public-icon-label-button-padding-extra-small: var(--ax-token-spacing-button-xs-v-pad-2)
-    var(--ax-token-spacing-button-xs-h-pad-2);
+  --ax-public-icon-label-button-padding-extra-large: var(--wb-space-150) var(--wb-space-150);
+  --ax-public-icon-label-button-padding-large: var(--wb-space-137) var(--wb-space-150);
+  --ax-public-icon-label-button-padding-medium: var(--wb-space-112) var(--wb-space-150);
+  --ax-public-icon-label-button-padding-small: var(--wb-space-87) var(--wb-space-125);
+  --ax-public-icon-label-button-padding-extra-small: var(--wb-space-75) var(--wb-space-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/icon-padding.module.css b/packages/ui/src/components/button/styles/icon-padding.module.css
index 82d9fdb0b..fd139eafe 100644
--- a/packages/ui/src/components/button/styles/icon-padding.module.css
+++ b/packages/ui/src/components/button/styles/icon-padding.module.css
@@ -1,9 +1,9 @@
 :root {
-  --ax-public-button-icon-padding-extra-large: var(--ax-token-spacing-button-xl-v-pad-2);
-  --ax-public-button-icon-padding-large: var(--ax-token-spacing-button-l-v-pad-2);
-  --ax-public-button-icon-padding-medium: var(--ax-token-spacing-button-m-v-pad-2);
-  --ax-public-button-icon-padding-small: var(--ax-token-spacing-button-s-v-pad-2);
-  --ax-public-button-icon-padding-extra-small: var(--ax-token-spacing-button-xs-v-pad-2);
+  --ax-public-button-icon-padding-extra-large: var(--wb-space-150);
+  --ax-public-button-icon-padding-large: var(--wb-space-137);
+  --ax-public-button-icon-padding-medium: var(--wb-space-112);
+  --ax-public-button-icon-padding-small: var(--wb-space-87);
+  --ax-public-button-icon-padding-extra-small: var(--wb-space-75);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/label-button-padding.module.css b/packages/ui/src/components/button/styles/label-button-padding.module.css
index 100c54681..000c52197 100644
--- a/packages/ui/src/components/button/styles/label-button-padding.module.css
+++ b/packages/ui/src/components/button/styles/label-button-padding.module.css
@@ -1,14 +1,9 @@
 :root {
-  --ax-public-label-button-padding-extra-large: var(--ax-token-spacing-button-xl-v-pad-1)
-    var(--ax-token-spacing-button-xl-h-pad-1);
-  --ax-public-label-button-padding-large: var(--ax-token-spacing-button-l-v-pad-1)
-    var(--ax-token-spacing-button-l-h-pad-1);
-  --ax-public-label-button-padding-medium: var(--ax-token-spacing-button-m-v-pad-1)
-    var(--ax-token-spacing-button-m-h-pad-1);
-  --ax-public-label-button-padding-small: var(--ax-token-spacing-button-s-v-pad-1)
-    var(--ax-token-spacing-button-s-h-pad-1);
-  --ax-public-label-button-padding-extra-small: var(--ax-token-spacing-button-xs-v-pad-1)
-    var(--ax-token-spacing-button-xs-h-pad-1);
+  --ax-public-label-button-padding-extra-large: var(--wb-space-200) var(--wb-space-200);
+  --ax-public-label-button-padding-large: var(--wb-space-200) var(--wb-space-200);
+  --ax-public-label-button-padding-medium: var(--wb-space-150) var(--wb-space-150);
+  --ax-public-label-button-padding-small: var(--wb-space-125) var(--wb-space-125);
+  --ax-public-label-button-padding-extra-small: var(--wb-space-100) var(--wb-space-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/variant.module.css b/packages/ui/src/components/button/styles/variant.module.css
index 4637f465e..067629d4e 100644
--- a/packages/ui/src/components/button/styles/variant.module.css
+++ b/packages/ui/src/components/button/styles/variant.module.css
@@ -1,48 +1,48 @@
 :root {
   --ax-public-button-border-size: 0.0625rem;
 
-  --ax-public-button-primary-background: var(--ax-button-primary-bg-default);
-  --ax-public-button-primary-background-hover: var(--ax-button-primary-bg-hover);
-  --ax-public-button-primary-background-active: var(--ax-button-primary-bg-active);
-  --ax-public-button-primary-background-focus: var(--ax-button-primary-bg-focus);
-
-  --ax-public-button-secondary-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-button-secondary-color: var(--ax-txt-primary-default);
-  --ax-public-button-secondary-border-color-hover: var(--ax-ui-stroke-primary-focus);
-  --ax-public-button-secondary-color-active: var(--ax-txt-secondary-default);
-  --ax-public-button-secondary-border-color-active: var(--ax-ui-stroke-primary-focus);
-  --ax-public-button-secondary-border-color-focus: var(--ax-ui-stroke-primary-focus);
-  --ax-public-button-secondary-border-color-disabled: var(--ax-ui-stroke-secondary-default);
-  --ax-public-button-secondary-color-disabled: var(--ax-txt-quaternary-default);
-
-  --ax-public-button-ghost-destructive-background-color: var(--ax-button-ghost-destructive-bg-default);
-  --ax-public-button-ghost-destructive-border-color: var(--ax-button-ghost-destructive-stroke-default);
-  --ax-public-button-ghost-destructive-color: var(--ax-txt-destuctive-default);
-  --ax-public-button-ghost-destructive-background-color-hover: var(--ax-button-ghost-destructive-bg-hover);
-  --ax-public-button-ghost-destructive-background-color-active: var(--ax-button-ghost-destructive-bg-active);
-  --ax-public-button-ghost-destructive-background-color-focus: var(--ax-button-ghost-destructive-bg-focus);
-  --ax-public-button-ghost-destructive-background-color-disabled: var(--ax-button-ghost-destructive-bg-disabled);
-  --ax-public-button-ghost-destructive-color-disabled: var(--ax-txt-destructive-disabled);
-
-  --ax-public-button-gray-background: var(--ax-button-gray-bg-default);
-  --ax-public-button-gray-background-hover: var(--ax-button-gray-bg-hover);
-  --ax-public-button-gray-background-active: var(--ax-button-gray-bg-active);
-  --ax-public-button-gray-background-focus: var(--ax-button-gray-bg-focus);
-
-  --ax-public-button-error-background: var(--ax-button-red-bg-default);
-  --ax-public-button-error-background-hover: var(--ax-button-red-bg-hover);
-  --ax-public-button-error-background-active: var(--ax-button-red-bg-active);
-  --ax-public-button-error-background-focus: var(--ax-button-red-bg-focus);
-
-  --ax-public-button-success-background: var(--ax-button-green-bg-default);
-  --ax-public-button-success-background-hover: var(--ax-button-green-bg-hover);
-  --ax-public-button-success-background-active: var(--ax-button-green-bg-active);
-  --ax-public-button-success-background-focus: var(--ax-button-green-bg-focus);
-
-  --ax-public-button-warning-background: var(--ax-button-orange-bg-default);
-  --ax-public-button-warning-background-hover: var(--ax-button-orange-bg-hover);
-  --ax-public-button-warning-background-active: var(--ax-button-orange-bg-active);
-  --ax-public-button-warning-background-focus: var(--ax-button-orange-bg-focus);
+  --ax-public-button-primary-background: var(--wb-components-button-solid-primary-default);
+  --ax-public-button-primary-background-hover: var(--wb-components-button-solid-primary-hover);
+  --ax-public-button-primary-background-active: var(--wb-components-button-solid-primary-active);
+  --ax-public-button-primary-background-focus: var(--wb-components-button-solid-primary-focus);
+
+  --ax-public-button-secondary-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-button-secondary-color: var(--wb-ui-text-default);
+  --ax-public-button-secondary-border-color-hover: var(--wb-ui-stroke-focus);
+  --ax-public-button-secondary-color-active: var(--wb-ui-text-subtle-default);
+  --ax-public-button-secondary-border-color-active: var(--wb-ui-stroke-focus);
+  --ax-public-button-secondary-border-color-focus: var(--wb-ui-stroke-focus);
+  --ax-public-button-secondary-border-color-disabled: var(--wb-ui-stroke-subtle);
+  --ax-public-button-secondary-color-disabled: var(--wb-ui-text-ghost-default);
+
+  --ax-public-button-ghost-destructive-background-color: var(--wb-components-button-ghost-critical-default);
+  --ax-public-button-ghost-destructive-border-color: var(--wb-components-button-ghost-critical-stroke-default);
+  --ax-public-button-ghost-destructive-color: var(--wb-ui-text-critical-default);
+  --ax-public-button-ghost-destructive-background-color-hover: var(--wb-components-button-ghost-critical-hover);
+  --ax-public-button-ghost-destructive-background-color-active: var(--wb-components-button-ghost-critical-active);
+  --ax-public-button-ghost-destructive-background-color-focus: var(--wb-components-button-ghost-critical-focus);
+  --ax-public-button-ghost-destructive-background-color-disabled: var(--wb-components-button-ghost-critical-disabled);
+  --ax-public-button-ghost-destructive-color-disabled: var(--wb-ui-text-critical-disabled);
+
+  --ax-public-button-gray-background: var(--wb-components-button-solid-gray-default);
+  --ax-public-button-gray-background-hover: var(--wb-components-button-solid-gray-hover);
+  --ax-public-button-gray-background-active: var(--wb-components-button-solid-gray-active);
+  --ax-public-button-gray-background-focus: var(--wb-components-button-solid-gray-focus);
+
+  --ax-public-button-error-background: var(--wb-components-button-solid-critical-default);
+  --ax-public-button-error-background-hover: var(--wb-components-button-solid-critical-hover);
+  --ax-public-button-error-background-active: var(--wb-components-button-solid-critical-active);
+  --ax-public-button-error-background-focus: var(--wb-components-button-solid-critical-focus);
+
+  --ax-public-button-success-background: var(--wb-components-button-solid-success-default);
+  --ax-public-button-success-background-hover: var(--wb-components-button-solid-success-hover);
+  --ax-public-button-success-background-active: var(--wb-components-button-solid-success-active);
+  --ax-public-button-success-background-focus: var(--wb-components-button-solid-success-focus);
+
+  --ax-public-button-warning-background: var(--wb-components-button-solid-warning-default);
+  --ax-public-button-warning-background-hover: var(--wb-components-button-solid-warning-hover);
+  --ax-public-button-warning-background-active: var(--wb-components-button-solid-warning-active);
+  --ax-public-button-warning-background-focus: var(--wb-components-button-solid-warning-focus);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css
index eec763654..e16a03e79 100644
--- a/packages/ui/src/components/checkbox/checkbox.module.css
+++ b/packages/ui/src/components/checkbox/checkbox.module.css
@@ -7,24 +7,24 @@
   --ax-public-checkbox-icon-size-small: 0.75rem;
   --ax-public-checkbox-icon-size-extra-small: 0.625rem;
 
-  --ax-public-checkbox-border-radius-medium: var(--ax-token-radius-checkbox-m);
-  --ax-public-checkbox-border-radius-small: var(--ax-token-radius-checkbox-s);
-  --ax-public-checkbox-border-radius-extra-small: var(--ax-token-radius-checkbox-xs);
+  --ax-public-checkbox-border-radius-medium: var(--wb-space-50);
+  --ax-public-checkbox-border-radius-small: var(--wb-space-50);
+  --ax-public-checkbox-border-radius-extra-small: var(--wb-space-50);
 
   --ax-public-checkbox-border-width: 0.0625rem;
 
-  --ax-public-checkbox-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-checkbox-bg: var(--ax-ui-bg-primary-default);
-  --ax-public-checkbox-icon-color: var(--ax-colors-gray-100); /* missing token */
+  --ax-public-checkbox-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-checkbox-bg: var(--wb-ui-bg-base);
+  --ax-public-checkbox-icon-color: var(--wb-colors-gray-100); /* missing token */
 
-  --ax-public-checkbox-checked-bg: var(--ax-ui-bg-tertiary-selected);
+  --ax-public-checkbox-checked-bg: var(--wb-components-selector-fill-checked);
 
-  --ax-public-checkbox-focus-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-checkbox-focus-border-shadow: var(--ax-txt-primary-default);
+  --ax-public-checkbox-focus-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-checkbox-focus-border-shadow: var(--wb-ui-text-default);
 
-  --ax-public-checkbox-disabled-bg: var(--ax-ui-bg-tertiary-default);
-  --ax-public-checkbox-disabled-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-checkbox-disabled-icon-color: var(--ax-nav-button-icon-primary-disabled);
+  --ax-public-checkbox-disabled-bg: var(--wb-ui-bg-inset);
+  --ax-public-checkbox-disabled-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-checkbox-disabled-icon-color: var(--wb-components-nav-button-icon-primary-disabled);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/chips/chips.module.css b/packages/ui/src/components/chips/chips.module.css
index 62c4b6834..f3473f18e 100644
--- a/packages/ui/src/components/chips/chips.module.css
+++ b/packages/ui/src/components/chips/chips.module.css
@@ -62,7 +62,7 @@
     cursor: pointer;
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px var(--ax-focus-ring-element);
+      box-shadow: 0 0 0 2px var(--wb-ui-focus-ring);
       outline: none;
     }
   }
diff --git a/packages/ui/src/components/date-picker/variables.css b/packages/ui/src/components/date-picker/variables.css
index 35a08c75b..dc10180e1 100644
--- a/packages/ui/src/components/date-picker/variables.css
+++ b/packages/ui/src/components/date-picker/variables.css
@@ -4,17 +4,17 @@
 @import 'react-day-picker/style.css' layer(ui.base);
 
 :root {
-  --ax-public-date-picker-dropdown-background: var(--ax-ui-bg-primary-default);
-  --ax-public-date-picker-dropdown-border-color: var(--ax-ui-stroke-primary-default);
+  --ax-public-date-picker-dropdown-background: var(--wb-ui-bg-base);
+  --ax-public-date-picker-dropdown-border-color: var(--wb-ui-stroke-default);
   --ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.16);
 
-  --ax-public-date-picker-color: var(--ax-txt-secondary-default);
-  --ax-public-date-picker-header-background: var(--ax-ui-bg-secondary-default);
-  --ax-public-date-picker-date-header-color: var(--ax-txt-tertiary-default);
-  --ax-public-date-picker-nav-color: var(--ax-txt-secondary-default);
-  --ax-public-date-picker-date-outside-color: var(--ax-txt-quaternary-default);
-  --ax-public-date-picker-date-hover-background-color: var(--ax-ui-bg-secondary-default);
-  --ax-public-date-picker-date-selected-background-color: var(--ax-ui-bg-tertiary-selected);
-  --ax-public-date-picker-date-selected-color: var(--ax-txt-primary-default);
-  --ax-public-date-picker-date-today-color: var(--ax-ui-stroke-primary-highlight);
+  --ax-public-date-picker-color: var(--wb-ui-text-subtle-default);
+  --ax-public-date-picker-header-background: var(--wb-ui-bg-elevated);
+  --ax-public-date-picker-date-header-color: var(--wb-ui-text-muted-default);
+  --ax-public-date-picker-nav-color: var(--wb-ui-text-subtle-default);
+  --ax-public-date-picker-date-outside-color: var(--wb-ui-text-ghost-default);
+  --ax-public-date-picker-date-hover-background-color: var(--wb-ui-bg-elevated);
+  --ax-public-date-picker-date-selected-background-color: var(--wb-components-selector-fill-checked);
+  --ax-public-date-picker-date-selected-color: var(--wb-ui-text-default);
+  --ax-public-date-picker-date-today-color: var(--wb-ui-stroke-highlight);
 }
diff --git a/packages/ui/src/components/edge/edge-label/edge-label-size.module.css b/packages/ui/src/components/edge/edge-label/edge-label-size.module.css
index 41ddaf78e..ce50425ba 100644
--- a/packages/ui/src/components/edge/edge-label/edge-label-size.module.css
+++ b/packages/ui/src/components/edge/edge-label/edge-label-size.module.css
@@ -1,25 +1,19 @@
 :root {
-  --ax-public-edge-label-medium-label-padding: var(--ax-token-spacing-label-m-v-pad-1)
-    var(--ax-token-spacing-label-m-h-pad-1);
-  --ax-public-edge-label-small-label-padding: var(--ax-token-spacing-label-s-v-pad-1)
-    var(--ax-token-spacing-label-s-h-pad-1);
-  --ax-public-edge-label-extra-small-label-padding: var(--ax-token-spacing-label-xs-v-pad-1)
-    var(--ax-token-spacing-label-xs-h-pad-1);
-
-  --ax-public-edge-label-medium-icon-padding: var(--ax-token-spacing-label-m-v-pad-2);
-  --ax-public-edge-label-small-icon-padding: var(--ax-token-spacing-label-s-v-pad-2);
-  --ax-public-edge-label-extra-small-icon-padding: var(--ax-token-spacing-label-xs-v-pad-2);
-
-  --ax-public-edge-label-medium-content-padding: var(--ax-token-spacing-label-m-v-pad-2)
-    var(--ax-token-spacing-label-m-h-pad-2);
-  --ax-public-edge-label-small-content-padding: var(--ax-token-spacing-label-s-v-pad-2)
-    var(--ax-token-spacing-label-s-h-pad-2);
-  --ax-public-edge-label-extra-small-content-padding: var(--ax-token-spacing-label-xs-v-pad-2)
-    var(--ax-token-spacing-label-xs-h-pad-2);
-
-  --ax-public-edge-label-medium-border-radius: var(--ax-token-radius-label-m);
-  --ax-public-edge-label-small-border-radius: var(--ax-token-radius-label-s);
-  --ax-public-edge-label-extra-small-border-radius: var(--ax-token-radius-label-xs);
+  --ax-public-edge-label-medium-label-padding: var(--wb-space-150) var(--wb-space-150);
+  --ax-public-edge-label-small-label-padding: var(--wb-space-125) var(--wb-space-125);
+  --ax-public-edge-label-extra-small-label-padding: var(--wb-space-112) var(--wb-space-125);
+
+  --ax-public-edge-label-medium-icon-padding: var(--wb-space-112);
+  --ax-public-edge-label-small-icon-padding: var(--wb-space-100);
+  --ax-public-edge-label-extra-small-icon-padding: var(--wb-space-87);
+
+  --ax-public-edge-label-medium-content-padding: var(--wb-space-112) var(--wb-space-150);
+  --ax-public-edge-label-small-content-padding: var(--wb-space-100) var(--wb-space-125);
+  --ax-public-edge-label-extra-small-content-padding: var(--wb-space-87) var(--wb-space-125);
+
+  --ax-public-edge-label-medium-border-radius: var(--wb-space-75);
+  --ax-public-edge-label-small-border-radius: var(--wb-space-50);
+  --ax-public-edge-label-extra-small-border-radius: var(--wb-space-50);
 
   --ax-public-edge-label-medium-icon-size: 1.125rem;
   --ax-public-edge-label-small-icon-size: 1rem;
diff --git a/packages/ui/src/components/edge/edge-label/edge-label.module.css b/packages/ui/src/components/edge/edge-label/edge-label.module.css
index 1fe428e45..94bf89c7d 100644
--- a/packages/ui/src/components/edge/edge-label/edge-label.module.css
+++ b/packages/ui/src/components/edge/edge-label/edge-label.module.css
@@ -1,18 +1,18 @@
 :root {
-  --ax-public-edge-label-gap: var(--ax-token-spacing-label-gap);
-  --ax-public-edge-background-color: var(--ax-ui-bg-tertiary-default);
-  --ax-public-edge-label-color: var(--ax-txt-primary-default);
+  --ax-public-edge-label-gap: var(--wb-space-100);
+  --ax-public-edge-background-color: var(--wb-ui-bg-inset);
+  --ax-public-edge-label-color: var(--wb-ui-text-default);
 
-  --ax-public-edge-label-border-size: var(--ax-token-stroke-edge-regular);
-  --ax-public-edge-label-border-size-selected: var(--ax-token-stroke-edge-bold);
+  --ax-public-edge-label-border-size: var(--wb-space-25);
+  --ax-public-edge-label-border-size-selected: var(--wb-space-37);
 
   --ax-public-edge-label-border-style: solid;
-  --ax-public-edge-label-border-color: var(--ax-edge-primary-default);
-  --ax-public-edge-label-border-color-selected: var(--ax-edge-primary-active);
-  --ax-public-edge-label-border-color-hover: var(--ax-edge-primary-hover);
+  --ax-public-edge-label-border-color: var(--wb-canvas-edge-stroke-default);
+  --ax-public-edge-label-border-color-selected: var(--wb-canvas-edge-stroke-active);
+  --ax-public-edge-label-border-color-hover: var(--wb-canvas-edge-stroke-hover);
 
-  --ax-public-edge-label-color-disabled: var(--ax-txt-quaternary-default);
-  --ax-public-edge-label-border-color-disabled: var(--ax-edge-primary-disabled);
+  --ax-public-edge-label-color-disabled: var(--wb-ui-text-ghost-default);
+  --ax-public-edge-label-border-color-disabled: var(--wb-canvas-edge-stroke-disabled);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css b/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css
index b6ff1480e..b279422ae 100644
--- a/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css
+++ b/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css
@@ -1,8 +1,8 @@
 :root {
-  --ax-public-edge-color-disabled: var(--ax-edge-primary-disabled);
-  --ax-public-edge-color-select: var(--ax-edge-primary-active);
-  --ax-public-edge-color-hover: var(--ax-edge-primary-hover);
-  --ax-public-edge-color: var(--ax-edge-primary-default);
+  --ax-public-edge-color-disabled: var(--wb-canvas-edge-stroke-disabled);
+  --ax-public-edge-color-select: var(--wb-canvas-edge-stroke-active);
+  --ax-public-edge-color-hover: var(--wb-canvas-edge-stroke-hover);
+  --ax-public-edge-color: var(--wb-canvas-edge-stroke-default);
   --ax-public-edge-stroke-width-select: 3;
   --ax-public-edge-stroke-width: 2;
 }
diff --git a/packages/ui/src/components/input/variables.css b/packages/ui/src/components/input/variables.css
index 796386b29..d93c6d8fe 100644
--- a/packages/ui/src/components/input/variables.css
+++ b/packages/ui/src/components/input/variables.css
@@ -1,14 +1,14 @@
 :root {
-  --ax-public-input-color-disabled: var(--ax-txt-quaternary-default);
+  --ax-public-input-color-disabled: var(--wb-ui-text-ghost-default);
 
-  --ax-public-input-root-color: var(--ax-txt-secondary-default);
-  --ax-public-input-root-border-color: var(--ax-input-stroke-primary-default);
-  --ax-public-input-root-border-color-focus: var(--ax-input-stroke-primary-focus);
+  --ax-public-input-root-color: var(--wb-ui-text-subtle-default);
+  --ax-public-input-root-border-color: var(--wb-components-text-field-stroke-default);
+  --ax-public-input-root-border-color-focus: var(--wb-components-text-field-stroke-focus);
   --ax-public-input-root-border-size: 0.0625rem;
 
-  --ax-public-input-root-background-color-error: var(--ax-input-bg-primary-error);
-  --ax-public-input-root-border-color-error: var(--ax-input-stroke-primary-error);
-  --ax-public-input-root-color-error: var(--ax-txt-error-default);
+  --ax-public-input-root-background-color-error: var(--wb-components-text-field-bg-primary-critical);
+  --ax-public-input-root-border-color-error: var(--wb-components-text-field-stroke-critical);
+  --ax-public-input-root-color-error: var(--wb-ui-text-critical-default);
 
-  --ax-public-input-root-color-disabled: var(--ax-txt-quaternary-default);
+  --ax-public-input-root-color-disabled: var(--wb-ui-text-ghost-default);
 }
diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css
index 0ce3ecdec..08df952b6 100644
--- a/packages/ui/src/components/modal/modal.module.css
+++ b/packages/ui/src/components/modal/modal.module.css
@@ -1,43 +1,41 @@
 :root {
   --ax-public-modal-width: 26.25rem;
-  --ax-public-modal-border-radius: var(--ax-token-radius-modal-m);
-  --ax-public-modal-padding: var(--ax-token-spacing-modal-m-header-pad);
+  --ax-public-modal-border-radius: var(--wb-space-200);
+  --ax-public-modal-padding: var(--wb-space-200);
 
   --ax-public-modal-description-size: 0.625rem;
   --ax-public-modal-description-line-height: 140%;
 
-  --ax-public-modal-icon-padding: var(--ax-token-spacing-button-m-v-pad-2);
-  --ax-public-modal-content-padding: var(--ax-token-spacing-modal-m-content-v-pad)
-    var(--ax-token-spacing-modal-m-content-h-pad);
-  --ax-public-modal-footer-padding: 0px var(--ax-token-spacing-modal-m-header-pad)
-    var(--ax-token-spacing-modal-m-header-pad) var(--ax-token-spacing-modal-m-header-pad);
-
-  --ax-public-modal-background: var(--ax-ui-bg-primary-default);
-  --ax-public-modal-backdrop-background: var(--ax-colors-gray-900);
-  --ax-public-modal-close-button-color: var(--ax-nav-button-icon-primary-default);
-  --ax-public-modal-header-background: var(--ax-ui-bg-secondary-default);
-  --ax-public-modal-header-border-color: var(--ax-ui-stroke-primary-default);
-  --ax-public-modal-title-color: var(--ax-txt-primary-default);
-  --ax-public-modal-description-color: var(--ax-txt-secondary-default);
-  --ax-public-modal-icon-background: var(--ax-button-primary-bg-default);
-  --ax-public-modal-icon-color: var(--ax-txt-primary-white);
-  --ax-public-modal-content-background: var(--ax-ui-bg-primary-default);
-  --ax-public-modal-footer-border-color: var(--ax-ui-stroke-primary-default);
+  --ax-public-modal-icon-padding: var(--wb-space-112);
+  --ax-public-modal-content-padding: var(--wb-space-300) var(--wb-space-200);
+  --ax-public-modal-footer-padding: 0px var(--wb-space-200) var(--wb-space-200) var(--wb-space-200);
+
+  --ax-public-modal-background: var(--wb-ui-bg-base);
+  --ax-public-modal-backdrop-background: var(--wb-colors-gray-900);
+  --ax-public-modal-close-button-color: var(--wb-components-nav-button-icon-primary-default);
+  --ax-public-modal-header-background: var(--wb-ui-bg-elevated);
+  --ax-public-modal-header-border-color: var(--wb-ui-stroke-default);
+  --ax-public-modal-title-color: var(--wb-ui-text-default);
+  --ax-public-modal-description-color: var(--wb-ui-text-subtle-default);
+  --ax-public-modal-icon-background: var(--wb-components-button-solid-primary-default);
+  --ax-public-modal-icon-color: var(--wb-ui-text-onaccent-default);
+  --ax-public-modal-content-background: var(--wb-ui-bg-base);
+  --ax-public-modal-footer-border-color: var(--wb-ui-stroke-default);
 
   --ax-public-modal-large-width: 30rem;
-  --ax-public-modal-large-padding: var(--ax-token-spacing-modal-l-header-pad);
+  --ax-public-modal-large-padding: var(--wb-space-300);
   --ax-public-modal-large-title-size: 1.125rem;
   --ax-public-modal-large-title-line-height: 130%;
-  --ax-public-modal-large-icon-padding: var(--ax-token-spacing-button-l-v-pad-2);
+  --ax-public-modal-large-icon-padding: var(--wb-space-137);
 
-  --ax-public-modal-box-shadow: var(--ax-token-shadow-shadow-l-x) var(--ax-token-shadow-shadow-l-y)
-    var(--ax-token-shadow-shadow-l-blur) var(--ax-token-shadow-shadow-l-spread) var(--ax-shadow);
+  --ax-public-modal-box-shadow: var(--wb-space-0) var(--wb-space-200) var(--wb-space-400) var(--wb-space-negative-100)
+    var(--wb-shadow-ui-color);
 
-  --ax-public-modal-gap: var(--ax-token-spacing-modal-m-header-gap);
-  --ax-public-modal-gap-large: var(--ax-token-spacing-modal-l-header-gap);
+  --ax-public-modal-gap: var(--wb-space-150);
+  --ax-public-modal-gap-large: var(--wb-space-150);
 
-  --ax-public-modal-icon-border-radius: var(--ax-token-radius-button-m);
-  --ax-public-modal-icon-border-radius-large: var(--ax-token-radius-button-l);
+  --ax-public-modal-icon-border-radius: var(--wb-space-75);
+  --ax-public-modal-icon-border-radius-large: var(--wb-space-100);
 
   --ax-public-modal-content-gap: 0.25rem;
 }
@@ -104,13 +102,13 @@
   .title-wrapper {
     display: flex;
     align-items: center;
-    gap: var(--ax-token-spacing-modal-m-header-gap);
+    gap: var(--wb-space-150);
   }
 
   .title-container {
     display: flex;
     flex-direction: column;
-    gap: var(--ax-token-spacing-modal-m-header-gap);
+    gap: var(--wb-space-150);
   }
 
   .icon {
diff --git a/packages/ui/src/components/node/node-description/node-description.module.css b/packages/ui/src/components/node/node-description/node-description.module.css
index b6afffd6f..a063bf68f 100644
--- a/packages/ui/src/components/node/node-description/node-description.module.css
+++ b/packages/ui/src/components/node/node-description/node-description.module.css
@@ -1,6 +1,6 @@
 :root {
-  --ax-public-node-title-color: var(--ax-txt-primary-default);
-  --ax-public-node-title-subtitle: var(--ax-txt-secondary-default);
+  --ax-public-node-title-color: var(--wb-ui-text-default);
+  --ax-public-node-title-subtitle: var(--wb-ui-text-subtle-default);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/node/node-icon/node-icon.module.css b/packages/ui/src/components/node/node-icon/node-icon.module.css
index 91926b4d5..7ba5f0ffd 100644
--- a/packages/ui/src/components/node/node-icon/node-icon.module.css
+++ b/packages/ui/src/components/node/node-icon/node-icon.module.css
@@ -1,11 +1,11 @@
 :root {
   --ax-public-node-icon-border-size: 0.0625rem;
-  --ax-public-node-icon-border-radius: var(--ax-token-radius-node-head-icon);
-  --ax-public-node-icon-padding: var(--ax-token-spacing-node-head-icon);
+  --ax-public-node-icon-border-radius: var(--wb-space-100);
+  --ax-public-node-icon-padding: var(--wb-space-125);
 
-  --ax-public-node-icon-color: var(--ax-node-icon-primary-default);
-  --ax-public-node-icon-container-border-color: var(--ax-node-stroke-primary-default);
-  --ax-public-node-icon-container-background-color: var(--ax-node-bg-secondary-default);
+  --ax-public-node-icon-color: var(--wb-canvas-node-icon-primary);
+  --ax-public-node-icon-container-border-color: var(--wb-canvas-node-stroke-default);
+  --ax-public-node-icon-container-background-color: var(--wb-canvas-node-bg-secondary-default);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/node/node-panel/handle.module.css b/packages/ui/src/components/node/node-panel/handle.module.css
index 4ae8d6a55..02c1e46d1 100644
--- a/packages/ui/src/components/node/node-panel/handle.module.css
+++ b/packages/ui/src/components/node/node-panel/handle.module.css
@@ -4,11 +4,11 @@
   --ax-public-node-port-size-hover: 0.75rem;
   --ax-public-node-port-border-size: 0.125rem;
 
-  --ax-public-node-port-background-color: var(--ax-node-port-fill-default);
-  --ax-public-node-port-border-color: var(--ax-node-port-stroke-default);
+  --ax-public-node-port-background-color: var(--wb-canvas-port-fill-default);
+  --ax-public-node-port-border-color: var(--wb-canvas-port-stroke-default);
 
-  --ax-public-node-port-background-color-hover: var(--ax-node-port-fill-active);
-  --ax-public-node-port-border-color-hover: var(--ax-node-port-stroke-active);
+  --ax-public-node-port-background-color-hover: var(--wb-canvas-port-fill-active);
+  --ax-public-node-port-border-color-hover: var(--wb-canvas-port-stroke-active);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/node/node-panel/node-panel.module.css b/packages/ui/src/components/node/node-panel/node-panel.module.css
index b1b085f13..b58edbd38 100644
--- a/packages/ui/src/components/node/node-panel/node-panel.module.css
+++ b/packages/ui/src/components/node/node-panel/node-panel.module.css
@@ -3,19 +3,18 @@
   --ax-public-node-height: 100%;
   --ax-public-node-border-size: 0.0625rem;
 
-  --ax-public-node-padding: var(--ax-token-spacing-node-head-v-pad);
-  --ax-public-node-gap: var(--ax-token-spacing-node-head-gap);
-  --ax-public-node-border-radius: var(--ax-token-radius-node-head);
+  --ax-public-node-padding: var(--wb-space-100);
+  --ax-public-node-gap: var(--wb-space-100);
+  --ax-public-node-border-radius: var(--wb-space-150);
 
-  --ax-public-node-border-color: var(--ax-node-stroke-primary-default);
-  --ax-public-node-background-color: var(--ax-node-bg-primary-default);
-  --ax-public-node-hover-background-color: var(--ax-node-bg-primary-default);
-  --ax-public-node-border-hover-color: var(--ax-node-stroke-primary-hover);
+  --ax-public-node-border-color: var(--wb-canvas-node-stroke-default);
+  --ax-public-node-background-color: var(--wb-canvas-node-bg-primary-default);
+  --ax-public-node-hover-background-color: var(--wb-canvas-node-bg-primary-default);
+  --ax-public-node-border-hover-color: var(--wb-canvas-node-stroke-hover);
 
-  --ax-public-node-border-color-selected: var(--ax-node-stroke-primary-hover);
-  --ax-public-node-box-shadow-selected: var(--ax-token-shadow-focus-node-active-x)
-    var(--ax-token-shadow-focus-node-active-y) var(--ax-token-shadow-focus-node-active-blur)
-    var(--ax-token-shadow-focus-node-active-spread) var(--ax-focus-ring-node-active);
+  --ax-public-node-border-color-selected: var(--wb-canvas-node-stroke-hover);
+  --ax-public-node-box-shadow-selected: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
+    var(--wb-canvas-node-focus-active);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/radio-button/radio.module.css b/packages/ui/src/components/radio-button/radio.module.css
index 6d8b8c20c..461cf4d8d 100644
--- a/packages/ui/src/components/radio-button/radio.module.css
+++ b/packages/ui/src/components/radio-button/radio.module.css
@@ -1,15 +1,15 @@
 :root {
-  --ax-public-radio-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-radio-bg: var(--ax-ui-bg-primary-default);
-  --ax-public-radio-checked-bg: var(--ax-ui-bg-tertiary-selected);
-  --ax-public-radio-dot-color: var(--ax-colors-gray-100); /* missing token */
+  --ax-public-radio-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-radio-bg: var(--wb-ui-bg-base);
+  --ax-public-radio-checked-bg: var(--wb-components-selector-fill-checked);
+  --ax-public-radio-dot-color: var(--wb-colors-gray-100); /* missing token */
 
-  --ax-public-radio-focus-border-color: var(--ax-txt-primary-default);
+  --ax-public-radio-focus-border-color: var(--wb-ui-text-default);
 
-  --ax-public-radio-disabled-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-radio-disabled-bg: var(--ax-ui-bg-tertiary-default);
-  --ax-public-radio-disabled-dot-color: var(--ax-nav-button-icon-primary-disabled);
-  --ax-public-radio-border-radius: var(--ax-token-radius-radiobutton);
+  --ax-public-radio-disabled-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-radio-disabled-bg: var(--wb-ui-bg-inset);
+  --ax-public-radio-disabled-dot-color: var(--wb-components-nav-button-icon-primary-disabled);
+  --ax-public-radio-border-radius: var(--wb-radius-full);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/segment-picker/border-radius-size.module.css b/packages/ui/src/components/segment-picker/border-radius-size.module.css
index e8bf82d6e..cd509cb23 100644
--- a/packages/ui/src/components/segment-picker/border-radius-size.module.css
+++ b/packages/ui/src/components/segment-picker/border-radius-size.module.css
@@ -1,11 +1,11 @@
 :root {
-  --ax-public-segment-picker-border-radius-extra-large: var(--ax-token-radius-seg-picker-xl);
-  --ax-public-segment-picker-border-radius-large: var(--ax-token-radius-seg-picker-l);
-  --ax-public-segment-picker-border-radius-medium: var(--ax-token-radius-seg-picker-m);
-  --ax-public-segment-picker-border-radius-small: var(--ax-token-radius-seg-picker-s);
-  --ax-public-segment-picker-border-radius-extra-small: var(--ax-token-radius-seg-picker-xs);
-  --ax-public-segment-picker-border-radius-xx-small: var(--ax-token-radius-seg-picker-xxs);
-  --ax-public-segment-picker-border-radius-xxx-small: var(--ax-token-radius-seg-picker-xxxs);
+  --ax-public-segment-picker-border-radius-extra-large: var(--wb-space-150);
+  --ax-public-segment-picker-border-radius-large: var(--wb-space-150);
+  --ax-public-segment-picker-border-radius-medium: var(--wb-space-125);
+  --ax-public-segment-picker-border-radius-small: var(--wb-space-100);
+  --ax-public-segment-picker-border-radius-extra-small: var(--wb-space-100);
+  --ax-public-segment-picker-border-radius-xx-small: var(--wb-space-100);
+  --ax-public-segment-picker-border-radius-xxx-small: var(--wb-space-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/segment-picker/segment-picker.module.css b/packages/ui/src/components/segment-picker/segment-picker.module.css
index b1daa7e8b..aa78d8881 100644
--- a/packages/ui/src/components/segment-picker/segment-picker.module.css
+++ b/packages/ui/src/components/segment-picker/segment-picker.module.css
@@ -1,8 +1,8 @@
 :root {
-  --ax-public-segment-picker-gap: var(--ax-token-spacing-seg-picker-gap);
-  --ax-public-segment-picker-padding: var(--ax-token-spacing-seg-picker-pad);
-  --ax-public-segment-picker-background-color: var(--ax-ui-bg-tertiary-default);
-  --ax-public-segment-picker-circle-border-radius: var(--ax-token-radius-button-round);
+  --ax-public-segment-picker-gap: var(--wb-space-50);
+  --ax-public-segment-picker-padding: var(--wb-space-50);
+  --ax-public-segment-picker-background-color: var(--wb-ui-bg-inset);
+  --ax-public-segment-picker-circle-border-radius: var(--wb-radius-full);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/select/select-button/select-button.module.css b/packages/ui/src/components/select/select-button/select-button.module.css
index e54c8f3a2..0699e6cad 100644
--- a/packages/ui/src/components/select/select-button/select-button.module.css
+++ b/packages/ui/src/components/select/select-button/select-button.module.css
@@ -1,13 +1,13 @@
 :root {
   --ax-public-select-border-size: 0.0625rem;
-  --ax-public-select-button-color: var(--ax-txt-primary-default);
-  --ax-public-select-button-border-color: var(--ax-input-stroke-primary-default);
-  --ax-public-select-button-border-color-focus: var(--ax-input-stroke-primary-focus);
-  --ax-public-select-button-color-disabled: var(--ax-input-stroke-primary-default);
-
-  --ax-public-select-button-background-color-error: var(--ax-input-bg-primary-error);
-  --ax-public-select-button-border-color-error: var(--ax-input-stroke-primary-error);
-  --ax-public-select-button-color-error: var(--ax-txt-error-default);
+  --ax-public-select-button-color: var(--wb-ui-text-default);
+  --ax-public-select-button-border-color: var(--wb-components-text-field-stroke-default);
+  --ax-public-select-button-border-color-focus: var(--wb-components-text-field-stroke-focus);
+  --ax-public-select-button-color-disabled: var(--wb-components-text-field-stroke-default);
+
+  --ax-public-select-button-background-color-error: var(--wb-components-text-field-bg-primary-critical);
+  --ax-public-select-button-border-color-error: var(--wb-components-text-field-stroke-critical);
+  --ax-public-select-button-color-error: var(--wb-ui-text-critical-default);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/separator/separator.module.css b/packages/ui/src/components/separator/separator.module.css
index c2535905e..f1faca111 100644
--- a/packages/ui/src/components/separator/separator.module.css
+++ b/packages/ui/src/components/separator/separator.module.css
@@ -1,6 +1,6 @@
 :root {
   --ax-public-list-item-separator-border-size: 0.0625rem;
-  --ax-public-list-item-separator-background-color: var(--ax-ui-separator-primary-default);
+  --ax-public-list-item-separator-background-color: var(--wb-ui-stroke-divider);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/snackbar/snackbar.module.css b/packages/ui/src/components/snackbar/snackbar.module.css
index 01d554431..5b73d91cb 100644
--- a/packages/ui/src/components/snackbar/snackbar.module.css
+++ b/packages/ui/src/components/snackbar/snackbar.module.css
@@ -1,51 +1,48 @@
 :root {
   --ax-public-snackbar-border-size: 0.0625rem;
-  --ax-public-snackbar-padding: var(--ax-token-spacing-snackbar-v-pad-1) var(--ax-token-spacing-snackbar-h-pad-1);
-  --ax-public-snackbar-border-radius: var(--ax-token-radius-snackbar);
-  --ax-public-snackbar-content-gap: var(--ax-token-spacing-snackbar-gap-1);
+  --ax-public-snackbar-padding: var(--wb-space-200) var(--wb-space-200);
+  --ax-public-snackbar-border-radius: var(--wb-space-100);
+  --ax-public-snackbar-content-gap: var(--wb-space-150);
 
   --ax-public-snackbar-width: 31.25rem;
-  --ax-public-snackbar-title-color: var(--ax-txt-primary-default);
-  --ax-public-snackbar-subtitle-color: var(--ax-txt-secondary-default);
-  --ax-public-snackbar-close-icon-color: var(--ax-txt-tertiary-default);
+  --ax-public-snackbar-title-color: var(--wb-ui-text-default);
+  --ax-public-snackbar-subtitle-color: var(--wb-ui-text-subtle-default);
+  --ax-public-snackbar-close-icon-color: var(--wb-ui-text-muted-default);
 
-  --ax-public-snackbar-default-border: var(--ax-ui-stroke-secondary-default);
-  --ax-public-snackbar-default-background: var(--ax-ui-bg-primary-default);
-  --ax-public-snackbar-default-icon-color: var(--ax-txt-tertiary-default);
+  --ax-public-snackbar-default-border: var(--wb-ui-stroke-subtle);
+  --ax-public-snackbar-default-background: var(--wb-ui-bg-base);
+  --ax-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default);
 
-  --ax-public-snackbar-success-border: var(--ax-colors-green-300); /* missing token */
+  --ax-public-snackbar-success-border: var(--wb-colors-green-300); /* missing token */
   --ax-public-snackbar-success-background:
-    linear-gradient(0deg, var(--ax-snackbar-bg-success) 0%, var(--ax-snackbar-bg-success) 100%),
-    var(--ax-ui-bg-primary-default);
-  --ax-public-snackbar-success-icon-color: var(--ax-colors-green-300); /* missing token */
+    linear-gradient(0deg, var(--wb-components-snackbar-bg-success) 0%, var(--wb-components-snackbar-bg-success) 100%),
+    var(--wb-ui-bg-base);
+  --ax-public-snackbar-success-icon-color: var(--wb-colors-green-300); /* missing token */
 
-  --ax-public-snackbar-error-border: var(--ax-colors-red-400); /* missing token */
+  --ax-public-snackbar-error-border: var(--wb-colors-red-400); /* missing token */
   --ax-public-snackbar-error-background:
-    linear-gradient(0deg, var(--ax-snackbar-bg-error) 0%, var(--ax-snackbar-bg-error) 100%),
-    var(--ax-ui-bg-primary-default);
-  --ax-public-snackbar-error-icon-color: var(--ax-colors-red-400); /* missing token */
+    linear-gradient(0deg, var(--wb-components-snackbar-bg-critical) 0%, var(--wb-components-snackbar-bg-critical) 100%),
+    var(--wb-ui-bg-base);
+  --ax-public-snackbar-error-icon-color: var(--wb-colors-red-400); /* missing token */
 
-  --ax-public-snackbar-warning-border: var(--ax-colors-orange-300); /* missing token */
+  --ax-public-snackbar-warning-border: var(--wb-colors-orange-300); /* missing token */
   --ax-public-snackbar-warning-background:
-    linear-gradient(0deg, var(--ax-snackbar-bg-warning) 0%, var(--ax-snackbar-bg-warning) 100%),
-    var(--ax-ui-bg-primary-default);
+    linear-gradient(0deg, var(--wb-components-snackbar-bg-warning) 0%, var(--wb-components-snackbar-bg-warning) 100%),
+    var(--wb-ui-bg-base);
 
-  --ax-public-snackbar-warning-icon-color: var(--ax-colors-orange-300); /* missing token */
+  --ax-public-snackbar-warning-icon-color: var(--wb-colors-orange-300); /* missing token */
 
-  --ax-public-snackbar-info-border: var(--ax-ui-bg-tertiary-selected);
+  --ax-public-snackbar-info-border: var(--wb-components-selector-fill-checked);
   --ax-public-snackbar-info-background:
-    linear-gradient(0deg, var(--ax-snackbar-bg-information) 0%, var(--ax-snackbar-bg-information) 100%),
-    var(--ax-ui-bg-primary-default);
-  --ax-public-snackbar-info-icon-color: var(--ax-colors-blue-400);
+    linear-gradient(0deg, var(--wb-components-snackbar-bg-info) 0%, var(--wb-components-snackbar-bg-info) 100%),
+    var(--wb-ui-bg-base);
+  --ax-public-snackbar-info-icon-color: var(--wb-colors-blue-400);
 }
 
 @layer ui.component {
   .container {
     display: flex;
-    width: calc(
-      var(--ax-public-snackbar-width) + 2 * var(--ax-token-spacing-snackbar-h-pad-1) + 2 *
-        var(--ax-public-snackbar-border-size)
-    );
+    width: calc(var(--ax-public-snackbar-width) + 2 * var(--wb-space-200) + 2 * var(--ax-public-snackbar-border-size));
     border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-default-border);
     border-radius: var(--ax-public-snackbar-border-radius);
     background: var(--ax-public-snackbar-default-background);
diff --git a/packages/ui/src/components/status/status.module.css b/packages/ui/src/components/status/status.module.css
index d3e373b49..c44dd2a1b 100644
--- a/packages/ui/src/components/status/status.module.css
+++ b/packages/ui/src/components/status/status.module.css
@@ -1,9 +1,9 @@
 :root {
-  --ax-public-status-right: var(--ax-primitive-even-12) /* missing token */;
-  --ax-public-status-size: var(--ax-primitive-even-20) /* missing token */;
-  --ax-public-status-icon-size: var(--ax-primitive-even-12) /* missing token */;
-  --ax-public-status-invalid-color: var(--ax-colors-orange-100) /* missing token */;
-  --ax-public-status-invalid-background-color: var(--ax-colors-orange-400) /* missing token */;
+  --ax-public-status-right: var(--wb-space-150) /* missing token */;
+  --ax-public-status-size: var(--wb-space-250) /* missing token */;
+  --ax-public-status-icon-size: var(--wb-space-150) /* missing token */;
+  --ax-public-status-invalid-color: var(--wb-colors-orange-100) /* missing token */;
+  --ax-public-status-invalid-background-color: var(--wb-colors-orange-400) /* missing token */;
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
index f6484a6b4..168b3d6e4 100644
--- a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
+++ b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css
@@ -7,11 +7,11 @@
   --ax-public-icon-switch-padding: 0.5rem;
   --ax-public-icon-switch-icon-size: 1rem;
 
-  --ax-public-icon-switch-track-bg: var(--ax-ui-bg-tertiary-default);
-  --ax-public-icon-switch-thumb-bg-primary: var(--ax-ui-bg-tertiary-selected);
-  --ax-public-icon-switch-icon-color: var(--ax-txt-tertiary-default);
-  --ax-public-icon-switch-icon-selected-color: var(--ax-txt-primary-white);
-  --ax-public-icon-switch-thumb-bg-secondary: var(--ax-ui-bg-primary-default);
+  --ax-public-icon-switch-track-bg: var(--wb-ui-bg-inset);
+  --ax-public-icon-switch-thumb-bg-primary: var(--wb-components-selector-fill-checked);
+  --ax-public-icon-switch-icon-color: var(--wb-ui-text-muted-default);
+  --ax-public-icon-switch-icon-selected-color: var(--wb-ui-text-onaccent-default);
+  --ax-public-icon-switch-thumb-bg-secondary: var(--wb-ui-bg-base);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/switch/switch.module.css b/packages/ui/src/components/switch/switch.module.css
index 82f420bcc..28d0f7950 100644
--- a/packages/ui/src/components/switch/switch.module.css
+++ b/packages/ui/src/components/switch/switch.module.css
@@ -1,16 +1,16 @@
 @import './switch-size.module.css';
 
 :root {
-  --ax-public-switch-outline-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-switch-disabled-background-color: var(--ax-ui-bg-tertiary-default);
-  --ax-public-switch-disabled-border-color: var(--ax-ui-stroke-secondary-default);
-  --ax-public-track-no-selected-color: var(--ax-ui-bg-primary-default);
-  --ax-public-track-selected-color: var(--ax-ui-bg-tertiary-selected);
-  --ax-public-thumb-no-selected-color: var(--ax-nav-button-icon-primary-default);
-  --ax-public-thumb-disabled-color: var(--ax-nav-button-icon-primary-disabled);
-  --ax-public-thumb-selected-color: var(--ax-colors-gray-100); /* missing token */
+  --ax-public-switch-outline-color: var(--wb-ui-stroke-subtle);
+  --ax-public-switch-disabled-background-color: var(--wb-ui-bg-inset);
+  --ax-public-switch-disabled-border-color: var(--wb-ui-stroke-subtle);
+  --ax-public-track-no-selected-color: var(--wb-ui-bg-base);
+  --ax-public-track-selected-color: var(--wb-components-selector-fill-checked);
+  --ax-public-thumb-no-selected-color: var(--wb-components-nav-button-icon-primary-default);
+  --ax-public-thumb-disabled-color: var(--wb-components-nav-button-icon-primary-disabled);
+  --ax-public-thumb-selected-color: var(--wb-colors-gray-100); /* missing token */
 
-  --ax-public-switch-focus-border-color: var(--ax-txt-primary-default);
+  --ax-public-switch-focus-border-color: var(--wb-ui-text-default);
   --ax-public-switch-border-size: 0.0625rem;
 }
 
diff --git a/packages/ui/src/components/text-area/text-area.module.css b/packages/ui/src/components/text-area/text-area.module.css
index 2888055cb..f36042be3 100644
--- a/packages/ui/src/components/text-area/text-area.module.css
+++ b/packages/ui/src/components/text-area/text-area.module.css
@@ -1,13 +1,13 @@
 :root {
-  --ax-public-textarea-color-disabled: var(--ax-txt-quaternary-default);
-  --ax-public-textarea-root-color: var(--ax-txt-secondary-default);
-  --ax-public-textarea-root-border-color: var(--ax-input-stroke-primary-default);
-  --ax-public-textarea-root-border-color-focus: var(--ax-input-stroke-primary-focus);
+  --ax-public-textarea-color-disabled: var(--wb-ui-text-ghost-default);
+  --ax-public-textarea-root-color: var(--wb-ui-text-subtle-default);
+  --ax-public-textarea-root-border-color: var(--wb-components-text-field-stroke-default);
+  --ax-public-textarea-root-border-color-focus: var(--wb-components-text-field-stroke-focus);
   --ax-public-textarea-root-border-size: 0.0625rem;
-  --ax-public-textarea-root-background-color-error: var(--ax-input-bg-primary-error);
-  --ax-public-textarea-root-border-color-error: var(--ax-input-stroke-primary-error);
-  --ax-public-textarea-root-color-error: var(--ax-txt-error-default);
-  --ax-public-textarea-root-color-disabled: var(--ax-txt-quaternary-default);
+  --ax-public-textarea-root-background-color-error: var(--wb-components-text-field-bg-primary-critical);
+  --ax-public-textarea-root-border-color-error: var(--wb-components-text-field-stroke-critical);
+  --ax-public-textarea-root-color-error: var(--wb-ui-text-critical-default);
+  --ax-public-textarea-root-color-disabled: var(--wb-ui-text-ghost-default);
   --ax-public-textarea-root-background-color-disabled: transparent;
 }
 
diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css
index 79c6f50dd..8655a126a 100644
--- a/packages/ui/src/components/tooltip/tooltip.module.css
+++ b/packages/ui/src/components/tooltip/tooltip.module.css
@@ -1,10 +1,10 @@
 :root {
-  --ax-public-tooltip-default-background: var(--ax-tooltip-bg-default);
-  --ax-public-tooltip-blue-background: var(--ax-tooltip-bg-blue);
-  --ax-public-tooltip-padding: var(--ax-token-spacing-tooltip-v-pad) var(--ax-token-spacing-tooltip-h-pad);
-  --ax-public-tooltip-radius-size: var(--ax-token-radius-tooltip);
-  --ax-public-tooltip-text-color: var(--ax-txt-tooltip-bw);
-  --ax-public-tooltip-blue-text-color: var(--ax-txt-tooltip-blue);
+  --ax-public-tooltip-default-background: var(--wb-components-tooltip-bg-default);
+  --ax-public-tooltip-blue-background: var(--wb-components-tooltip-bg-info);
+  --ax-public-tooltip-padding: var(--wb-space-100) var(--wb-space-150);
+  --ax-public-tooltip-radius-size: var(--wb-space-100);
+  --ax-public-tooltip-text-color: var(--wb-ui-text-tooltip-default);
+  --ax-public-tooltip-blue-text-color: var(--wb-ui-text-tooltip-accent-default);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/shared/styles/input-size.module.css b/packages/ui/src/shared/styles/input-size.module.css
index a8848c42d..a662c72d5 100644
--- a/packages/ui/src/shared/styles/input-size.module.css
+++ b/packages/ui/src/shared/styles/input-size.module.css
@@ -1,15 +1,15 @@
 :root {
-  --ax-public-input-padding-large: var(--ax-token-spacing-input-l-v-pad) var(--ax-token-spacing-input-l-h-pad);
-  --ax-public-input-padding-medium: var(--ax-token-spacing-input-m-v-pad) var(--ax-token-spacing-input-m-h-pad);
-  --ax-public-input-padding-small: var(--ax-token-spacing-input-s-v-pad) var(--ax-token-spacing-input-s-h-pad);
+  --ax-public-input-padding-large: var(--wb-space-137) var(--wb-space-150);
+  --ax-public-input-padding-medium: var(--wb-space-125) var(--wb-space-150);
+  --ax-public-input-padding-small: var(--wb-space-100) var(--wb-space-150);
 
-  --ax-public-input-border-radius-large: var(--ax-token-radius-input-l);
-  --ax-public-input-border-radius-medium: var(--ax-token-radius-input-m);
-  --ax-public-input-border-radius-small: var(--ax-token-radius-input-s);
+  --ax-public-input-border-radius-large: var(--wb-space-100);
+  --ax-public-input-border-radius-medium: var(--wb-space-75);
+  --ax-public-input-border-radius-small: var(--wb-space-75);
 
-  --ax-public-input-gap-large: var(--ax-token-spacing-input-l-gap);
-  --ax-public-input-gap-medium: var(--ax-token-spacing-input-m-gap);
-  --ax-public-input-gap-small: var(--ax-token-spacing-input-s-gap);
+  --ax-public-input-gap-large: var(--wb-space-100);
+  --ax-public-input-gap-medium: var(--wb-space-100);
+  --ax-public-input-gap-small: var(--wb-space-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/shared/styles/list-box.module.css b/packages/ui/src/shared/styles/list-box.module.css
index 9890bdca8..d7d2b3aed 100644
--- a/packages/ui/src/shared/styles/list-box.module.css
+++ b/packages/ui/src/shared/styles/list-box.module.css
@@ -1,11 +1,10 @@
 :root {
-  --ax-public-list-box-background-color: var(--ax-dropdown-bg-primary-default);
-  --ax-public-list-box-border-radius: var(--ax-token-radius-dropdown-wrap-s);
-  --ax-public-list-box-box-shadow: var(--ax-token-shadow-shadow-s-x) var(--ax-token-shadow-shadow-s-y)
-    var(--ax-token-shadow-shadow-s-blur) var(--ax-token-shadow-shadow-s-spread) var(--ax-shadow);
-  --ax-public-list-box-padding: var(--ax-token-spacing-dropdown-wrap-s-v-pad)
-    var(--ax-token-spacing-dropdown-wrap-s-h-pad);
-  --ax-public-list-box-gap: var(--ax-token-spacing-dropdown-wrap-s-gap);
+  --ax-public-list-box-background-color: var(--wb-ui-bg-base);
+  --ax-public-list-box-border-radius: var(--wb-space-100);
+  --ax-public-list-box-box-shadow: var(--wb-space-0) var(--wb-space-100) var(--wb-space-200) var(--wb-space-negative-50)
+    var(--wb-shadow-ui-color);
+  --ax-public-list-box-padding: var(--wb-space-50) var(--wb-space-50);
+  --ax-public-list-box-gap: var(--wb-space-50);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/shared/styles/list-item-size.module.css b/packages/ui/src/shared/styles/list-item-size.module.css
index 8590c28f4..94302f34b 100644
--- a/packages/ui/src/shared/styles/list-item-size.module.css
+++ b/packages/ui/src/shared/styles/list-item-size.module.css
@@ -1,13 +1,10 @@
 :root {
-  --ax-public-list-item-padding-large: var(--ax-token-spacing-dropdown-item-l-v-pad)
-    var(--ax-token-spacing-dropdown-item-l-h-pad);
-  --ax-public-list-item-padding-medium: var(--ax-token-spacing-dropdown-item-m-v-pad)
-    var(--ax-token-spacing-dropdown-item-m-h-pad);
-  --ax-public-list-item-padding-small: var(--ax-token-spacing-dropdown-item-s-v-pad)
-    var(--ax-token-spacing-dropdown-item-s-h-pad);
-  --ax-public-list-item-gap-small: var(--ax-token-spacing-dropdown-item-s-gap);
-  --ax-public-list-item-gap-medium: var(--ax-token-spacing-dropdown-item-m-gap);
-  --ax-public-list-item-gap-large: var(--ax-token-spacing-dropdown-item-l-gap);
+  --ax-public-list-item-padding-large: var(--wb-space-137) var(--wb-space-100);
+  --ax-public-list-item-padding-medium: var(--wb-space-125) var(--wb-space-100);
+  --ax-public-list-item-padding-small: var(--wb-space-100) var(--wb-space-100);
+  --ax-public-list-item-gap-small: var(--wb-space-150);
+  --ax-public-list-item-gap-medium: var(--wb-space-150);
+  --ax-public-list-item-gap-large: var(--wb-space-150);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/shared/styles/list-item.module.css b/packages/ui/src/shared/styles/list-item.module.css
index fd1b440f9..8a7fa2e8a 100644
--- a/packages/ui/src/shared/styles/list-item.module.css
+++ b/packages/ui/src/shared/styles/list-item.module.css
@@ -1,17 +1,25 @@
 :root {
-  --ax-public-list-item-background-color: var(--ax-dropdown-bg-secondary-default);
-  --ax-public-list-item-background-color-selected: var(--ax-dropdown-bg-secondary-active);
-  --ax-public-list-item-color-selected: var(--ax-txt-primary-white);
-  --ax-public-list-item-color: var(--ax-txt-primary-default);
+  --ax-public-list-item-background-color: var(--wb-ui-bg-inset);
+  --ax-public-list-item-background-color-selected: var(--wb-colors-acc1-600);
+  --ax-public-list-item-color-selected: var(--wb-ui-text-onaccent-default);
+  --ax-public-list-item-color: var(--wb-ui-text-default);
 
-  --ax-public-list-item-background-color-focus: var(--ax-dropdown-bg-secondary-default);
-  --ax-public-list-item-outline-color-focus: var(--ax-ui-stroke-primary-focus);
+  --ax-public-list-item-background-color-focus: var(--wb-ui-bg-inset);
+  --ax-public-list-item-outline-color-focus: var(--wb-ui-stroke-focus);
   --ax-public-list-item-outline-size: 0.0625rem;
 
-  --ax-public-list-item-color-destructive: var(--ax-txt-error-default);
-  --ax-public-list-item-background-color-destructive: var(--ax-dropdown-bg-destructive-default);
-  --ax-public-list-item-background-color-hover-destructive: var(--ax-dropdown-bg-destructive-hover);
-  --ax-public-list-border-radius: var(--ax-token-radius-dropdown-item-s);
+  --ax-public-list-item-color-destructive: var(--wb-ui-text-critical-default);
+  --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-10);
+  --ax-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-20);
+  --ax-public-list-border-radius: var(--wb-space-75);
+}
+
+@layer ui.base {
+  html[data-theme='dark'] {
+    --ax-public-list-item-background-color-selected: var(--wb-colors-acc1-500);
+    --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-30);
+    --ax-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-50);
+  }
 }
 
 @layer ui.component {

From a1b1ee9c0ec07a3a01aeba89571c881885e8deea Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 10:15:16 +0200
Subject: [PATCH 3/3] fix(tokens): emit dimensions in rem and bind the right
 token families

The retired numeral primitives were authored in rem, so component boxes
scaled with the reader's font size; the refreshed export is px-authored,
which left text scaling while its containers stopped. Both transforms now
convert px to rem and refuse any other unit instead of emitting NaN.

Consumers bind the family that owns the value: radius from the radius
scale, shadow geometry and edge strokes from the effects and canvas sets.
List rows take the hover fill, which stays lighter than the surface they
sit on in the dark theme.

The docs API generator reads wb-prefixed definitions again, so component
variables are classified as colors instead of falling through to sizes.
Public theming docs point at names that exist, and the token README
documents the unit split and the new sets.
---
 .changeset/token-set-2.md                     |  2 +-
 .changeset/ui-layer-root-defaults.md          |  2 +-
 .../src/components/execution/highlighting.css |  9 ++--
 apps/docs/astro.config.mjs                    |  6 +--
 apps/docs/scripts/generate-ui-api.mjs         |  2 +-
 .../src/components/ui-examples/status.tsx     |  2 +-
 .../src/content/docs/get-started/theming.md   |  2 +-
 .../design-system-and-customization.mdx       | 22 ++++----
 .../src/content/docs/ui-library/overview.mdx  |  8 +--
 docs/how-to-change-css-tokens.md              |  6 +--
 packages/sdk/README.md                        |  2 +-
 .../form/message/message.module.css           |  2 +-
 .../sdk/src/features/app-bar/variables.css    |  2 +-
 .../icon-placeholder.module.css               |  2 +-
 .../settings/settings-navigation.module.css   |  4 +-
 packages/tokens/README.md                     | 15 +++---
 packages/tokens/config.ts                     |  2 +
 packages/tokens/src/index.ts                  | 11 +++-
 packages/tokens/src/tokens-to-css.ts          | 31 +++++++++--
 .../tokens/src/validate-collisions.spec.ts    | 30 +++++++++++
 packages/tokens/src/validate-collisions.ts    | 51 +++++++++++++++----
 packages/ui/README.md                         |  2 +-
 packages/ui/css-layers.md                     |  4 +-
 .../nav-button-border-radius.module.css       |  4 +-
 .../button/styles/border-radius.module.css    | 10 ++--
 .../components/checkbox/checkbox.module.css   |  6 +--
 .../edge-label/edge-label-size.module.css     | 35 +++++++------
 .../edge/edge-label/edge-label.module.css     |  6 +--
 .../ui/src/components/modal/modal.module.css  | 10 ++--
 .../node/node-icon/node-icon.module.css       |  2 +-
 .../node/node-panel/node-panel.module.css     |  6 +--
 .../border-radius-size.module.css             | 14 ++---
 .../components/snackbar/snackbar.module.css   |  2 +-
 .../src/components/tooltip/tooltip.module.css |  2 +-
 .../src/shared/styles/input-size.module.css   |  6 +--
 .../ui/src/shared/styles/list-box.module.css  |  6 +--
 .../ui/src/shared/styles/list-item.module.css |  6 +--
 packages/ui/vite.config.mts                   |  2 +-
 38 files changed, 222 insertions(+), 114 deletions(-)

diff --git a/.changeset/token-set-2.md b/.changeset/token-set-2.md
index 9d9a7401b..5f8a2239d 100644
--- a/.changeset/token-set-2.md
+++ b/.changeset/token-set-2.md
@@ -3,4 +3,4 @@
 '@workflowbuilder/sdk': minor
 ---
 
-The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, and new canvas and shadow (effects) sets. The `--ax-*` token names are gone from `tokens.css`; the `--ax-public-*` per-component override variables are unchanged. Component visuals pick up the refreshed palette (brand `#3969FF`, updated reds/greens/oranges).
+The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, and new canvas and shadow (effects) sets. The `--ax-*` token names are gone from `tokens.css`; the `--ax-public-*` per-component override variables are unchanged. Consumers who overrode non-public `--ax-*` names directly must move those overrides to the `--wb-*` equivalents. Component visuals pick up the refreshed palette (brand `#3969FF`, updated reds/greens/oranges).
diff --git a/.changeset/ui-layer-root-defaults.md b/.changeset/ui-layer-root-defaults.md
index e51b1f16b..ad2058468 100644
--- a/.changeset/ui-layer-root-defaults.md
+++ b/.changeset/ui-layer-root-defaults.md
@@ -2,4 +2,4 @@
 '@workflowbuilder/ui': minor
 ---
 
-Variable defaults (`--ax-public-*` component defaults and the `--ax-*` design tokens in `tokens.css`) now ship inside the `ui.base` cascade layer. A plain `:root { --ax-…: … }` override in your app now wins regardless of stylesheet load order; previously a lazily loaded component stylesheet could silently restore the default.
+Variable defaults (`--ax-public-*` component defaults and the `--wb-*` design tokens in `tokens.css`) now ship inside the `ui.base` cascade layer. A plain `:root { --ax-…: … }` override in your app now wins regardless of stylesheet load order; previously a lazily loaded component stylesheet could silently restore the default.
diff --git a/apps/ai-studio/src/components/execution/highlighting.css b/apps/ai-studio/src/components/execution/highlighting.css
index 63fcf602f..687039b78 100644
--- a/apps/ai-studio/src/components/execution/highlighting.css
+++ b/apps/ai-studio/src/components/execution/highlighting.css
@@ -17,12 +17,15 @@ html[data-theme='dark'] {
   --ai-studio-node-shadow-color--completed: var(--ai-studio-edge-color--active);
   --ai-studio-node-shadow-color--failed: var(--wb-colors-red-400);
 
-  --ai-studio-node-shadow--active: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
+  --ai-studio-node-shadow--active: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread)
     var(--ai-studio-node-shadow-color--active);
 
-  --ai-studio-node-shadow--completed: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
+  --ai-studio-node-shadow--completed: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread)
     var(--ai-studio-node-shadow-color--completed);
 
-  --ai-studio-node-shadow--failed: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
+  --ai-studio-node-shadow--failed: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread)
     var(--ai-studio-node-shadow-color--failed);
 }
diff --git a/apps/docs/astro.config.mjs b/apps/docs/astro.config.mjs
index 1026dbbc2..b4b1ff44d 100644
--- a/apps/docs/astro.config.mjs
+++ b/apps/docs/astro.config.mjs
@@ -117,9 +117,9 @@ export default defineConfig({
       ],
       // `@workflowbuilder/ui` styles are safe to load globally: everything is
       // layered (no global reset), classes are hashed or opt-in, and tokens.css
-      // only defines `--ax-*` custom properties keyed on `html[data-theme]` —
-      // which Starlight already toggles, so the live component showcases follow
-      // the docs light/dark theme. index.css is required at document level:
+      // defines `--wb-*` custom properties on `:root` and `html[data-theme]`.
+      // Starlight toggles the latter, so the live component showcases follow the
+      // docs light/dark theme. index.css is required at document level:
       // Modal/Menu/Select/Tooltip/DatePicker portal their popups to body,
       // outside the shadow roots that carry the preview styles.
       customCss: [
diff --git a/apps/docs/scripts/generate-ui-api.mjs b/apps/docs/scripts/generate-ui-api.mjs
index f641b21bc..72918571d 100644
--- a/apps/docs/scripts/generate-ui-api.mjs
+++ b/apps/docs/scripts/generate-ui-api.mjs
@@ -349,7 +349,7 @@ function readTokenValues() {
   if (!existsSync(tokenDistribution)) return values;
   for (const file of globSync('*.css', { cwd: tokenDistribution })) {
     const css = readFileSync(path.resolve(tokenDistribution, file), 'utf8');
-    for (const [, name, value] of css.matchAll(/(--ax-[\w-]+)\s*:\s*([^;]+);/g)) {
+    for (const [, name, value] of css.matchAll(/(--(?:wb|ax)-[\w-]+)\s*:\s*([^;]+);/g)) {
       if (!values.has(name)) values.set(name, value.trim());
     }
   }
diff --git a/apps/docs/src/components/ui-examples/status.tsx b/apps/docs/src/components/ui-examples/status.tsx
index 91f76bd50..b2f4cae8b 100644
--- a/apps/docs/src/components/ui-examples/status.tsx
+++ b/apps/docs/src/components/ui-examples/status.tsx
@@ -14,7 +14,7 @@ export function StatusExample() {
           display: 'inline-flex',
           alignItems: 'center',
           padding: '0.875rem 1.25rem',
-          border: '1px solid var(--ax-ui-stroke-primary-default, #3a3a3a)',
+          border: '1px solid var(--wb-ui-stroke-default)',
           borderRadius: '0.5rem',
         }}
       >
diff --git a/apps/docs/src/content/docs/get-started/theming.md b/apps/docs/src/content/docs/get-started/theming.md
index 85527f326..1eb88c62b 100644
--- a/apps/docs/src/content/docs/get-started/theming.md
+++ b/apps/docs/src/content/docs/get-started/theming.md
@@ -23,4 +23,4 @@ Provide the font yourself (via `@font-face`, `@fontsource/<font>`, etc.) — the
 
 ## Other tokens
 
-The SDK exposes a small surface of `--wb-*` variables (background, scrollbar, transitions) plus the larger `--ax-*` design-token set re-exported from `@workflowbuilder/ui`. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map.
+The SDK exposes its own `--wb-*` variables (background, scrollbar, transitions) plus the larger `--wb-*` design-token set re-exported from `@workflowbuilder/ui`. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map.
diff --git a/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx b/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx
index 490e01ff3..0c7437fa5 100644
--- a/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx
+++ b/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx
@@ -24,21 +24,21 @@ The UI is powered by CSS custom properties (tokens) for colors, typography, spac
 
 Example token categories:
 
-- **UI backgrounds:** `--ax-ui-bg-primary-default`, `--ax-ui-bg-secondary-default`, `--ax-ui-bg-tertiary-default`
-- **Text:** `--ax-txt-primary-default`, `--ax-txt-secondary-default`, `--ax-txt-tertiary-default`
-- **Node:** `--ax-node-bg-primary-default`, `--ax-node-stroke-primary-default`, `--ax-node-icon-primary-default`
-- **Buttons:** `--ax-button-primary-bg-default`, `--ax-button-gray-bg-default`
-- **Spacing:** `--ax-token-spacing-spacing-4`, `--ax-token-spacing-spacing-8`, ..., `--ax-token-spacing-spacing-32`
-- **Border radius:** `--ax-token-radius-element-4`, `--ax-token-radius-element-8`, ..., `--ax-token-radius-element-24`
-- **Shadows:** `--ax-token-shadow-shadow-xs-*`, `--ax-token-shadow-shadow-s-*`, ..., `--ax-token-shadow-shadow-xl-*`
+- **UI backgrounds:** `--wb-ui-bg-base`, `--wb-ui-bg-elevated`, `--wb-ui-bg-inset`
+- **Text:** `--wb-ui-text-default`, `--wb-ui-text-subtle-default`, `--wb-ui-text-muted-default`
+- **Node:** `--wb-canvas-node-bg-primary-default`, `--wb-canvas-node-stroke-default`, `--wb-canvas-node-icon-primary`
+- **Buttons:** `--wb-components-button-solid-primary-default`, `--wb-components-button-solid-gray-default`
+- **Spacing:** `--wb-space-50`, `--wb-space-100`, ..., `--wb-space-400`
+- **Border radius:** `--wb-radius-50`, `--wb-radius-100`, ..., `--wb-radius-300`
+- **Shadows:** `--wb-shadow-ui-xs-*`, `--wb-shadow-ui-s-*`, ..., `--wb-shadow-ui-xl-*`
 
 Theming is done by overriding CSS custom properties. Create a CSS file with your overrides and import it after the default theme:
 
 ```css
 :root {
-  --ax-ui-bg-primary-default: #1a1a2e;
-  --ax-txt-primary-default: #e0e0e0;
-  --ax-button-primary-bg-default: #4a90d9;
+  --wb-ui-bg-base: #1a1a2e;
+  --wb-ui-text-default: #e0e0e0;
+  --wb-components-button-solid-primary-default: #4a90d9;
 }
 ```
 
@@ -50,7 +50,7 @@ Workflow Builder supports both light and dark modes out of the box, controlled b
 
 ## Styled components on headless foundations
 
-Workflow Builder ships with a complete default theme, but the underlying components come from [`@workflowbuilder/ui`](/ui-library/overview/), our component library built on the headless [Base UI](https://base-ui.com/) primitives. The styled layer is fully tokenized and isolated in cascade layers, so you can retheme or replace it through the `--ax-*` design tokens without fighting against built-in component styles. The visual layer is fully separate from the functional layer.
+Workflow Builder ships with a complete default theme, but the underlying components come from [`@workflowbuilder/ui`](/ui-library/overview/), our component library built on the headless [Base UI](https://base-ui.com/) primitives. The styled layer is fully tokenized and isolated in cascade layers, so you can retheme or replace it through the `--wb-*` design tokens without fighting against built-in component styles. The visual layer is fully separate from the functional layer.
 
 ## White-label support
 
diff --git a/apps/docs/src/content/docs/ui-library/overview.mdx b/apps/docs/src/content/docs/ui-library/overview.mdx
index 08c1607e0..3015683b6 100644
--- a/apps/docs/src/content/docs/ui-library/overview.mdx
+++ b/apps/docs/src/content/docs/ui-library/overview.mdx
@@ -31,7 +31,7 @@ and typography classes - so the only thing left to add is the design
 tokens:
 
 ```ts
-// Design tokens (the `--ax-*` custom properties).
+// Design tokens (the `--wb-*` custom properties).
 import '@workflowbuilder/ui/tokens.css';
 ```
 
@@ -48,7 +48,7 @@ the tokens:
 ```ts
 // Optional: global typography classes.
 import '@workflowbuilder/ui/styles.css';
-// Design tokens (the `--ax-*` custom properties).
+// Design tokens (the `--wb-*` custom properties).
 import '@workflowbuilder/ui/tokens.css';
 ```
 
@@ -58,12 +58,12 @@ import { DatePicker } from '@workflowbuilder/ui/date-picker';
 
 ## Theming
 
-Design tokens are keyed on `html[data-theme]`, so set it to `light` or `dark` to
+Theme-specific design tokens are keyed on `html[data-theme]`, so set it to `light` or `dark` to
 switch themes (this is also how these docs theme the live examples):
 
 ```html
 <html data-theme="light"></html>
 ```
 
-Override any `--ax-*` token to retune colors, spacing, or radii without touching
+Override any `--wb-*` design token to retune colors, spacing, or radii without touching
 component markup.
diff --git a/docs/how-to-change-css-tokens.md b/docs/how-to-change-css-tokens.md
index 19b57567d..570805c92 100644
--- a/docs/how-to-change-css-tokens.md
+++ b/docs/how-to-change-css-tokens.md
@@ -1,6 +1,6 @@
 # How to change CSS tokens?
 
-All colors, spacing, and radii resolve through `--ax-*` custom properties
+All colors, spacing, and radii resolve through `--wb-*` design-token custom properties
 defined in `@workflowbuilder/ui/tokens.css` (imported by the SDK's stylesheet).
 The shipped defaults live inside the `ui.base` cascade layer, so a plain
 unlayered override in your own stylesheet always wins - import order does not
@@ -12,8 +12,8 @@ Override the variables you care about in any stylesheet of your app:
 
 ```css
 :root {
-  --ax-button-primary-bg-default: #0f62fe;
-  --ax-ui-bg-tertiary-default: #f4f4f4;
+  --wb-components-button-solid-primary-default: #0f62fe;
+  --wb-ui-bg-inset: #f4f4f4;
 }
 ```
 
diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index e11e10f14..57ede8b33 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -212,7 +212,7 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 
 Available `--wb-*` tokens: `--wb-background-color`, `--wb-font-family`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-track-color`).
 
-Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
+Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--wb-*` design-token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
 **Prefix ownership.** The `--wb-*` namespace is shared by two owners, split by convention: names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) belong to the design-token export; everything else under `--wb-*` (like the theming variables above) is defined by the SDK itself. The two sets do not collide because exported names always carry a domain segment. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`).
 
diff --git a/packages/sdk/src/components/form/message/message.module.css b/packages/sdk/src/components/form/message/message.module.css
index db03fbd8b..5de53a5e4 100644
--- a/packages/sdk/src/components/form/message/message.module.css
+++ b/packages/sdk/src/components/form/message/message.module.css
@@ -2,7 +2,7 @@
   --wb-message-control-error-color: var(--ax-public-snackbar-title-color);
   --wb-message-control-error-background-color: var(--ax-public-snackbar-error-background);
   --wb-message-control-spacing: var(--wb-space-100);
-  --wb-message-control-border-radius: var(--wb-space-100);
+  --wb-message-control-border-radius: var(--wb-radius-100);
   --wb-message-control-padding: var(--wb-space-100) var(--wb-space-200);
 }
 
diff --git a/packages/sdk/src/features/app-bar/variables.css b/packages/sdk/src/features/app-bar/variables.css
index fa995e586..470b76402 100644
--- a/packages/sdk/src/features/app-bar/variables.css
+++ b/packages/sdk/src/features/app-bar/variables.css
@@ -1,6 +1,6 @@
 :root {
   --wb-app-bar-background: var(--wb-ui-bg-base);
-  --wb-app-bar-border-radius: var(--wb-space-150);
+  --wb-app-bar-border-radius: var(--wb-canvas-node-shell-radius);
   --wb-app-bar-border-color: var(--wb-ui-stroke-default);
   --wb-app-bar-folder-name-color: var(--wb-ui-text-muted-default);
   --wb-app-bar-diagram-title-color: var(--wb-ui-text-default);
diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css
index b738f524c..44b43f344 100644
--- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css
+++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/icon-placeholder/icon-placeholder.module.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--wb-space-50);
+  border-radius: var(--wb-radius-50);
   outline: 1px dashed var(--wb-ui-stroke-subtle);
   padding: 0.4375rem;
 }
diff --git a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
index e3fa26d3e..dfd4f4f03 100644
--- a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
+++ b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
@@ -9,7 +9,7 @@
   align-self: flex-start;
   text-align: left;
   gap: var(--wb-space-50);
-  border-radius: var(--wb-space-100);
+  border-radius: var(--wb-radius-100);
   background: var(--wb-settings-navigation-background);
 }
 
@@ -29,7 +29,7 @@
   line-height: 100%; /* 14px */
   font-weight: 600;
   font-size: 0.875rem;
-  border-radius: var(--wb-space-100);
+  border-radius: var(--wb-radius-100);
   background: transparent;
   border: none;
   transition: all var(--wb-transition);
diff --git a/packages/tokens/README.md b/packages/tokens/README.md
index 1e0c27db6..3fc3f9fd7 100644
--- a/packages/tokens/README.md
+++ b/packages/tokens/README.md
@@ -1,7 +1,7 @@
 # @workflowbuilder/ui-tokens
 
 Private design-token build for `@workflowbuilder/ui`. Turns Figma-exported tokens into the
-`--ax-*` CSS variables the component library ships (light/dark themes + primitives).
+`--wb-*` CSS variables the component library ships (light/dark themes + primitives).
 
 Not published to npm (`private: true`); consumed only as a workspace build step.
 
@@ -13,9 +13,10 @@ Not published to npm (`private: true`); consumed only as a workspace build step.
 3. `src/eject-tokens.ts` - splits `tokens.json` into one JSON file per theme/primitive set
    under `dist/tokens/`.
 4. `src/tokens-to-css.ts` - runs each set through [Style Dictionary](https://styledictionary.com/)
-   (with `@tokens-studio/sd-transforms`) to emit `dist/<theme>.css` files scoped to
-   `html[data-theme='light']` / `html[data-theme='dark']`. A broken token reference fails
-   the build (`brokenReferences: 'throw'`).
+   (with `@tokens-studio/sd-transforms`) to emit `dist/<theme>.css` files. Canvas is scoped
+   to `:root`; Tokens and Effects are scoped to `html[data-theme='light']` or
+   `html[data-theme='dark']`. Font-size, space, radius, and size primitives are emitted in rem.
+   A broken token reference fails the build (`brokenReferences: 'throw'`).
 5. `src/generate-css-bundle.ts` - inlines the primitive and theme CSS into a single
    self-contained `dist/tokens.css` (no `@import`, so the file survives being copied out
    alone).
@@ -24,8 +25,8 @@ Not published to npm (`private: true`); consumed only as a workspace build step.
 as `tokens.json` exports them (e.g. `Tokens/Dark`); a name mismatch fails the build with
 the available keys listed.
 
-`packages/ui`'s build copies `dist/tokens.css` (and the primitive CSS files) out of this
-package's `dist/` and re-exports them as `@workflowbuilder/ui/tokens.css` - see
+`packages/ui`'s build copies `dist/tokens.css` out of this package's `dist/` and re-exports
+it as `@workflowbuilder/ui/tokens.css` - see
 `packages/ui/vite.config.mts`.
 
 ## Build
@@ -64,7 +65,7 @@ both errors:
    no CSS definition by design — their usage sites carry a
    `stylelint-disable-next-line` comment with the reason.
 2. `wb/no-system-token-fallbacks` (`tools/stylelint/no-system-token-fallbacks.mjs`)
-   — no fallbacks on `var(--wb-…)` / `var(--ax-…)`; a fallback silently masks
+   — no fallbacks on `var(--wb-…)` / `var(--ax-public-…)`; a fallback silently masks
    exactly the typos rule 1 exists to catch. Genuine exceptions use the
    standard mechanism with a mandatory reason:
    `/* stylelint-disable-next-line wb/no-system-token-fallbacks -- reason */`.
diff --git a/packages/tokens/config.ts b/packages/tokens/config.ts
index 5f498808e..891cf15a7 100644
--- a/packages/tokens/config.ts
+++ b/packages/tokens/config.ts
@@ -5,6 +5,8 @@ import { Config } from './src/types';
 export const config: Config = {
   primitives: ['Primitives/Mode 1'],
   themes: [
+    // Canvas is root-scoped, not a theme: it sits here because only theme
+    // builds include the primitive sources it references.
     {
       set: 'Canvas/value',
       selector: ':root',
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
index 2f22cc6e7..c50a4934d 100644
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -14,10 +14,19 @@ import { assertNoValueCollisions } from './validate-collisions';
 fs.rmSync(OUTPUT_DIR, { recursive: true, force: true });
 
 const manifest = buildManifest();
+const configuredSets = [
+  ...manifest.primitives.map(({ key }) => ({ key, selector: ':root' })),
+  ...manifest.themes.map(({ key, selector }) => ({ key, selector })),
+];
+const setKeysBySelector = new Map<string, string[]>();
+for (const { key, selector } of configuredSets) {
+  setKeysBySelector.set(selector, [...(setKeysBySelector.get(selector) ?? []), key]);
+}
 
 assertNoValueCollisions(
   tokens,
-  [...manifest.primitives, ...manifest.themes].map((entry) => entry.key),
+  configuredSets.map((entry) => entry.key),
+  [...setKeysBySelector.values()],
 );
 
 ejectTokens(manifest);
diff --git a/packages/tokens/src/tokens-to-css.ts b/packages/tokens/src/tokens-to-css.ts
index 8816df827..fd1d0e254 100644
--- a/packages/tokens/src/tokens-to-css.ts
+++ b/packages/tokens/src/tokens-to-css.ts
@@ -10,8 +10,33 @@ register(StyleDictionary);
 StyleDictionary.registerTransform({
   name: 'wb/font-size-rem',
   type: 'value',
-  filter: (token) => token.path.includes('font-size'),
-  transform: (token) => `${Number.parseFloat(String(token.value)) / 16}rem`,
+  filter: (token) => token.path[1] === 'font-size',
+  transform: (token) => {
+    const value = String(token.value);
+    const match = /^(-?[\d.]+)px$/.exec(value);
+    if (!match) {
+      throw new Error(
+        `wb/font-size-rem expected '${token.path.join('/')}' to use px, received ${JSON.stringify(value)}`,
+      );
+    }
+    return `${Number.parseFloat(match[1]) / 16}rem`;
+  },
+});
+
+StyleDictionary.registerTransform({
+  name: 'wb/dimension-rem',
+  type: 'value',
+  filter: (token) => ['space', 'radius', 'size'].includes(token.path[1]),
+  transform: (token) => {
+    const value = String(token.value);
+    const match = /^(-?[\d.]+)px$/.exec(value);
+    if (!match) {
+      throw new Error(
+        `wb/dimension-rem expected '${token.path.join('/')}' to use px, received ${JSON.stringify(value)}`,
+      );
+    }
+    return `${Number.parseFloat(match[1]) / 16}rem`;
+  },
 });
 
 export async function tokensToCss(manifest: Manifest) {
@@ -58,7 +83,7 @@ function createSDConfig({ fileName, selector, source, filter }: SDConfigParams)
     platforms: {
       css: {
         transformGroup: 'tokens-studio',
-        transforms: ['name/kebab', 'wb/font-size-rem'],
+        transforms: ['name/kebab', 'wb/font-size-rem', 'wb/dimension-rem'],
         buildPath: OUTPUT_DIR,
         options: {
           outputReferences: true,
diff --git a/packages/tokens/src/validate-collisions.spec.ts b/packages/tokens/src/validate-collisions.spec.ts
index 50037a1b9..8feae94a1 100644
--- a/packages/tokens/src/validate-collisions.spec.ts
+++ b/packages/tokens/src/validate-collisions.spec.ts
@@ -68,4 +68,34 @@ describe('assertNoValueCollisions', () => {
 
     expect(() => assertNoValueCollisions(tokens, ['Primitives/Mode 1'])).toThrow(/--ax-colors-acc7-100/);
   });
+
+  it('throws when sets in one CSS scope define the same name', () => {
+    const tokens = {
+      'Tokens/Dark': {
+        wb: { shadow: { color: { value: '#111111', type: 'color' } } },
+      },
+      'Effects/dark': {
+        wb: { shadow: { color: { value: '#222222', type: 'color' } } },
+      },
+    };
+
+    expect(() =>
+      assertNoValueCollisions(tokens, ['Tokens/Dark', 'Effects/dark'], [['Tokens/Dark', 'Effects/dark']]),
+    ).toThrow(/'Tokens\/Dark' and 'Effects\/dark' both emit --wb-shadow-color/);
+  });
+
+  it('accepts disjoint names from sets in one CSS scope', () => {
+    const tokens = {
+      'Tokens/Light': {
+        wb: { ui: { background: { value: '#ffffff', type: 'color' } } },
+      },
+      'Effects/light': {
+        wb: { shadow: { color: { value: '#111111', type: 'color' } } },
+      },
+    };
+
+    expect(() =>
+      assertNoValueCollisions(tokens, ['Tokens/Light', 'Effects/light'], [['Tokens/Light', 'Effects/light']]),
+    ).not.toThrow();
+  });
 });
diff --git a/packages/tokens/src/validate-collisions.ts b/packages/tokens/src/validate-collisions.ts
index 0dd2cdd9a..58a4f3fbc 100644
--- a/packages/tokens/src/validate-collisions.ts
+++ b/packages/tokens/src/validate-collisions.ts
@@ -5,14 +5,14 @@
  * emit `--ax-colors-acc7-100` and silently overwrite each other in the
  * built CSS.
  *
- * Same-value collisions warn (today's export carries ten of them, all
- * benign); different-value collisions throw, because the emitted value
- * would then depend on object iteration order.
+ * Same-value collisions warn; different-value collisions throw, because the
+ * emitted value would then depend on object iteration order.
  */
 import StyleDictionary, { TransformedToken } from 'style-dictionary';
 
 type TokenLeaf = { value: unknown; type: string };
 type TokenNode = TokenLeaf | { [key: string]: TokenNode };
+type TokenEntry = { path: string; value: unknown };
 
 type CssNameCollision = {
   cssName: string;
@@ -24,7 +24,7 @@ function isLeaf(node: TokenNode): node is TokenLeaf {
   return typeof node === 'object' && node !== null && 'value' in node && 'type' in node;
 }
 
-function collectLeaves(node: TokenNode, path: string[], out: { path: string; value: unknown }[]) {
+function collectLeaves(node: TokenNode, path: string[], out: TokenEntry[]) {
   if (isLeaf(node)) {
     out.push({ path: path.join('/'), value: node.value });
     return;
@@ -42,14 +42,17 @@ function toCssName(tokenPath: string): string {
   return `--${kebabName({ path: tokenPath.split('/') } as TransformedToken, {}, {})}`;
 }
 
-export function findCssNameCollisions(tokenSet: Record<string, TokenNode>): CssNameCollision[] {
-  const leaves: { path: string; value: unknown }[] = [];
+function getLeaves(tokenSet: Record<string, TokenNode>): TokenEntry[] {
+  const leaves: TokenEntry[] = [];
   for (const [key, node] of Object.entries(tokenSet)) {
     collectLeaves(node, [key], leaves);
   }
+  return leaves;
+}
 
-  const byCssName = new Map<string, { path: string; value: unknown }[]>();
-  for (const leaf of leaves) {
+export function findCssNameCollisions(tokenSet: Record<string, TokenNode>): CssNameCollision[] {
+  const byCssName = new Map<string, TokenEntry[]>();
+  for (const leaf of getLeaves(tokenSet)) {
     const cssName = toCssName(leaf.path);
     byCssName.set(cssName, [...(byCssName.get(cssName) ?? []), leaf]);
   }
@@ -69,7 +72,11 @@ export function findCssNameCollisions(tokenSet: Record<string, TokenNode>): CssN
  * the known Figma-side duplicates don't block builds until design removes
  * them at the source.
  */
-export function assertNoValueCollisions(tokens: Record<string, unknown>, setKeys: string[]): void {
+export function assertNoValueCollisions(
+  tokens: Record<string, unknown>,
+  setKeys: string[],
+  cssScopeGroups: string[][] = [],
+): void {
   for (const setKey of setKeys) {
     const tokenSet = tokens[setKey];
     if (!tokenSet) {
@@ -98,4 +105,30 @@ export function assertNoValueCollisions(tokens: Record<string, unknown>, setKeys
       );
     }
   }
+
+  for (const setKeysInScope of cssScopeGroups) {
+    const setsByCssName = new Map<string, string[]>();
+    for (const setKey of setKeysInScope) {
+      const tokenSet = tokens[setKey];
+      if (!tokenSet) {
+        throw new Error(`tokens.json does not export a '${setKey}' set`);
+      }
+      const cssNames = new Set(getLeaves(tokenSet as Record<string, TokenNode>).map((entry) => toCssName(entry.path)));
+      for (const cssName of cssNames) {
+        setsByCssName.set(cssName, [...(setsByCssName.get(cssName) ?? []), setKey]);
+      }
+    }
+
+    const collisions = [...setsByCssName.entries()].filter(([, owners]) => owners.length > 1);
+    if (collisions.length > 0) {
+      throw new Error(
+        collisions
+          .map(
+            ([cssName, owners]) =>
+              `${owners.map((owner) => `'${owner}'`).join(' and ')} both emit ${cssName} under one CSS selector — the winner would depend on bundle order`,
+          )
+          .join('\n'),
+      );
+    }
+  }
 }
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 3ea8c2844..7ba403215 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -88,7 +88,7 @@ You can override them:
 
 ```css
 :root {
-  --ax-ui-bg-primary-default: #40ba12;
+  --wb-ui-bg-base: #40ba12;
 }
 ```
 
diff --git a/packages/ui/css-layers.md b/packages/ui/css-layers.md
index 8d3172566..d33d539ce 100644
--- a/packages/ui/css-layers.md
+++ b/packages/ui/css-layers.md
@@ -51,9 +51,9 @@ the identical `@layer ui.base, ui.component;` statement.
 ## Variable defaults
 
 `:root` blocks with variable defaults (`--ax-public-*` in component sources,
-the `--ax-*` design tokens copied from `@workflowbuilder/ui-tokens`) ship
+the `--wb-*` design tokens copied from `@workflowbuilder/ui-tokens`) ship
 inside `ui.base`. Layered declarations lose to any unlayered consumer CSS, so
-a plain `:root { --ax-…: … }` override in an app always wins - even when a
+a plain `:root { --wb-…: … }` override in an app always wins - even when a
 lazily loaded component stylesheet arrives after it. Sources keep the plain
 top-level `:root { … }` convention; the build does the wrapping
 (`postcss-layer-root-defaults.mts` for component CSS, the token-copy transform
diff --git a/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css b/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
index 4a7bcbeea..ce3fcb3c2 100644
--- a/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
+++ b/packages/ui/src/components/button/nav-button/styles/nav-button-border-radius.module.css
@@ -1,6 +1,6 @@
 :root {
-  --ax-public-button-border-radius-xx-small: var(--wb-space-50);
-  --ax-public-button-border-radius-xxx-small: var(--wb-space-50);
+  --ax-public-button-border-radius-xx-small: var(--wb-radius-50);
+  --ax-public-button-border-radius-xxx-small: var(--wb-radius-50);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/button/styles/border-radius.module.css b/packages/ui/src/components/button/styles/border-radius.module.css
index b0b83e1e8..acec76951 100644
--- a/packages/ui/src/components/button/styles/border-radius.module.css
+++ b/packages/ui/src/components/button/styles/border-radius.module.css
@@ -1,9 +1,9 @@
 :root {
-  --ax-public-button-border-radius-extra-large: var(--wb-space-100);
-  --ax-public-button-border-radius-large: var(--wb-space-100);
-  --ax-public-button-border-radius-medium: var(--wb-space-75);
-  --ax-public-button-border-radius-small: var(--wb-space-50);
-  --ax-public-button-border-radius-extra-small: var(--wb-space-50);
+  --ax-public-button-border-radius-extra-large: var(--wb-radius-100);
+  --ax-public-button-border-radius-large: var(--wb-radius-100);
+  --ax-public-button-border-radius-medium: var(--wb-radius-75);
+  --ax-public-button-border-radius-small: var(--wb-radius-50);
+  --ax-public-button-border-radius-extra-small: var(--wb-radius-50);
 
   --ax-public-button-border-radius-circle: var(--wb-radius-full);
 }
diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css
index e16a03e79..86ae2297f 100644
--- a/packages/ui/src/components/checkbox/checkbox.module.css
+++ b/packages/ui/src/components/checkbox/checkbox.module.css
@@ -7,9 +7,9 @@
   --ax-public-checkbox-icon-size-small: 0.75rem;
   --ax-public-checkbox-icon-size-extra-small: 0.625rem;
 
-  --ax-public-checkbox-border-radius-medium: var(--wb-space-50);
-  --ax-public-checkbox-border-radius-small: var(--wb-space-50);
-  --ax-public-checkbox-border-radius-extra-small: var(--wb-space-50);
+  --ax-public-checkbox-border-radius-medium: var(--wb-radius-50);
+  --ax-public-checkbox-border-radius-small: var(--wb-radius-50);
+  --ax-public-checkbox-border-radius-extra-small: var(--wb-radius-50);
 
   --ax-public-checkbox-border-width: 0.0625rem;
 
diff --git a/packages/ui/src/components/edge/edge-label/edge-label-size.module.css b/packages/ui/src/components/edge/edge-label/edge-label-size.module.css
index ce50425ba..b6953ca68 100644
--- a/packages/ui/src/components/edge/edge-label/edge-label-size.module.css
+++ b/packages/ui/src/components/edge/edge-label/edge-label-size.module.css
@@ -1,19 +1,24 @@
 :root {
-  --ax-public-edge-label-medium-label-padding: var(--wb-space-150) var(--wb-space-150);
-  --ax-public-edge-label-small-label-padding: var(--wb-space-125) var(--wb-space-125);
-  --ax-public-edge-label-extra-small-label-padding: var(--wb-space-112) var(--wb-space-125);
-
-  --ax-public-edge-label-medium-icon-padding: var(--wb-space-112);
-  --ax-public-edge-label-small-icon-padding: var(--wb-space-100);
-  --ax-public-edge-label-extra-small-icon-padding: var(--wb-space-87);
-
-  --ax-public-edge-label-medium-content-padding: var(--wb-space-112) var(--wb-space-150);
-  --ax-public-edge-label-small-content-padding: var(--wb-space-100) var(--wb-space-125);
-  --ax-public-edge-label-extra-small-content-padding: var(--wb-space-87) var(--wb-space-125);
-
-  --ax-public-edge-label-medium-border-radius: var(--wb-space-75);
-  --ax-public-edge-label-small-border-radius: var(--wb-space-50);
-  --ax-public-edge-label-extra-small-border-radius: var(--wb-space-50);
+  --ax-public-edge-label-medium-label-padding: var(--wb-canvas-edge-label-m-v-pad-1)
+    var(--wb-canvas-edge-label-m-h-pad-1);
+  --ax-public-edge-label-small-label-padding: var(--wb-canvas-edge-label-s-v-pad-1)
+    var(--wb-canvas-edge-label-s-h-pad-1);
+  --ax-public-edge-label-extra-small-label-padding: var(--wb-canvas-edge-label-xs-v-pad-1) var(--wb-space-125);
+
+  --ax-public-edge-label-medium-icon-padding: var(--wb-canvas-edge-label-m-v-pad-2);
+  --ax-public-edge-label-small-icon-padding: var(--wb-canvas-edge-label-s-v-pad-2);
+  --ax-public-edge-label-extra-small-icon-padding: var(--wb-canvas-edge-label-xs-v-pad-2);
+
+  --ax-public-edge-label-medium-content-padding: var(--wb-canvas-edge-label-m-v-pad-2)
+    var(--wb-canvas-edge-label-m-h-pad-2);
+  --ax-public-edge-label-small-content-padding: var(--wb-canvas-edge-label-s-v-pad-2)
+    var(--wb-canvas-edge-label-s-h-pad-2);
+  --ax-public-edge-label-extra-small-content-padding: var(--wb-canvas-edge-label-xs-v-pad-2)
+    var(--wb-canvas-edge-label-xs-h-pad-2);
+
+  --ax-public-edge-label-medium-border-radius: var(--wb-canvas-edge-label-m-radius);
+  --ax-public-edge-label-small-border-radius: var(--wb-canvas-edge-label-s-radius);
+  --ax-public-edge-label-extra-small-border-radius: var(--wb-canvas-edge-label-xs-radius);
 
   --ax-public-edge-label-medium-icon-size: 1.125rem;
   --ax-public-edge-label-small-icon-size: 1rem;
diff --git a/packages/ui/src/components/edge/edge-label/edge-label.module.css b/packages/ui/src/components/edge/edge-label/edge-label.module.css
index 94bf89c7d..eafec54a9 100644
--- a/packages/ui/src/components/edge/edge-label/edge-label.module.css
+++ b/packages/ui/src/components/edge/edge-label/edge-label.module.css
@@ -1,10 +1,10 @@
 :root {
-  --ax-public-edge-label-gap: var(--wb-space-100);
+  --ax-public-edge-label-gap: var(--wb-canvas-edge-label-gap);
   --ax-public-edge-background-color: var(--wb-ui-bg-inset);
   --ax-public-edge-label-color: var(--wb-ui-text-default);
 
-  --ax-public-edge-label-border-size: var(--wb-space-25);
-  --ax-public-edge-label-border-size-selected: var(--wb-space-37);
+  --ax-public-edge-label-border-size: var(--wb-canvas-edge-stroke-regular);
+  --ax-public-edge-label-border-size-selected: var(--wb-canvas-edge-stroke-bold);
 
   --ax-public-edge-label-border-style: solid;
   --ax-public-edge-label-border-color: var(--wb-canvas-edge-stroke-default);
diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css
index 08df952b6..a57ac1199 100644
--- a/packages/ui/src/components/modal/modal.module.css
+++ b/packages/ui/src/components/modal/modal.module.css
@@ -1,6 +1,6 @@
 :root {
   --ax-public-modal-width: 26.25rem;
-  --ax-public-modal-border-radius: var(--wb-space-200);
+  --ax-public-modal-border-radius: var(--wb-radius-200);
   --ax-public-modal-padding: var(--wb-space-200);
 
   --ax-public-modal-description-size: 0.625rem;
@@ -28,14 +28,14 @@
   --ax-public-modal-large-title-line-height: 130%;
   --ax-public-modal-large-icon-padding: var(--wb-space-137);
 
-  --ax-public-modal-box-shadow: var(--wb-space-0) var(--wb-space-200) var(--wb-space-400) var(--wb-space-negative-100)
-    var(--wb-shadow-ui-color);
+  --ax-public-modal-box-shadow: var(--wb-shadow-ui-l-x) var(--wb-shadow-ui-l-y) var(--wb-shadow-ui-l-blur)
+    var(--wb-shadow-ui-l-spread) var(--wb-shadow-ui-color);
 
   --ax-public-modal-gap: var(--wb-space-150);
   --ax-public-modal-gap-large: var(--wb-space-150);
 
-  --ax-public-modal-icon-border-radius: var(--wb-space-75);
-  --ax-public-modal-icon-border-radius-large: var(--wb-space-100);
+  --ax-public-modal-icon-border-radius: var(--wb-radius-75);
+  --ax-public-modal-icon-border-radius-large: var(--wb-radius-100);
 
   --ax-public-modal-content-gap: 0.25rem;
 }
diff --git a/packages/ui/src/components/node/node-icon/node-icon.module.css b/packages/ui/src/components/node/node-icon/node-icon.module.css
index 7ba5f0ffd..b87a08b32 100644
--- a/packages/ui/src/components/node/node-icon/node-icon.module.css
+++ b/packages/ui/src/components/node/node-icon/node-icon.module.css
@@ -1,6 +1,6 @@
 :root {
   --ax-public-node-icon-border-size: 0.0625rem;
-  --ax-public-node-icon-border-radius: var(--wb-space-100);
+  --ax-public-node-icon-border-radius: var(--wb-canvas-node-head-icon-radius);
   --ax-public-node-icon-padding: var(--wb-space-125);
 
   --ax-public-node-icon-color: var(--wb-canvas-node-icon-primary);
diff --git a/packages/ui/src/components/node/node-panel/node-panel.module.css b/packages/ui/src/components/node/node-panel/node-panel.module.css
index b58edbd38..ae61c00aa 100644
--- a/packages/ui/src/components/node/node-panel/node-panel.module.css
+++ b/packages/ui/src/components/node/node-panel/node-panel.module.css
@@ -5,7 +5,7 @@
 
   --ax-public-node-padding: var(--wb-space-100);
   --ax-public-node-gap: var(--wb-space-100);
-  --ax-public-node-border-radius: var(--wb-space-150);
+  --ax-public-node-border-radius: var(--wb-canvas-node-head-radius);
 
   --ax-public-node-border-color: var(--wb-canvas-node-stroke-default);
   --ax-public-node-background-color: var(--wb-canvas-node-bg-primary-default);
@@ -13,8 +13,8 @@
   --ax-public-node-border-hover-color: var(--wb-canvas-node-stroke-hover);
 
   --ax-public-node-border-color-selected: var(--wb-canvas-node-stroke-hover);
-  --ax-public-node-box-shadow-selected: var(--wb-space-0) var(--wb-space-0) var(--wb-space-0) var(--wb-space-50)
-    var(--wb-canvas-node-focus-active);
+  --ax-public-node-box-shadow-selected: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y)
+    var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread) var(--wb-canvas-node-focus-active);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/segment-picker/border-radius-size.module.css b/packages/ui/src/components/segment-picker/border-radius-size.module.css
index cd509cb23..2413b3d6c 100644
--- a/packages/ui/src/components/segment-picker/border-radius-size.module.css
+++ b/packages/ui/src/components/segment-picker/border-radius-size.module.css
@@ -1,11 +1,11 @@
 :root {
-  --ax-public-segment-picker-border-radius-extra-large: var(--wb-space-150);
-  --ax-public-segment-picker-border-radius-large: var(--wb-space-150);
-  --ax-public-segment-picker-border-radius-medium: var(--wb-space-125);
-  --ax-public-segment-picker-border-radius-small: var(--wb-space-100);
-  --ax-public-segment-picker-border-radius-extra-small: var(--wb-space-100);
-  --ax-public-segment-picker-border-radius-xx-small: var(--wb-space-100);
-  --ax-public-segment-picker-border-radius-xxx-small: var(--wb-space-100);
+  --ax-public-segment-picker-border-radius-extra-large: var(--wb-radius-150);
+  --ax-public-segment-picker-border-radius-large: var(--wb-radius-150);
+  --ax-public-segment-picker-border-radius-medium: var(--wb-radius-125);
+  --ax-public-segment-picker-border-radius-small: var(--wb-radius-100);
+  --ax-public-segment-picker-border-radius-extra-small: var(--wb-radius-100);
+  --ax-public-segment-picker-border-radius-xx-small: var(--wb-radius-100);
+  --ax-public-segment-picker-border-radius-xxx-small: var(--wb-radius-100);
 }
 
 @layer ui.component {
diff --git a/packages/ui/src/components/snackbar/snackbar.module.css b/packages/ui/src/components/snackbar/snackbar.module.css
index 5b73d91cb..77f338eae 100644
--- a/packages/ui/src/components/snackbar/snackbar.module.css
+++ b/packages/ui/src/components/snackbar/snackbar.module.css
@@ -1,7 +1,7 @@
 :root {
   --ax-public-snackbar-border-size: 0.0625rem;
   --ax-public-snackbar-padding: var(--wb-space-200) var(--wb-space-200);
-  --ax-public-snackbar-border-radius: var(--wb-space-100);
+  --ax-public-snackbar-border-radius: var(--wb-radius-100);
   --ax-public-snackbar-content-gap: var(--wb-space-150);
 
   --ax-public-snackbar-width: 31.25rem;
diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css
index 8655a126a..4cc184bd8 100644
--- a/packages/ui/src/components/tooltip/tooltip.module.css
+++ b/packages/ui/src/components/tooltip/tooltip.module.css
@@ -2,7 +2,7 @@
   --ax-public-tooltip-default-background: var(--wb-components-tooltip-bg-default);
   --ax-public-tooltip-blue-background: var(--wb-components-tooltip-bg-info);
   --ax-public-tooltip-padding: var(--wb-space-100) var(--wb-space-150);
-  --ax-public-tooltip-radius-size: var(--wb-space-100);
+  --ax-public-tooltip-radius-size: var(--wb-radius-100);
   --ax-public-tooltip-text-color: var(--wb-ui-text-tooltip-default);
   --ax-public-tooltip-blue-text-color: var(--wb-ui-text-tooltip-accent-default);
 }
diff --git a/packages/ui/src/shared/styles/input-size.module.css b/packages/ui/src/shared/styles/input-size.module.css
index a662c72d5..6a050f857 100644
--- a/packages/ui/src/shared/styles/input-size.module.css
+++ b/packages/ui/src/shared/styles/input-size.module.css
@@ -3,9 +3,9 @@
   --ax-public-input-padding-medium: var(--wb-space-125) var(--wb-space-150);
   --ax-public-input-padding-small: var(--wb-space-100) var(--wb-space-150);
 
-  --ax-public-input-border-radius-large: var(--wb-space-100);
-  --ax-public-input-border-radius-medium: var(--wb-space-75);
-  --ax-public-input-border-radius-small: var(--wb-space-75);
+  --ax-public-input-border-radius-large: var(--wb-radius-100);
+  --ax-public-input-border-radius-medium: var(--wb-radius-75);
+  --ax-public-input-border-radius-small: var(--wb-radius-75);
 
   --ax-public-input-gap-large: var(--wb-space-100);
   --ax-public-input-gap-medium: var(--wb-space-100);
diff --git a/packages/ui/src/shared/styles/list-box.module.css b/packages/ui/src/shared/styles/list-box.module.css
index d7d2b3aed..982d3fc84 100644
--- a/packages/ui/src/shared/styles/list-box.module.css
+++ b/packages/ui/src/shared/styles/list-box.module.css
@@ -1,8 +1,8 @@
 :root {
   --ax-public-list-box-background-color: var(--wb-ui-bg-base);
-  --ax-public-list-box-border-radius: var(--wb-space-100);
-  --ax-public-list-box-box-shadow: var(--wb-space-0) var(--wb-space-100) var(--wb-space-200) var(--wb-space-negative-50)
-    var(--wb-shadow-ui-color);
+  --ax-public-list-box-border-radius: var(--wb-radius-100);
+  --ax-public-list-box-box-shadow: var(--wb-shadow-ui-s-x) var(--wb-shadow-ui-s-y) var(--wb-shadow-ui-s-blur)
+    var(--wb-shadow-ui-s-spread) var(--wb-shadow-ui-color);
   --ax-public-list-box-padding: var(--wb-space-50) var(--wb-space-50);
   --ax-public-list-box-gap: var(--wb-space-50);
 }
diff --git a/packages/ui/src/shared/styles/list-item.module.css b/packages/ui/src/shared/styles/list-item.module.css
index 8a7fa2e8a..b6e77d0ca 100644
--- a/packages/ui/src/shared/styles/list-item.module.css
+++ b/packages/ui/src/shared/styles/list-item.module.css
@@ -1,17 +1,17 @@
 :root {
-  --ax-public-list-item-background-color: var(--wb-ui-bg-inset);
+  --ax-public-list-item-background-color: var(--wb-ui-bg-fill-hover);
   --ax-public-list-item-background-color-selected: var(--wb-colors-acc1-600);
   --ax-public-list-item-color-selected: var(--wb-ui-text-onaccent-default);
   --ax-public-list-item-color: var(--wb-ui-text-default);
 
-  --ax-public-list-item-background-color-focus: var(--wb-ui-bg-inset);
+  --ax-public-list-item-background-color-focus: var(--wb-ui-bg-fill-hover);
   --ax-public-list-item-outline-color-focus: var(--wb-ui-stroke-focus);
   --ax-public-list-item-outline-size: 0.0625rem;
 
   --ax-public-list-item-color-destructive: var(--wb-ui-text-critical-default);
   --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-10);
   --ax-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-20);
-  --ax-public-list-border-radius: var(--wb-space-75);
+  --ax-public-list-border-radius: var(--wb-radius-75);
 }
 
 @layer ui.base {
diff --git a/packages/ui/vite.config.mts b/packages/ui/vite.config.mts
index a255a4642..c736f77e0 100644
--- a/packages/ui/vite.config.mts
+++ b/packages/ui/vite.config.mts
@@ -57,7 +57,7 @@ function isExternal(id: string): boolean {
 }
 
 function copyTokenStyles() {
-  const files = ['tokens.css', 'primitives-mode-1.css'];
+  const files = ['tokens.css'];
 
   for (const file of files) {
     if (!existsSync(path.resolve(rootDirectory, `../tokens/dist/${file}`))) {