From eb02c2bcd5adc98e06d22455b75d579e2bfc477f Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Fri, 16 Feb 2024 02:35:09 -0500
Subject: [PATCH] feat(styles): update style-dictionary tokens to figma
 refactor values

---
 .storybook/manager-head.html                  |  10 +-
 .storybook/preview-head.html                  |  10 +-
 README.md                                     |  25 +-
 package.json                                  |   3 +-
 packages/components/README.md                 |  25 +-
 packages/components/docs/eng-how-to.md        |  25 +-
 .../styles-dictionary/css/variables.css       | 288 +++++++---
 .../styles-dictionary/json/tailwind.json      | 291 +++++++---
 .../styles-dictionary/scss/_variables.scss    | 294 +++++++---
 .../styles-dictionary/style-dictionary.json   | 503 +++++++++++++-----
 .../styles-dictionary/tailwindFormat.js       |  62 ++-
 .../index.stories.tsx                         |   0
 packages/components/tsconfig.json             |   2 +-
 packages/data-viz/README.md                   |  25 +-
 .../styles-dictionary/css/variables.css       | 288 +++++++---
 .../styles-dictionary/json/tailwind.json      | 291 +++++++---
 .../styles-dictionary/scss/_variables.scss    | 294 +++++++---
 .../styles-dictionary/style-dictionary.json   | 503 +++++++++++++-----
 .../styles-dictionary/tailwindFormat.js       |  62 ++-
 19 files changed, 2169 insertions(+), 832 deletions(-)
 rename packages/components/src/core/{DesignTokens => Foundations}/index.stories.tsx (100%)

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 00069bc4d..6e71766d3 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -6,11 +6,15 @@
   href="https://user-images.githubusercontent.com/927990/204130290-897628ee-e89a-4911-89df-0956c9edf940.png"
   sizes="48x48"
 />
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
-  crossorigin="anonymous"
 />
 <title>SDS Design System</title>
 <style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 004eee977..7d00da9ad 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,10 @@
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
-  crossorigin="anonymous"
 />
diff --git a/README.md b/README.md
index 15fe574f8..3c912bc3f 100644
--- a/README.md
+++ b/README.md
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spacings from the theme object
+    const spacings = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
           padding-bottom: ${spacings?.m}px;
           margin-bottom: ${spacings?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
+  rel="stylesheet"
+/>
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/package.json b/package.json
index 0efbebe14..064b507f4 100644
--- a/package.json
+++ b/package.json
@@ -174,5 +174,6 @@
       "packages/*"
     ]
   },
-  "main": "index.js"
+  "main": "index.js",
+  "packageManager": "yarn@4.1.0"
 }
