diff --git a/.github/workflows/build-figma-tokens.yml b/.github/workflows/build-figma-tokens.yml
new file mode 100644
index 000000000..5c89e2b46
--- /dev/null
+++ b/.github/workflows/build-figma-tokens.yml
@@ -0,0 +1,62 @@
+name: Generate scss vars from figma tokens
+
+on:
+  push:
+    branches:
+      - update-figma-tokens
+    paths:
+      - 'figma-tokens/input/**'
+
+jobs:
+  build_tokens:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      # Configuring Node.js Environment
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.4.0
+
+      # Setting dependencies
+      - name: Install dependencies
+        run: npm ci
+
+      # Token conversion using token-transformer
+      - name: Transform Figma tokens
+        run: npx token-transformer figma-tokens/input/tokens.json figma-tokens/transformed-tokens/tokens-transformed.json
+
+      # Run script for Style Dictionary, convert JSON to SCSS
+      - name: Build Figma tokens to SCSS
+        run: npm run build-tokens
+
+      # Create or update the `update-figma-tokens` branch
+      - name: Create or update branch
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          git add stories/assets/scss/figma-scss/_figma-variables.scss figma-tokens/transformed-tokens/tokens-transformed.json
+          git commit -m "Save changes in the branch" || echo "No changes to commit"
+
+      # Push changes to `update-figma-tokens` branch
+      - name: Push changes
+        run: |
+          git push origin ${{ github.ref_name }} || echo "No changes to push"
+
+      # Automatic pull request
+      - name: Create Pull Request
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_DATA=$(jq -n \
+            --arg title "Update SCSS variables from Figma tokens" \
+            --arg body "This PR updates SCSS variables based on the latest Figma tokens." \
+            --arg head "${GITHUB_REF#refs/heads/}" \
+            --arg base "develop" \
+            '{title: $title, body: $body, head: $head, base: $base}')
+
+          curl -s -X POST -H "Authorization: token $GITHUB_TOKEN" \
+            -H "Accept: application/vnd.github.v3+json" \
+            https://api.github.com/repos/${{ github.repository }}/pulls \
+            -d "$PR_DATA"
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 000000000..e69de29bb
diff --git a/.storybook/main.js b/.storybook/main.js
index d0da08b4f..0af655c6f 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -17,7 +17,9 @@ export default {
     '@storybook/react-webpack5',
     // '@chromatic-com/storybook',
     '@storybook/addon-webpack5-compiler-babel',
-    '@whitespace/storybook-addon-html'
+    '@whitespace/storybook-addon-html',
+    '@storybook/addon-designs',
+    'storybook-addon-sass-postcss',
   ],
   webpackFinal: async config => {
     config.resolve.alias = {
diff --git a/chromatic.config.json b/chromatic.config.json
index 1420357a0..b47f88636 100644
--- a/chromatic.config.json
+++ b/chromatic.config.json
@@ -2,6 +2,6 @@
   "$schema": "https://www.chromatic.com/config-file.schema.json",
   "projectId": "UNDP Design System",
   "exitOnceUploaded": true,
-  "skip": "dependabot/**",
+  "skip": true,
   "onlyChanged": true
 }
\ No newline at end of file
diff --git a/figma-tokens/build-figma-tokens.mjs b/figma-tokens/build-figma-tokens.mjs
new file mode 100644
index 000000000..2af6d1d25
--- /dev/null
+++ b/figma-tokens/build-figma-tokens.mjs
@@ -0,0 +1,79 @@
+import StyleDictionary from 'style-dictionary';
+
+// function kebabIt(str) {
+//   return str
+//       .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+//       .join('-')
+//       .toLowerCase();
+// }
+
+// StyleDictionaryPackage.registerFormat({
+//   name: 'scss/variables',
+//   formatter: function (dictionary, config) {
+//     return `${this.selector} {
+//       ${dictionary.allProperties.map(prop => `${prop.name}: ${prop.value};`).join('\n')}
+//     }`
+//   }
+// });
+
+const sd = new StyleDictionary('./figma-tokens/config/config.json');
+await sd.buildAllPlatforms();
+
+//
+
+// import {StyleDictionary} from 'style-dictionary-utils'
+
+// const myStyleDictionary = new StyleDictionary()
+
+// // when using style dictionary 4 you whave to await the extend method
+// const extendedSd = await myStyleDictionary.extend({
+//   "source": ["../transformed-tokens/**/*.json"],
+//   "platforms": {
+//     "scss": {
+//       "transformGroup": "scss",
+//       "buildPath": "../../stories/assets/scss/figma-scss/",
+//       "files": [
+//         {
+//           "destination": "_figma-variables.scss",
+//           "format": "scss/variables"
+//         }
+//       ]
+//     }
+//   }
+// });
+
+// extendedSd.buildAllPlatforms();
+
+//Px To Rem
+
+// function fontPxToRem(token, options) {
+//   const baseFont = getBasePxFontSize(options);
+//   const floatVal = parseFloat(token.value);
+//   if (isNaN(floatVal)) {
+//     console.log('NaN error', token.name, token.value, 'rem');
+//   }
+//   if (floatVal === 0) {
+//     return '0';
+//   }
+//   return `${floatVal / baseFont}rem`;
+// }
+
+// StyleDictionaryPackage.registerTransform({
+//   name: 'size/pxToRem',
+//   type: 'value',
+//   matcher: (token) => ['fontSizes'].includes(token.type),
+//   transformer: (token, options) => fontPxToRem(token, options)
+// })
+// //
+// StyleDictionaryPackage.registerTransform({
+//   name: 'sizes/px',
+//   type: 'value',
+//   matcher: function(prop) {
+//       // You can be more specific here if you only want 'em' units for font sizes
+//       return ["fontSize", "spacing", "borderRadius", "borderWidth", "sizing"].includes(prop.attributes.category);
+//   },
+//   transformer: function(prop) {
+//       // You can also modify the value here if you want to convert pixels to ems
+//       return parseFloat(prop.original.value) + 'px';
+//   }
+// });
diff --git a/figma-tokens/config/config.json b/figma-tokens/config/config.json
new file mode 100644
index 000000000..e6fa06338
--- /dev/null
+++ b/figma-tokens/config/config.json
@@ -0,0 +1,15 @@
+{
+  "source": ["./figma-tokens/transformed-tokens/**/*.json"],
+  "platforms": {
+    "scss": {
+      "transformGroup": "scss",
+      "buildPath": "./stories/assets/scss/figma-scss/",
+      "files": [
+        {
+          "destination": "_figma-variables.scss",
+          "format": "scss/variables"
+        }
+      ]
+    }
+  }
+}
diff --git a/figma-tokens/input/tokens.json b/figma-tokens/input/tokens.json
new file mode 100644
index 000000000..1d4b7b927
--- /dev/null
+++ b/figma-tokens/input/tokens.json
@@ -0,0 +1,499 @@
+{
+  "primitive": {
+    "spacing": {
+      "2": {
+        "value": "2px",
+        "type": "spacing"
+      },
+      "4": {
+        "value": "4px",
+        "type": "spacing"
+      },
+      "8": {
+        "value": "8px",
+        "type": "spacing"
+      },
+      "12": {
+        "value": "12px",
+        "type": "spacing"
+      },
+      "16": {
+        "value": "16px",
+        "type": "spacing"
+      },
+      "24": {
+        "value": "24px",
+        "type": "spacing"
+      },
+      "32": {
+        "value": "32px",
+        "type": "spacing"
+      },
+      "40": {
+        "value": "40px",
+        "type": "spacing"
+      },
+      "48": {
+        "value": "48px",
+        "type": "spacing"
+      },
+      "64": {
+        "value": "64px",
+        "type": "spacing"
+      },
+      "80": {
+        "value": "80px",
+        "type": "spacing"
+      },
+      "96": {
+        "value": "96px",
+        "type": "spacing"
+      },
+      "160": {
+        "value": "160px",
+        "type": "spacing"
+      }
+    },
+    "fontfamily": {
+      "proximanova": {
+        "value": "Proxima Nova",
+        "type": "fontFamilies"
+      },
+      "sohnebreit": {
+        "value": "Söhne Breit",
+        "type": "fontFamilies"
+      },
+      "notosans": {
+        "value": "Noto Sans",
+        "type": "fontFamilies"
+      },
+      "notosans-arabic": {
+        "value": "Noto Sans Arabic",
+        "type": "fontFamilies"
+      },
+      "notosans-burmese": {
+        "value": "Noto Sans Myanmar",
+        "type": "fontFamilies"
+      },
+      "notosans-chinese": {
+        "value": "Noto Sans SC",
+        "type": "fontFamilies"
+      },
+      "notosans-japanese": {
+        "value": "Noto Sans JP",
+        "type": "fontFamilies"
+      },
+      "notosans-georgian": {
+        "value": "Noto Sans Georgian",
+        "type": "fontFamilies"
+      },
+      "notosans-khmer": {
+        "value": "Noto Sans Khmer",
+        "type": "fontFamilies"
+      },
+      "notosans-korean": {
+        "value": "Noto Sans KR",
+        "type": "fontFamilies"
+      }
+    },
+    "fontsize": {
+      "14": {
+        "value": "14px",
+        "type": "fontSizes"
+      },
+      "16": {
+        "value": "16px",
+        "type": "fontSizes"
+      },
+      "20": {
+        "value": "20px",
+        "type": "fontSizes"
+      },
+      "25": {
+        "value": "25px",
+        "type": "fontSizes"
+      },
+      "30": {
+        "value": "30px",
+        "type": "fontSizes"
+      },
+      "32": {
+        "value": "32px",
+        "type": "fontSizes"
+      },
+      "35": {
+        "value": "35px",
+        "type": "fontSizes"
+      },
+      "40": {
+        "value": "40px",
+        "type": "fontSizes"
+      },
+      "45": {
+        "value": "45px",
+        "type": "fontSizes"
+      },
+      "47": {
+        "value": "47px",
+        "type": "fontSizes"
+      },
+      "55": {
+        "value": "55px",
+        "type": "fontSizes"
+      },
+      "82": {
+        "value": "82px",
+        "type": "fontSizes"
+      },
+      "100": {
+        "value": "100px",
+        "type": "fontSizes"
+      }
+    },
+    "color": {
+      "blue": {
+        "100": {
+          "value": "#B5D5F5",
+          "type": "color"
+        },
+        "200": {
+          "value": "#94C4F5",
+          "type": "color"
+        },
+        "300": {
+          "value": "#6BABEB",
+          "type": "color"
+        },
+        "400": {
+          "value": "#4F95DD",
+          "type": "color"
+        },
+        "500": {
+          "value": "#3288CE",
+          "type": "color"
+        },
+        "600": {
+          "value": "#006EB5",
+          "type": "color"
+        },
+        "700": {
+          "value": "#1F5A95",
+          "type": "color"
+        }
+      },
+      "gray": {
+        "100": {
+          "value": "#FAFAFA",
+          "type": "color"
+        },
+        "200": {
+          "value": "#F7F7F7",
+          "type": "color"
+        },
+        "300": {
+          "value": "#EDEFF0",
+          "type": "color"
+        },
+        "400": {
+          "value": "#D4D6D8",
+          "type": "color"
+        },
+        "500": {
+          "value": "#A9B1B7",
+          "type": "color"
+        },
+        "600": {
+          "value": "#55606E",
+          "type": "color"
+        },
+        "700": {
+          "value": "#232E3D",
+          "type": "color"
+        }
+      },
+      "yellow": {
+        "200": {
+          "value": "#FFE17E",
+          "type": "color"
+        },
+        "400": {
+          "value": "#FFEB00",
+          "type": "color"
+        },
+        "600": {
+          "value": "#FBC412",
+          "type": "color"
+        }
+      },
+      "red": {
+        "200": {
+          "value": "#FFBCB7",
+          "type": "color"
+        },
+        "400": {
+          "value": "#EE402D",
+          "type": "color"
+        },
+        "600": {
+          "value": "#D12800",
+          "type": "color"
+        }
+      },
+      "green": {
+        "200": {
+          "value": "#B8ECB6",
+          "type": "color"
+        },
+        "400": {
+          "value": "#6DE354",
+          "type": "color"
+        },
+        "600": {
+          "value": "#59BA47",
+          "type": "color"
+        }
+      },
+      "azure": {
+        "200": {
+          "value": "#A2DAF3",
+          "type": "color"
+        },
+        "400": {
+          "value": "#60D4F2",
+          "type": "color"
+        },
+        "600": {
+          "value": "#00C1FF",
+          "type": "color"
+        }
+      },
+      "black": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "white": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "sizing": {
+      "1": {
+        "value": "1px",
+        "type": "sizing"
+      },
+      "2": {
+        "value": "2px",
+        "type": "sizing"
+      },
+      "4": {
+        "value": "4px",
+        "type": "sizing"
+      },
+      "8": {
+        "value": "8px",
+        "type": "sizing"
+      },
+      "16": {
+        "value": "16px",
+        "type": "sizing"
+      },
+      "24": {
+        "value": "24px",
+        "type": "sizing"
+      },
+      "32": {
+        "value": "32px",
+        "type": "sizing"
+      },
+      "64": {
+        "value": "64px",
+        "type": "sizing"
+      },
+      "128": {
+        "value": "128px",
+        "type": "sizing"
+      },
+      "256": {
+        "value": "256px",
+        "type": "sizing"
+      },
+      "512": {
+        "value": "512px",
+        "type": "sizing"
+      },
+      "1024": {
+        "value": "1024px",
+        "type": "sizing"
+      }
+    },
+    "lineheight": {
+      "110%": {
+        "value": "110%",
+        "type": "lineHeights"
+      },
+      "137,5%": {
+        "value": "137,5%",
+        "type": "lineHeights"
+      }
+    },
+    "fontweight": {
+      "bold": {
+        "value": "700",
+        "type": "fontWeights"
+      },
+      "semibold": {
+        "value": "600",
+        "type": "fontWeights"
+      },
+      "regular": {
+        "value": "400",
+        "type": "fontWeights"
+      }
+    },
+    "textcase": {
+      "none": {
+        "value": "none",
+        "type": "textCase"
+      },
+      "uppercase": {
+        "value": "uppercase",
+        "type": "textCase"
+      }
+    }
+  },
+  "semantic": {
+    "fontfamily": {
+      "primary": {
+        "value": "{fontfamily.proximanova}",
+        "type": "fontFamilies"
+      },
+      "secondary": {
+        "value": "{fontfamily.sohnebreit}",
+        "type": "fontFamilies"
+      }
+    },
+    "fontsize": {
+      "body": {
+        "default": {
+          "value": "{fontsize.20}",
+          "type": "fontSizes"
+        },
+        "small": {
+          "value": "{fontsize.16}",
+          "type": "fontSizes"
+        }
+      },
+      "heading": {
+        "xxlarge": {
+          "value": "{fontsize.100}",
+          "type": "fontSizes"
+        },
+        "xlarge": {
+          "value": "{fontsize.55}",
+          "type": "fontSizes"
+        },
+        "large": {
+          "value": "{fontsize.35}",
+          "type": "fontSizes"
+        },
+        "medium": {
+          "value": "{fontsize.35}",
+          "type": "fontSizes"
+        },
+        "small": {
+          "value": "{fontsize.25}",
+          "type": "fontSizes"
+        },
+        "xsmall": {
+          "value": "{fontsize.16}",
+          "type": "fontSizes"
+        }
+      }
+    },
+    "lineheight": {
+      "body": {
+        "value": "{lineheight.137,5%}",
+        "type": "lineHeights"
+      },
+      "heading": {
+        "value": "{lineheight.110%}",
+        "type": "lineHeights"
+      }
+    },
+    "color": {
+      "text": {
+        "default": {
+          "value": "{color.black}",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "{color.white}",
+          "type": "color"
+        }
+      },
+      "accent": {
+        "value": "{color.yellow.400}",
+        "type": "color"
+      },
+      "brand": {
+        "value": "{color.blue.600}",
+        "type": "color"
+      },
+      "action": {
+        "primary": {
+          "value": "{color.red.600}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{color.blue.600}",
+          "type": "color"
+        }
+      },
+      "surface": {
+        "default": {
+          "value": "{color.gray.200}",
+          "type": "color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "{color.white}",
+          "type": "color"
+        }
+      },
+      "border": {
+        "default": {
+          "value": "{color.black}",
+          "type": "color"
+        },
+        "subtle": {
+          "value": "{color.gray.400}",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "{color.white}",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "default": {
+        "value": "2px",
+        "type": "borderWidth"
+      },
+      "subtle": {
+        "value": "1px",
+        "type": "borderWidth"
+      }
+    }
+  },
+  "component": {},
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": [
+      "primitive",
+      "semantic",
+      "component"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/figma-tokens/transformed-tokens/tokens-transformed.json b/figma-tokens/transformed-tokens/tokens-transformed.json
new file mode 100644
index 000000000..7bcc93020
--- /dev/null
+++ b/figma-tokens/transformed-tokens/tokens-transformed.json
@@ -0,0 +1,492 @@
+{
+  "fontfamily": {
+    "primary": {
+      "value": "Proxima Nova",
+      "type": "fontFamilies"
+    },
+    "secondary": {
+      "value": "Söhne Breit",
+      "type": "fontFamilies"
+    },
+    "proximanova": {
+      "value": "Proxima Nova",
+      "type": "fontFamilies"
+    },
+    "sohnebreit": {
+      "value": "Söhne Breit",
+      "type": "fontFamilies"
+    },
+    "notosans": {
+      "value": "Noto Sans",
+      "type": "fontFamilies"
+    },
+    "notosans-arabic": {
+      "value": "Noto Sans Arabic",
+      "type": "fontFamilies"
+    },
+    "notosans-burmese": {
+      "value": "Noto Sans Myanmar",
+      "type": "fontFamilies"
+    },
+    "notosans-chinese": {
+      "value": "Noto Sans SC",
+      "type": "fontFamilies"
+    },
+    "notosans-japanese": {
+      "value": "Noto Sans JP",
+      "type": "fontFamilies"
+    },
+    "notosans-georgian": {
+      "value": "Noto Sans Georgian",
+      "type": "fontFamilies"
+    },
+    "notosans-khmer": {
+      "value": "Noto Sans Khmer",
+      "type": "fontFamilies"
+    },
+    "notosans-korean": {
+      "value": "Noto Sans KR",
+      "type": "fontFamilies"
+    }
+  },
+  "fontsize": {
+    "14": {
+      "value": "14px",
+      "type": "fontSizes"
+    },
+    "16": {
+      "value": "16px",
+      "type": "fontSizes"
+    },
+    "20": {
+      "value": "20px",
+      "type": "fontSizes"
+    },
+    "25": {
+      "value": "25px",
+      "type": "fontSizes"
+    },
+    "30": {
+      "value": "30px",
+      "type": "fontSizes"
+    },
+    "32": {
+      "value": "32px",
+      "type": "fontSizes"
+    },
+    "35": {
+      "value": "35px",
+      "type": "fontSizes"
+    },
+    "40": {
+      "value": "40px",
+      "type": "fontSizes"
+    },
+    "45": {
+      "value": "45px",
+      "type": "fontSizes"
+    },
+    "47": {
+      "value": "47px",
+      "type": "fontSizes"
+    },
+    "55": {
+      "value": "55px",
+      "type": "fontSizes"
+    },
+    "82": {
+      "value": "82px",
+      "type": "fontSizes"
+    },
+    "100": {
+      "value": "100px",
+      "type": "fontSizes"
+    },
+    "body": {
+      "default": {
+        "value": "20px",
+        "type": "fontSizes"
+      },
+      "small": {
+        "value": "16px",
+        "type": "fontSizes"
+      }
+    },
+    "heading": {
+      "xxlarge": {
+        "value": "100px",
+        "type": "fontSizes"
+      },
+      "xlarge": {
+        "value": "55px",
+        "type": "fontSizes"
+      },
+      "large": {
+        "value": "35px",
+        "type": "fontSizes"
+      },
+      "medium": {
+        "value": "35px",
+        "type": "fontSizes"
+      },
+      "small": {
+        "value": "25px",
+        "type": "fontSizes"
+      },
+      "xsmall": {
+        "value": "16px",
+        "type": "fontSizes"
+      }
+    }
+  },
+  "lineheight": {
+    "body": {
+      "value": "137,5%",
+      "type": "lineHeights"
+    },
+    "heading": {
+      "value": "110%",
+      "type": "lineHeights"
+    },
+    "110%": {
+      "value": "110%",
+      "type": "lineHeights"
+    },
+    "137,5%": {
+      "value": "137,5%",
+      "type": "lineHeights"
+    }
+  },
+  "color": {
+    "text": {
+      "default": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "inverse": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "accent": {
+      "value": "#FFEB00",
+      "type": "color"
+    },
+    "brand": {
+      "value": "#006EB5",
+      "type": "color"
+    },
+    "action": {
+      "primary": {
+        "value": "#D12800",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#006EB5",
+        "type": "color"
+      }
+    },
+    "surface": {
+      "default": {
+        "value": "#F7F7F7",
+        "type": "color"
+      }
+    },
+    "background": {
+      "default": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "#000000",
+        "type": "color"
+      },
+      "subtle": {
+        "value": "#D4D6D8",
+        "type": "color"
+      },
+      "inverse": {
+        "value": "#ffffff",
+        "type": "color"
+      }
+    },
+    "blue": {
+      "100": {
+        "value": "#B5D5F5",
+        "type": "color"
+      },
+      "200": {
+        "value": "#94C4F5",
+        "type": "color"
+      },
+      "300": {
+        "value": "#6BABEB",
+        "type": "color"
+      },
+      "400": {
+        "value": "#4F95DD",
+        "type": "color"
+      },
+      "500": {
+        "value": "#3288CE",
+        "type": "color"
+      },
+      "600": {
+        "value": "#006EB5",
+        "type": "color"
+      },
+      "700": {
+        "value": "#1F5A95",
+        "type": "color"
+      }
+    },
+    "gray": {
+      "100": {
+        "value": "#FAFAFA",
+        "type": "color"
+      },
+      "200": {
+        "value": "#F7F7F7",
+        "type": "color"
+      },
+      "300": {
+        "value": "#EDEFF0",
+        "type": "color"
+      },
+      "400": {
+        "value": "#D4D6D8",
+        "type": "color"
+      },
+      "500": {
+        "value": "#A9B1B7",
+        "type": "color"
+      },
+      "600": {
+        "value": "#55606E",
+        "type": "color"
+      },
+      "700": {
+        "value": "#232E3D",
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "200": {
+        "value": "#FFE17E",
+        "type": "color"
+      },
+      "400": {
+        "value": "#FFEB00",
+        "type": "color"
+      },
+      "600": {
+        "value": "#FBC412",
+        "type": "color"
+      }
+    },
+    "red": {
+      "200": {
+        "value": "#FFBCB7",
+        "type": "color"
+      },
+      "400": {
+        "value": "#EE402D",
+        "type": "color"
+      },
+      "600": {
+        "value": "#D12800",
+        "type": "color"
+      }
+    },
+    "green": {
+      "200": {
+        "value": "#B8ECB6",
+        "type": "color"
+      },
+      "400": {
+        "value": "#6DE354",
+        "type": "color"
+      },
+      "600": {
+        "value": "#59BA47",
+        "type": "color"
+      }
+    },
+    "azure": {
+      "200": {
+        "value": "#A2DAF3",
+        "type": "color"
+      },
+      "400": {
+        "value": "#60D4F2",
+        "type": "color"
+      },
+      "600": {
+        "value": "#00C1FF",
+        "type": "color"
+      }
+    },
+    "black": {
+      "value": "#000000",
+      "type": "color"
+    },
+    "white": {
+      "value": "#ffffff",
+      "type": "color"
+    }
+  },
+  "border": {
+    "default": {
+      "value": "2px",
+      "type": "borderWidth"
+    },
+    "subtle": {
+      "value": "1px",
+      "type": "borderWidth"
+    }
+  },
+  "spacing": {
+    "2": {
+      "value": "2px",
+      "type": "spacing"
+    },
+    "4": {
+      "value": "4px",
+      "type": "spacing"
+    },
+    "8": {
+      "value": "8px",
+      "type": "spacing"
+    },
+    "12": {
+      "value": "12px",
+      "type": "spacing"
+    },
+    "16": {
+      "value": "16px",
+      "type": "spacing"
+    },
+    "24": {
+      "value": "24px",
+      "type": "spacing"
+    },
+    "32": {
+      "value": "32px",
+      "type": "spacing"
+    },
+    "40": {
+      "value": "40px",
+      "type": "spacing"
+    },
+    "48": {
+      "value": "48px",
+      "type": "spacing"
+    },
+    "64": {
+      "value": "64px",
+      "type": "spacing"
+    },
+    "80": {
+      "value": "80px",
+      "type": "spacing"
+    },
+    "96": {
+      "value": "96px",
+      "type": "spacing"
+    },
+    "160": {
+      "value": "160px",
+      "type": "spacing"
+    }
+  },
+  "sizing": {
+    "1": {
+      "value": "1px",
+      "type": "sizing"
+    },
+    "2": {
+      "value": "2px",
+      "type": "sizing"
+    },
+    "4": {
+      "value": "4px",
+      "type": "sizing"
+    },
+    "8": {
+      "value": "8px",
+      "type": "sizing"
+    },
+    "16": {
+      "value": "16px",
+      "type": "sizing"
+    },
+    "24": {
+      "value": "24px",
+      "type": "sizing"
+    },
+    "32": {
+      "value": "32px",
+      "type": "sizing"
+    },
+    "64": {
+      "value": "64px",
+      "type": "sizing"
+    },
+    "128": {
+      "value": "128px",
+      "type": "sizing"
+    },
+    "256": {
+      "value": "256px",
+      "type": "sizing"
+    },
+    "512": {
+      "value": "512px",
+      "type": "sizing"
+    },
+    "1024": {
+      "value": "1024px",
+      "type": "sizing"
+    }
+  },
+  "fontweight": {
+    "bold": {
+      "value": 700,
+      "type": "fontWeights"
+    },
+    "semibold": {
+      "value": 600,
+      "type": "fontWeights"
+    },
+    "regular": {
+      "value": 400,
+      "type": "fontWeights"
+    }
+  },
+  "textcase": {
+    "none": {
+      "value": "none",
+      "type": "textCase"
+    },
+    "uppercase": {
+      "value": "uppercase",
+      "type": "textCase"
+    }
+  },
+  "tokenSetOrder": {
+    "0": {
+      "value": "primitive",
+      "type": "other"
+    },
+    "1": {
+      "value": "semantic",
+      "type": "other"
+    },
+    "2": {
+      "value": "component",
+      "type": "other"
+    }
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 16f9b8f79..fab073bf1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,7 @@
         "chromatic": "^11.7.1",
         "copy-webpack-plugin": "^11.0.0",
         "core-js": "^3.32",
-        "css-loader": "^6.7.3",
+        "css-loader": "^6.11.0",
         "css-minimizer-webpack-plugin": "^5.0.0",
         "eslint": "^8.40.0",
         "eslint-config-airbnb": "^19.0.4",
@@ -95,6 +95,8 @@
         "sass": "^1.62.1",
         "sass-loader": "^13.3.2",
         "storybook": "^8.3.6",
+        "style-dictionary": "^4.1.4",
+        "style-dictionary-utils": "^4.0.0",
         "style-loader": "^3.3.2",
         "stylelint": "^16.9.0",
         "stylelint-config-prettier": "^9.0.5",
@@ -105,6 +107,7 @@
         "svg-spritemap-webpack-plugin": "^4.5.0",
         "svgo": "^3.0.2",
         "svgo-loader": "^4.0.0",
+        "token-transformer": "^0.0.33",
         "webpack": "^5.85.0",
         "webpack-cli": "^5.1.4",
         "webpack-remove-empty-scripts": "^1.0.4"
@@ -2514,6 +2517,366 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/@bundled-es-modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "ISC",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "glob": "^10.4.2",
+        "patch-package": "^8.0.0",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "string_decoder": "^1.3.0",
+        "url": "^0.11.3"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/patch-package": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
+      "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/yaml": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz",
+      "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "assert": "^2.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "memfs": "^4.9.3",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "util": "^0.12.5"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/memfs": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.14.0.tgz",
+      "integrity": "sha512-JUeY0F/fQZgIod31Ja1eJgiSxLn7BfQlCnqhwXFBzFHEw63OdLK7VJUJ7bnzNsWgCyoUP5tEp1VRY8rDaYzqOA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/json-pack": "^1.0.3",
+        "@jsonjoy.com/util": "^1.3.0",
+        "tree-dump": "^1.0.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      }
+    },
     "node_modules/@csstools/css-parser-algorithms": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz",
@@ -3419,6 +3782,63 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsonjoy.com/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pack": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz",
+      "integrity": "sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/base64": "^1.1.1",
+        "@jsonjoy.com/util": "^1.1.2",
+        "hyperdyperid": "^1.2.0",
+        "thingies": "^1.20.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/util": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.5.0.tgz",
+      "integrity": "sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/@mdx-js/react": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz",
@@ -5980,6 +6400,18 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/@zip.js/zip.js": {
+      "version": "2.7.52",
+      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.52.tgz",
+      "integrity": "sha512-+5g7FQswvrCHwYKNMd/KFxZSObctLSsQOgqBSi0LzwHo3li9Eh1w5cF5ndjQw9Zbr3ajVnd2+XyiX85gAetx1Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "bun": ">=0.7.0",
+        "deno": ">=1.0.0",
+        "node": ">=16.5.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -6557,6 +6989,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/assert": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
+      }
+    },
     "node_modules/ast-types": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
@@ -8433,6 +8879,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/change-case": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
+      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/character-entities": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
@@ -8744,6 +9197,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/color2k": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
+      "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -8803,6 +9263,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/component-emitter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
+      "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -13033,6 +13506,16 @@
         "hunspell-tojson": "bin/hunspell-tojson.js"
       }
     },
+    "node_modules/hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.18"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13778,12 +14261,29 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-map": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
-      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -14525,6 +15025,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz",
+      "integrity": "sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -14558,6 +15077,16 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "license": "Public Domain",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -22399,6 +22928,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-unified": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.1.0.tgz",
+      "integrity": "sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path/node_modules/inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
@@ -27697,6 +28233,16 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/stream": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz",
+      "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "component-emitter": "^2.0.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -27968,6 +28514,235 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-dictionary": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.1.4.tgz",
+      "integrity": "sha512-JCfF5/my6yTBp8qtcxdEY1JwR3JDq9fyosoJ+mpl/jMVZ0zVNsseIDJA/xMmm0P3GwuryHkwJwBMkm99HlXhfQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/glob": "^10.4.2",
+        "@bundled-es-modules/memfs": "^4.9.4",
+        "@zip.js/zip.js": "^2.7.44",
+        "chalk": "^5.3.0",
+        "change-case": "^5.3.0",
+        "commander": "^8.3.0",
+        "is-plain-obj": "^4.1.0",
+        "json5": "^2.2.2",
+        "patch-package": "^8.0.0",
+        "path-unified": "^0.1.0",
+        "tinycolor2": "^1.6.0"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary.js"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/style-dictionary-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary-utils/-/style-dictionary-utils-4.0.0.tgz",
+      "integrity": "sha512-S+CeU/L1uuPz8YCqu54fqdQhBV+Tg2PxfT8E0FlRq9HlMPKWVlDpZtIOK+WdJByTdCd18ATMKE/cam+/hnHbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color2k": "^2.0.3"
+      },
+      "peerDependencies": {
+        "style-dictionary": "^4"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/patch-package": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
+      "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/patch-package/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/yaml": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -29304,6 +30079,19 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/thingies": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
+      "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
+      "dev": true,
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
+      }
+    },
     "node_modules/timed-out": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
@@ -29321,6 +30109,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -29382,6 +30177,19 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/token-transformer": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/token-transformer/-/token-transformer-0.0.33.tgz",
+      "integrity": "sha512-0h7Cvo8trUcv6sZPyA+iNHsFEwIhN4FhXtYqgndHQNYub+dTDW8ZCQURBNDNa0PvJ8Xg2wqG1V/5WSwV0l6yOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "token-transformer": "cli.js"
+      }
+    },
     "node_modules/trash": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/trash/-/trash-7.2.0.tgz",
