diff --git a/frontend/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch b/frontend/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch
new file mode 100644
index 000000000..e4c164d77
--- /dev/null
+++ b/frontend/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch
@@ -0,0 +1,99 @@
+diff --git a/lib/StyleDictionary.js b/lib/StyleDictionary.js
+index 150e81bdac15e505b74d7f1453c7b7c543fc2b35..c5c695cfb04abc835e457027291b1522bdbdb795 100644
+--- a/lib/StyleDictionary.js
++++ b/lib/StyleDictionary.js
+@@ -14,7 +14,7 @@
+ import JSON5 from 'json5';
+ import { extname } from 'path-unified';
+ import { fs } from 'style-dictionary/fs';
+-import chalk from 'chalk';
++import { chalk } from './penpotPatches.js';
+ import { dirname } from 'path-unified';
+ 
+ import combineJSON from './utils/combineJSON.js';
+@@ -36,9 +36,9 @@ import transformObject from './transform/object.js';
+ import transformConfig from './transform/config.js';
+ import performActions from './performActions.js';
+ import filterTokens from './filterTokens.js';
+-import cleanFiles from './cleanFiles.js';
+-import cleanDirs from './cleanDirs.js';
+-import cleanActions from './cleanActions.js';
++const cleanFiles = {};
++const cleanDirs = {};
++const cleanActions = {};
+ 
+ /**
+  * @typedef {import('../types/Volume.d.ts').Volume} Volume
+@@ -221,7 +221,6 @@ export default class StyleDictionary extends Register {
+           // Windows FS compatibility. If in browser, we use an FS shim which doesn't require this Windows workaround
+           _filePath = new URL(`file:///${_filePath}`).href;
+         }
+-        options = (await import(/* @vite-ignore */ /* webpackIgnore: true */ _filePath)).default;
+       }
+     } else {
+       options = config;
+diff --git a/lib/chalk.js b/lib/chalk.js
+new file mode 100644
+index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
+diff --git a/lib/penpotPatches.js b/lib/penpotPatches.js
+new file mode 100644
+index 0000000000000000000000000000000000000000..d7012e19f0ce98b0dfddee22244d40415e77146c
+--- /dev/null
++++ b/lib/penpotPatches.js
+@@ -0,0 +1,21 @@
++export const globSync = () => {};
++
++export const chalk = new Proxy(
++  {},
++  {
++    get: () => {
++      return new Proxy(() => {}, {
++        get: () => {
++          return (string) => string;
++        },
++        apply: () => {
++          return new Proxy(() => {}, {
++            get: () => {
++              return (string) => string;
++            },
++          });
++        },
++      });
++    },
++  },
++);
+diff --git a/lib/transform/config.js b/lib/transform/config.js
+index 44efa824d6633e05748ccad114512c612ecf32bd..59bc28f4dab48e533b507ad94d2b99005d7a22c5 100644
+--- a/lib/transform/config.js
++++ b/lib/transform/config.js
+@@ -15,7 +15,7 @@ import isPlainObject from 'is-plain-obj';
+ import deepExtend from '../utils/deepExtend.js';
+ import GroupMessages from '../utils/groupMessages.js';
+ import { deepmerge } from '../utils/deepmerge.js';
+-import chalk from 'chalk';
++import { chalk } from '../penpotPatches.js';
+ 
+ /**
+  * @typedef {import('../StyleDictionary.js').default} StyleDictionary
+diff --git a/lib/utils/combineJSON.js b/lib/utils/combineJSON.js
+index f988886175b730a1a0db4855eaccbdd2add4115b..90e0a5e592701d3fc27324795a8bd90ca457814c 100644
+--- a/lib/utils/combineJSON.js
++++ b/lib/utils/combineJSON.js
+@@ -12,7 +12,7 @@
+  */
+ 
+ import JSON5 from 'json5';
+-import { globSync } from '@bundled-es-modules/glob';
++import { globSync } from '../penpotPatches.js';
+ import { extname } from 'path-unified';
+ import { fs } from 'style-dictionary/fs';
+ import { resolve } from '../resolve.js';
+@@ -101,8 +101,6 @@ export default async function combineJSON(
+             // Windows FS compatibility. If in browser, we use an FS shim which doesn't require this Windows workaround
+             resolvedPath = new URL(`file:///${resolvedPath}`).href;
+           }
+-          file_content = (await import(/* @vite-ignore */ /* webpackIgnore: true */ resolvedPath))
+-            .default;
+         } else {
+           file_content = JSON5.parse(
+             /** @type {string} */ (volume.readFileSync(resolvedPath, 'utf-8')),
diff --git a/frontend/package.json b/frontend/package.json
index 95da9ca77..a373539f9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -90,6 +90,7 @@
     "workerpool": "^9.1.0"
   },
   "dependencies": {
+    "@tokens-studio/sd-transforms": "^0.16.1",
     "date-fns": "^3.3.1",
     "eventsource-parser": "^1.1.2",
     "highlight.js": "^11.9.0",
@@ -106,6 +107,7 @@
     "rxjs": "8.0.0-alpha.14",
     "sax": "^1.3.0",
     "source-map-support": "^0.5.21",
+    "style-dictionary": "patch:style-dictionary@npm%3A4.0.0-prerelease.36#~/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch",
     "tdigest": "^0.1.2",
     "ua-parser-js": "^1.0.37",
     "xregexp": "^5.1.1"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 2362d9c19..ef8eb85e3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -26,6 +26,7 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.tokens.core :as wtc]
    [app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [clojure.set :refer [rename-keys union]]
@@ -98,7 +99,8 @@
         selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
-        tokens (mf/deref refs/workspace-tokens)
+        tokens (-> (mf/deref refs/workspace-tokens)
+                   (sd/use-resolved-tokens))
         tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens))
 
         border-radius-tokens (:border-radius tokens-by-type)
diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs
index f9d5e7c5d..03b3d4239 100644
--- a/frontend/src/app/main/ui/workspace/tokens/common.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/common.cljs
@@ -36,12 +36,12 @@
   {::mf/wrap-props false}
   [{:keys [label input-props auto-complete?]}]
   (let [input-props (cond-> input-props
+                      :always camel-keys
                       ;; Disable auto-complete on form fields for proprietary password managers
                       ;; https://github.com/orgs/tokens-studio/projects/69/views/11?pane=issue&itemId=63724204
                       (not auto-complete?) (assoc "data-1p-ignore" true
                                                   "data-lpignore" true
-                                                  :auto-complete "off")
-                      :always camel-keys)]
+                                                  :auto-complete "off"))]
     [:label {:class (stl/css :labeled-input)}
      [:span {:class (stl/css :label)} label]
      [:& :input input-props]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs
index 8cf6174a5..dc86af128 100644
--- a/frontend/src/app/main/ui/workspace/tokens/core.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs
@@ -14,7 +14,9 @@
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.data.workspace.transforms :as dwt]
-   [app.main.store :as st]))
+   [app.main.store :as st]
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
+   [promesa.core :as p]))
 
 ;; Helpers ---------------------------------------------------------------------
 