diff --git a/packages/components/README.md b/packages/components/README.md
index 15fe574f8..3c912bc3f 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spacings from the theme object
+    const spacings = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
           padding-bottom: ${spacings?.m}px;
           margin-bottom: ${spacings?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
+  rel="stylesheet"
+/>
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/packages/components/docs/eng-how-to.md b/packages/components/docs/eng-how-to.md
index 000c20e7f..f8149fb34 100644
--- a/packages/components/docs/eng-how-to.md
+++ b/packages/components/docs/eng-how-to.md
@@ -78,24 +78,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        //  getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    //  getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spacings from the theme object
+    const spacings = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
           padding-bottom: ${spacings?.m}px;
           margin-bottom: ${spacings?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -125,9 +125,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
+  rel="stylesheet"
+/>
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
index 9e13e0277..5b2336009 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -1,76 +1,200 @@
 :root {
-  --sds-font-letter-spacing-default: 0.3px;
-  --sds-font-letter-spacing-caps: 1px;
   --sds-font-color: black;
-  --sds-font-font-family: "Inter", "Inter-Regular";
-  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", "Inter-Regular";
-  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
-  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", "Inter-Regular";
-  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
-  --sds-font-body-xs-400-font: 400 13px/20px "Inter", "Inter-Regular";
-  --sds-font-body-xs-600-font: 600 13px/20px "Inter", "Inter-SemiBold";
-  --sds-font-body-s-400-font: 400 14px/24px "Inter", "Inter-Regular";
-  --sds-font-body-s-600-font: 600 14px/24px "Inter", "Inter-SemiBold";
-  --sds-font-body-m-400-font: 400 16px/26px "Inter", "Inter-Regular";
-  --sds-font-body-m-600-font: 600 16px/26px "Inter", "Inter-SemiBold";
-  --sds-font-body-l-400-font: 400 18px/28px "Inter", "Inter-Regular";
-  --sds-font-body-l-600-font: 600 18px/28px "Inter", "Inter-SemiBold";
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", "Inter-SemiBold";
+  --sds-font-font-family-body: "Inter", sans-serif;
+  --sds-font-font-family-caps: "Inter", sans-serif;
+  --sds-font-font-family-code: "IBM Plex Mono", monospace;
+  --sds-font-font-family-header: "Inter", sans-serif;
+  --sds-font-font-family-tabular: "Inter", sans-serif;
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-400-letter-spacing: 0.08px;
+  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-600-letter-spacing: 0.08px;
+  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-400-letter-spacing: 0.08px;
+  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-600-letter-spacing: 0.08px;
+  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-400-letter-spacing: 0px;
+  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-600-letter-spacing: 0px;
+  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-400-letter-spacing: 0px;
+  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-600-letter-spacing: 0px;
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
   --sds-font-caps-xxxxs-600-text-transform: uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
   --sds-font-caps-xxxs-600-text-transform: uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
   --sds-font-caps-xxs-600-text-transform: uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
-  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
-  --sds-font-header-xs-600-font: 600 13px/18px "Inter", "Inter-SemiBold";
-  --sds-font-header-s-600-font: 600 14px/20px "Inter", "Inter-SemiBold";
-  --sds-font-header-m-600-font: 600 16px/22px "Inter", "Inter-SemiBold";
-  --sds-font-header-l-600-font: 600 18px/24px "Inter", "Inter-SemiBold";
-  --sds-font-header-xl-600-font: 600 22px/30px "Inter", "Inter-SemiBold";
-  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", "Inter-SemiBold";
-  --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-  --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-  --sds-color-beta-100: #f4f0f9;
-  --sds-color-beta-200: #f0ebf6;
-  --sds-color-beta-400: #7a41ce;
-  --sds-color-beta-600: #693bac;
-  --sds-color-error-100: #fef2f2;
-  --sds-color-error-200: #f8e8e8;
-  --sds-color-error-400: #dc132c;
-  --sds-color-error-600: #b70016;
-  --sds-color-gray-100: #f8f8f8;
-  --sds-color-gray-200: #eaeaea;
-  --sds-color-gray-300: #cccccc;
-  --sds-color-gray-400: #999999;
-  --sds-color-gray-500: #767676;
-  --sds-color-gray-600: #545454;
-  --sds-color-gray-black: #000000;
-  --sds-color-gray-white: #ffffff;
-  --sds-color-info-100: #eff2fc;
-  --sds-color-info-200: #ebeffc;
-  --sds-color-info-400: #3867fa;
-  --sds-color-info-600: #223f9c;
-  --sds-color-primary-100: #f8f9fe;
-  --sds-color-primary-200: #eff2fc;
-  --sds-color-primary-300: #a9bdfc;
-  --sds-color-primary-400: #3867fa;
-  --sds-color-primary-500: #2b52cd;
-  --sds-color-primary-600: #223f9c;
-  --sds-color-secondary-400: #9bc74e;
-  --sds-color-success-100: #ecf5f0;
-  --sds-color-success-200: #e6f7ed;
-  --sds-color-success-400: #3cb371;
-  --sds-color-success-600: #1c7f48;
-  --sds-color-warning-100: #fcf6ec;
-  --sds-color-warning-200: #fff3e1;
-  --sds-color-warning-400: #f5a623;
-  --sds-color-warning-600: #946314;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-header-xxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+  --sds-font-header-xs-600-letter-spacing: 0.08px;
+  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+  --sds-font-header-s-600-letter-spacing: 0.08px;
+  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+  --sds-font-header-m-600-letter-spacing: 0px;
+  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+  --sds-font-header-l-600-letter-spacing: 0px;
+  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+  --sds-font-header-xl-600-letter-spacing: 0px;
+  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+  --sds-font-header-xxl-600-letter-spacing: 0px;
+  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-400-letter-spacing: 0px;
+  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-600-letter-spacing: 0px;
+  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-400-letter-spacing: 0px;
+  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-600-letter-spacing: 0px;
+  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-400-letter-spacing: 0px;
+  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-600-letter-spacing: 0px;
+  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-400-letter-spacing: 0px;
+  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-600-letter-spacing: 0px;
+  --sds-color-primitive-blue-100: #f5f9ff;
+  --sds-color-primitive-blue-200: #e9f1ff;
+  --sds-color-primitive-blue-300: #a6c9ff;
+  --sds-color-primitive-blue-400: #0b68f8;
+  --sds-color-primitive-blue-500: #0142a4;
+  --sds-color-primitive-blue-600: #002660;
+  --sds-color-primitive-gray-100: #f8f8f8;
+  --sds-color-primitive-gray-200: #eaeaea;
+  --sds-color-primitive-gray-300: #cccccc;
+  --sds-color-primitive-gray-400: #999999;
+  --sds-color-primitive-gray-500: #767676;
+  --sds-color-primitive-gray-600: #545454;
+  --sds-color-primitive-gray-black: #000000;
+  --sds-color-primitive-gray-white: #ffffff;
+  --sds-color-primitive-green-100: #ecf5f0;
+  --sds-color-primitive-green-200: #e6f7ed;
+  --sds-color-primitive-green-400: #3cb371;
+  --sds-color-primitive-green-500: #349a61;
+  --sds-color-primitive-green-600: #1c7f48;
+  --sds-color-primitive-purple-100: #f4f0f9;
+  --sds-color-primitive-purple-200: #f0ebf6;
+  --sds-color-primitive-purple-400: #7a41ce;
+  --sds-color-primitive-purple-500: #703cbe;
+  --sds-color-primitive-purple-600: #693bac;
+  --sds-color-primitive-red-100: #fef2f2;
+  --sds-color-primitive-red-200: #f8e8e8;
+  --sds-color-primitive-red-400: #dc132c;
+  --sds-color-primitive-red-500: #c61128;
+  --sds-color-primitive-red-600: #b70016;
+  --sds-color-primitive-yellow-100: #fcf6ec;
+  --sds-color-primitive-yellow-200: #fff3e1;
+  --sds-color-primitive-yellow-400: #f5a623;
+  --sds-color-primitive-yellow-500: #d8921f;
+  --sds-color-primitive-yellow-600: #946314;
+  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+  --sds-color-semantic-text-base-primary: #000000;
+  --sds-color-semantic-text-base-secondary: #767676;
+  --sds-color-semantic-text-base-disabled: #cccccc;
+  --sds-color-semantic-text-base-on-fill: #ffffff;
+  --sds-color-semantic-text-base-on-fill-disabled: #999999;
+  --sds-color-semantic-text-base-accent: #002660;
+  --sds-color-semantic-text-action-default: #0b68f8;
+  --sds-color-semantic-text-action-hover: #0142a4;
+  --sds-color-semantic-text-action-pressed: #002660;
+  --sds-color-semantic-text-beta: #693bac;
+  --sds-color-semantic-text-info: #002660;
+  --sds-color-semantic-text-negative: #b70016;
+  --sds-color-semantic-text-notice: #946314;
+  --sds-color-semantic-text-positive: #1c7f48;
+  --sds-color-semantic-component-base-fill: #ffffff;
+  --sds-color-semantic-component-base-fill-hover: #f8f8f8;
+  --sds-color-semantic-component-base-fill-pressed: #f8f8f8;
+  --sds-color-semantic-component-base-fill-open: #f8f8f8;
+  --sds-color-semantic-component-base-fill-selected: #000000;
+  --sds-color-semantic-component-base-fill-disabled: #cccccc;
+  --sds-color-semantic-component-base-on-fill-disabled: #999999;
+  --sds-color-semantic-component-base-surface-primary: #ffffff;
+  --sds-color-semantic-component-base-surface-secondary: #f8f8f8;
+  --sds-color-semantic-component-base-surface-tertiary: #eaeaea;
+  --sds-color-semantic-component-base-divider: #eaeaea;
+  --sds-color-semantic-component-base-border: #999999;
+  --sds-color-semantic-component-base-border-hover: #000000;
+  --sds-color-semantic-component-base-border-disabled: #cccccc;
+  --sds-color-semantic-component-base-icon: #767676;
+  --sds-color-semantic-component-base-icon-hover: #000000;
+  --sds-color-semantic-component-base-icon-pressed: #000000;
+  --sds-color-semantic-component-base-icon-disabled: #cccccc;
+  --sds-color-semantic-component-accent-fill: #0b68f8;
+  --sds-color-semantic-component-accent-fill-hover: #0142a4;
+  --sds-color-semantic-component-accent-fill-pressed: #002660;
+  --sds-color-semantic-component-accent-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-accent-fill-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-surface: #e9f1ff;
+  --sds-color-semantic-component-accent-border: #0b68f8;
+  --sds-color-semantic-component-accent-border-hover: #0142a4;
+  --sds-color-semantic-component-accent-border-open: #0b68f8;
+  --sds-color-semantic-component-accent-border-focus: #0b68f8;
+  --sds-color-semantic-component-accent-border-selected: #0b68f8;
+  --sds-color-semantic-component-accent-border-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-icon: #0b68f8;
+  --sds-color-semantic-component-beta-fill: #7a41ce;
+  --sds-color-semantic-component-beta-fill-hover: #703cbe;
+  --sds-color-semantic-component-beta-fill-pressed: #693bac;
+  --sds-color-semantic-component-beta-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-beta-surface: #f0ebf6;
+  --sds-color-semantic-component-beta-border: #7a41ce;
+  --sds-color-semantic-component-beta-icon: #7a41ce;
+  --sds-color-semantic-component-info-fill: #0b68f8;
+  --sds-color-semantic-component-info-fill-hover: #0142a4;
+  --sds-color-semantic-component-info-fill-pressed: #002660;
+  --sds-color-semantic-component-info-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-info-surface: #e9f1ff;
+  --sds-color-semantic-component-info-border: #0b68f8;
+  --sds-color-semantic-component-info-icon: #0b68f8;
+  --sds-color-semantic-component-negative-fill: #dc132c;
+  --sds-color-semantic-component-negative-fill-hover: #c61128;
+  --sds-color-semantic-component-negative-fill-pressed: #b70016;
+  --sds-color-semantic-component-negative-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-negative-surface: #f8e8e8;
+  --sds-color-semantic-component-negative-border: #dc132c;
+  --sds-color-semantic-component-negative-icon: #dc132c;
+  --sds-color-semantic-component-notice-fill: #f5a623;
+  --sds-color-semantic-component-notice-fill-hover: #d8921f;
+  --sds-color-semantic-component-notice-fill-pressed: #946314;
+  --sds-color-semantic-component-notice-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-notice-surface: #fff3e1;
+  --sds-color-semantic-component-notice-border: #f5a623;
+  --sds-color-semantic-component-notice-icon: #f5a623;
+  --sds-color-semantic-component-positive-fill: #3cb371;
+  --sds-color-semantic-component-positive-fill-hover: #349a61;
+  --sds-color-semantic-component-positive-fill-pressed: #1c7f48;
+  --sds-color-semantic-component-positive-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-positive-surface: #e6f7ed;
+  --sds-color-semantic-component-positive-border: #3cb371;
+  --sds-color-semantic-component-positive-icon: #3cb371;
   --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
   --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
     0px 2px 4px 0px rgba(0, 0, 0, 0.15);
   --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  --sds-borders-error-400: 1px solid #dc132c;
+  --sds-borders-error-400: 1px solid #fef2f2;
   --sds-borders-gray-100: 1px solid #f8f8f8;
   --sds-borders-gray-200: 1px solid #eaeaea;
   --sds-borders-gray-300: 1px solid #cccccc;
@@ -79,30 +203,30 @@
   --sds-borders-gray-dashed: 2px dashed #999999;
   --sds-borders-link-dashed: 1px dashed;
   --sds-borders-link-solid: 1px solid;
-  --sds-borders-primary-300: 1px solid #a9bdfc;
-  --sds-borders-primary-400: 1px solid #3867fa;
-  --sds-borders-primary-500: 1px solid #2b52cd;
-  --sds-borders-primary-600: 1px solid #223f9c;
-  --sds-borders-primary-dashed: 2px dashed #3867fa;
-  --sds-borders-success-400: 1px solid #3cb371;
-  --sds-borders-warning-400: 1px solid #f5a623;
-  --sds-spaces-default: 10px;
+  --sds-borders-primary-300: 1px solid #a6c9ff;
+  --sds-borders-primary-400: 1px solid #0b68f8;
+  --sds-borders-primary-500: 1px solid #0142a4;
+  --sds-borders-primary-600: 1px solid #002660;
+  --sds-borders-primary-dashed: 2px dashed #0b68f8;
+  --sds-borders-success-400: 1px solid #ecf5f0;
+  --sds-borders-warning-400: 1px solid #fcf6ec;
+  --sds-spaces-default: 12px;
   --sds-spaces-xxxs: 2px;
   --sds-spaces-xxs: 4px;
   --sds-spaces-xs: 6px;
   --sds-spaces-s: 8px;
-  --sds-spaces-m: 10px;
-  --sds-spaces-l: 14px;
-  --sds-spaces-xl: 22px;
-  --sds-spaces-xxl: 38px;
+  --sds-spaces-m: 12px;
+  --sds-spaces-l: 16px;
+  --sds-spaces-xl: 24px;
+  --sds-spaces-xxl: 40px;
   --sds-icon-sizes-input-height: 16px;
   --sds-icon-sizes-input-width: 16px;
-  --sds-icon-sizes-xs-height: 10px;
-  --sds-icon-sizes-xs-width: 10px;
-  --sds-icon-sizes-s-height: 14px;
-  --sds-icon-sizes-s-width: 14px;
-  --sds-icon-sizes-l-height: 22px;
-  --sds-icon-sizes-l-width: 22px;
+  --sds-icon-sizes-xs-height: 12px;
+  --sds-icon-sizes-xs-width: 12px;
+  --sds-icon-sizes-s-height: 16px;
+  --sds-icon-sizes-s-width: 16px;
+  --sds-icon-sizes-l-height: 24px;
+  --sds-icon-sizes-l-width: 24px;
   --sds-icon-sizes-xl-height: 32px;
   --sds-icon-sizes-xl-width: 32px;
   --sds-corners-corner-l: 20px;
diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
index 35b0fc806..5241e82a9 100644
--- a/packages/components/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1,13 +1,10 @@
 {
   "fontFamily": {
-    "sds-regular": [
-      "Inter",
-      "Inter-Regular"
-    ],
-    "sds-semibold": [
-      "Inter",
-      "Inter-SemiBold"
-    ]
+    "sds-body": "\"Inter\", sans-serif",
+    "sds-caps": "\"Inter\", sans-serif",
+    "sds-code": "\"IBM Plex Mono\", monospace",
+    "sds-header": "\"Inter\", sans-serif",
+    "sds-tabular": "\"Inter\", sans-serif"
   },
   "fontSize": {
     "sds-body-xxxs": "11px",
@@ -26,7 +23,57 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "fontVariantNumeric": {
+    "sds-body-xxxs": "normal",
+    "sds-body-xxs": "normal",
+    "sds-body-xs": "normal",
+    "sds-body-s": "normal",
+    "sds-body-m": "normal",
+    "sds-body-l": "normal",
+    "sds-caps-xxxxs": "normal",
+    "sds-caps-xxxs": "normal",
+    "sds-caps-xxs": "normal",
+    "sds-header-xxxs": "normal",
+    "sds-header-xxs": "normal",
+    "sds-header-xs": "normal",
+    "sds-header-s": "normal",
+    "sds-header-m": "normal",
+    "sds-header-l": "normal",
+    "sds-header-xl": "normal",
+    "sds-header-xxl": "normal",
+    "sds-tabular-xs": "tabular-nums",
+    "sds-tabular-s": "tabular-nums",
+    "sds-code-xs": "normal",
+    "sds-code-s": "normal"
+  },
+  "letterSpacing": {
+    "sds-body-xxxs": "0.1px",
+    "sds-body-xxs": "0.1px",
+    "sds-body-xs": "0.08px",
+    "sds-body-s": "0.08px",
+    "sds-body-m": "0px",
+    "sds-body-l": "0px",
+    "sds-caps-xxxxs": "0.5px",
+    "sds-caps-xxxs": "0.5px",
+    "sds-caps-xxs": "0.5px",
+    "sds-header-xxxs": "0.1px",
+    "sds-header-xxs": "0.1px",
+    "sds-header-xs": "0.08px",
+    "sds-header-s": "0.08px",
+    "sds-header-m": "0px",
+    "sds-header-l": "0px",
+    "sds-header-xl": "0px",
+    "sds-header-xxl": "0px",
+    "sds-tabular-xs": "0px",
+    "sds-tabular-s": "0px",
+    "sds-code-xs": "0px",
+    "sds-code-s": "0px"
   },
   "lineHeight": {
     "sds-body-xxxs": "11px",
@@ -45,20 +92,47 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "textTransform": {
+    "sds-body-xxxs": "none",
+    "sds-body-xxs": "none",
+    "sds-body-xs": "none",
+    "sds-body-s": "none",
+    "sds-body-m": "none",
+    "sds-body-l": "none",
+    "sds-caps-xxxxs": " uppercase",
+    "sds-caps-xxxs": " uppercase",
+    "sds-caps-xxs": " uppercase",
+    "sds-header-xxxs": "none",
+    "sds-header-xxs": "none",
+    "sds-header-xs": "none",
+    "sds-header-s": "none",
+    "sds-header-m": "none",
+    "sds-header-l": "none",
+    "sds-header-xl": "none",
+    "sds-header-xxl": "none",
+    "sds-tabular-xs": "none",
+    "sds-tabular-s": "none",
+    "sds-code-xs": "none",
+    "sds-code-s": "none"
   },
   "height": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "width": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "borderRadius": {
@@ -73,75 +147,132 @@
     "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
   },
   "colors": {
-    "sds-overlay": {
-      "100": "rgba(0, 0, 0, 0.08)",
-      "200": "rgba(0, 0, 0, 0.03)"
-    },
-    "sds-beta": {
-      "100": "#f4f0f9",
-      "200": "#f0ebf6",
-      "400": "#7a41ce",
-      "600": "#693bac"
-    },
-    "sds-error": {
-      "100": "#fef2f2",
-      "200": "#f8e8e8",
-      "400": "#dc132c",
-      "600": "#b70016"
-    },
-    "sds-gray": {
-      "100": "#f8f8f8",
-      "200": "#eaeaea",
-      "300": "#cccccc",
-      "400": "#999999",
-      "500": "#767676",
-      "600": "#545454",
-      "black": "#000000",
-      "white": "#ffffff"
-    },
-    "sds-info": {
-      "100": "#eff2fc",
-      "200": "#ebeffc",
-      "400": "#3867fa",
-      "600": "#223f9c"
-    },
-    "sds-primary": {
-      "100": "#f8f9fe",
-      "200": "#eff2fc",
-      "300": "#a9bdfc",
-      "400": "#3867fa",
-      "500": "#2b52cd",
-      "600": "#223f9c"
-    },
-    "sds-secondary": {
-      "400": "#9bc74e"
-    },
-    "sds-success": {
-      "100": "#ecf5f0",
-      "200": "#e6f7ed",
-      "400": "#3cb371",
-      "600": "#1c7f48"
-    },
-    "sds-warning": {
-      "100": "#fcf6ec",
-      "200": "#fff3e1",
-      "400": "#f5a623",
-      "600": "#946314"
-    }
-  },
-  "letterSpacing": {
-    "sds-default": "0.3px",
-    "sds-caps": "1px"
+    "sds-color-primitive-blue-100": "#F5F9FF",
+    "sds-color-primitive-blue-200": "#E9F1FF",
+    "sds-color-primitive-blue-300": "#A6C9FF",
+    "sds-color-primitive-blue-400": "#0B68F8",
+    "sds-color-primitive-blue-500": "#0142A4",
+    "sds-color-primitive-blue-600": "#002660",
+    "sds-color-primitive-gray-100": "#F8F8F8",
+    "sds-color-primitive-gray-200": "#EAEAEA",
+    "sds-color-primitive-gray-300": "#CCCCCC",
+    "sds-color-primitive-gray-400": "#999999",
+    "sds-color-primitive-gray-500": "#767676",
+    "sds-color-primitive-gray-600": "#545454",
+    "sds-color-primitive-gray-black": "#000000",
+    "sds-color-primitive-gray-white": "#FFFFFF",
+    "sds-color-primitive-green-100": "#ECF5F0",
+    "sds-color-primitive-green-200": "#E6F7ED",
+    "sds-color-primitive-green-400": "#3CB371",
+    "sds-color-primitive-green-500": "#349A61",
+    "sds-color-primitive-green-600": "#1C7F48",
+    "sds-color-primitive-purple-100": "#F4F0F9",
+    "sds-color-primitive-purple-200": "#F0EBF6",
+    "sds-color-primitive-purple-400": "#7A41CE",
+    "sds-color-primitive-purple-500": "#703CBE",
+    "sds-color-primitive-purple-600": "#693BAC",
+    "sds-color-primitive-red-100": "#FEF2F2",
+    "sds-color-primitive-red-200": "#F8E8E8",
+    "sds-color-primitive-red-400": "#DC132C",
+    "sds-color-primitive-red-500": "#C61128",
+    "sds-color-primitive-red-600": "#B70016",
+    "sds-color-primitive-yellow-100": "#FCF6EC",
+    "sds-color-primitive-yellow-200": "#FFF3E1",
+    "sds-color-primitive-yellow-400": "#F5A623",
+    "sds-color-primitive-yellow-500": "#D8921F",
+    "sds-color-primitive-yellow-600": "#946314",
+    "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
+    "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
+    "sds-color-semantic-text-base-primary": "#000000",
+    "sds-color-semantic-text-base-secondary": "#767676",
+    "sds-color-semantic-text-base-disabled": "#CCCCCC",
+    "sds-color-semantic-text-base-on-fill": "#FFFFFF",
+    "sds-color-semantic-text-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-text-base-accent": "#002660",
+    "sds-color-semantic-text-action-default": "#0B68F8",
+    "sds-color-semantic-text-action-hover": "#0142A4",
+    "sds-color-semantic-text-action-pressed": "#002660",
+    "sds-color-semantic-text-beta": "#693BAC",
+    "sds-color-semantic-text-info": "#002660",
+    "sds-color-semantic-text-negative": "#B70016",
+    "sds-color-semantic-text-notice": "#946314",
+    "sds-color-semantic-text-positive": "#1C7F48",
+    "sds-color-semantic-component-base-fill": "#FFFFFF",
+    "sds-color-semantic-component-base-fill-hover": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-pressed": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-open": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-selected": "#000000",
+    "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
+    "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
+    "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
+    "sds-color-semantic-component-base-divider": "#EAEAEA",
+    "sds-color-semantic-component-base-border": "#999999",
+    "sds-color-semantic-component-base-border-hover": "#000000",
+    "sds-color-semantic-component-base-border-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-icon": "#767676",
+    "sds-color-semantic-component-base-icon-hover": "#000000",
+    "sds-color-semantic-component-base-icon-pressed": "#000000",
+    "sds-color-semantic-component-base-icon-disabled": "#CCCCCC",
+    "sds-color-semantic-component-accent-fill": "#0B68F8",
+    "sds-color-semantic-component-accent-fill-hover": "#0142A4",
+    "sds-color-semantic-component-accent-fill-pressed": "#002660",
+    "sds-color-semantic-component-accent-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-accent-fill-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-surface": "#E9F1FF",
+    "sds-color-semantic-component-accent-border": "#0B68F8",
+    "sds-color-semantic-component-accent-border-hover": "#0142A4",
+    "sds-color-semantic-component-accent-border-open": "#0B68F8",
+    "sds-color-semantic-component-accent-border-focus": "#0B68F8",
+    "sds-color-semantic-component-accent-border-selected": "#0B68F8",
+    "sds-color-semantic-component-accent-border-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-icon": "#0B68F8",
+    "sds-color-semantic-component-beta-fill": "#7A41CE",
+    "sds-color-semantic-component-beta-fill-hover": "#703CBE",
+    "sds-color-semantic-component-beta-fill-pressed": "#693BAC",
+    "sds-color-semantic-component-beta-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-beta-surface": "#F0EBF6",
+    "sds-color-semantic-component-beta-border": "#7A41CE",
+    "sds-color-semantic-component-beta-icon": "#7A41CE",
+    "sds-color-semantic-component-info-fill": "#0B68F8",
+    "sds-color-semantic-component-info-fill-hover": "#0142A4",
+    "sds-color-semantic-component-info-fill-pressed": "#002660",
+    "sds-color-semantic-component-info-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-info-surface": "#E9F1FF",
+    "sds-color-semantic-component-info-border": "#0B68F8",
+    "sds-color-semantic-component-info-icon": "#0B68F8",
+    "sds-color-semantic-component-negative-fill": "#DC132C",
+    "sds-color-semantic-component-negative-fill-hover": "#C61128",
+    "sds-color-semantic-component-negative-fill-pressed": "#B70016",
+    "sds-color-semantic-component-negative-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-negative-surface": "#F8E8E8",
+    "sds-color-semantic-component-negative-border": "#DC132C",
+    "sds-color-semantic-component-negative-icon": "#DC132C",
+    "sds-color-semantic-component-notice-fill": "#F5A623",
+    "sds-color-semantic-component-notice-fill-hover": "#D8921F",
+    "sds-color-semantic-component-notice-fill-pressed": "#946314",
+    "sds-color-semantic-component-notice-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-notice-surface": "#FFF3E1",
+    "sds-color-semantic-component-notice-border": "#F5A623",
+    "sds-color-semantic-component-notice-icon": "#F5A623",
+    "sds-color-semantic-component-positive-fill": "#3CB371",
+    "sds-color-semantic-component-positive-fill-hover": "#349A61",
+    "sds-color-semantic-component-positive-fill-pressed": "#1C7F48",
+    "sds-color-semantic-component-positive-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-positive-surface": "#E6F7ED",
+    "sds-color-semantic-component-positive-border": "#3CB371",
+    "sds-color-semantic-component-positive-icon": "#3CB371"
   },
   "spacing": {
-    "sds-default": "10px",
+    "sds-default": "12px",
     "sds-xxxs": "2px",
     "sds-xxs": "4px",
     "sds-xs": "6px",
     "sds-s": "8px",
-    "sds-m": "10px",
-    "sds-l": "14px",
-    "sds-xl": "22px",
-    "sds-xxl": "38px"
+    "sds-m": "12px",
+    "sds-l": "16px",
+    "sds-xl": "24px",
+    "sds-xxl": "40px"
   }
 }
\ No newline at end of file
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index c4fd2483d..a05415fc1 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -1,106 +1,230 @@
-$sds-font-letter-spacing-default: 0.3px;
-$sds-font-letter-spacing-caps: 1px;
 $sds-font-color: black;
-$sds-font-font-family: 'Inter', 'Inter-Regular';
-$sds-font-body-xxxs-400-font: 400 11px/16px 'Inter', 'Inter-Regular';
-$sds-font-body-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
-$sds-font-body-xxs-400-font: 400 12px/18px 'Inter', 'Inter-Regular';
-$sds-font-body-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
-$sds-font-body-xs-400-font: 400 13px/20px 'Inter', 'Inter-Regular';
-$sds-font-body-xs-600-font: 600 13px/20px 'Inter', 'Inter-SemiBold';
-$sds-font-body-s-400-font: 400 14px/24px 'Inter', 'Inter-Regular';
-$sds-font-body-s-600-font: 600 14px/24px 'Inter', 'Inter-SemiBold';
-$sds-font-body-m-400-font: 400 16px/26px 'Inter', 'Inter-Regular';
-$sds-font-body-m-600-font: 600 16px/26px 'Inter', 'Inter-SemiBold';
-$sds-font-body-l-400-font: 400 18px/28px 'Inter', 'Inter-Regular';
-$sds-font-body-l-600-font: 600 18px/28px 'Inter', 'Inter-SemiBold';
-$sds-font-caps-xxxxs-600-font: 600 10px/14px 'Inter', 'Inter-SemiBold';
+$sds-font-font-family-body: "Inter", sans-serif;
+$sds-font-font-family-caps: "Inter", sans-serif;
+$sds-font-font-family-code: "IBM Plex Mono", monospace;
+$sds-font-font-family-header: "Inter", sans-serif;
+$sds-font-font-family-tabular: "Inter", sans-serif;
+$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-600-letter-spacing: 0.1px;
+$sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-600-letter-spacing: 0.1px;
+$sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-400-letter-spacing: 0.08px;
+$sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-600-letter-spacing: 0.08px;
+$sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-body-s-400-letter-spacing: 0.08px;
+$sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-body-s-600-letter-spacing: 0.08px;
+$sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+$sds-font-body-m-400-letter-spacing: 0px;
+$sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+$sds-font-body-m-600-letter-spacing: 0px;
+$sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+$sds-font-body-l-400-letter-spacing: 0px;
+$sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+$sds-font-body-l-600-letter-spacing: 0px;
+$sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+$sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
+$sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-caps-xxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
+$sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-caps-xxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxs-600-text-transform:  uppercase;
-$sds-font-header-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xs-600-font: 600 13px/18px 'Inter', 'Inter-SemiBold';
-$sds-font-header-s-600-font: 600 14px/20px 'Inter', 'Inter-SemiBold';
-$sds-font-header-m-600-font: 600 16px/22px 'Inter', 'Inter-SemiBold';
-$sds-font-header-l-600-font: 600 18px/24px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xl-600-font: 600 22px/30px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xxl-600-font: 600 26px/34px 'Inter', 'Inter-SemiBold';
-$sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-$sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-$sds-color-beta-100: #f4f0f9;
-$sds-color-beta-200: #f0ebf6;
-$sds-color-beta-400: #7a41ce;
-$sds-color-beta-600: #693bac;
-$sds-color-error-100: #fef2f2;
-$sds-color-error-200: #f8e8e8;
-$sds-color-error-400: #dc132c;
-$sds-color-error-600: #b70016;
-$sds-color-gray-100: #f8f8f8;
-$sds-color-gray-200: #eaeaea;
-$sds-color-gray-300: #cccccc;
-$sds-color-gray-400: #999999;
-$sds-color-gray-500: #767676;
-$sds-color-gray-600: #545454;
-$sds-color-gray-black: #000000;
-$sds-color-gray-white: #ffffff;
-$sds-color-info-100: #eff2fc;
-$sds-color-info-200: #ebeffc;
-$sds-color-info-400: #3867fa;
-$sds-color-info-600: #223f9c;
-$sds-color-primary-100: #f8f9fe;
-$sds-color-primary-200: #eff2fc;
-$sds-color-primary-300: #a9bdfc;
-$sds-color-primary-400: #3867fa;
-$sds-color-primary-500: #2b52cd;
-$sds-color-primary-600: #223f9c;
-$sds-color-secondary-400: #9bc74e;
-$sds-color-success-100: #ecf5f0;
-$sds-color-success-200: #e6f7ed;
-$sds-color-success-400: #3cb371;
-$sds-color-success-600: #1c7f48;
-$sds-color-warning-100: #fcf6ec;
-$sds-color-warning-200: #fff3e1;
-$sds-color-warning-400: #f5a623;
-$sds-color-warning-600: #946314;
+$sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-header-xxxs-600-letter-spacing: 0.1px;
+$sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-header-xxs-600-letter-spacing: 0.1px;
+$sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+$sds-font-header-xs-600-letter-spacing: 0.08px;
+$sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+$sds-font-header-s-600-letter-spacing: 0.08px;
+$sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+$sds-font-header-m-600-letter-spacing: 0px;
+$sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+$sds-font-header-l-600-letter-spacing: 0px;
+$sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+$sds-font-header-xl-600-letter-spacing: 0px;
+$sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+$sds-font-header-xxl-600-letter-spacing: 0px;
+$sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-400-letter-spacing: 0px;
+$sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-600-letter-spacing: 0px;
+$sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-400-letter-spacing: 0px;
+$sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-600-letter-spacing: 0px;
+$sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-400-letter-spacing: 0px;
+$sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-600-letter-spacing: 0px;
+$sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-400-letter-spacing: 0px;
+$sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-600-letter-spacing: 0px;
+$sds-color-primitive-blue-100: #F5F9FF;
+$sds-color-primitive-blue-200: #E9F1FF;
+$sds-color-primitive-blue-300: #A6C9FF;
+$sds-color-primitive-blue-400: #0B68F8;
+$sds-color-primitive-blue-500: #0142A4;
+$sds-color-primitive-blue-600: #002660;
+$sds-color-primitive-gray-100: #F8F8F8;
+$sds-color-primitive-gray-200: #EAEAEA;
+$sds-color-primitive-gray-300: #CCCCCC;
+$sds-color-primitive-gray-400: #999999;
+$sds-color-primitive-gray-500: #767676;
+$sds-color-primitive-gray-600: #545454;
+$sds-color-primitive-gray-black: #000000;
+$sds-color-primitive-gray-white: #FFFFFF;
+$sds-color-primitive-green-100: #ECF5F0;
+$sds-color-primitive-green-200: #E6F7ED;
+$sds-color-primitive-green-400: #3CB371;
+$sds-color-primitive-green-500: #349A61;
+$sds-color-primitive-green-600: #1C7F48;
+$sds-color-primitive-purple-100: #F4F0F9;
+$sds-color-primitive-purple-200: #F0EBF6;
+$sds-color-primitive-purple-400: #7A41CE;
+$sds-color-primitive-purple-500: #703CBE;
+$sds-color-primitive-purple-600: #693BAC;
+$sds-color-primitive-red-100: #FEF2F2;
+$sds-color-primitive-red-200: #F8E8E8;
+$sds-color-primitive-red-400: #DC132C;
+$sds-color-primitive-red-500: #C61128;
+$sds-color-primitive-red-600: #B70016;
+$sds-color-primitive-yellow-100: #FCF6EC;
+$sds-color-primitive-yellow-200: #FFF3E1;
+$sds-color-primitive-yellow-400: #F5A623;
+$sds-color-primitive-yellow-500: #D8921F;
+$sds-color-primitive-yellow-600: #946314;
+$sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+$sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+$sds-color-semantic-text-base-primary: #000000;
+$sds-color-semantic-text-base-secondary: #767676;
+$sds-color-semantic-text-base-disabled: #CCCCCC;
+$sds-color-semantic-text-base-on-fill: #FFFFFF;
+$sds-color-semantic-text-base-on-fill-disabled: #999999;
+$sds-color-semantic-text-base-accent: #002660;
+$sds-color-semantic-text-action-default: #0B68F8;
+$sds-color-semantic-text-action-hover: #0142A4;
+$sds-color-semantic-text-action-pressed: #002660;
+$sds-color-semantic-text-beta: #693BAC;
+$sds-color-semantic-text-info: #002660;
+$sds-color-semantic-text-negative: #B70016;
+$sds-color-semantic-text-notice: #946314;
+$sds-color-semantic-text-positive: #1C7F48;
+$sds-color-semantic-component-base-fill: #FFFFFF;
+$sds-color-semantic-component-base-fill-hover: #F8F8F8;
+$sds-color-semantic-component-base-fill-pressed: #F8F8F8;
+$sds-color-semantic-component-base-fill-open: #F8F8F8;
+$sds-color-semantic-component-base-fill-selected: #000000;
+$sds-color-semantic-component-base-fill-disabled: #CCCCCC;
+$sds-color-semantic-component-base-on-fill-disabled: #999999;
+$sds-color-semantic-component-base-surface-primary: #FFFFFF;
+$sds-color-semantic-component-base-surface-secondary: #F8F8F8;
+$sds-color-semantic-component-base-surface-tertiary: #EAEAEA;
+$sds-color-semantic-component-base-divider: #EAEAEA;
+$sds-color-semantic-component-base-border: #999999;
+$sds-color-semantic-component-base-border-hover: #000000;
+$sds-color-semantic-component-base-border-disabled: #CCCCCC;
+$sds-color-semantic-component-base-icon: #767676;
+$sds-color-semantic-component-base-icon-hover: #000000;
+$sds-color-semantic-component-base-icon-pressed: #000000;
+$sds-color-semantic-component-base-icon-disabled: #CCCCCC;
+$sds-color-semantic-component-accent-fill: #0B68F8;
+$sds-color-semantic-component-accent-fill-hover: #0142A4;
+$sds-color-semantic-component-accent-fill-pressed: #002660;
+$sds-color-semantic-component-accent-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-accent-fill-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-surface: #E9F1FF;
+$sds-color-semantic-component-accent-border: #0B68F8;
+$sds-color-semantic-component-accent-border-hover: #0142A4;
+$sds-color-semantic-component-accent-border-open: #0B68F8;
+$sds-color-semantic-component-accent-border-focus: #0B68F8;
+$sds-color-semantic-component-accent-border-selected: #0B68F8;
+$sds-color-semantic-component-accent-border-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-icon: #0B68F8;
+$sds-color-semantic-component-beta-fill: #7A41CE;
+$sds-color-semantic-component-beta-fill-hover: #703CBE;
+$sds-color-semantic-component-beta-fill-pressed: #693BAC;
+$sds-color-semantic-component-beta-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-beta-surface: #F0EBF6;
+$sds-color-semantic-component-beta-border: #7A41CE;
+$sds-color-semantic-component-beta-icon: #7A41CE;
+$sds-color-semantic-component-info-fill: #0B68F8;
+$sds-color-semantic-component-info-fill-hover: #0142A4;
+$sds-color-semantic-component-info-fill-pressed: #002660;
+$sds-color-semantic-component-info-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-info-surface: #E9F1FF;
+$sds-color-semantic-component-info-border: #0B68F8;
+$sds-color-semantic-component-info-icon: #0B68F8;
+$sds-color-semantic-component-negative-fill: #DC132C;
+$sds-color-semantic-component-negative-fill-hover: #C61128;
+$sds-color-semantic-component-negative-fill-pressed: #B70016;
+$sds-color-semantic-component-negative-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-negative-surface: #F8E8E8;
+$sds-color-semantic-component-negative-border: #DC132C;
+$sds-color-semantic-component-negative-icon: #DC132C;
+$sds-color-semantic-component-notice-fill: #F5A623;
+$sds-color-semantic-component-notice-fill-hover: #D8921F;
+$sds-color-semantic-component-notice-fill-pressed: #946314;
+$sds-color-semantic-component-notice-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-notice-surface: #FFF3E1;
+$sds-color-semantic-component-notice-border: #F5A623;
+$sds-color-semantic-component-notice-icon: #F5A623;
+$sds-color-semantic-component-positive-fill: #3CB371;
+$sds-color-semantic-component-positive-fill-hover: #349A61;
+$sds-color-semantic-component-positive-fill-pressed: #1C7F48;
+$sds-color-semantic-component-positive-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-positive-surface: #E6F7ED;
+$sds-color-semantic-component-positive-border: #3CB371;
+$sds-color-semantic-component-positive-icon: #3CB371;
 $sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
 $sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
 $sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
-$sds-borders-error-400: 1px solid #dc132c;
-$sds-borders-gray-100: 1px solid #f8f8f8;
-$sds-borders-gray-200: 1px solid #eaeaea;
-$sds-borders-gray-300: 1px solid #cccccc;
+$sds-borders-error-400: 1px solid #FEF2F2;
+$sds-borders-gray-100: 1px solid #F8F8F8;
+$sds-borders-gray-200: 1px solid #EAEAEA;
+$sds-borders-gray-300: 1px solid #CCCCCC;
 $sds-borders-gray-400: 1px solid #999999;
 $sds-borders-gray-500: 1px solid #767676;
 $sds-borders-gray-dashed: 2px dashed #999999;
 $sds-borders-link-dashed: 1px dashed;
 $sds-borders-link-solid: 1px solid;
-$sds-borders-primary-300: 1px solid #a9bdfc;
-$sds-borders-primary-400: 1px solid #3867fa;
-$sds-borders-primary-500: 1px solid #2b52cd;
-$sds-borders-primary-600: 1px solid #223f9c;
-$sds-borders-primary-dashed: 2px dashed #3867fa;
-$sds-borders-success-400: 1px solid #3cb371;
-$sds-borders-warning-400: 1px solid #f5a623;
-$sds-spaces-default: 10px;
+$sds-borders-primary-300: 1px solid #A6C9FF;
+$sds-borders-primary-400: 1px solid #0B68F8;
+$sds-borders-primary-500: 1px solid #0142A4;
+$sds-borders-primary-600: 1px solid #002660;
+$sds-borders-primary-dashed: 2px dashed #0B68F8;
+$sds-borders-success-400: 1px solid #ECF5F0;
+$sds-borders-warning-400: 1px solid #FCF6EC;
+$sds-spaces-default: 12px;
 $sds-spaces-xxxs: 2px;
 $sds-spaces-xxs: 4px;
 $sds-spaces-xs: 6px;
 $sds-spaces-s: 8px;
-$sds-spaces-m: 10px;
-$sds-spaces-l: 14px;
-$sds-spaces-xl: 22px;
-$sds-spaces-xxl: 38px;
+$sds-spaces-m: 12px;
+$sds-spaces-l: 16px;
+$sds-spaces-xl: 24px;
+$sds-spaces-xxl: 40px;
 $sds-icon-sizes-input-height: 16px;
 $sds-icon-sizes-input-width: 16px;
-$sds-icon-sizes-xs-height: 10px;
-$sds-icon-sizes-xs-width: 10px;
-$sds-icon-sizes-s-height: 14px;
-$sds-icon-sizes-s-width: 14px;
-$sds-icon-sizes-l-height: 22px;
-$sds-icon-sizes-l-width: 22px;
+$sds-icon-sizes-xs-height: 12px;
+$sds-icon-sizes-xs-width: 12px;
+$sds-icon-sizes-s-height: 16px;
+$sds-icon-sizes-s-width: 16px;
+$sds-icon-sizes-l-height: 24px;
+$sds-icon-sizes-l-width: 24px;
 $sds-icon-sizes-xl-height: 32px;
 $sds-icon-sizes-xl-width: 32px;
 $sds-corners-corner-l: 20px;
diff --git a/packages/components/src/common/styles-dictionary/style-dictionary.json b/packages/components/src/common/styles-dictionary/style-dictionary.json
index 095986eeb..5c2fd1a95 100644
--- a/packages/components/src/common/styles-dictionary/style-dictionary.json
+++ b/packages/components/src/common/styles-dictionary/style-dictionary.json
@@ -1,85 +1,109 @@
 {
   "sds": {
     "font": {
-      "letter-spacing": {
-        "default": { "value": "0.3px" },
-        "caps": { "value": "1px" }
-      },
       "color": {
         "value": "black"
       },
-      "font-family": { "value": "'Inter', 'Inter-Regular'" },
+      "font-family": {
+        "body": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "caps": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "code": {
+          "value": "\"IBM Plex Mono\", monospace"
+        },
+        "header": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "tabular": {
+          "value": "\"Inter\", sans-serif"
+        }
+      },
       "body": {
         "xxxs": {
           "400": {
             "font": {
-              "value": "400 11px/16px {sds.font.font-family.value}"
-            }
+              "value": "400 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           },
           "600": {
             "font": {
-              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xxs": {
           "400": {
             "font": {
-              "value": "400 12px/18px {sds.font.font-family.value}"
-            }
+              "value": "400 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           },
           "600": {
             "font": {
-              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xs": {
           "400": {
             "font": {
-              "value": "400 13px/20px {sds.font.font-family.value}"
-            }
+              "value": "400 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           },
           "600": {
             "font": {
-              "value": "600 13px/20px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "s": {
           "400": {
             "font": {
-              "value": "400 14px/24px {sds.font.font-family.value}"
-            }
+              "value": "400 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           },
           "600": {
             "font": {
-              "value": "600 14px/24px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "m": {
           "400": {
             "font": {
-              "value": "400 16px/26px {sds.font.font-family.value}"
-            }
+              "value": "400 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           },
           "600": {
             "font": {
-              "value": "600 16px/26px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "l": {
           "400": {
             "font": {
-              "value": "400 18px/28px {sds.font.font-family.value}"
-            }
+              "value": "400 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           },
           "600": {
             "font": {
-              "value": "600 18px/28px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         }
       },
@@ -87,24 +111,27 @@
         "xxxxs": {
           "600": {
             "font": {
-              "value": "600 10px/14px 'Inter', 'Inter-SemiBold'"
+              "value": "600 10px/14px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
+              "value": "600 11px/16px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
+              "value": "600 12px/18px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         }
@@ -113,164 +140,386 @@
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 11px/16px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 12px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xs": {
           "600": {
             "font": {
-              "value": "600 13px/18px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 13px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "s": {
           "600": {
             "font": {
-              "value": "600 14px/20px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 14px/20px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "m": {
           "600": {
             "font": {
-              "value": "600 16px/22px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 16px/22px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "l": {
           "600": {
             "font": {
-              "value": "600 18px/24px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 18px/24px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
-
         "xl": {
           "600": {
             "font": {
-              "value": "600 22px/30px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 22px/30px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "xxl": {
           "600": {
             "font": {
-              "value": "600 26px/34px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 26px/34px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "tabular": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "code": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         }
       }
     },
     "color": {
-      "overlay": {
-        "100": { "value": "rgba(0, 0, 0, 0.08)" },
-        "200": { "value": "rgba(0, 0, 0, 0.03)" }
-      },
-      "beta": {
-        "100": { "value": "#f4f0f9" },
-        "200": { "value": "#f0ebf6" },
-        "400": { "value": "#7a41ce" },
-        "600": { "value": "#693bac" }
-      },
-      "error": {
-        "100": { "value": "#fef2f2" },
-        "200": { "value": "#f8e8e8" },
-        "400": { "value": "#dc132c" },
-        "600": { "value": "#b70016" }
-      },
-      "gray": {
-        "100": { "value": "#f8f8f8" },
-        "200": { "value": "#eaeaea" },
-        "300": { "value": "#cccccc" },
-        "400": { "value": "#999999" },
-        "500": { "value": "#767676" },
-        "600": { "value": "#545454" },
-        "Black": { "value": "#000000" },
-        "White": { "value": "#ffffff" }
-      },
-      "info": {
-        "100": { "value": "#eff2fc" },
-        "200": { "value": "#ebeffc" },
-        "400": { "value": "#3867fa" },
-        "600": { "value": "#223f9c" }
-      },
-      "primary": {
-        "100": { "value": "#f8f9fe" },
-        "200": { "value": "#eff2fc" },
-        "300": { "value": "#a9bdfc" },
-        "400": { "value": "#3867fa" },
-        "500": { "value": "#2b52cd" },
-        "600": { "value": "#223f9c" }
-      },
-      "secondary": { "400": { "value": "#9bc74e" } },
-      "success": {
-        "100": { "value": "#ecf5f0" },
-        "200": { "value": "#e6f7ed" },
-        "400": { "value": "#3cb371" },
-        "600": { "value": "#1c7f48" }
+      "primitive": {
+        "blue": {
+          "100": { "value": "#F5F9FF" },
+          "200": { "value": "#E9F1FF" },
+          "300": { "value": "#A6C9FF" },
+          "400": { "value": "#0B68F8" },
+          "500": { "value": "#0142A4" },
+          "600": { "value": "#002660" }
+        },
+        "gray": {
+          "100": { "value": "#F8F8F8" },
+          "200": { "value": "#EAEAEA" },
+          "300": { "value": "#CCCCCC" },
+          "400": { "value": "#999999" },
+          "500": { "value": "#767676" },
+          "600": { "value": "#545454" },
+          "black": { "value": "#000000" },
+          "white": { "value": "#FFFFFF" }
+        },
+        "green": {
+          "100": { "value": "#ECF5F0" },
+          "200": { "value": "#E6F7ED" },
+          "400": { "value": "#3CB371" },
+          "500": { "value": "#349A61" },
+          "600": { "value": "#1C7F48" }
+        },
+        "purple": {
+          "100": { "value": "#F4F0F9" },
+          "200": { "value": "#F0EBF6" },
+          "400": { "value": "#7A41CE" },
+          "500": { "value": "#703CBE" },
+          "600": { "value": "#693BAC" }
+        },
+        "red": {
+          "100": { "value": "#FEF2F2" },
+          "200": { "value": "#F8E8E8" },
+          "400": { "value": "#DC132C" },
+          "500": { "value": "#C61128" },
+          "600": { "value": "#B70016" }
+        },
+        "yellow": {
+          "100": { "value": "#FCF6EC" },
+          "200": { "value": "#FFF3E1" },
+          "400": { "value": "#F5A623" },
+          "500": { "value": "#D8921F" },
+          "600": { "value": "#946314" }
+        },
+        "overlay": {
+          "100": { "value": "rgba(0, 0, 0, 0.08)" },
+          "200": { "value": "rgba(0, 0, 0, 0.03)" }
+        }
       },
-      "warning": {
-        "100": { "value": "#fcf6ec" },
-        "200": { "value": "#fff3e1" },
-        "400": { "value": "#f5a623" },
-        "600": { "value": "#946314" }
+      "semantic": {
+        "text": {
+          "base": {
+            "primary": { "value": "{sds.color.primitive.gray.black.value}" },
+            "secondary": { "value": "{sds.color.primitive.gray.500.value}" },
+            "disabled": { "value": "{sds.color.primitive.gray.300.value}" },
+            "on-fill": { "value": "{sds.color.primitive.gray.white.value}" },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "accent": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "action": {
+            "default": { "value": "{sds.color.primitive.blue.400.value}" },
+            "hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "pressed": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "beta": { "value": "{sds.color.primitive.purple.600.value}" },
+          "info": { "value": "{sds.color.primitive.blue.600.value}" },
+          "negative": { "value": "{sds.color.primitive.red.600.value}" },
+          "notice": { "value": "{sds.color.primitive.yellow.600.value}" },
+          "positive": { "value": "{sds.color.primitive.green.600.value}" }
+        },
+        "component": {
+          "base": {
+            "fill": { "value": "{sds.color.primitive.gray.white.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-open": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-selected": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "surface-primary": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface-secondary": {
+              "value": "{sds.color.primitive.gray.100.value}"
+            },
+            "surface-tertiary": {
+              "value": "{sds.color.primitive.gray.200.value}"
+            },
+            "divider": { "value": "{sds.color.primitive.gray.200.value}" },
+            "border": { "value": "{sds.color.primitive.gray.400.value}" },
+            "border-hover": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.gray.500.value}" },
+            "icon-hover": { "value": "{sds.color.primitive.gray.black.value}" },
+            "icon-pressed": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "icon-disabled": { "value": "{sds.color.primitive.gray.300.value}" }
+          },
+          "accent": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "border-open": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-focus": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-selected": {
+              "value": "{sds.color.primitive.blue.400.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "beta": {
+            "fill": { "value": "{sds.color.primitive.purple.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.purple.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.purple.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.purple.200.value}" },
+            "border": { "value": "{sds.color.primitive.purple.400.value}" },
+            "icon": { "value": "{sds.color.primitive.purple.400.value}" }
+          },
+          "info": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "negative": {
+            "fill": { "value": "{sds.color.primitive.red.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.red.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.red.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.red.200.value}" },
+            "border": { "value": "{sds.color.primitive.red.400.value}" },
+            "icon": { "value": "{sds.color.primitive.red.400.value}" }
+          },
+          "notice": {
+            "fill": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.yellow.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.yellow.200.value}" },
+            "border": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "icon": { "value": "{sds.color.primitive.yellow.400.value}" }
+          },
+          "positive": {
+            "fill": { "value": "{sds.color.primitive.green.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.green.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.green.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.green.200.value}" },
+            "border": { "value": "{sds.color.primitive.green.400.value}" },
+            "icon": { "value": "{sds.color.primitive.green.400.value}" }
+          }
+        }
       }
     },
     "drop-shadows": {
-      "shadowL": { "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)" },
+      "shadowL": {
+        "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)"
+      },
       "shadowM": {
         "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
       },
-      "shadowS": { "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)" }
+      "shadowS": {
+        "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+      }
     },
     "borders": {
       "error": {
-        "400": { "value": "1px solid {sds.color.error.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.red.100.value}" }
       },
       "gray": {
-        "100": { "value": "1px solid {sds.color.gray.100.value}" },
-        "200": { "value": "1px solid {sds.color.gray.200.value}" },
-        "300": { "value": "1px solid {sds.color.gray.300.value}" },
-        "400": { "value": "1px solid {sds.color.gray.400.value}" },
-        "500": { "value": "1px solid {sds.color.gray.500.value}" },
-        "dashed": { "value": "2px dashed {sds.color.gray.400.value}" }
+        "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" },
+        "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" },
+        "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "400": { "value": "1px solid {sds.color.primitive.gray.400.value}" },
+        "500": { "value": "1px solid {sds.color.primitive.gray.500.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" }
       },
       "link": {
         "dashed": { "value": "1px dashed" },
         "solid": { "value": "1px solid" }
       },
       "primary": {
-        "300": { "value": "1px solid {sds.color.primary.300.value}" },
-        "400": { "value": "1px solid {sds.color.primary.400.value}" },
-        "500": { "value": "1px solid {sds.color.primary.500.value}" },
-        "600": { "value": "1px solid {sds.color.primary.600.value}" },
-        "dashed": { "value": "2px dashed {sds.color.primary.400.value}" }
+        "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" },
+        "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" },
+        "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" },
+        "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
       },
       "success": {
-        "400": { "value": "1px solid {sds.color.success.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.green.100.value}" }
       },
       "warning": {
-        "400": { "value": "1px solid {sds.color.warning.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" }
       }
     },
     "spaces": {
-      "default": { "value": "10px" },
+      "default": { "value": "12px" },
       "xxxs": { "value": "2px" },
       "xxs": { "value": "4px" },
       "xs": { "value": "6px" },
       "s": { "value": "8px" },
-      "m": { "value": "10px" },
-      "l": { "value": "14px" },
-      "xl": { "value": "22px" },
-      "xxl": { "value": "38px" }
+      "m": { "value": "12px" },
+      "l": { "value": "16px" },
+      "xl": { "value": "24px" },
+      "xxl": { "value": "40px" }
     },
     "iconSizes": {
       "input": {
@@ -282,16 +531,16 @@
         }
       },
       "xs": {
-        "height": { "value": "10px" },
-        "width": { "value": "10px" }
+        "height": { "value": "12px" },
+        "width": { "value": "12px" }
       },
       "s": {
-        "height": { "value": "14px" },
-        "width": { "value": "14px" }
+        "height": { "value": "16px" },
+        "width": { "value": "16px" }
       },
       "l": {
-        "height": { "value": "22px" },
-        "width": { "value": "22px" }
+        "height": { "value": "24px" },
+        "width": { "value": "24px" }
       },
       "xl": {
         "height": { "value": "32px" },
diff --git a/packages/components/src/common/styles-dictionary/tailwindFormat.js b/packages/components/src/common/styles-dictionary/tailwindFormat.js
index 05942d320..a3970b254 100644
--- a/packages/components/src/common/styles-dictionary/tailwindFormat.js
+++ b/packages/components/src/common/styles-dictionary/tailwindFormat.js
@@ -17,6 +17,14 @@ StyleDictionary.registerFormat({
       return result.toLowerCase().replace(" ", "-");
     }
 
+    function convertToKebabCase(inputString) {
+      return inputString
+        .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+        .replace(/\d+/g, (match) => `-${match}`)
+        .replace(/^-/, "")
+        .replace(/-+/g, "-");
+    }
+
     function transformDictionary(tokens, keys) {
       const result = {};
 
@@ -32,16 +40,18 @@ StyleDictionary.registerFormat({
     function transformColor(tokens) {
       const colors = {};
 
-      for (const [name, colorTokens] of Object.entries(tokens)) {
-        const color = {};
-
-        for (const [colorName, token] of Object.entries(colorTokens)) {
-          color[colorName.toLowerCase().replace(" ", "-")] = token.value;
+      function getColor(theToken) {
+        for (const [, iToken] of Object.entries(theToken)) {
+          if ("value" in iToken && "name" in iToken) {
+            colors[convertToKebabCase(iToken.name)] = iToken.value;
+          } else {
+            getColor(iToken);
+          }
         }
-
-        colors[getName(name)] = color;
       }
 
+      getColor(tokens);
+
       return colors;
     }
 
@@ -58,40 +68,56 @@ StyleDictionary.registerFormat({
     }
 
     function transformFonts(tokens, keys) {
-      const fontFamily = {};
       const fontSize = {};
       const lineHeight = {};
-      const boldNameMap = {
-        400: "regular",
-        600: "semibold",
-      };
+      const letterSpacing = {};
+      const fontVariantNumeric = {};
+      const textTransform = {};
 
       for (const key of keys) {
         for (const [size, fonts] of Object.entries(tokens[key])) {
-          for (const [boldSize, { font }] of Object.entries(fonts)) {
-            const parsed = cssFont.parse(font.value);
-            fontFamily[getName(boldNameMap[boldSize])] = parsed.family;
+          for (const [, fontValue] of Object.entries(fonts)) {
+            const parsed = cssFont.parse(fontValue.font.value);
             fontSize[getName([key, size])] = parsed.size;
             lineHeight[getName([key, size])] = parsed.size;
+
+            letterSpacing[getName([key, size])] =
+              fontValue["letter-spacing"].value;
+            textTransform[getName([key, size])] = fontValue["text-transform"]
+              ? fontValue["text-transform"].value
+              : "none";
+            fontVariantNumeric[getName([key, size])] = fontValue[
+              "font-variant-numeric"
+            ]
+              ? fontValue["font-variant-numeric"].value
+              : "normal";
           }
         }
       }
 
       return {
-        fontFamily,
         fontSize,
+        fontVariantNumeric,
+        letterSpacing,
         lineHeight,
+        textTransform,
       };
     }
 
     const { sds } = dictionary.tokens;
     const tailwindConfig = {
-      ...transformFonts(sds.font, ["body", "caps", "header"]),
+      fontFamily: transformDictionary(sds.font["font-family"]),
+      ...transformFonts(sds.font, [
+        "body",
+        "caps",
+        "header",
+        "tabular",
+        "code",
+      ]),
       ...transformIconSizes(sds.iconSizes),
       borderRadius: transformDictionary(sds.corners),
       boxShadow: transformDictionary(sds["drop-shadows"]),
       colors: transformColor(sds.color),
-      letterSpacing: transformDictionary(sds.font["letter-spacing"]),
       spacing: transformDictionary(sds.spaces),
     };
 
diff --git a/packages/components/src/core/DesignTokens/index.stories.tsx b/packages/components/src/core/Foundations/index.stories.tsx
similarity index 100%
rename from packages/components/src/core/DesignTokens/index.stories.tsx
rename to packages/components/src/core/Foundations/index.stories.tsx
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 00a910749..33c3cac66 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -6,7 +6,7 @@
         "composite": true
     },
     "include": [
-        "src/**/*",
+        "./src/**/*",
         "jest.setup.ts",
         "../../.eslintrc.js",
     ],
diff --git a/packages/data-viz/README.md b/packages/data-viz/README.md
index 15fe574f8..3c912bc3f 100644
--- a/packages/data-viz/README.md
+++ b/packages/data-viz/README.md
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spacings from the theme object
+    const spacings = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
           padding-bottom: ${spacings?.m}px;
           margin-bottom: ${spacings?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400,600&display=swap"
+  rel="stylesheet"
+/>
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```
diff --git a/packages/data-viz/src/common/styles-dictionary/css/variables.css b/packages/data-viz/src/common/styles-dictionary/css/variables.css
index 9e13e0277..5b2336009 100644
--- a/packages/data-viz/src/common/styles-dictionary/css/variables.css
+++ b/packages/data-viz/src/common/styles-dictionary/css/variables.css
@@ -1,76 +1,200 @@
 :root {
-  --sds-font-letter-spacing-default: 0.3px;
-  --sds-font-letter-spacing-caps: 1px;
   --sds-font-color: black;
-  --sds-font-font-family: "Inter", "Inter-Regular";
-  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", "Inter-Regular";
-  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
-  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", "Inter-Regular";
-  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
-  --sds-font-body-xs-400-font: 400 13px/20px "Inter", "Inter-Regular";
-  --sds-font-body-xs-600-font: 600 13px/20px "Inter", "Inter-SemiBold";
-  --sds-font-body-s-400-font: 400 14px/24px "Inter", "Inter-Regular";
-  --sds-font-body-s-600-font: 600 14px/24px "Inter", "Inter-SemiBold";
-  --sds-font-body-m-400-font: 400 16px/26px "Inter", "Inter-Regular";
-  --sds-font-body-m-600-font: 600 16px/26px "Inter", "Inter-SemiBold";
-  --sds-font-body-l-400-font: 400 18px/28px "Inter", "Inter-Regular";
-  --sds-font-body-l-600-font: 600 18px/28px "Inter", "Inter-SemiBold";
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", "Inter-SemiBold";
+  --sds-font-font-family-body: "Inter", sans-serif;
+  --sds-font-font-family-caps: "Inter", sans-serif;
+  --sds-font-font-family-code: "IBM Plex Mono", monospace;
+  --sds-font-font-family-header: "Inter", sans-serif;
+  --sds-font-font-family-tabular: "Inter", sans-serif;
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-400-letter-spacing: 0.1px;
+  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-body-xxs-600-letter-spacing: 0.1px;
+  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-400-letter-spacing: 0.08px;
+  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-body-xs-600-letter-spacing: 0.08px;
+  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-400-letter-spacing: 0.08px;
+  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-body-s-600-letter-spacing: 0.08px;
+  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-400-letter-spacing: 0px;
+  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+  --sds-font-body-m-600-letter-spacing: 0px;
+  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-400-letter-spacing: 0px;
+  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+  --sds-font-body-l-600-letter-spacing: 0px;
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
   --sds-font-caps-xxxxs-600-text-transform: uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
   --sds-font-caps-xxxs-600-text-transform: uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
   --sds-font-caps-xxs-600-text-transform: uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
-  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
-  --sds-font-header-xs-600-font: 600 13px/18px "Inter", "Inter-SemiBold";
-  --sds-font-header-s-600-font: 600 14px/20px "Inter", "Inter-SemiBold";
-  --sds-font-header-m-600-font: 600 16px/22px "Inter", "Inter-SemiBold";
-  --sds-font-header-l-600-font: 600 18px/24px "Inter", "Inter-SemiBold";
-  --sds-font-header-xl-600-font: 600 22px/30px "Inter", "Inter-SemiBold";
-  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", "Inter-SemiBold";
-  --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-  --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-  --sds-color-beta-100: #f4f0f9;
-  --sds-color-beta-200: #f0ebf6;
-  --sds-color-beta-400: #7a41ce;
-  --sds-color-beta-600: #693bac;
-  --sds-color-error-100: #fef2f2;
-  --sds-color-error-200: #f8e8e8;
-  --sds-color-error-400: #dc132c;
-  --sds-color-error-600: #b70016;
-  --sds-color-gray-100: #f8f8f8;
-  --sds-color-gray-200: #eaeaea;
-  --sds-color-gray-300: #cccccc;
-  --sds-color-gray-400: #999999;
-  --sds-color-gray-500: #767676;
-  --sds-color-gray-600: #545454;
-  --sds-color-gray-black: #000000;
-  --sds-color-gray-white: #ffffff;
-  --sds-color-info-100: #eff2fc;
-  --sds-color-info-200: #ebeffc;
-  --sds-color-info-400: #3867fa;
-  --sds-color-info-600: #223f9c;
-  --sds-color-primary-100: #f8f9fe;
-  --sds-color-primary-200: #eff2fc;
-  --sds-color-primary-300: #a9bdfc;
-  --sds-color-primary-400: #3867fa;
-  --sds-color-primary-500: #2b52cd;
-  --sds-color-primary-600: #223f9c;
-  --sds-color-secondary-400: #9bc74e;
-  --sds-color-success-100: #ecf5f0;
-  --sds-color-success-200: #e6f7ed;
-  --sds-color-success-400: #3cb371;
-  --sds-color-success-600: #1c7f48;
-  --sds-color-warning-100: #fcf6ec;
-  --sds-color-warning-200: #fff3e1;
-  --sds-color-warning-400: #f5a623;
-  --sds-color-warning-600: #946314;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+  --sds-font-header-xxs-600-letter-spacing: 0.1px;
+  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+  --sds-font-header-xs-600-letter-spacing: 0.08px;
+  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+  --sds-font-header-s-600-letter-spacing: 0.08px;
+  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+  --sds-font-header-m-600-letter-spacing: 0px;
+  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+  --sds-font-header-l-600-letter-spacing: 0px;
+  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+  --sds-font-header-xl-600-letter-spacing: 0px;
+  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+  --sds-font-header-xxl-600-letter-spacing: 0px;
+  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-400-letter-spacing: 0px;
+  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-xs-600-letter-spacing: 0px;
+  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-400-letter-spacing: 0px;
+  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+  --sds-font-tabular-s-600-letter-spacing: 0px;
+  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-400-letter-spacing: 0px;
+  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+  --sds-font-code-xs-600-letter-spacing: 0px;
+  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-400-letter-spacing: 0px;
+  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+  --sds-font-code-s-600-letter-spacing: 0px;
+  --sds-color-primitive-blue-100: #f5f9ff;
+  --sds-color-primitive-blue-200: #e9f1ff;
+  --sds-color-primitive-blue-300: #a6c9ff;
+  --sds-color-primitive-blue-400: #0b68f8;
+  --sds-color-primitive-blue-500: #0142a4;
+  --sds-color-primitive-blue-600: #002660;
+  --sds-color-primitive-gray-100: #f8f8f8;
+  --sds-color-primitive-gray-200: #eaeaea;
+  --sds-color-primitive-gray-300: #cccccc;
+  --sds-color-primitive-gray-400: #999999;
+  --sds-color-primitive-gray-500: #767676;
+  --sds-color-primitive-gray-600: #545454;
+  --sds-color-primitive-gray-black: #000000;
+  --sds-color-primitive-gray-white: #ffffff;
+  --sds-color-primitive-green-100: #ecf5f0;
+  --sds-color-primitive-green-200: #e6f7ed;
+  --sds-color-primitive-green-400: #3cb371;
+  --sds-color-primitive-green-500: #349a61;
+  --sds-color-primitive-green-600: #1c7f48;
+  --sds-color-primitive-purple-100: #f4f0f9;
+  --sds-color-primitive-purple-200: #f0ebf6;
+  --sds-color-primitive-purple-400: #7a41ce;
+  --sds-color-primitive-purple-500: #703cbe;
+  --sds-color-primitive-purple-600: #693bac;
+  --sds-color-primitive-red-100: #fef2f2;
+  --sds-color-primitive-red-200: #f8e8e8;
+  --sds-color-primitive-red-400: #dc132c;
+  --sds-color-primitive-red-500: #c61128;
+  --sds-color-primitive-red-600: #b70016;
+  --sds-color-primitive-yellow-100: #fcf6ec;
+  --sds-color-primitive-yellow-200: #fff3e1;
+  --sds-color-primitive-yellow-400: #f5a623;
+  --sds-color-primitive-yellow-500: #d8921f;
+  --sds-color-primitive-yellow-600: #946314;
+  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+  --sds-color-semantic-text-base-primary: #000000;
+  --sds-color-semantic-text-base-secondary: #767676;
+  --sds-color-semantic-text-base-disabled: #cccccc;
+  --sds-color-semantic-text-base-on-fill: #ffffff;
+  --sds-color-semantic-text-base-on-fill-disabled: #999999;
+  --sds-color-semantic-text-base-accent: #002660;
+  --sds-color-semantic-text-action-default: #0b68f8;
+  --sds-color-semantic-text-action-hover: #0142a4;
+  --sds-color-semantic-text-action-pressed: #002660;
+  --sds-color-semantic-text-beta: #693bac;
+  --sds-color-semantic-text-info: #002660;
+  --sds-color-semantic-text-negative: #b70016;
+  --sds-color-semantic-text-notice: #946314;
+  --sds-color-semantic-text-positive: #1c7f48;
+  --sds-color-semantic-component-base-fill: #ffffff;
+  --sds-color-semantic-component-base-fill-hover: #f8f8f8;
+  --sds-color-semantic-component-base-fill-pressed: #f8f8f8;
+  --sds-color-semantic-component-base-fill-open: #f8f8f8;
+  --sds-color-semantic-component-base-fill-selected: #000000;
+  --sds-color-semantic-component-base-fill-disabled: #cccccc;
+  --sds-color-semantic-component-base-on-fill-disabled: #999999;
+  --sds-color-semantic-component-base-surface-primary: #ffffff;
+  --sds-color-semantic-component-base-surface-secondary: #f8f8f8;
+  --sds-color-semantic-component-base-surface-tertiary: #eaeaea;
+  --sds-color-semantic-component-base-divider: #eaeaea;
+  --sds-color-semantic-component-base-border: #999999;
+  --sds-color-semantic-component-base-border-hover: #000000;
+  --sds-color-semantic-component-base-border-disabled: #cccccc;
+  --sds-color-semantic-component-base-icon: #767676;
+  --sds-color-semantic-component-base-icon-hover: #000000;
+  --sds-color-semantic-component-base-icon-pressed: #000000;
+  --sds-color-semantic-component-base-icon-disabled: #cccccc;
+  --sds-color-semantic-component-accent-fill: #0b68f8;
+  --sds-color-semantic-component-accent-fill-hover: #0142a4;
+  --sds-color-semantic-component-accent-fill-pressed: #002660;
+  --sds-color-semantic-component-accent-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-accent-fill-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-surface: #e9f1ff;
+  --sds-color-semantic-component-accent-border: #0b68f8;
+  --sds-color-semantic-component-accent-border-hover: #0142a4;
+  --sds-color-semantic-component-accent-border-open: #0b68f8;
+  --sds-color-semantic-component-accent-border-focus: #0b68f8;
+  --sds-color-semantic-component-accent-border-selected: #0b68f8;
+  --sds-color-semantic-component-accent-border-disabled: #a6c9ff;
+  --sds-color-semantic-component-accent-icon: #0b68f8;
+  --sds-color-semantic-component-beta-fill: #7a41ce;
+  --sds-color-semantic-component-beta-fill-hover: #703cbe;
+  --sds-color-semantic-component-beta-fill-pressed: #693bac;
+  --sds-color-semantic-component-beta-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-beta-surface: #f0ebf6;
+  --sds-color-semantic-component-beta-border: #7a41ce;
+  --sds-color-semantic-component-beta-icon: #7a41ce;
+  --sds-color-semantic-component-info-fill: #0b68f8;
+  --sds-color-semantic-component-info-fill-hover: #0142a4;
+  --sds-color-semantic-component-info-fill-pressed: #002660;
+  --sds-color-semantic-component-info-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-info-surface: #e9f1ff;
+  --sds-color-semantic-component-info-border: #0b68f8;
+  --sds-color-semantic-component-info-icon: #0b68f8;
+  --sds-color-semantic-component-negative-fill: #dc132c;
+  --sds-color-semantic-component-negative-fill-hover: #c61128;
+  --sds-color-semantic-component-negative-fill-pressed: #b70016;
+  --sds-color-semantic-component-negative-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-negative-surface: #f8e8e8;
+  --sds-color-semantic-component-negative-border: #dc132c;
+  --sds-color-semantic-component-negative-icon: #dc132c;
+  --sds-color-semantic-component-notice-fill: #f5a623;
+  --sds-color-semantic-component-notice-fill-hover: #d8921f;
+  --sds-color-semantic-component-notice-fill-pressed: #946314;
+  --sds-color-semantic-component-notice-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-notice-surface: #fff3e1;
+  --sds-color-semantic-component-notice-border: #f5a623;
+  --sds-color-semantic-component-notice-icon: #f5a623;
+  --sds-color-semantic-component-positive-fill: #3cb371;
+  --sds-color-semantic-component-positive-fill-hover: #349a61;
+  --sds-color-semantic-component-positive-fill-pressed: #1c7f48;
+  --sds-color-semantic-component-positive-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-positive-surface: #e6f7ed;
+  --sds-color-semantic-component-positive-border: #3cb371;
+  --sds-color-semantic-component-positive-icon: #3cb371;
   --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
   --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
     0px 2px 4px 0px rgba(0, 0, 0, 0.15);
   --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  --sds-borders-error-400: 1px solid #dc132c;
+  --sds-borders-error-400: 1px solid #fef2f2;
   --sds-borders-gray-100: 1px solid #f8f8f8;
   --sds-borders-gray-200: 1px solid #eaeaea;
   --sds-borders-gray-300: 1px solid #cccccc;
@@ -79,30 +203,30 @@
   --sds-borders-gray-dashed: 2px dashed #999999;
   --sds-borders-link-dashed: 1px dashed;
   --sds-borders-link-solid: 1px solid;
-  --sds-borders-primary-300: 1px solid #a9bdfc;
-  --sds-borders-primary-400: 1px solid #3867fa;
-  --sds-borders-primary-500: 1px solid #2b52cd;
-  --sds-borders-primary-600: 1px solid #223f9c;
-  --sds-borders-primary-dashed: 2px dashed #3867fa;
-  --sds-borders-success-400: 1px solid #3cb371;
-  --sds-borders-warning-400: 1px solid #f5a623;
-  --sds-spaces-default: 10px;
+  --sds-borders-primary-300: 1px solid #a6c9ff;
+  --sds-borders-primary-400: 1px solid #0b68f8;
+  --sds-borders-primary-500: 1px solid #0142a4;
+  --sds-borders-primary-600: 1px solid #002660;
+  --sds-borders-primary-dashed: 2px dashed #0b68f8;
+  --sds-borders-success-400: 1px solid #ecf5f0;
+  --sds-borders-warning-400: 1px solid #fcf6ec;
+  --sds-spaces-default: 12px;
   --sds-spaces-xxxs: 2px;
   --sds-spaces-xxs: 4px;
   --sds-spaces-xs: 6px;
   --sds-spaces-s: 8px;
-  --sds-spaces-m: 10px;
-  --sds-spaces-l: 14px;
-  --sds-spaces-xl: 22px;
-  --sds-spaces-xxl: 38px;
+  --sds-spaces-m: 12px;
+  --sds-spaces-l: 16px;
+  --sds-spaces-xl: 24px;
+  --sds-spaces-xxl: 40px;
   --sds-icon-sizes-input-height: 16px;
   --sds-icon-sizes-input-width: 16px;
-  --sds-icon-sizes-xs-height: 10px;
-  --sds-icon-sizes-xs-width: 10px;
-  --sds-icon-sizes-s-height: 14px;
-  --sds-icon-sizes-s-width: 14px;
-  --sds-icon-sizes-l-height: 22px;
-  --sds-icon-sizes-l-width: 22px;
+  --sds-icon-sizes-xs-height: 12px;
+  --sds-icon-sizes-xs-width: 12px;
+  --sds-icon-sizes-s-height: 16px;
+  --sds-icon-sizes-s-width: 16px;
+  --sds-icon-sizes-l-height: 24px;
+  --sds-icon-sizes-l-width: 24px;
   --sds-icon-sizes-xl-height: 32px;
   --sds-icon-sizes-xl-width: 32px;
   --sds-corners-corner-l: 20px;
diff --git a/packages/data-viz/src/common/styles-dictionary/json/tailwind.json b/packages/data-viz/src/common/styles-dictionary/json/tailwind.json
index 35b0fc806..5241e82a9 100644
--- a/packages/data-viz/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/data-viz/src/common/styles-dictionary/json/tailwind.json
@@ -1,13 +1,10 @@
 {
   "fontFamily": {
-    "sds-regular": [
-      "Inter",
-      "Inter-Regular"
-    ],
-    "sds-semibold": [
-      "Inter",
-      "Inter-SemiBold"
-    ]
+    "sds-body": "\"Inter\", sans-serif",
+    "sds-caps": "\"Inter\", sans-serif",
+    "sds-code": "\"IBM Plex Mono\", monospace",
+    "sds-header": "\"Inter\", sans-serif",
+    "sds-tabular": "\"Inter\", sans-serif"
   },
   "fontSize": {
     "sds-body-xxxs": "11px",
@@ -26,7 +23,57 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "fontVariantNumeric": {
+    "sds-body-xxxs": "normal",
+    "sds-body-xxs": "normal",
+    "sds-body-xs": "normal",
+    "sds-body-s": "normal",
+    "sds-body-m": "normal",
+    "sds-body-l": "normal",
+    "sds-caps-xxxxs": "normal",
+    "sds-caps-xxxs": "normal",
+    "sds-caps-xxs": "normal",
+    "sds-header-xxxs": "normal",
+    "sds-header-xxs": "normal",
+    "sds-header-xs": "normal",
+    "sds-header-s": "normal",
+    "sds-header-m": "normal",
+    "sds-header-l": "normal",
+    "sds-header-xl": "normal",
+    "sds-header-xxl": "normal",
+    "sds-tabular-xs": "tabular-nums",
+    "sds-tabular-s": "tabular-nums",
+    "sds-code-xs": "normal",
+    "sds-code-s": "normal"
+  },
+  "letterSpacing": {
+    "sds-body-xxxs": "0.1px",
+    "sds-body-xxs": "0.1px",
+    "sds-body-xs": "0.08px",
+    "sds-body-s": "0.08px",
+    "sds-body-m": "0px",
+    "sds-body-l": "0px",
+    "sds-caps-xxxxs": "0.5px",
+    "sds-caps-xxxs": "0.5px",
+    "sds-caps-xxs": "0.5px",
+    "sds-header-xxxs": "0.1px",
+    "sds-header-xxs": "0.1px",
+    "sds-header-xs": "0.08px",
+    "sds-header-s": "0.08px",
+    "sds-header-m": "0px",
+    "sds-header-l": "0px",
+    "sds-header-xl": "0px",
+    "sds-header-xxl": "0px",
+    "sds-tabular-xs": "0px",
+    "sds-tabular-s": "0px",
+    "sds-code-xs": "0px",
+    "sds-code-s": "0px"
   },
   "lineHeight": {
     "sds-body-xxxs": "11px",
@@ -45,20 +92,47 @@
     "sds-header-m": "16px",
     "sds-header-l": "18px",
     "sds-header-xl": "22px",
-    "sds-header-xxl": "26px"
+    "sds-header-xxl": "26px",
+    "sds-tabular-xs": "13px",
+    "sds-tabular-s": "14px",
+    "sds-code-xs": "13px",
+    "sds-code-s": "14px"
+  },
+  "textTransform": {
+    "sds-body-xxxs": "none",
+    "sds-body-xxs": "none",
+    "sds-body-xs": "none",
+    "sds-body-s": "none",
+    "sds-body-m": "none",
+    "sds-body-l": "none",
+    "sds-caps-xxxxs": " uppercase",
+    "sds-caps-xxxs": " uppercase",
+    "sds-caps-xxs": " uppercase",
+    "sds-header-xxxs": "none",
+    "sds-header-xxs": "none",
+    "sds-header-xs": "none",
+    "sds-header-s": "none",
+    "sds-header-m": "none",
+    "sds-header-l": "none",
+    "sds-header-xl": "none",
+    "sds-header-xxl": "none",
+    "sds-tabular-xs": "none",
+    "sds-tabular-s": "none",
+    "sds-code-xs": "none",
+    "sds-code-s": "none"
   },
   "height": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "width": {
     "sds-icon-input": "16px",
-    "sds-icon-xs": "10px",
-    "sds-icon-s": "14px",
-    "sds-icon-l": "22px",
+    "sds-icon-xs": "12px",
+    "sds-icon-s": "16px",
+    "sds-icon-l": "24px",
     "sds-icon-xl": "32px"
   },
   "borderRadius": {
@@ -73,75 +147,132 @@
     "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
   },
   "colors": {
-    "sds-overlay": {
-      "100": "rgba(0, 0, 0, 0.08)",
-      "200": "rgba(0, 0, 0, 0.03)"
-    },
-    "sds-beta": {
-      "100": "#f4f0f9",
-      "200": "#f0ebf6",
-      "400": "#7a41ce",
-      "600": "#693bac"
-    },
-    "sds-error": {
-      "100": "#fef2f2",
-      "200": "#f8e8e8",
-      "400": "#dc132c",
-      "600": "#b70016"
-    },
-    "sds-gray": {
-      "100": "#f8f8f8",
-      "200": "#eaeaea",
-      "300": "#cccccc",
-      "400": "#999999",
-      "500": "#767676",
-      "600": "#545454",
-      "black": "#000000",
-      "white": "#ffffff"
-    },
-    "sds-info": {
-      "100": "#eff2fc",
-      "200": "#ebeffc",
-      "400": "#3867fa",
-      "600": "#223f9c"
-    },
-    "sds-primary": {
-      "100": "#f8f9fe",
-      "200": "#eff2fc",
-      "300": "#a9bdfc",
-      "400": "#3867fa",
-      "500": "#2b52cd",
-      "600": "#223f9c"
-    },
-    "sds-secondary": {
-      "400": "#9bc74e"
-    },
-    "sds-success": {
-      "100": "#ecf5f0",
-      "200": "#e6f7ed",
-      "400": "#3cb371",
-      "600": "#1c7f48"
-    },
-    "sds-warning": {
-      "100": "#fcf6ec",
-      "200": "#fff3e1",
-      "400": "#f5a623",
-      "600": "#946314"
-    }
-  },
-  "letterSpacing": {
-    "sds-default": "0.3px",
-    "sds-caps": "1px"
+    "sds-color-primitive-blue-100": "#F5F9FF",
+    "sds-color-primitive-blue-200": "#E9F1FF",
+    "sds-color-primitive-blue-300": "#A6C9FF",
+    "sds-color-primitive-blue-400": "#0B68F8",
+    "sds-color-primitive-blue-500": "#0142A4",
+    "sds-color-primitive-blue-600": "#002660",
+    "sds-color-primitive-gray-100": "#F8F8F8",
+    "sds-color-primitive-gray-200": "#EAEAEA",
+    "sds-color-primitive-gray-300": "#CCCCCC",
+    "sds-color-primitive-gray-400": "#999999",
+    "sds-color-primitive-gray-500": "#767676",
+    "sds-color-primitive-gray-600": "#545454",
+    "sds-color-primitive-gray-black": "#000000",
+    "sds-color-primitive-gray-white": "#FFFFFF",
+    "sds-color-primitive-green-100": "#ECF5F0",
+    "sds-color-primitive-green-200": "#E6F7ED",
+    "sds-color-primitive-green-400": "#3CB371",
+    "sds-color-primitive-green-500": "#349A61",
+    "sds-color-primitive-green-600": "#1C7F48",
+    "sds-color-primitive-purple-100": "#F4F0F9",
+    "sds-color-primitive-purple-200": "#F0EBF6",
+    "sds-color-primitive-purple-400": "#7A41CE",
+    "sds-color-primitive-purple-500": "#703CBE",
+    "sds-color-primitive-purple-600": "#693BAC",
+    "sds-color-primitive-red-100": "#FEF2F2",
+    "sds-color-primitive-red-200": "#F8E8E8",
+    "sds-color-primitive-red-400": "#DC132C",
+    "sds-color-primitive-red-500": "#C61128",
+    "sds-color-primitive-red-600": "#B70016",
+    "sds-color-primitive-yellow-100": "#FCF6EC",
+    "sds-color-primitive-yellow-200": "#FFF3E1",
+    "sds-color-primitive-yellow-400": "#F5A623",
+    "sds-color-primitive-yellow-500": "#D8921F",
+    "sds-color-primitive-yellow-600": "#946314",
+    "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
+    "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
+    "sds-color-semantic-text-base-primary": "#000000",
+    "sds-color-semantic-text-base-secondary": "#767676",
+    "sds-color-semantic-text-base-disabled": "#CCCCCC",
+    "sds-color-semantic-text-base-on-fill": "#FFFFFF",
+    "sds-color-semantic-text-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-text-base-accent": "#002660",
+    "sds-color-semantic-text-action-default": "#0B68F8",
+    "sds-color-semantic-text-action-hover": "#0142A4",
+    "sds-color-semantic-text-action-pressed": "#002660",
+    "sds-color-semantic-text-beta": "#693BAC",
+    "sds-color-semantic-text-info": "#002660",
+    "sds-color-semantic-text-negative": "#B70016",
+    "sds-color-semantic-text-notice": "#946314",
+    "sds-color-semantic-text-positive": "#1C7F48",
+    "sds-color-semantic-component-base-fill": "#FFFFFF",
+    "sds-color-semantic-component-base-fill-hover": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-pressed": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-open": "#F8F8F8",
+    "sds-color-semantic-component-base-fill-selected": "#000000",
+    "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
+    "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
+    "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
+    "sds-color-semantic-component-base-divider": "#EAEAEA",
+    "sds-color-semantic-component-base-border": "#999999",
+    "sds-color-semantic-component-base-border-hover": "#000000",
+    "sds-color-semantic-component-base-border-disabled": "#CCCCCC",
+    "sds-color-semantic-component-base-icon": "#767676",
+    "sds-color-semantic-component-base-icon-hover": "#000000",
+    "sds-color-semantic-component-base-icon-pressed": "#000000",
+    "sds-color-semantic-component-base-icon-disabled": "#CCCCCC",
+    "sds-color-semantic-component-accent-fill": "#0B68F8",
+    "sds-color-semantic-component-accent-fill-hover": "#0142A4",
+    "sds-color-semantic-component-accent-fill-pressed": "#002660",
+    "sds-color-semantic-component-accent-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-accent-fill-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-surface": "#E9F1FF",
+    "sds-color-semantic-component-accent-border": "#0B68F8",
+    "sds-color-semantic-component-accent-border-hover": "#0142A4",
+    "sds-color-semantic-component-accent-border-open": "#0B68F8",
+    "sds-color-semantic-component-accent-border-focus": "#0B68F8",
+    "sds-color-semantic-component-accent-border-selected": "#0B68F8",
+    "sds-color-semantic-component-accent-border-disabled": "#A6C9FF",
+    "sds-color-semantic-component-accent-icon": "#0B68F8",
+    "sds-color-semantic-component-beta-fill": "#7A41CE",
+    "sds-color-semantic-component-beta-fill-hover": "#703CBE",
+    "sds-color-semantic-component-beta-fill-pressed": "#693BAC",
+    "sds-color-semantic-component-beta-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-beta-surface": "#F0EBF6",
+    "sds-color-semantic-component-beta-border": "#7A41CE",
+    "sds-color-semantic-component-beta-icon": "#7A41CE",
+    "sds-color-semantic-component-info-fill": "#0B68F8",
+    "sds-color-semantic-component-info-fill-hover": "#0142A4",
+    "sds-color-semantic-component-info-fill-pressed": "#002660",
+    "sds-color-semantic-component-info-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-info-surface": "#E9F1FF",
+    "sds-color-semantic-component-info-border": "#0B68F8",
+    "sds-color-semantic-component-info-icon": "#0B68F8",
+    "sds-color-semantic-component-negative-fill": "#DC132C",
+    "sds-color-semantic-component-negative-fill-hover": "#C61128",
+    "sds-color-semantic-component-negative-fill-pressed": "#B70016",
+    "sds-color-semantic-component-negative-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-negative-surface": "#F8E8E8",
+    "sds-color-semantic-component-negative-border": "#DC132C",
+    "sds-color-semantic-component-negative-icon": "#DC132C",
+    "sds-color-semantic-component-notice-fill": "#F5A623",
+    "sds-color-semantic-component-notice-fill-hover": "#D8921F",
+    "sds-color-semantic-component-notice-fill-pressed": "#946314",
+    "sds-color-semantic-component-notice-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-notice-surface": "#FFF3E1",
+    "sds-color-semantic-component-notice-border": "#F5A623",
+    "sds-color-semantic-component-notice-icon": "#F5A623",
+    "sds-color-semantic-component-positive-fill": "#3CB371",
+    "sds-color-semantic-component-positive-fill-hover": "#349A61",
+    "sds-color-semantic-component-positive-fill-pressed": "#1C7F48",
+    "sds-color-semantic-component-positive-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-positive-surface": "#E6F7ED",
+    "sds-color-semantic-component-positive-border": "#3CB371",
+    "sds-color-semantic-component-positive-icon": "#3CB371"
   },
   "spacing": {
-    "sds-default": "10px",
+    "sds-default": "12px",
     "sds-xxxs": "2px",
     "sds-xxs": "4px",
     "sds-xs": "6px",
     "sds-s": "8px",
-    "sds-m": "10px",
-    "sds-l": "14px",
-    "sds-xl": "22px",
-    "sds-xxl": "38px"
+    "sds-m": "12px",
+    "sds-l": "16px",
+    "sds-xl": "24px",
+    "sds-xxl": "40px"
   }
 }
\ No newline at end of file
diff --git a/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss b/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
index c4fd2483d..a05415fc1 100644
--- a/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
@@ -1,106 +1,230 @@
-$sds-font-letter-spacing-default: 0.3px;
-$sds-font-letter-spacing-caps: 1px;
 $sds-font-color: black;
-$sds-font-font-family: 'Inter', 'Inter-Regular';
-$sds-font-body-xxxs-400-font: 400 11px/16px 'Inter', 'Inter-Regular';
-$sds-font-body-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
-$sds-font-body-xxs-400-font: 400 12px/18px 'Inter', 'Inter-Regular';
-$sds-font-body-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
-$sds-font-body-xs-400-font: 400 13px/20px 'Inter', 'Inter-Regular';
-$sds-font-body-xs-600-font: 600 13px/20px 'Inter', 'Inter-SemiBold';
-$sds-font-body-s-400-font: 400 14px/24px 'Inter', 'Inter-Regular';
-$sds-font-body-s-600-font: 600 14px/24px 'Inter', 'Inter-SemiBold';
-$sds-font-body-m-400-font: 400 16px/26px 'Inter', 'Inter-Regular';
-$sds-font-body-m-600-font: 600 16px/26px 'Inter', 'Inter-SemiBold';
-$sds-font-body-l-400-font: 400 18px/28px 'Inter', 'Inter-Regular';
-$sds-font-body-l-600-font: 600 18px/28px 'Inter', 'Inter-SemiBold';
-$sds-font-caps-xxxxs-600-font: 600 10px/14px 'Inter', 'Inter-SemiBold';
+$sds-font-font-family-body: "Inter", sans-serif;
+$sds-font-font-family-caps: "Inter", sans-serif;
+$sds-font-font-family-code: "IBM Plex Mono", monospace;
+$sds-font-font-family-header: "Inter", sans-serif;
+$sds-font-font-family-tabular: "Inter", sans-serif;
+$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-body-xxxs-600-letter-spacing: 0.1px;
+$sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-400-letter-spacing: 0.1px;
+$sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-body-xxs-600-letter-spacing: 0.1px;
+$sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-400-letter-spacing: 0.08px;
+$sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-body-xs-600-letter-spacing: 0.08px;
+$sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-body-s-400-letter-spacing: 0.08px;
+$sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-body-s-600-letter-spacing: 0.08px;
+$sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
+$sds-font-body-m-400-letter-spacing: 0px;
+$sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
+$sds-font-body-m-600-letter-spacing: 0px;
+$sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
+$sds-font-body-l-400-letter-spacing: 0px;
+$sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
+$sds-font-body-l-600-letter-spacing: 0px;
+$sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
+$sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
+$sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-caps-xxxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
+$sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-caps-xxs-600-letter-spacing: 0.5px;
 $sds-font-caps-xxs-600-text-transform:  uppercase;
-$sds-font-header-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xs-600-font: 600 13px/18px 'Inter', 'Inter-SemiBold';
-$sds-font-header-s-600-font: 600 14px/20px 'Inter', 'Inter-SemiBold';
-$sds-font-header-m-600-font: 600 16px/22px 'Inter', 'Inter-SemiBold';
-$sds-font-header-l-600-font: 600 18px/24px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xl-600-font: 600 22px/30px 'Inter', 'Inter-SemiBold';
-$sds-font-header-xxl-600-font: 600 26px/34px 'Inter', 'Inter-SemiBold';
-$sds-color-overlay-100: rgba(0, 0, 0, 0.08);
-$sds-color-overlay-200: rgba(0, 0, 0, 0.03);
-$sds-color-beta-100: #f4f0f9;
-$sds-color-beta-200: #f0ebf6;
-$sds-color-beta-400: #7a41ce;
-$sds-color-beta-600: #693bac;
-$sds-color-error-100: #fef2f2;
-$sds-color-error-200: #f8e8e8;
-$sds-color-error-400: #dc132c;
-$sds-color-error-600: #b70016;
-$sds-color-gray-100: #f8f8f8;
-$sds-color-gray-200: #eaeaea;
-$sds-color-gray-300: #cccccc;
-$sds-color-gray-400: #999999;
-$sds-color-gray-500: #767676;
-$sds-color-gray-600: #545454;
-$sds-color-gray-black: #000000;
-$sds-color-gray-white: #ffffff;
-$sds-color-info-100: #eff2fc;
-$sds-color-info-200: #ebeffc;
-$sds-color-info-400: #3867fa;
-$sds-color-info-600: #223f9c;
-$sds-color-primary-100: #f8f9fe;
-$sds-color-primary-200: #eff2fc;
-$sds-color-primary-300: #a9bdfc;
-$sds-color-primary-400: #3867fa;
-$sds-color-primary-500: #2b52cd;
-$sds-color-primary-600: #223f9c;
-$sds-color-secondary-400: #9bc74e;
-$sds-color-success-100: #ecf5f0;
-$sds-color-success-200: #e6f7ed;
-$sds-color-success-400: #3cb371;
-$sds-color-success-600: #1c7f48;
-$sds-color-warning-100: #fcf6ec;
-$sds-color-warning-200: #fff3e1;
-$sds-color-warning-400: #f5a623;
-$sds-color-warning-600: #946314;
+$sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
+$sds-font-header-xxxs-600-letter-spacing: 0.1px;
+$sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
+$sds-font-header-xxs-600-letter-spacing: 0.1px;
+$sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
+$sds-font-header-xs-600-letter-spacing: 0.08px;
+$sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
+$sds-font-header-s-600-letter-spacing: 0.08px;
+$sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
+$sds-font-header-m-600-letter-spacing: 0px;
+$sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
+$sds-font-header-l-600-letter-spacing: 0px;
+$sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
+$sds-font-header-xl-600-letter-spacing: 0px;
+$sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
+$sds-font-header-xxl-600-letter-spacing: 0px;
+$sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-400-letter-spacing: 0px;
+$sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
+$sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-xs-600-letter-spacing: 0px;
+$sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-400-letter-spacing: 0px;
+$sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
+$sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
+$sds-font-tabular-s-600-letter-spacing: 0px;
+$sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-400-letter-spacing: 0px;
+$sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
+$sds-font-code-xs-600-letter-spacing: 0px;
+$sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-400-letter-spacing: 0px;
+$sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
+$sds-font-code-s-600-letter-spacing: 0px;
+$sds-color-primitive-blue-100: #F5F9FF;
+$sds-color-primitive-blue-200: #E9F1FF;
+$sds-color-primitive-blue-300: #A6C9FF;
+$sds-color-primitive-blue-400: #0B68F8;
+$sds-color-primitive-blue-500: #0142A4;
+$sds-color-primitive-blue-600: #002660;
+$sds-color-primitive-gray-100: #F8F8F8;
+$sds-color-primitive-gray-200: #EAEAEA;
+$sds-color-primitive-gray-300: #CCCCCC;
+$sds-color-primitive-gray-400: #999999;
+$sds-color-primitive-gray-500: #767676;
+$sds-color-primitive-gray-600: #545454;
+$sds-color-primitive-gray-black: #000000;
+$sds-color-primitive-gray-white: #FFFFFF;
+$sds-color-primitive-green-100: #ECF5F0;
+$sds-color-primitive-green-200: #E6F7ED;
+$sds-color-primitive-green-400: #3CB371;
+$sds-color-primitive-green-500: #349A61;
+$sds-color-primitive-green-600: #1C7F48;
+$sds-color-primitive-purple-100: #F4F0F9;
+$sds-color-primitive-purple-200: #F0EBF6;
+$sds-color-primitive-purple-400: #7A41CE;
+$sds-color-primitive-purple-500: #703CBE;
+$sds-color-primitive-purple-600: #693BAC;
+$sds-color-primitive-red-100: #FEF2F2;
+$sds-color-primitive-red-200: #F8E8E8;
+$sds-color-primitive-red-400: #DC132C;
+$sds-color-primitive-red-500: #C61128;
+$sds-color-primitive-red-600: #B70016;
+$sds-color-primitive-yellow-100: #FCF6EC;
+$sds-color-primitive-yellow-200: #FFF3E1;
+$sds-color-primitive-yellow-400: #F5A623;
+$sds-color-primitive-yellow-500: #D8921F;
+$sds-color-primitive-yellow-600: #946314;
+$sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
+$sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
+$sds-color-semantic-text-base-primary: #000000;
+$sds-color-semantic-text-base-secondary: #767676;
+$sds-color-semantic-text-base-disabled: #CCCCCC;
+$sds-color-semantic-text-base-on-fill: #FFFFFF;
+$sds-color-semantic-text-base-on-fill-disabled: #999999;
+$sds-color-semantic-text-base-accent: #002660;
+$sds-color-semantic-text-action-default: #0B68F8;
+$sds-color-semantic-text-action-hover: #0142A4;
+$sds-color-semantic-text-action-pressed: #002660;
+$sds-color-semantic-text-beta: #693BAC;
+$sds-color-semantic-text-info: #002660;
+$sds-color-semantic-text-negative: #B70016;
+$sds-color-semantic-text-notice: #946314;
+$sds-color-semantic-text-positive: #1C7F48;
+$sds-color-semantic-component-base-fill: #FFFFFF;
+$sds-color-semantic-component-base-fill-hover: #F8F8F8;
+$sds-color-semantic-component-base-fill-pressed: #F8F8F8;
+$sds-color-semantic-component-base-fill-open: #F8F8F8;
+$sds-color-semantic-component-base-fill-selected: #000000;
+$sds-color-semantic-component-base-fill-disabled: #CCCCCC;
+$sds-color-semantic-component-base-on-fill-disabled: #999999;
+$sds-color-semantic-component-base-surface-primary: #FFFFFF;
+$sds-color-semantic-component-base-surface-secondary: #F8F8F8;
+$sds-color-semantic-component-base-surface-tertiary: #EAEAEA;
+$sds-color-semantic-component-base-divider: #EAEAEA;
+$sds-color-semantic-component-base-border: #999999;
+$sds-color-semantic-component-base-border-hover: #000000;
+$sds-color-semantic-component-base-border-disabled: #CCCCCC;
+$sds-color-semantic-component-base-icon: #767676;
+$sds-color-semantic-component-base-icon-hover: #000000;
+$sds-color-semantic-component-base-icon-pressed: #000000;
+$sds-color-semantic-component-base-icon-disabled: #CCCCCC;
+$sds-color-semantic-component-accent-fill: #0B68F8;
+$sds-color-semantic-component-accent-fill-hover: #0142A4;
+$sds-color-semantic-component-accent-fill-pressed: #002660;
+$sds-color-semantic-component-accent-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-accent-fill-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-surface: #E9F1FF;
+$sds-color-semantic-component-accent-border: #0B68F8;
+$sds-color-semantic-component-accent-border-hover: #0142A4;
+$sds-color-semantic-component-accent-border-open: #0B68F8;
+$sds-color-semantic-component-accent-border-focus: #0B68F8;
+$sds-color-semantic-component-accent-border-selected: #0B68F8;
+$sds-color-semantic-component-accent-border-disabled: #A6C9FF;
+$sds-color-semantic-component-accent-icon: #0B68F8;
+$sds-color-semantic-component-beta-fill: #7A41CE;
+$sds-color-semantic-component-beta-fill-hover: #703CBE;
+$sds-color-semantic-component-beta-fill-pressed: #693BAC;
+$sds-color-semantic-component-beta-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-beta-surface: #F0EBF6;
+$sds-color-semantic-component-beta-border: #7A41CE;
+$sds-color-semantic-component-beta-icon: #7A41CE;
+$sds-color-semantic-component-info-fill: #0B68F8;
+$sds-color-semantic-component-info-fill-hover: #0142A4;
+$sds-color-semantic-component-info-fill-pressed: #002660;
+$sds-color-semantic-component-info-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-info-surface: #E9F1FF;
+$sds-color-semantic-component-info-border: #0B68F8;
+$sds-color-semantic-component-info-icon: #0B68F8;
+$sds-color-semantic-component-negative-fill: #DC132C;
+$sds-color-semantic-component-negative-fill-hover: #C61128;
+$sds-color-semantic-component-negative-fill-pressed: #B70016;
+$sds-color-semantic-component-negative-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-negative-surface: #F8E8E8;
+$sds-color-semantic-component-negative-border: #DC132C;
+$sds-color-semantic-component-negative-icon: #DC132C;
+$sds-color-semantic-component-notice-fill: #F5A623;
+$sds-color-semantic-component-notice-fill-hover: #D8921F;
+$sds-color-semantic-component-notice-fill-pressed: #946314;
+$sds-color-semantic-component-notice-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-notice-surface: #FFF3E1;
+$sds-color-semantic-component-notice-border: #F5A623;
+$sds-color-semantic-component-notice-icon: #F5A623;
+$sds-color-semantic-component-positive-fill: #3CB371;
+$sds-color-semantic-component-positive-fill-hover: #349A61;
+$sds-color-semantic-component-positive-fill-pressed: #1C7F48;
+$sds-color-semantic-component-positive-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-positive-surface: #E6F7ED;
+$sds-color-semantic-component-positive-border: #3CB371;
+$sds-color-semantic-component-positive-icon: #3CB371;
 $sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
 $sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
 $sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
-$sds-borders-error-400: 1px solid #dc132c;
-$sds-borders-gray-100: 1px solid #f8f8f8;
-$sds-borders-gray-200: 1px solid #eaeaea;
-$sds-borders-gray-300: 1px solid #cccccc;
+$sds-borders-error-400: 1px solid #FEF2F2;
+$sds-borders-gray-100: 1px solid #F8F8F8;
+$sds-borders-gray-200: 1px solid #EAEAEA;
+$sds-borders-gray-300: 1px solid #CCCCCC;
 $sds-borders-gray-400: 1px solid #999999;
 $sds-borders-gray-500: 1px solid #767676;
 $sds-borders-gray-dashed: 2px dashed #999999;
 $sds-borders-link-dashed: 1px dashed;
 $sds-borders-link-solid: 1px solid;
-$sds-borders-primary-300: 1px solid #a9bdfc;
-$sds-borders-primary-400: 1px solid #3867fa;
-$sds-borders-primary-500: 1px solid #2b52cd;
-$sds-borders-primary-600: 1px solid #223f9c;
-$sds-borders-primary-dashed: 2px dashed #3867fa;
-$sds-borders-success-400: 1px solid #3cb371;
-$sds-borders-warning-400: 1px solid #f5a623;
-$sds-spaces-default: 10px;
+$sds-borders-primary-300: 1px solid #A6C9FF;
+$sds-borders-primary-400: 1px solid #0B68F8;
+$sds-borders-primary-500: 1px solid #0142A4;
+$sds-borders-primary-600: 1px solid #002660;
+$sds-borders-primary-dashed: 2px dashed #0B68F8;
+$sds-borders-success-400: 1px solid #ECF5F0;
+$sds-borders-warning-400: 1px solid #FCF6EC;
+$sds-spaces-default: 12px;
 $sds-spaces-xxxs: 2px;
 $sds-spaces-xxs: 4px;
 $sds-spaces-xs: 6px;
 $sds-spaces-s: 8px;
-$sds-spaces-m: 10px;
-$sds-spaces-l: 14px;
-$sds-spaces-xl: 22px;
-$sds-spaces-xxl: 38px;
+$sds-spaces-m: 12px;
+$sds-spaces-l: 16px;
+$sds-spaces-xl: 24px;
+$sds-spaces-xxl: 40px;
 $sds-icon-sizes-input-height: 16px;
 $sds-icon-sizes-input-width: 16px;
-$sds-icon-sizes-xs-height: 10px;
-$sds-icon-sizes-xs-width: 10px;
-$sds-icon-sizes-s-height: 14px;
-$sds-icon-sizes-s-width: 14px;
-$sds-icon-sizes-l-height: 22px;
-$sds-icon-sizes-l-width: 22px;
+$sds-icon-sizes-xs-height: 12px;
+$sds-icon-sizes-xs-width: 12px;
+$sds-icon-sizes-s-height: 16px;
+$sds-icon-sizes-s-width: 16px;
+$sds-icon-sizes-l-height: 24px;
+$sds-icon-sizes-l-width: 24px;
 $sds-icon-sizes-xl-height: 32px;
 $sds-icon-sizes-xl-width: 32px;
 $sds-corners-corner-l: 20px;
diff --git a/packages/data-viz/src/common/styles-dictionary/style-dictionary.json b/packages/data-viz/src/common/styles-dictionary/style-dictionary.json
index 095986eeb..5c2fd1a95 100644
--- a/packages/data-viz/src/common/styles-dictionary/style-dictionary.json
+++ b/packages/data-viz/src/common/styles-dictionary/style-dictionary.json
@@ -1,85 +1,109 @@
 {
   "sds": {
     "font": {
-      "letter-spacing": {
-        "default": { "value": "0.3px" },
-        "caps": { "value": "1px" }
-      },
       "color": {
         "value": "black"
       },
-      "font-family": { "value": "'Inter', 'Inter-Regular'" },
+      "font-family": {
+        "body": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "caps": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "code": {
+          "value": "\"IBM Plex Mono\", monospace"
+        },
+        "header": {
+          "value": "\"Inter\", sans-serif"
+        },
+        "tabular": {
+          "value": "\"Inter\", sans-serif"
+        }
+      },
       "body": {
         "xxxs": {
           "400": {
             "font": {
-              "value": "400 11px/16px {sds.font.font-family.value}"
-            }
+              "value": "400 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           },
           "600": {
             "font": {
-              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 11px/16px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xxs": {
           "400": {
             "font": {
-              "value": "400 12px/18px {sds.font.font-family.value}"
-            }
+              "value": "400 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           },
           "600": {
             "font": {
-              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 12px/18px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xs": {
           "400": {
             "font": {
-              "value": "400 13px/20px {sds.font.font-family.value}"
-            }
+              "value": "400 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           },
           "600": {
             "font": {
-              "value": "600 13px/20px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 13px/20px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "s": {
           "400": {
             "font": {
-              "value": "400 14px/24px {sds.font.font-family.value}"
-            }
+              "value": "400 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           },
           "600": {
             "font": {
-              "value": "600 14px/24px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 14px/24px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "m": {
           "400": {
             "font": {
-              "value": "400 16px/26px {sds.font.font-family.value}"
-            }
+              "value": "400 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           },
           "600": {
             "font": {
-              "value": "600 16px/26px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 16px/26px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "l": {
           "400": {
             "font": {
-              "value": "400 18px/28px {sds.font.font-family.value}"
-            }
+              "value": "400 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           },
           "600": {
             "font": {
-              "value": "600 18px/28px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 18px/28px {sds.font.font-family.body.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         }
       },
@@ -87,24 +111,27 @@
         "xxxxs": {
           "600": {
             "font": {
-              "value": "600 10px/14px 'Inter', 'Inter-SemiBold'"
+              "value": "600 10px/14px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
+              "value": "600 11px/16px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
+              "value": "600 12px/18px {sds.font.font-family.caps.value}"
             },
+            "letter-spacing": { "value": "0.5px" },
             "text-transform": { "value": " uppercase" }
           }
         }
@@ -113,164 +140,386 @@
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 11px/16px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 12px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.1px" }
           }
         },
         "xs": {
           "600": {
             "font": {
-              "value": "600 13px/18px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 13px/18px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "s": {
           "600": {
             "font": {
-              "value": "600 14px/20px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 14px/20px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0.08px" }
           }
         },
         "m": {
           "600": {
             "font": {
-              "value": "600 16px/22px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 16px/22px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "l": {
           "600": {
             "font": {
-              "value": "600 18px/24px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 18px/24px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
-
         "xl": {
           "600": {
             "font": {
-              "value": "600 22px/30px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 22px/30px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         },
         "xxl": {
           "600": {
             "font": {
-              "value": "600 26px/34px 'Inter', 'Inter-SemiBold'"
-            }
+              "value": "600 26px/34px {sds.font.font-family.header.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "tabular": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.tabular.value}"
+            },
+            "font-variant-numeric": { "value": "tabular-nums" },
+            "letter-spacing": { "value": "0px" }
+          }
+        }
+      },
+      "code": {
+        "xs": {
+          "400": {
+            "font": {
+              "value": "400 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 13px/20px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          }
+        },
+        "s": {
+          "400": {
+            "font": {
+              "value": "400 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
+          },
+          "600": {
+            "font": {
+              "value": "600 14px/24px {sds.font.font-family.code.value}"
+            },
+            "letter-spacing": { "value": "0px" }
           }
         }
       }
     },
     "color": {
-      "overlay": {
-        "100": { "value": "rgba(0, 0, 0, 0.08)" },
-        "200": { "value": "rgba(0, 0, 0, 0.03)" }
-      },
-      "beta": {
-        "100": { "value": "#f4f0f9" },
-        "200": { "value": "#f0ebf6" },
-        "400": { "value": "#7a41ce" },
-        "600": { "value": "#693bac" }
-      },
-      "error": {
-        "100": { "value": "#fef2f2" },
-        "200": { "value": "#f8e8e8" },
-        "400": { "value": "#dc132c" },
-        "600": { "value": "#b70016" }
-      },
-      "gray": {
-        "100": { "value": "#f8f8f8" },
-        "200": { "value": "#eaeaea" },
-        "300": { "value": "#cccccc" },
-        "400": { "value": "#999999" },
-        "500": { "value": "#767676" },
-        "600": { "value": "#545454" },
-        "Black": { "value": "#000000" },
-        "White": { "value": "#ffffff" }
-      },
-      "info": {
-        "100": { "value": "#eff2fc" },
-        "200": { "value": "#ebeffc" },
-        "400": { "value": "#3867fa" },
-        "600": { "value": "#223f9c" }
-      },
-      "primary": {
-        "100": { "value": "#f8f9fe" },
-        "200": { "value": "#eff2fc" },
-        "300": { "value": "#a9bdfc" },
-        "400": { "value": "#3867fa" },
-        "500": { "value": "#2b52cd" },
-        "600": { "value": "#223f9c" }
-      },
-      "secondary": { "400": { "value": "#9bc74e" } },
-      "success": {
-        "100": { "value": "#ecf5f0" },
-        "200": { "value": "#e6f7ed" },
-        "400": { "value": "#3cb371" },
-        "600": { "value": "#1c7f48" }
+      "primitive": {
+        "blue": {
+          "100": { "value": "#F5F9FF" },
+          "200": { "value": "#E9F1FF" },
+          "300": { "value": "#A6C9FF" },
+          "400": { "value": "#0B68F8" },
+          "500": { "value": "#0142A4" },
+          "600": { "value": "#002660" }
+        },
+        "gray": {
+          "100": { "value": "#F8F8F8" },
+          "200": { "value": "#EAEAEA" },
+          "300": { "value": "#CCCCCC" },
+          "400": { "value": "#999999" },
+          "500": { "value": "#767676" },
+          "600": { "value": "#545454" },
+          "black": { "value": "#000000" },
+          "white": { "value": "#FFFFFF" }
+        },
+        "green": {
+          "100": { "value": "#ECF5F0" },
+          "200": { "value": "#E6F7ED" },
+          "400": { "value": "#3CB371" },
+          "500": { "value": "#349A61" },
+          "600": { "value": "#1C7F48" }
+        },
+        "purple": {
+          "100": { "value": "#F4F0F9" },
+          "200": { "value": "#F0EBF6" },
+          "400": { "value": "#7A41CE" },
+          "500": { "value": "#703CBE" },
+          "600": { "value": "#693BAC" }
+        },
+        "red": {
+          "100": { "value": "#FEF2F2" },
+          "200": { "value": "#F8E8E8" },
+          "400": { "value": "#DC132C" },
+          "500": { "value": "#C61128" },
+          "600": { "value": "#B70016" }
+        },
+        "yellow": {
+          "100": { "value": "#FCF6EC" },
+          "200": { "value": "#FFF3E1" },
+          "400": { "value": "#F5A623" },
+          "500": { "value": "#D8921F" },
+          "600": { "value": "#946314" }
+        },
+        "overlay": {
+          "100": { "value": "rgba(0, 0, 0, 0.08)" },
+          "200": { "value": "rgba(0, 0, 0, 0.03)" }
+        }
       },
-      "warning": {
-        "100": { "value": "#fcf6ec" },
-        "200": { "value": "#fff3e1" },
-        "400": { "value": "#f5a623" },
-        "600": { "value": "#946314" }
+      "semantic": {
+        "text": {
+          "base": {
+            "primary": { "value": "{sds.color.primitive.gray.black.value}" },
+            "secondary": { "value": "{sds.color.primitive.gray.500.value}" },
+            "disabled": { "value": "{sds.color.primitive.gray.300.value}" },
+            "on-fill": { "value": "{sds.color.primitive.gray.white.value}" },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "accent": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "action": {
+            "default": { "value": "{sds.color.primitive.blue.400.value}" },
+            "hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "pressed": { "value": "{sds.color.primitive.blue.600.value}" }
+          },
+          "beta": { "value": "{sds.color.primitive.purple.600.value}" },
+          "info": { "value": "{sds.color.primitive.blue.600.value}" },
+          "negative": { "value": "{sds.color.primitive.red.600.value}" },
+          "notice": { "value": "{sds.color.primitive.yellow.600.value}" },
+          "positive": { "value": "{sds.color.primitive.green.600.value}" }
+        },
+        "component": {
+          "base": {
+            "fill": { "value": "{sds.color.primitive.gray.white.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-open": { "value": "{sds.color.primitive.gray.100.value}" },
+            "fill-selected": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "on-fill-disabled": {
+              "value": "{sds.color.primitive.gray.400.value}"
+            },
+            "surface-primary": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface-secondary": {
+              "value": "{sds.color.primitive.gray.100.value}"
+            },
+            "surface-tertiary": {
+              "value": "{sds.color.primitive.gray.200.value}"
+            },
+            "divider": { "value": "{sds.color.primitive.gray.200.value}" },
+            "border": { "value": "{sds.color.primitive.gray.400.value}" },
+            "border-hover": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.gray.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.gray.500.value}" },
+            "icon-hover": { "value": "{sds.color.primitive.gray.black.value}" },
+            "icon-pressed": {
+              "value": "{sds.color.primitive.gray.black.value}"
+            },
+            "icon-disabled": { "value": "{sds.color.primitive.gray.300.value}" }
+          },
+          "accent": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "fill-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "border-open": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-focus": { "value": "{sds.color.primitive.blue.400.value}" },
+            "border-selected": {
+              "value": "{sds.color.primitive.blue.400.value}"
+            },
+            "border-disabled": {
+              "value": "{sds.color.primitive.blue.300.value}"
+            },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "beta": {
+            "fill": { "value": "{sds.color.primitive.purple.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.purple.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.purple.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.purple.200.value}" },
+            "border": { "value": "{sds.color.primitive.purple.400.value}" },
+            "icon": { "value": "{sds.color.primitive.purple.400.value}" }
+          },
+          "info": {
+            "fill": { "value": "{sds.color.primitive.blue.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.blue.200.value}" },
+            "border": { "value": "{sds.color.primitive.blue.400.value}" },
+            "icon": { "value": "{sds.color.primitive.blue.400.value}" }
+          },
+          "negative": {
+            "fill": { "value": "{sds.color.primitive.red.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.red.500.value}" },
+            "fill-pressed": { "value": "{sds.color.primitive.red.600.value}" },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.red.200.value}" },
+            "border": { "value": "{sds.color.primitive.red.400.value}" },
+            "icon": { "value": "{sds.color.primitive.red.400.value}" }
+          },
+          "notice": {
+            "fill": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.yellow.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.yellow.200.value}" },
+            "border": { "value": "{sds.color.primitive.yellow.400.value}" },
+            "icon": { "value": "{sds.color.primitive.yellow.400.value}" }
+          },
+          "positive": {
+            "fill": { "value": "{sds.color.primitive.green.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.green.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.green.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.green.200.value}" },
+            "border": { "value": "{sds.color.primitive.green.400.value}" },
+            "icon": { "value": "{sds.color.primitive.green.400.value}" }
+          }
+        }
       }
     },
     "drop-shadows": {
-      "shadowL": { "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)" },
+      "shadowL": {
+        "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)"
+      },
       "shadowM": {
         "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
       },
-      "shadowS": { "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)" }
+      "shadowS": {
+        "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+      }
     },
     "borders": {
       "error": {
-        "400": { "value": "1px solid {sds.color.error.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.red.100.value}" }
       },
       "gray": {
-        "100": { "value": "1px solid {sds.color.gray.100.value}" },
-        "200": { "value": "1px solid {sds.color.gray.200.value}" },
-        "300": { "value": "1px solid {sds.color.gray.300.value}" },
-        "400": { "value": "1px solid {sds.color.gray.400.value}" },
-        "500": { "value": "1px solid {sds.color.gray.500.value}" },
-        "dashed": { "value": "2px dashed {sds.color.gray.400.value}" }
+        "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" },
+        "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" },
+        "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "400": { "value": "1px solid {sds.color.primitive.gray.400.value}" },
+        "500": { "value": "1px solid {sds.color.primitive.gray.500.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" }
       },
       "link": {
         "dashed": { "value": "1px dashed" },
         "solid": { "value": "1px solid" }
       },
       "primary": {
-        "300": { "value": "1px solid {sds.color.primary.300.value}" },
-        "400": { "value": "1px solid {sds.color.primary.400.value}" },
-        "500": { "value": "1px solid {sds.color.primary.500.value}" },
-        "600": { "value": "1px solid {sds.color.primary.600.value}" },
-        "dashed": { "value": "2px dashed {sds.color.primary.400.value}" }
+        "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" },
+        "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" },
+        "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" },
+        "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
       },
       "success": {
-        "400": { "value": "1px solid {sds.color.success.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.green.100.value}" }
       },
       "warning": {
-        "400": { "value": "1px solid {sds.color.warning.400.value}" }
+        "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" }
       }
     },
     "spaces": {
-      "default": { "value": "10px" },
+      "default": { "value": "12px" },
       "xxxs": { "value": "2px" },
       "xxs": { "value": "4px" },
       "xs": { "value": "6px" },
       "s": { "value": "8px" },
-      "m": { "value": "10px" },
-      "l": { "value": "14px" },
-      "xl": { "value": "22px" },
-      "xxl": { "value": "38px" }
+      "m": { "value": "12px" },
+      "l": { "value": "16px" },
+      "xl": { "value": "24px" },
+      "xxl": { "value": "40px" }
     },
     "iconSizes": {
       "input": {
@@ -282,16 +531,16 @@
         }
       },
       "xs": {
-        "height": { "value": "10px" },
-        "width": { "value": "10px" }
+        "height": { "value": "12px" },
+        "width": { "value": "12px" }
       },
       "s": {
-        "height": { "value": "14px" },
-        "width": { "value": "14px" }
+        "height": { "value": "16px" },
+        "width": { "value": "16px" }
       },
       "l": {
-        "height": { "value": "22px" },
-        "width": { "value": "22px" }
+        "height": { "value": "24px" },
+        "width": { "value": "24px" }
       },
       "xl": {
         "height": { "value": "32px" },
diff --git a/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js b/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js
index 05942d320..a3970b254 100644
--- a/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js
+++ b/packages/data-viz/src/common/styles-dictionary/tailwindFormat.js
@@ -17,6 +17,14 @@ StyleDictionary.registerFormat({
       return result.toLowerCase().replace(" ", "-");
     }
 
+    function convertToKebabCase(inputString) {
+      return inputString
+        .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+        .replace(/\d+/g, (match) => `-${match}`)
+        .replace(/^-/, "")
+        .replace(/-+/g, "-");
+    }
+
     function transformDictionary(tokens, keys) {
       const result = {};
 
@@ -32,16 +40,18 @@ StyleDictionary.registerFormat({
     function transformColor(tokens) {
       const colors = {};
 
-      for (const [name, colorTokens] of Object.entries(tokens)) {
-        const color = {};
-
-        for (const [colorName, token] of Object.entries(colorTokens)) {
-          color[colorName.toLowerCase().replace(" ", "-")] = token.value;
+      function getColor(theToken) {
+        for (const [, iToken] of Object.entries(theToken)) {
+          if ("value" in iToken && "name" in iToken) {
+            colors[convertToKebabCase(iToken.name)] = iToken.value;
+          } else {
+            getColor(iToken);
+          }
         }
-
-        colors[getName(name)] = color;
       }
 
+      getColor(tokens);
+
       return colors;
     }
 
@@ -58,40 +68,56 @@ StyleDictionary.registerFormat({
     }
 
     function transformFonts(tokens, keys) {
-      const fontFamily = {};
       const fontSize = {};
       const lineHeight = {};
-      const boldNameMap = {
-        400: "regular",
-        600: "semibold",
-      };
+      const letterSpacing = {};
+      const fontVariantNumeric = {};
+      const textTransform = {};
 
       for (const key of keys) {
         for (const [size, fonts] of Object.entries(tokens[key])) {
-          for (const [boldSize, { font }] of Object.entries(fonts)) {
-            const parsed = cssFont.parse(font.value);
-            fontFamily[getName(boldNameMap[boldSize])] = parsed.family;
+          for (const [, fontValue] of Object.entries(fonts)) {
+            const parsed = cssFont.parse(fontValue.font.value);
             fontSize[getName([key, size])] = parsed.size;
             lineHeight[getName([key, size])] = parsed.size;
+
+            letterSpacing[getName([key, size])] =
+              fontValue["letter-spacing"].value;
+            textTransform[getName([key, size])] = fontValue["text-transform"]
+              ? fontValue["text-transform"].value
+              : "none";
+            fontVariantNumeric[getName([key, size])] = fontValue[
+              "font-variant-numeric"
+            ]
+              ? fontValue["font-variant-numeric"].value
+              : "normal";
           }
         }
       }
 
       return {
-        fontFamily,
         fontSize,
+        fontVariantNumeric,
+        letterSpacing,
         lineHeight,
+        textTransform,
       };
     }
 
     const { sds } = dictionary.tokens;
     const tailwindConfig = {
-      ...transformFonts(sds.font, ["body", "caps", "header"]),
+      fontFamily: transformDictionary(sds.font["font-family"]),
+      ...transformFonts(sds.font, [
+        "body",
+        "caps",
+        "header",
+        "tabular",
+        "code",
+      ]),
       ...transformIconSizes(sds.iconSizes),
       borderRadius: transformDictionary(sds.corners),
       boxShadow: transformDictionary(sds["drop-shadows"]),
       colors: transformColor(sds.color),
-      letterSpacing: transformDictionary(sds.font["letter-spacing"]),
       spacing: transformDictionary(sds.spaces),
     };