@@ -29537,6 +30345,23 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/tree-dump": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
+      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
diff --git a/package.json b/package.json
index 39021be08..f9e2f790b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --progress",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build --loglevel verbose"
+    "build-storybook": "storybook build --loglevel verbose",
+    "build-tokens": "node figma-tokens/build-figma-tokens.mjs"
   },
   "keywords": [
     "UNDP",
@@ -68,7 +69,7 @@
     "chromatic": "^11.7.1",
     "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.32",
-    "css-loader": "^6.7.3",
+    "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "eslint": "^8.40.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -99,6 +100,8 @@
     "sass": "^1.62.1",
     "sass-loader": "^13.3.2",
     "storybook": "^8.3.6",
+    "style-dictionary": "^4.1.4",
+    "style-dictionary-utils": "^4.0.0",
     "style-loader": "^3.3.2",
     "stylelint": "^16.9.0",
     "stylelint-config-prettier": "^9.0.5",
@@ -109,6 +112,7 @@
     "svg-spritemap-webpack-plugin": "^4.5.0",
     "svgo": "^3.0.2",
     "svgo-loader": "^4.0.0",
+    "token-transformer": "^0.0.33",
     "webpack": "^5.85.0",
     "webpack-cli": "^5.1.4",
     "webpack-remove-empty-scripts": "^1.0.4"
@@ -127,4 +131,4 @@
   "bugs": {
     "url": "https://github.com/undp/design-system/issues"
   }
-}
\ No newline at end of file
+}
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
new file mode 100644
index 000000000..aac5aea6c
--- /dev/null
+++ b/src/css/_variables.scss
@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$colors-tokens-color-white: #ffffff;
+$colors-tokens-color-black: #000000;
+$colors-tokens-color-light-red: #ffbcb7;
+$colors-tokens-color-red: #ee402d;
+$colors-tokens-color-dark-red: #d12800;
+$colors-tokens-color-light-yellow: #ffe17e;
+$colors-tokens-color-yellow: #ffeb00;
+$colors-tokens-color-dark-yellow: #fbc412;
+$colors-tokens-color-pink: #ff00ea;
+$colors-tokens-color-green: #1fff00;
diff --git a/stories/Components/UIcomponents/Modal/ModalSample.stories.js b/stories/Components/UIcomponents/Modal/ModalSample.stories.js
index 3d77c6b3e..f7df2418c 100644
--- a/stories/Components/UIcomponents/Modal/ModalSample.stories.js
+++ b/stories/Components/UIcomponents/Modal/ModalSample.stories.js
@@ -75,6 +75,7 @@ const getCaptionForLocale = (locale) => {
 
 export default {
   title: "Components/UI components/Modal" ,
+  component: ModalSample,
   parameters: {
     docs: {
         page: () => (
@@ -168,10 +169,39 @@ export default {
 
             </>
         )
-    }
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/WJSRV3CbcHuVWRQApwvWIm/UNDP-Design-System?node-id=18682-41233&t=Mo165CNMoIASN3TS-4',
+    },
   }
 }
 
+export const Example = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/WJSRV3CbcHuVWRQApwvWIm/UNDP-Design-System?node-id=18682-41233&t=Mo165CNMoIASN3TS-4',
+    },
+  },
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return (
+      <ModalSample
+        contenttile={caption.title}
+        contentname={caption.name}
+        descriptionText={caption.descriptionText}
+        descriptionText2={caption.descriptionText2}
+        button={caption.btnlabel}
+        alt={"modal image"}
+        image={img}
+        image2={img2}
+        {...args}
+      />
+    );
+  },
+};
+
 const Template = (args, { globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return (
@@ -191,3 +221,12 @@ const Template = (args, { globals: { locale } }) => {
 
 export const ModalSampleStory = Template.bind({});
 ModalSampleStory.storyName = "Modal";
+
+// export const Example = {
+//   parameters: {
+//     design: {
+//       type: 'figma',
+//       url: 'https://www.figma.com/design/WJSRV3CbcHuVWRQApwvWIm/UNDP-Design-System?m=auto&node-id=31-697&t=sq6iQxtXbxfnEi1v-1',
+//     },
+//   },
+// };
diff --git a/stories/assets/scss/_variables.scss b/stories/assets/scss/_variables.scss
index 97f194ffe..3867e707f 100644
--- a/stories/assets/scss/_variables.scss
+++ b/stories/assets/scss/_variables.scss
@@ -1,3 +1,5 @@
+@use './figma-scss/figma-variables';
+
 // Image variables
 $img-path: '../../../assets/images';
 $img-path-Icon: '../../../assets/icons';
diff --git a/stories/assets/scss/figma-scss/_figma-variables.scss b/stories/assets/scss/figma-scss/_figma-variables.scss
new file mode 100644
index 000000000..f0e413c53
--- /dev/null
+++ b/stories/assets/scss/figma-scss/_figma-variables.scss
@@ -0,0 +1,114 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$fontfamily-primary: Proxima Nova;
+$fontfamily-secondary: Söhne Breit;
+$fontfamily-proximanova: Proxima Nova;
+$fontfamily-sohnebreit: Söhne Breit;
+$fontfamily-notosans: Noto Sans;
+$fontfamily-notosans-arabic: Noto Sans Arabic;
+$fontfamily-notosans-burmese: Noto Sans Myanmar;
+$fontfamily-notosans-chinese: Noto Sans SC;
+$fontfamily-notosans-japanese: Noto Sans JP;
+$fontfamily-notosans-georgian: Noto Sans Georgian;
+$fontfamily-notosans-khmer: Noto Sans Khmer;
+$fontfamily-notosans-korean: Noto Sans KR;
+$fontsize-14: 14px;
+$fontsize-16: 16px;
+$fontsize-20: 20px;
+$fontsize-25: 25px;
+$fontsize-30: 30px;
+$fontsize-32: 32px;
+$fontsize-35: 35px;
+$fontsize-40: 40px;
+$fontsize-45: 45px;
+$fontsize-47: 47px;
+$fontsize-55: 55px;
+$fontsize-82: 82px;
+$fontsize-100: 100px;
+$fontsize-body-default: 20px;
+$fontsize-body-small: 16px;
+$fontsize-heading-xxlarge: 100px;
+$fontsize-heading-xlarge: 55px;
+$fontsize-heading-large: 35px;
+$fontsize-heading-medium: 35px;
+$fontsize-heading-small: 25px;
+$fontsize-heading-xsmall: 16px;
+$lineheight-body: 137,5%;
+$lineheight-heading: 110%;
+$lineheight-110: 110%;
+$lineheight-137-5: 137,5%;
+$color-text-default: #000000;
+$color-text-inverse: #ffffff;
+$color-accent: #ffeb00;
+$color-brand: #006eb5;
+$color-action-primary: #d12800;
+$color-action-secondary: #006eb5;
+$color-surface-default: #f7f7f7;
+$color-background-default: #ffffff;
+$color-border-default: #000000;
+$color-border-subtle: #d4d6d8;
+$color-border-inverse: #ffffff;
+$color-blue-100: #b5d5f5;
+$color-blue-200: #94c4f5;
+$color-blue-300: #6babeb;
+$color-blue-400: #4f95dd;
+$color-blue-500: #3288ce;
+$color-blue-600: #006eb5;
+$color-blue-700: #1f5a95;
+$color-gray-100: #fafafa;
+$color-gray-200: #f7f7f7;
+$color-gray-300: #edeff0;
+$color-gray-400: #d4d6d8;
+$color-gray-500: #a9b1b7;
+$color-gray-600: #55606e;
+$color-gray-700: #232e3d;
+$color-yellow-200: #ffe17e;
+$color-yellow-400: #ffeb00;
+$color-yellow-600: #fbc412;
+$color-red-200: #ffbcb7;
+$color-red-400: #ee402d;
+$color-red-600: #d12800;
+$color-green-200: #b8ecb6;
+$color-green-400: #6de354;
+$color-green-600: #59ba47;
+$color-azure-200: #a2daf3;
+$color-azure-400: #60d4f2;
+$color-azure-600: #00c1ff;
+$color-black: #000000;
+$color-white: #ffffff;
+$border-default: 2px;
+$border-subtle: 1px;
+$spacing-2: 2px;
+$spacing-4: 4px;
+$spacing-8: 8px;
+$spacing-12: 12px;
+$spacing-16: 16px;
+$spacing-24: 24px;
+$spacing-32: 32px;
+$spacing-40: 40px;
+$spacing-48: 48px;
+$spacing-64: 64px;
+$spacing-80: 80px;
+$spacing-96: 96px;
+$spacing-160: 160px;
+$sizing-1: 1px;
+$sizing-2: 2px;
+$sizing-4: 4px;
+$sizing-8: 8px;
+$sizing-16: 16px;
+$sizing-24: 24px;
+$sizing-32: 32px;
+$sizing-64: 64px;
+$sizing-128: 128px;
+$sizing-256: 256px;
+$sizing-512: 512px;
+$sizing-1024: 1024px;
+$fontweight-bold: 700;
+$fontweight-semibold: 600;
+$fontweight-regular: 400;
+$textcase-none: none;
+$textcase-uppercase: uppercase;
+$token-set-order-0: primitive;
+$token-set-order-1: semantic;
+$token-set-order-2: component;