@@ -32,10 +34,10 @@
   [token shapes token-attributes]
   (some #(token-applied? token % token-attributes) shapes))
 
-(defn resolve-token-value [{:keys [value] :as token}]
-  (if-let [int-or-double (d/parse-double value)]
-    int-or-double
-    (throw (ex-info (str "Implement token value resolve for " value) token))))
+(defn resolve-token-value [{:keys [value resolved-value] :as token}]
+  (or
+   resolved-value
+   (d/parse-double value)))
 
 (defn maybe-resolve-token-value [{:keys [value] :as token}]
   (when value (resolve-token-value token)))
@@ -77,13 +79,15 @@
         shape-ids (->> selected-shapes
                        (eduction
                         (remove #(tokens-applied? token % attributes))
-                        (map :id)))
-        token-value (resolve-token-value token)]
-    (doseq [shape selected-shapes]
-      (st/emit! (on-apply {:token-id (:id token)
-                           :shape-id (:id shape)
-                           :attributes attributes}))
-      (on-update-shape token-value shape-ids attributes))))
+                        (map :id)))]
+    (p/let [sd-tokens (sd/resolve-workspace-tokens+ {:debug? true})]
+      (let [resolved-token (get sd-tokens (:id token))
+            resolved-token-value (resolve-token-value resolved-token)]
+        (doseq [shape selected-shapes]
+          (st/emit! (on-apply {:token-id (:id token)
+                               :shape-id (:id shape)
+                               :attributes attributes}))
+          (on-update-shape resolved-token-value shape-ids attributes))))))
 
 (defn update-shape-radius [value shape-ids]
   (st/emit!
diff --git a/frontend/src/app/main/ui/workspace/tokens/data/example-tokens-set.json b/frontend/src/app/main/ui/workspace/tokens/data/example-tokens-set.json
new file mode 100644
index 000000000..90ae54e75
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/data/example-tokens-set.json
@@ -0,0 +1,580 @@
+{
+  "core": {
+    "dimension": {
+      "scale": {
+        "value": "2",
+        "type": "dimension"
+      },
+      "xs": {
+        "value": "4",
+        "type": "dimension"
+      },
+      "sm": {
+        "value": "{dimension.xs} * {dimension.scale}",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "{dimension.sm} * {dimension.scale}",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "{dimension.md} * {dimension.scale}",
+        "type": "dimension"
+      },
+      "xl": {
+        "value": "{dimension.lg} * {dimension.scale}",
+        "type": "dimension"
+      }
+    },
+    "spacing": {
+      "xs": {
+        "value": "{dimension.xs}",
+        "type": "spacing"
+      },
+      "sm": {
+        "value": "{dimension.sm}",
+        "type": "spacing"
+      },
+      "md": {
+        "value": "{dimension.md}",
+        "type": "spacing"
+      },
+      "lg": {
+        "value": "{dimension.lg}",
+        "type": "spacing"
+      },
+      "xl": {
+        "value": "{dimension.xl}",
+        "type": "spacing"
+      },
+      "multi-value": {
+        "value": "{dimension.sm} {dimension.xl}",
+        "type": "spacing",
+        "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens"
+      }
+    },
+    "borderRadius": {
+      "sm": {
+        "value": "4",
+        "type": "borderRadius"
+      },
+      "lg": {
+        "value": "8",
+        "type": "borderRadius"
+      },
+      "xl": {
+        "value": "16",
+        "type": "borderRadius"
+      },
+      "multi-value": {
+        "value": "{borderRadius.sm} {borderRadius.lg}",
+        "type": "borderRadius",
+        "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values"
+      }
+    },
+    "colors": {
+      "black": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "white": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "gray": {
+        "100": {
+          "value": "#f7fafc",
+          "type": "color"
+        },
+        "200": {
+          "value": "#edf2f7",
+          "type": "color"
+        },
+        "300": {
+          "value": "#e2e8f0",
+          "type": "color"
+        },
+        "400": {
+          "value": "#cbd5e0",
+          "type": "color"
+        },
+        "500": {
+          "value": "#a0aec0",
+          "type": "color"
+        },
+        "600": {
+          "value": "#718096",
+          "type": "color"
+        },
+        "700": {
+          "value": "#4a5568",
+          "type": "color"
+        },
+        "800": {
+          "value": "#2d3748",
+          "type": "color"
+        },
+        "900": {
+          "value": "#1a202c",
+          "type": "color"
+        }
+      },
+      "red": {
+        "100": {
+          "value": "#fff5f5",
+          "type": "color"
+        },
+        "200": {
+          "value": "#fed7d7",
+          "type": "color"
+        },
+        "300": {
+          "value": "#feb2b2",
+          "type": "color"
+        },
+        "400": {
+          "value": "#fc8181",
+          "type": "color"
+        },
+        "500": {
+          "value": "#f56565",
+          "type": "color"
+        },
+        "600": {
+          "value": "#e53e3e",
+          "type": "color"
+        },
+        "700": {
+          "value": "#c53030",
+          "type": "color"
+        },
+        "800": {
+          "value": "#9b2c2c",
+          "type": "color"
+        },
+        "900": {
+          "value": "#742a2a",
+          "type": "color"
+        }
+      },
+      "orange": {
+        "100": {
+          "value": "#fffaf0",
+          "type": "color"
+        },
+        "200": {
+          "value": "#feebc8",
+          "type": "color"
+        },
+        "300": {
+          "value": "#fbd38d",
+          "type": "color"
+        },
+        "400": {
+          "value": "#f6ad55",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ed8936",
+          "type": "color"
+        },
+        "600": {
+          "value": "#dd6b20",
+          "type": "color"
+        },
+        "700": {
+          "value": "#c05621",
+          "type": "color"
+        },
+        "800": {
+          "value": "#9c4221",
+          "type": "color"
+        },
+        "900": {
+          "value": "#7b341e",
+          "type": "color"
+        }
+      },
+      "yellow": {
+        "100": {
+          "value": "#fffff0",
+          "type": "color"
+        },
+        "200": {
+          "value": "#fefcbf",
+          "type": "color"
+        },
+        "300": {
+          "value": "#faf089",
+          "type": "color"
+        },
+        "400": {
+          "value": "#f6e05e",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ecc94b",
+          "type": "color"
+        },
+        "600": {
+          "value": "#d69e2e",
+          "type": "color"
+        },
+        "700": {
+          "value": "#b7791f",
+          "type": "color"
+        },
+        "800": {
+          "value": "#975a16",
+          "type": "color"
+        },
+        "900": {
+          "value": "#744210",
+          "type": "color"
+        }
+      },
+      "green": {
+        "100": {
+          "value": "#f0fff4",
+          "type": "color"
+        },
+        "200": {
+          "value": "#c6f6d5",
+          "type": "color"
+        },
+        "300": {
+          "value": "#9ae6b4",
+          "type": "color"
+        },
+        "400": {
+          "value": "#68d391",
+          "type": "color"
+        },
+        "500": {
+          "value": "#48bb78",
+          "type": "color"
+        },
+        "600": {
+          "value": "#38a169",
+          "type": "color"
+        },
+        "700": {
+          "value": "#2f855a",
+          "type": "color"
+        },
+        "800": {
+          "value": "#276749",
+          "type": "color"
+        },
+        "900": {
+          "value": "#22543d",
+          "type": "color"
+        }
+      },
+      "teal": {
+        "100": {
+          "value": "#e6fffa",
+          "type": "color"
+        },
+        "200": {
+          "value": "#b2f5ea",
+          "type": "color"
+        },
+        "300": {
+          "value": "#81e6d9",
+          "type": "color"
+        },
+        "400": {
+          "value": "#4fd1c5",
+          "type": "color"
+        },
+        "500": {
+          "value": "#38b2ac",
+          "type": "color"
+        },
+        "600": {
+          "value": "#319795",
+          "type": "color"
+        },
+        "700": {
+          "value": "#2c7a7b",
+          "type": "color"
+        },
+        "800": {
+          "value": "#285e61",
+          "type": "color"
+        },
+        "900": {
+          "value": "#234e52",
+          "type": "color"
+        }
+      },
+      "blue": {
+        "100": {
+          "value": "#ebf8ff",
+          "type": "color"
+        },
+        "200": {
+          "value": "#bee3f8",
+          "type": "color"
+        },
+        "300": {
+          "value": "#90cdf4",
+          "type": "color"
+        },
+        "400": {
+          "value": "#63b3ed",
+          "type": "color"
+        },
+        "500": {
+          "value": "#4299e1",
+          "type": "color"
+        },
+        "600": {
+          "value": "#3182ce",
+          "type": "color"
+        },
+        "700": {
+          "value": "#2b6cb0",
+          "type": "color"
+        },
+        "800": {
+          "value": "#2c5282",
+          "type": "color"
+        },
+        "900": {
+          "value": "#2a4365",
+          "type": "color"
+        }
+      },
+      "indigo": {
+        "100": {
+          "value": "#ebf4ff",
+          "type": "color"
+        },
+        "200": {
+          "value": "#c3dafe",
+          "type": "color"
+        },
+        "300": {
+          "value": "#a3bffa",
+          "type": "color"
+        },
+        "400": {
+          "value": "#7f9cf5",
+          "type": "color"
+        },
+        "500": {
+          "value": "#667eea",
+          "type": "color"
+        },
+        "600": {
+          "value": "#5a67d8",
+          "type": "color"
+        },
+        "700": {
+          "value": "#4c51bf",
+          "type": "color"
+        },
+        "800": {
+          "value": "#434190",
+          "type": "color"
+        },
+        "900": {
+          "value": "#3c366b",
+          "type": "color"
+        }
+      },
+      "purple": {
+        "100": {
+          "value": "#faf5ff",
+          "type": "color"
+        },
+        "200": {
+          "value": "#e9d8fd",
+          "type": "color"
+        },
+        "300": {
+          "value": "#d6bcfa",
+          "type": "color"
+        },
+        "400": {
+          "value": "#b794f4",
+          "type": "color"
+        },
+        "500": {
+          "value": "#9f7aea",
+          "type": "color"
+        },
+        "600": {
+          "value": "#805ad5",
+          "type": "color"
+        },
+        "700": {
+          "value": "#6b46c1",
+          "type": "color"
+        },
+        "800": {
+          "value": "#553c9a",
+          "type": "color"
+        },
+        "900": {
+          "value": "#44337a",
+          "type": "color"
+        }
+      },
+      "pink": {
+        "100": {
+          "value": "#fff5f7",
+          "type": "color"
+        },
+        "200": {
+          "value": "#fed7e2",
+          "type": "color"
+        },
+        "300": {
+          "value": "#fbb6ce",
+          "type": "color"
+        },
+        "400": {
+          "value": "#f687b3",
+          "type": "color"
+        },
+        "500": {
+          "value": "#ed64a6",
+          "type": "color"
+        },
+        "600": {
+          "value": "#d53f8c",
+          "type": "color"
+        },
+        "700": {
+          "value": "#b83280",
+          "type": "color"
+        },
+        "800": {
+          "value": "#97266d",
+          "type": "color"
+        },
+        "900": {
+          "value": "#702459",
+          "type": "color"
+        }
+      }
+    },
+    "opacity": {
+      "low": {
+        "value": "10%",
+        "type": "opacity"
+      },
+      "md": {
+        "value": "50%",
+        "type": "opacity"
+      },
+      "high": {
+        "value": "90%",
+        "type": "opacity"
+      }
+    },
+    "fontFamilies": {
+      "heading": {
+        "value": "Inter",
+        "type": "fontFamilies"
+      },
+      "body": {
+        "value": "Roboto",
+        "type": "fontFamilies"
+      }
+    },
+    "lineHeights": {
+      "heading": {
+        "value": "110%",
+        "type": "lineHeights"
+      },
+      "body": {
+        "value": "140%",
+        "type": "lineHeights"
+      }
+    },
+    "letterSpacing": {
+      "default": {
+        "value": "0",
+        "type": "letterSpacing"
+      },
+      "increased": {
+        "value": "150%",
+        "type": "letterSpacing"
+      },
+      "decreased": {
+        "value": "-5%",
+        "type": "letterSpacing"
+      }
+    },
+    "paragraphSpacing": {
+      "h1": {
+        "value": "32",
+        "type": "paragraphSpacing"
+      },
+      "h2": {
+        "value": "26",
+        "type": "paragraphSpacing"
+      }
+    },
+    "fontWeights": {
+      "headingRegular": {
+        "value": "Regular",
+        "type": "fontWeights"
+      },
+      "headingBold": {
+        "value": "Bold",
+        "type": "fontWeights"
+      },
+      "bodyRegular": {
+        "value": "Regular",
+        "type": "fontWeights"
+      },
+      "bodyBold": {
+        "value": "Bold",
+        "type": "fontWeights"
+      }
+    },
+    "fontSizes": {
+      "h1": {
+        "value": "{fontSizes.h2} * 1.25",
+        "type": "fontSizes"
+      },
+      "h2": {
+        "value": "{fontSizes.h3} * 1.25",
+        "type": "fontSizes"
+      },
+      "h3": {
+        "value": "{fontSizes.h4} * 1.25",
+        "type": "fontSizes"
+      },
+      "h4": {
+        "value": "{fontSizes.h5} * 1.25",
+        "type": "fontSizes"
+      },
+      "h5": {
+        "value": "{fontSizes.h6} * 1.25",
+        "type": "fontSizes"
+      },
+      "h6": {
+        "value": "{fontSizes.body} * 1",
+        "type": "fontSizes"
+      },
+      "body": {
+        "value": "16",
+        "type": "fontSizes"
+      },
+      "sm": {
+        "value": "{fontSizes.body} * 0.85",
+        "type": "fontSizes"
+      },
+      "xs": {
+        "value": "{fontSizes.body} * 0.65",
+        "type": "fontSizes"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
index cd62dbea6..7ec0f9051 100644
--- a/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
@@ -16,6 +16,7 @@
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
+   [app.main.ui.workspace.tokens.core :as wtc]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
    [app.util.keyboard :as kbd]
@@ -92,7 +93,9 @@
          (cond
            (= :separator item) [:li {:class (stl/css :separator)
                                      :key (dm/str element-id "-" index)}]
-           :else (let [{:keys [value label selected?]} item
+           ;; Remove items with missing references
+           (seq (:errors item)) nil
+           :else (let [{:keys [label selected? errors]} item
                        highlighted? (= highlighted index)]
                    [:li
                     {:key (str element-id "-" index)
@@ -100,9 +103,10 @@
                                           :is-selected selected?
                                           :is-highlighted highlighted?)
                      :data-label label
+                     :disabled (seq errors)
                      :on-click #(on-select item)}
                     [:span {:class (stl/css :label)} label]
-                    [:span {:class (stl/css :value)} value]
+                    [:span {:class (stl/css :value)} (wtc/resolve-token-value item)]
                     [:span {:class (stl/css :check-icon)} i/tick]])))]]]))
 
 (mf/defc editable-select
@@ -255,7 +259,7 @@
      (when-let [{:keys [label value]} token]
        [:div {:title (str label ": " value)
               :class (stl/css :token-pill)}
-        value])
+        (wtc/resolve-token-value token)])
      (cond
        token [:& :input (merge input-props
                                {:value (or (:token-value state) "")
diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs
index f5d71acfc..755aa7a54 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs
@@ -61,9 +61,8 @@
         state (mf/use-state initial-fields)
 
         on-update-state-field (fn [idx e]
-                                (->> (dom/get-target-val e)
-                                     (assoc-in @state [idx :value])
-                                     (reset! state)))
+                                (let [value (dom/get-target-val e)]
+                                  (swap! state assoc-in [idx :value] value)))
 
         on-submit (fn [e]
                     (dom/prevent-default e)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c740fc8e0..d3350b3d5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -15,9 +15,12 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.tokens.core :as wtc]
+   [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.util.dom :as dom]
+   [cuerdas.core :as str]
    [okulary.core :as l]
-   [rumext.v2 :as mf]))
+   [rumext.v2 :as mf]
+   [shadow.resource]))
 
 (def lens:token-type-open-status
   (l/derived (l/in [:workspace-tokens :open-status]) st/state))
@@ -25,16 +28,20 @@
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token highlighted? on-context-menu]}]
-  (let [{:keys [name value]} token
-        resolved-value (try
-                         (wtc/resolve-token-value token)
-                         (catch js/Error _ nil))]
-    [:div {:class (stl/css-case :token-pill true
-                                :token-pill-highlighted highlighted?
-                                :token-pill-invalid (not resolved-value))
-           :title (str (if resolved-value "Token value: " "Invalid token value: ") value)
-           :on-click on-click
-           :on-context-menu on-context-menu}
+  (let [{:keys [name value resolved-value errors]} token
+        errors? (seq errors)]
+    [:button {:class (stl/css-case :token-pill true
+                                   :token-pill-highlighted highlighted?
+                                   :token-pill-invalid errors?)
+              :title (cond
+                       errors? (sd/humanize-errors token)
+                       :else (->> [(str "Token: " name)
+                                   (str "Original value: " value)
+                                   (str "Resolved value: " resolved-value)]
+                                  (str/join "\n")))
+              :on-click on-click
+              :on-context-menu on-context-menu
+              :disabled errors?}
      name]))
 
 (mf/defc token-section-icon
@@ -137,7 +144,8 @@
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
 
-        tokens (mf/deref refs/workspace-tokens)
+        tokens (-> (mf/deref refs/workspace-tokens)
+                   (sd/use-resolved-tokens))
         token-groups (mf/with-memo [tokens]
                        (sorted-token-groups tokens))]
     [:article
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 3c4c4da6c..64f11a3ce 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -30,6 +30,7 @@
   }
 
   &.token-pill-invalid {
+    background-color: var(--button-secondary-background-color-rest);
     color: var(--status-color-error-500);
     opacity: 0.8;
   }
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
new file mode 100644
index 000000000..d3c6ceef9
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -0,0 +1,165 @@
+(ns app.main.ui.workspace.tokens.style-dictionary
+  (:require
+   ["@tokens-studio/sd-transforms" :as sd-transforms]
+   ["style-dictionary$default" :as sd]
+   [app.common.data :as d]
+   [app.main.refs :as refs]
+   [cuerdas.core :as str]
+   [promesa.core :as p]
+   [rumext.v2 :as mf]
+   [shadow.resource]))
+
+(def StyleDictionary
+  "The global StyleDictionary instance used as an external library for now,
+  as the package would need webpack to be bundled,
+  because shadow-cljs doesn't support some of the more modern bundler features."
+  (do
+    (sd-transforms/registerTransforms sd)
+    (.registerFormat sd #js {:name "custom/json"
+                             :format (fn [res]
+                                       (.-tokens (.-dictionary res)))})
+    sd))
+
+;; Functions -------------------------------------------------------------------
+
+(defn tokens->style-dictionary+
+  "Resolves references and math expressions using StyleDictionary.
+  Returns a promise with the resolved dictionary."
+  [tokens {:keys [debug?]}]
+  (let [data (cond-> {:tokens tokens
+                      :platforms {:json {:transformGroup "tokens-studio"
+                                         :files [{:format "custom/json"
+                                                  :destination "fake-filename"}]}}
+                      :log {:verbosity "silent"
+                            :warnings "silent"
+                            :errors {:brokenReferences "console"}}
+                      :preprocessors ["tokens-studio"]}
+               debug? (update :log merge {:verbosity "verbose"
+                                          :warnings "warn"}))
+        js-data (clj->js data)]
+    (when debug?
+      (js/console.log "Input Data" js-data))
+    (sd. js-data)))
+
+(defn resolve-sd-tokens+
+  "Resolves references and math expressions using StyleDictionary.
+  Returns a promise with the resolved dictionary."
+  [tokens & {:keys [debug?] :as config}]
+  (let [performance-start (js/window.performance.now)
+        sd (tokens->style-dictionary+ tokens config)]
+    (when debug?
+      (js/console.log "StyleDictionary" sd))
+    (-> sd
+        (.buildAllPlatforms "json")
+        (.catch js/console.error)
+        (.then (fn [^js resp]
+                 (let [performance-end (js/window.performance.now)
+                       duration-ms (- performance-end performance-start)
+                       resolved-tokens (.-allTokens resp)]
+                   (when debug?
+                     (js/console.log "Time elapsed" duration-ms "ms")
+                     (js/console.log "Resolved tokens" resolved-tokens))
+                   resolved-tokens))))))
+
+(defn humanize-errors [{:keys [errors value] :as _token}]
+  (->> (map (fn [err]
+              (case err
+                :style-dictionary/missing-reference (str "Could not resolve reference token with the name: " value)
+                nil))
+            errors)
+       (str/join "\n")))
+
+(defn tokens-name-map [tokens]
+  (->> tokens
+       (map (fn [[_ x]] [(:name x) x]))
+       (into {})))
+
+(defn resolve-tokens+
+  [tokens & {:keys [debug?] :as config}]
+  (p/let [sd-tokens (-> (tokens-name-map tokens)
+                        (clj->js)
+                        (resolve-sd-tokens+ config))]
+    (let [resolved-tokens (reduce
+                           (fn [acc ^js cur]
+                             (let [value (.-value cur)
+                                   resolved-value (d/parse-integer (.-value cur))
+                                   original-value (-> cur .-original .-value)
+                                   id (uuid (.-uuid (.-id cur)))
+                                   missing-reference? (and (not resolved-value)
+                                                           (re-find #"\{" value)
+                                                           (= value original-value))]
+                               (cond-> (assoc-in acc [id :resolved-value] resolved-value)
+                                 missing-reference? (update-in [id :errors] (fnil conj #{}) :style-dictionary/missing-reference))))
+                           tokens sd-tokens)]
+      (when debug?
+        (js/console.log "Resolved tokens" resolved-tokens))
+      resolved-tokens)))
+
+(defn resolve-workspace-tokens+
+  [& {:keys [debug?] :as config}]
+  (when-let [workspace-tokens @refs/workspace-tokens]
+    (resolve-tokens+ workspace-tokens)))
+
+;; Hooks -----------------------------------------------------------------------
+
+(defonce !tokens-cache (atom nil))
+
+(defn use-resolved-tokens
+  "The StyleDictionary process function is async, so we can't use resolved values directly.
+
+  This hook will return the unresolved tokens as state until they are processed,
+  then the state will be updated with the resolved tokens."
+  [tokens & {:keys [cache-atom]
+             :or {cache-atom !tokens-cache}}]
+  (let [tokens-state (mf/use-state (get @cache-atom tokens tokens))]
+    (mf/use-effect
+     (mf/deps tokens)
+     (fn []
+       (let [cached (get @cache-atom tokens)]
+         (cond
+           ;; The tokens are already processing somewhere
+           (p/promise? cached) (p/then cached #(reset! tokens-state %))
+           ;; Get the cached entry
+           (some? cached) (reset! tokens-state cached)
+           ;; No cached entry, start processing
+           :else (let [promise+ (resolve-tokens+ tokens)]
+                   (swap! cache-atom assoc tokens promise+)
+                   (p/then promise+ (fn [resolved-tokens]
+                                      (swap! cache-atom assoc tokens resolved-tokens)
+                                      (reset! tokens-state resolved-tokens))))))))
+    @tokens-state))
+
+(defn use-resolved-workspace-tokens
+  ([] (use-resolved-tokens nil))
+  ([options]
+   (-> (mf/deref refs/workspace-tokens)
+       (use-resolved-tokens options))))
+
+;; Testing ---------------------------------------------------------------------
+
+(defn tokens-studio-example []
+  (-> (shadow.resource/inline "./data/example-tokens-set.json")
+      (js/JSON.parse)
+      .-core))
+
+(comment
+
+  (defonce !output (atom nil))
+
+  @!output
+
+  (-> (resolve-workspace-tokens+ {:debug? true})
+      (p/then #(reset! !output %)))
+
+  (->> @refs/workspace-tokens
+       (resolve-tokens+))
+
+  (->
+   (clj->js {"a" {:name "a" :value "5"}
+             "b" {:name "b" :value "{a} * 2"}})
+   (#(resolve-sd-tokens+ % {:debug? true})))
+
+  (-> (tokens-studio-example)
+      (resolve-sd-tokens+ {:debug? true}))
+
+  nil)
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2087b29ae..0c3ca7353 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1491,6 +1491,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bundled-es-modules/deepmerge@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "@bundled-es-modules/deepmerge@npm:4.3.1"
+  dependencies:
+    deepmerge: "npm:^4.3.1"
+  checksum: 10c0/50493fb741d588aa358edc5e844cbf31493cb64aca0a5ca0d33d73f61eb9eb853f7038074429343afbe199e614a6be8400abfd31909f9e5f14a53a4cff39b894
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/glob@npm:^10.3.13":
+  version: 10.3.13
+  resolution: "@bundled-es-modules/glob@npm:10.3.13"
+  dependencies:
+    buffer: "npm:^6.0.3"
+    events: "npm:^3.3.0"
+    glob: "npm:^10.3.10"
+    patch-package: "npm:^8.0.0"
+    path: "npm:^0.12.7"
+    stream: "npm:^0.0.2"
+    string_decoder: "npm:^1.3.0"
+    url: "npm:^0.11.1"
+  checksum: 10c0/6a659e9e70b330bd9d3dc89860a070c10b3da79eb4b86c39383693af80b50d8ceac9348a3c12e8d907fb7c9947db14d06826d7e9e562bd43472298713a532c01
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/memfs@npm:^4.8.1":
+  version: 4.8.1
+  resolution: "@bundled-es-modules/memfs@npm:4.8.1"
+  dependencies:
+    assert: "npm:^2.0.0"
+    buffer: "npm:^6.0.3"
+    events: "npm:^3.3.0"
+    memfs: "npm:^4.8.1"
+    path: "npm:^0.12.7"
+    stream: "npm:^0.0.2"
+    util: "npm:^0.12.5"
+  checksum: 10c0/632a04eb51fdcb0142fca62f23b196e4654e7de56da7c33a7e907417e4aff948fd9bb3b55f7c37542030e1a387851a8606a98ca15284a11858f85739167d3353
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -2068,6 +2108,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonjoy.com/base64@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "@jsonjoy.com/base64@npm:1.1.2"
+  peerDependencies:
+    tslib: 2
+  checksum: 10c0/88717945f66dc89bf58ce75624c99fe6a5c9a0c8614e26d03e406447b28abff80c69fb37dabe5aafef1862cf315071ae66e5c85f6018b437d95f8d13d235e6eb
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/json-pack@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "@jsonjoy.com/json-pack@npm:1.0.4"
+  dependencies:
+    "@jsonjoy.com/base64": "npm:^1.1.1"
+    "@jsonjoy.com/util": "npm:^1.1.2"
+    hyperdyperid: "npm:^1.2.0"
+    thingies: "npm:^1.20.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10c0/c06e57c33d3c18ab31af163e04f77cb759f68386c41375d1e1bd6c28beb1a3cc82217cc3b26f4c94b7385ed28a61e59b01498cf4cec562fd9e464b17eab0cf16
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/util@npm:^1.1.2":
+  version: 1.1.3
+  resolution: "@jsonjoy.com/util@npm:1.1.3"
+  peerDependencies:
+    tslib: 2
+  checksum: 10c0/29931163e316822f4dd4ccf169b2f85cc61b964c54770621afc1518f60c1e73c3d17990bdcb114091e3ef1493cdfde9b268fae7e1baa445b76a86c44c84d636c
+  languageName: node
+  linkType: hard
+
 "@juggle/resize-observer@npm:^3.3.1":
   version: 3.4.0
   resolution: "@juggle/resize-observer@npm:3.4.0"
@@ -3791,6 +3863,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tokens-studio/sd-transforms@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "@tokens-studio/sd-transforms@npm:0.16.1"
+  dependencies:
+    "@tokens-studio/types": "npm:^0.4.0"
+    color2k: "npm:^2.0.1"
+    colorjs.io: "npm:^0.4.3"
+    deepmerge: "npm:^4.3.1"
+    expr-eval-fork: "npm:^2.0.2"
+    is-mergeable-object: "npm:^1.1.1"
+    postcss-calc-ast-parser: "npm:^0.1.4"
+  peerDependencies:
+    style-dictionary: ^4.0.0-prerelease.27
+  checksum: 10c0/496a22026ffa25e3f6d8438a1fb39d67383fa55c89de9ac6759e2dce10a16268f5009e4809d03ceab38597fc02025a90eb1d32083b98a9353feded83831549c9
+  languageName: node
+  linkType: hard
+
+"@tokens-studio/types@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@tokens-studio/types@npm:0.4.0"
+  checksum: 10c0/0641385653c94704f63dc5e10699c49bdbb1e1d8cba54af31bf50c3be85056123109bb2fe5091b1ccebaa9eba4c4afce3148a3b850919ed67bc81e3294ae839c
+  languageName: node
+  linkType: hard
+
 "@trysound/sax@npm:0.2.0":
   version: 0.2.0
   resolution: "@trysound/sax@npm:0.2.0"
@@ -4308,6 +4404,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@yarnpkg/lockfile@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@yarnpkg/lockfile@npm:1.1.0"
+  checksum: 10c0/0bfa50a3d756623d1f3409bc23f225a1d069424dbc77c6fd2f14fb377390cd57ec703dc70286e081c564be9051ead9ba85d81d66a3e68eeb6eb506d4e0c0fbda
+  languageName: node
+  linkType: hard
+
+"@zip.js/zip.js@npm:^2.7.44":
+  version: 2.7.45
+  resolution: "@zip.js/zip.js@npm:2.7.45"
+  checksum: 10c0/bc39b849d6e92d33b7d09ef1ae623e2011984b3c93004b559bdea2d024842406310b5112f825261664c331b04e4db49d08de6bba509cb9265adf3ae9c85569de
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -4744,7 +4854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assert@npm:^2.1.0":
+"assert@npm:^2.0.0, assert@npm:^2.1.0":
   version: 2.1.0
   resolution: "assert@npm:2.1.0"
   dependencies:
@@ -4829,6 +4939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"at-least-node@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "at-least-node@npm:1.0.0"
+  checksum: 10c0/4c058baf6df1bc5a1697cf182e2029c58cd99975288a13f9e70068ef5d6f4e1f1fd7c4d2c3c4912eae44797d1725be9700995736deca441b39f3e66d8dee97ef
+  languageName: node
+  linkType: hard
+
 "atob@npm:^2.1.2":
   version: 2.1.2
   resolution: "atob@npm:2.1.2"
@@ -5443,6 +5560,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "chalk@npm:5.3.0"
+  checksum: 10c0/8297d436b2c0f95801103ff2ef67268d362021b8210daf8ddbe349695333eb3610a71122172ff3b0272f1ef2cf7cc2c41fdaa4715f52e49ffe04c56340feed09
+  languageName: node
+  linkType: hard
+
+"change-case@npm:^5.3.0":
+  version: 5.4.4
+  resolution: "change-case@npm:5.4.4"
+  checksum: 10c0/2a9c2b9c9ad6ab2491105aaf506db1a9acaf543a18967798dcce20926c6a173aa63266cb6189f3086e3c14bf7ae1f8ea4f96ecc466fcd582310efa00372f3734
+  languageName: node
+  linkType: hard
+
 "check-error@npm:^1.0.3":
   version: 1.0.3
   resolution: "check-error@npm:1.0.3"
@@ -5508,7 +5639,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.2.0":
+"ci-info@npm:^3.2.0, ci-info@npm:^3.7.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
   checksum: 10c0/6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a
@@ -5749,6 +5880,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color2k@npm:^2.0.1":
+  version: 2.0.3
+  resolution: "color2k@npm:2.0.3"
+  checksum: 10c0/e7c13d212c9d1abb1690e378bbc0a6fb1751e4b02e9a73ba3b2ade9d54da673834597d342791d577d1ce400ec486c7f92c5098f9fa85cd113bcfde57420a2bb9
+  languageName: node
+  linkType: hard
+
 "color@npm:^3.1.3":
   version: 3.2.1
   resolution: "color@npm:3.2.1"
@@ -5759,6 +5897,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colorjs.io@npm:^0.4.3":
+  version: 0.4.5
+  resolution: "colorjs.io@npm:0.4.5"
+  checksum: 10c0/4cc58d18223426bcb8caa558e7554002b62bf87bd20db06596abf5efe5ea65416266402db86b504ac5fa2c38360913dbb8e6ef7c4fa19a992fd1818d5710ef6f
+  languageName: node
+  linkType: hard
+
 "colorspace@npm:1.1.x":
   version: 1.1.4
   resolution: "colorspace@npm:1.1.4"
@@ -5799,6 +5944,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^8.3.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 10c0/8b043bb8322ea1c39664a1598a95e0495bfe4ca2fad0d84a92d7d1d8d213e2a155b441d2470c8e08de7c4a28cf2bc6e169211c49e1b21d9f7edc6ae4d9356060
+  languageName: node
+  linkType: hard
+
 "commondir@npm:^1.0.1":
   version: 1.0.1
   resolution: "commondir@npm:1.0.1"
@@ -6358,6 +6510,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deepmerge@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "deepmerge@npm:4.3.1"
+  checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
+  languageName: node
+  linkType: hard
+
 "default-browser-id@npm:3.0.0":
   version: 3.0.0
   resolution: "default-browser-id@npm:3.0.0"
@@ -6777,6 +6936,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emitter-component@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "emitter-component@npm:1.1.2"
+  checksum: 10c0/0f5e2240689783ca8e9118a68f10f5111a06a073bc4ab58159ebaf18482bfc41d9d8d2787a0bc57bda129698717f0724cee5dde7fe967b494daba4f98e0c54dd
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -7426,6 +7592,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expr-eval-fork@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "expr-eval-fork@npm:2.0.2"
+  checksum: 10c0/ab5143fe65017d8811c155be55abd700321b8a32117635c35ce1309488f3263a251788f27f2e4a77425f58f7a64f99fd46d652c35a8c1668b22b4a8861702b75
+  languageName: node
+  linkType: hard
+
 "express@npm:^4.17.3, express@npm:^4.19.2":
   version: 4.19.2
   resolution: "express@npm:4.19.2"
@@ -7764,6 +7937,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-yarn-workspace-root@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "find-yarn-workspace-root@npm:2.0.0"
+  dependencies:
+    micromatch: "npm:^4.0.2"
+  checksum: 10c0/b0d3843013fbdaf4e57140e0165889d09fa61745c9e85da2af86e54974f4cc9f1967e40f0d8fc36a79d53091f0829c651d06607d552582e53976f3cd8f4e5689
+  languageName: node
+  linkType: hard
+
 "findup-sync@npm:^2.0.0":
   version: 2.0.0
   resolution: "findup-sync@npm:2.0.0"
@@ -7921,6 +8103,7 @@ __metadata:
     "@storybook/react": "npm:^7.6.17"
     "@storybook/react-vite": "npm:^7.6.17"
     "@storybook/testing-library": "npm:^0.2.2"
+    "@tokens-studio/sd-transforms": "npm:^0.16.1"
     "@types/node": "npm:^20.11.20"
     animate.css: "npm:^4.1.1"
     autoprefixer: "npm:^10.4.17"
@@ -7972,6 +8155,7 @@ __metadata:
     shadow-cljs: "npm:2.27.4"
     source-map-support: "npm:^0.5.21"
     storybook: "npm:^7.6.17"
+    style-dictionary: "patch:style-dictionary@npm%3A4.0.0-prerelease.36#~/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch"
     svg-sprite: "npm:^2.0.2"
     tdigest: "npm:^0.1.2"
     typescript: "npm:^5.3.3"
@@ -8013,6 +8197,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "fs-extra@npm:9.1.0"
+  dependencies:
+    at-least-node: "npm:^1.0.0"
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10c0/9b808bd884beff5cb940773018179a6b94a966381d005479f00adda6b44e5e3d4abf765135773d849cc27efe68c349e4a7b86acd7d3306d5932c14f3a4b17a92
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^2.0.0":
   version: 2.1.0
   resolution: "fs-minipass@npm:2.1.0"
@@ -8899,6 +9095,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hyperdyperid@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "hyperdyperid@npm:1.2.0"
+  checksum: 10c0/885ba3177c7181d315a856ee9c0005ff8eb5dcb1ce9e9d61be70987895d934d84686c37c981cceeb53216d4c9c15c1cc25f1804e84cc6a74a16993c5d7fd0893
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -9348,6 +9551,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-mergeable-object@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-mergeable-object@npm:1.1.1"
+  checksum: 10c0/ed895a17686eb88d28040e0281c507639e5a07e63ac51f033c34091c2d8679ca86775ecfe80d5f0636bc2b7c530acd731527e5a2e9c32a88f8847286451720f1
+  languageName: node
+  linkType: hard
+
 "is-nan@npm:^1.3.2":
   version: 1.3.2
   resolution: "is-nan@npm:1.3.2"
@@ -9418,6 +9628,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-obj@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "is-plain-obj@npm:4.1.0"
+  checksum: 10c0/32130d651d71d9564dc88ba7e6fda0e91a1010a3694648e9f4f47bb6080438140696d3e3e15c741411d712e47ac9edc1a8a9de1fe76f3487b0d90be06ac9975e
+  languageName: node
+  linkType: hard
+
 "is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0":
   version: 5.0.0
   resolution: "is-plain-object@npm:5.0.0"
@@ -9587,7 +9804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-wsl@npm:^2.2.0":
+"is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-wsl@npm:2.2.0"
   dependencies:
@@ -9929,7 +10146,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.2.3":
+"json-stable-stringify@npm:^1.0.2":
+  version: 1.1.1
+  resolution: "json-stable-stringify@npm:1.1.1"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    isarray: "npm:^2.0.5"
+    jsonify: "npm:^0.0.1"
+    object-keys: "npm:^1.1.1"
+  checksum: 10c0/3801e3eeccbd030afb970f54bea690a079cfea7d9ed206a1b17ca9367f4b7772c764bf77a48f03e56b50e5f7ee7d11c52339fe20d8d7ccead003e4ca69e4cfde
+  languageName: node
+  linkType: hard
+
+"json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -9951,6 +10180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonify@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "jsonify@npm:0.0.1"
+  checksum: 10c0/7f5499cdd59a0967ed35bda48b7cec43d850bbc8fb955cdd3a1717bb0efadbe300724d5646de765bb7a99fc1c3ab06eb80d93503c6faaf99b4ff50a3326692f6
+  languageName: node
+  linkType: hard
+
 "jszip@npm:^3.10.1":
   version: 3.10.1
   resolution: "jszip@npm:3.10.1"
@@ -10002,6 +10238,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klaw-sync@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "klaw-sync@npm:6.0.0"
+  dependencies:
+    graceful-fs: "npm:^4.1.11"
+  checksum: 10c0/00d8e4c48d0d699b743b3b028e807295ea0b225caf6179f51029e19783a93ad8bb9bccde617d169659fbe99559d73fb35f796214de031d0023c26b906cecd70a
+  languageName: node
+  linkType: hard
+
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -10483,6 +10728,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memfs@npm:^4.8.1":
+  version: 4.9.3
+  resolution: "memfs@npm:4.9.3"
+  dependencies:
+    "@jsonjoy.com/json-pack": "npm:^1.0.3"
+    "@jsonjoy.com/util": "npm:^1.1.2"
+    tree-dump: "npm:^1.0.1"
+    tslib: "npm:^2.0.0"
+  checksum: 10c0/a59537537716653b6cf5287c5a23b3bbb6466aa2e596aa4710279564521d1b23f2fde403e20a91003dac89cb804d17fabee005bd95dab10943d9e4f62f47db09
+  languageName: node
+  linkType: hard
+
 "memoizee@npm:0.4.X":
   version: 0.4.15
   resolution: "memoizee@npm:0.4.15"
@@ -10564,7 +10821,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4":
   version: 4.0.7
   resolution: "micromatch@npm:4.0.7"
   dependencies:
@@ -11359,6 +11616,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^7.4.2":
+  version: 7.4.2
+  resolution: "open@npm:7.4.2"
+  dependencies:
+    is-docker: "npm:^2.0.0"
+    is-wsl: "npm:^2.1.1"
+  checksum: 10c0/77573a6a68f7364f3a19a4c80492712720746b63680ee304555112605ead196afe91052bd3c3d165efdf4e9d04d255e87de0d0a77acec11ef47fd5261251813f
+  languageName: node
+  linkType: hard
+
 "open@npm:^8.0.4, open@npm:^8.4.0":
   version: 8.4.2
   resolution: "open@npm:8.4.2"
@@ -11424,6 +11691,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"os-tmpdir@npm:~1.0.2":
+  version: 1.0.2
+  resolution: "os-tmpdir@npm:1.0.2"
+  checksum: 10c0/f438450224f8e2687605a8dd318f0db694b6293c5d835ae509a69e97c8de38b6994645337e5577f5001115470414638978cc49da1cdcc25106dad8738dc69990
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^2.0.0, p-limit@npm:^2.2.0":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"
@@ -11601,6 +11875,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"patch-package@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "patch-package@npm:8.0.0"
+  dependencies:
+    "@yarnpkg/lockfile": "npm:^1.1.0"
+    chalk: "npm:^4.1.2"
+    ci-info: "npm:^3.7.0"
+    cross-spawn: "npm:^7.0.3"
+    find-yarn-workspace-root: "npm:^2.0.0"
+    fs-extra: "npm:^9.0.0"
+    json-stable-stringify: "npm:^1.0.2"
+    klaw-sync: "npm:^6.0.0"
+    minimist: "npm:^1.2.6"
+    open: "npm:^7.4.2"
+    rimraf: "npm:^2.6.3"
+    semver: "npm:^7.5.3"
+    slash: "npm:^2.0.0"
+    tmp: "npm:^0.0.33"
+    yaml: "npm:^2.2.2"
+  bin:
+    patch-package: index.js
+  checksum: 10c0/690eab0537e953a3fd7d32bb23f0e82f97cd448f8244c3227ed55933611a126f9476397325c06ad2c11d881a19b427a02bd1881bee78d89f1731373fc4fe0fee
+  languageName: node
+  linkType: hard
+
 "path-browserify@npm:0.0.1":
   version: 0.0.1
   resolution: "path-browserify@npm:0.0.1"
@@ -11733,6 +12032,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-unified@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "path-unified@npm:0.1.0"
+  checksum: 10c0/26c314221bcc0ca3ce59b67f50dffb6f37214d294fd9dfeb0219e9f12b93d8852c8525d32be9387011d902d361669a43e22ec419d522055794790222665b2de9
+  languageName: node
+  linkType: hard
+
+"path@npm:^0.12.7":
+  version: 0.12.7
+  resolution: "path@npm:0.12.7"
+  dependencies:
+    process: "npm:^0.11.1"
+    util: "npm:^0.10.3"
+  checksum: 10c0/f795ce5438a988a590c7b6dfd450ec9baa1c391a8be4c2dea48baa6e0f5b199e56cd83b8c9ebf3991b81bea58236d2c32bdafe2c17a2e70c3a2e4c69891ade59
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.1, pathe@npm:^1.1.2":
   version: 1.1.2
   resolution: "pathe@npm:1.1.2"
@@ -11958,6 +12274,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-calc-ast-parser@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "postcss-calc-ast-parser@npm:0.1.4"
+  dependencies:
+    postcss-value-parser: "npm:^3.3.1"
+  checksum: 10c0/6ab488da4024aefe749baff2ee2cd41d1a7b84611291a6fd5d220262255c86f37687b3541696cab3e4edb1b7601634719877184ee426048ad82ed15185a5f64f
+  languageName: node
+  linkType: hard
+
 "postcss-clean@npm:^1.2.2":
   version: 1.2.2
   resolution: "postcss-clean@npm:1.2.2"
@@ -12061,6 +12386,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-value-parser@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "postcss-value-parser@npm:3.3.1"
+  checksum: 10c0/23eed98d8eeadb1f9ef1db4a2757da0f1d8e7c1dac2a38d6b35d971aab9eb3c6d8a967d0e9f435558834ffcd966afbbe875a56bcc5bcdd09e663008c106b3e47
+  languageName: node
+  linkType: hard
+
 "postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0":
   version: 4.2.0
   resolution: "postcss-value-parser@npm:4.2.0"
@@ -12182,7 +12514,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process@npm:^0.11.10":
+"process@npm:^0.11.1, process@npm:^0.11.10":
   version: 0.11.10
   resolution: "process@npm:0.11.10"
   checksum: 10c0/40c3ce4b7e6d4b8c3355479df77aeed46f81b279818ccdc500124e6a5ab882c0cc81ff7ea16384873a95a74c4570b01b120f287abbdd4c877931460eca6084b3
@@ -13067,7 +13399,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^2.6.1":
+"rimraf@npm:^2.6.1, rimraf@npm:^2.6.3":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
   dependencies:
@@ -13808,6 +14140,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "slash@npm:2.0.0"
+  checksum: 10c0/f83dbd3cb62c41bb8fcbbc6bf5473f3234b97fa1d008f571710a9d3757a28c7169e1811cad1554ccb1cc531460b3d221c9a7b37f549398d9a30707f0a5af9193
+  languageName: node
+  linkType: hard
+
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -14155,6 +14494,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream@npm:^0.0.2":
+  version: 0.0.2
+  resolution: "stream@npm:0.0.2"
+  dependencies:
+    emitter-component: "npm:^1.1.1"
+  checksum: 10c0/2b2a196218afcd61fa48366318cdbc4a496d7141ec21f616e5f75290428daff9d0e1ac109a39e63c6d07f1187db055ca2b04e188232cca21595b85f282d7ad28
+  languageName: node
+  linkType: hard
+
 "string-hash@npm:^1.1.1":
   version: 1.1.3
   resolution: "string-hash@npm:1.1.3"
@@ -14362,6 +14710,50 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-dictionary@npm:4.0.0-prerelease.36":
+  version: 4.0.0-prerelease.36
+  resolution: "style-dictionary@npm:4.0.0-prerelease.36"
+  dependencies:
+    "@bundled-es-modules/deepmerge": "npm:^4.3.1"
+    "@bundled-es-modules/glob": "npm:^10.3.13"
+    "@bundled-es-modules/memfs": "npm:^4.8.1"
+    "@zip.js/zip.js": "npm:^2.7.44"
+    chalk: "npm:^5.3.0"
+    change-case: "npm:^5.3.0"
+    commander: "npm:^8.3.0"
+    is-plain-obj: "npm:^4.1.0"
+    json5: "npm:^2.2.2"
+    patch-package: "npm:^8.0.0"
+    path-unified: "npm:^0.1.0"
+    tinycolor2: "npm:^1.6.0"
+  bin:
+    style-dictionary: bin/style-dictionary.js
+  checksum: 10c0/8707b3cced5ee7a858c425b296b53f3b9055f388839ab77ec94f9ed012ca99db43ce28fb540cec1659b92680a2769b1ed24d9af891ea98b9b298895341781f30
+  languageName: node
+  linkType: hard
+
+"style-dictionary@patch:style-dictionary@npm%3A4.0.0-prerelease.36#~/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch":
+  version: 4.0.0-prerelease.36
+  resolution: "style-dictionary@patch:style-dictionary@npm%3A4.0.0-prerelease.36#~/.yarn/patches/style-dictionary-npm-4.0.0-prerelease.36-55c0fc33bd.patch::version=4.0.0-prerelease.36&hash=45c7ac"
+  dependencies:
+    "@bundled-es-modules/deepmerge": "npm:^4.3.1"
+    "@bundled-es-modules/glob": "npm:^10.3.13"
+    "@bundled-es-modules/memfs": "npm:^4.8.1"
+    "@zip.js/zip.js": "npm:^2.7.44"
+    chalk: "npm:^5.3.0"
+    change-case: "npm:^5.3.0"
+    commander: "npm:^8.3.0"
+    is-plain-obj: "npm:^4.1.0"
+    json5: "npm:^2.2.2"
+    patch-package: "npm:^8.0.0"
+    path-unified: "npm:^0.1.0"
+    tinycolor2: "npm:^1.6.0"
+  bin:
+    style-dictionary: bin/style-dictionary.js
+  checksum: 10c0/dcc005437ee3d6d93536011c772cb8922166d5a20dac2e7d5e7487bcdb3d52007b2bf40d88c5e17ae796f03401c63605b6e586cb3de1003ecfc17f56b0b203c0
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0, supports-color@npm:^5.4.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -14568,6 +14960,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thingies@npm:^1.20.0":
+  version: 1.21.0
+  resolution: "thingies@npm:1.21.0"
+  peerDependencies:
+    tslib: ^2
+  checksum: 10c0/7570ee855aecb73185a672ecf3eb1c287a6512bf5476449388433b2d4debcf78100bc8bfd439b0edd38d2bc3bfb8341de5ce85b8557dec66d0f27b962c9a8bc1
+  languageName: node
+  linkType: hard
+
 "through2-filter@npm:^3.0.0":
   version: 3.0.0
   resolution: "through2-filter@npm:3.0.0"
@@ -14654,6 +15055,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinycolor2@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "tinycolor2@npm:1.6.0"
+  checksum: 10c0/9aa79a36ba2c2a87cb221453465cabacd04b9e35f9694373e846fdc78b1c768110f81e581ea41440106c0f24d9a023891d0887e8075885e790ac40eb0e74a5c1
+  languageName: node
+  linkType: hard
+
 "tinypool@npm:^0.8.3":
   version: 0.8.4
   resolution: "tinypool@npm:0.8.4"
@@ -14668,6 +15076,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tmp@npm:^0.0.33":
+  version: 0.0.33
+  resolution: "tmp@npm:0.0.33"
+  dependencies:
+    os-tmpdir: "npm:~1.0.2"
+  checksum: 10c0/69863947b8c29cabad43fe0ce65cec5bb4b481d15d4b4b21e036b060b3edbf3bc7a5541de1bacb437bb3f7c4538f669752627fdf9b4aaf034cebd172ba373408
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"
@@ -14799,6 +15216,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tree-dump@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "tree-dump@npm:1.0.1"
+  peerDependencies:
+    tslib: 2
+  checksum: 10c0/1d87a85f694089a489aa4dab21d25896ea5ab1c21e142928fc89507ab3c74a3ac21bca8d26dc102a9c16349d479be85b629233c17548178185720e4efd469126
+  languageName: node
+  linkType: hard
+
 "tree-kill@npm:^1.2.2":
   version: 1.2.2
   resolution: "tree-kill@npm:1.2.2"
@@ -15258,7 +15684,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"url@npm:^0.11.0":
+"url@npm:^0.11.0, url@npm:^0.11.1":
   version: 0.11.3
   resolution: "url@npm:0.11.3"
   dependencies:
@@ -15325,7 +15751,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.10.4":
+"util@npm:^0.10.3, util@npm:^0.10.4":
   version: 0.10.4
   resolution: "util@npm:0.10.4"
   dependencies:
@@ -15997,6 +16423,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.2.2":
+  version: 2.4.5
+  resolution: "yaml@npm:2.4.5"
+  bin:
+    yaml: bin.mjs
+  checksum: 10c0/e1ee78b381e5c710f715cc4082fd10fc82f7f5c92bd6f075771d20559e175616f56abf1c411f545ea0e9e16e4f84a83a50b42764af5f16ec006328ba9476bb31
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.4.2":
   version: 2.4.2
   resolution: "yaml@npm:2.4.2"