diff --git a/examples/data-exchange/.eslintrc.json b/examples/data-exchange/.eslintrc.json
index ca38aec4..eff9d74a 100644
--- a/examples/data-exchange/.eslintrc.json
+++ b/examples/data-exchange/.eslintrc.json
@@ -11,6 +11,7 @@
     "@typescript-eslint/no-explicit-any": ["off"],
     "react/display-name": "off",
     "@next/next/no-html-link-for-pages": "off",
-    "prefer-const": "off"
+    "prefer-const": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }
diff --git a/examples/data-exchange/app/[locale]/(user)/chart/Content.tsx b/examples/data-exchange/app/[locale]/(user)/chart/Content.tsx
index e4c16473..514eb87a 100644
--- a/examples/data-exchange/app/[locale]/(user)/chart/Content.tsx
+++ b/examples/data-exchange/app/[locale]/(user)/chart/Content.tsx
@@ -2,11 +2,13 @@
 
 import React from 'react';
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 import { EChartsOption } from 'echarts-for-react';
 import { ShareDialog, useScreenshot } from 'opub-ui';
 import { BarChart } from 'opub-ui/viz';
 import { useMediaQuery } from 'usehooks-ts';
 
+import { eCharts } from '@/lib/eCharts';
 import { navigateEnd } from '@/lib/navigation';
 
 const MapChart = dynamic(
@@ -17,7 +19,6 @@ const MapChart = dynamic(
 );
 
 type Props = {
-  svg: string;
   options: EChartsOption;
 };
 export function Content({
@@ -49,21 +50,18 @@ export function Content({
     <div className="mb-8 min-h-fit w-full">
       <Chart
         options={bar.options}
-        svg={bar.svg}
         props={{
           title: 'This title for bar chart is generated in the template',
         }}
       />
       <Chart
         options={line.options}
-        svg={line.svg}
         props={{
           title: 'This title for line chart is generated in the template',
         }}
       />
       <Chart
         options={stacked.options}
-        svg={stacked.svg}
         props={{
           title: 'This title for stack chart is generated in the template',
         }}
@@ -80,7 +78,6 @@ export function Content({
 
 const Chart = ({
   options,
-  svg,
   props,
 }: Props & {
   props: {
@@ -88,14 +85,14 @@ const Chart = ({
   };
 }) => {
   const [svgURL, setSvgURL] = React.useState<string>('');
-  const base64SvgBar = btoa(svg);
-  const dataUrlBar = `data:image/svg+xml;base64,${base64SvgBar}`;
 
   const isDesktop = useMediaQuery('(min-width: 768px)');
 
   const { createSvg, svgToPngURL, downloadFile } = useScreenshot();
 
   const generateImage = async () => {
+    const dataUrlBar = eCharts({ options: options });
+
     const svg = await createSvg(
       <Template data={dataUrlBar} title={props.title} />,
       {
@@ -229,7 +226,7 @@ const Template = ({
         {title}
       </p>
       {data ? (
-        <img src={data} {...props} className="w-full" alt="SVG" />
+        <Image src={data} {...props} className="w-full" alt="SVG" />
       ) : (
         'Loading...'
       )}
diff --git a/examples/data-exchange/app/[locale]/(user)/chart/page.tsx b/examples/data-exchange/app/[locale]/(user)/chart/page.tsx
index f41b4e26..902d2312 100644
--- a/examples/data-exchange/app/[locale]/(user)/chart/page.tsx
+++ b/examples/data-exchange/app/[locale]/(user)/chart/page.tsx
@@ -1,15 +1,9 @@
 import json from '@/public/json/assam.json';
 
-import { eCharts } from '@/lib/eCharts';
 import { barOptions, lineOptions, stackedOptions } from './chart';
 import { Content } from './Content';
 
 export default async function Home() {
-  // generated SVG string in the server
-  const bar = eCharts({ options: barOptions });
-  const line = eCharts({ options: lineOptions });
-  const stacked = eCharts({ options: stackedOptions });
-
   const mapOptions = {
     mapProperty: 'dt_code',
     mapZoom: 7.9,
@@ -21,9 +15,9 @@ export default async function Home() {
   return (
     <main className="flex w-full flex-col items-center justify-center gap-2">
       <Content
-        bar={{ svg: bar, options: barOptions }}
-        line={{ svg: line, options: lineOptions }}
-        stacked={{ svg: stacked, options: stackedOptions }}
+        bar={{ options: barOptions }}
+        line={{ options: lineOptions }}
+        stacked={{ options: stackedOptions }}
         mapOptions={mapOptions}
       />
     </main>
diff --git a/examples/data-exchange/app/[locale]/dashboard/dataset/new/page-layout.tsx b/examples/data-exchange/app/[locale]/dashboard/dataset/new/page-layout.tsx
index b437716c..ac31cfb0 100644
--- a/examples/data-exchange/app/[locale]/dashboard/dataset/new/page-layout.tsx
+++ b/examples/data-exchange/app/[locale]/dashboard/dataset/new/page-layout.tsx
@@ -7,7 +7,6 @@ import { usePRouter } from '@/hooks/use-prouter';
 import { useMutation } from '@tanstack/react-query';
 
 import { GraphQL } from '@/lib/api';
-import { loadingStart } from '@/lib/navigation';
 import { ActionBar } from '../components/action-bar';
 import { CreateDataset } from './components/new-dataset';
 
diff --git a/examples/data-exchange/app/[locale]/dashboard/dataset/page-layout.tsx b/examples/data-exchange/app/[locale]/dashboard/dataset/page-layout.tsx
index 4b8dc203..768b0d75 100644
--- a/examples/data-exchange/app/[locale]/dashboard/dataset/page-layout.tsx
+++ b/examples/data-exchange/app/[locale]/dashboard/dataset/page-layout.tsx
@@ -1,11 +1,8 @@
 'use client';
 
-import { graphql } from '@/gql';
 import { usePRouter } from '@/hooks/use-prouter';
-import { useQuery } from '@tanstack/react-query';
 import { Divider } from 'opub-ui';
 
-import { GraphQL } from '@/lib/api';
 import { ActionBar } from './components/action-bar';
 import { Content } from './components/content';
 
diff --git a/examples/data-exchange/app/[locale]/dashboard/dataset/page.tsx b/examples/data-exchange/app/[locale]/dashboard/dataset/page.tsx
index 07ab5360..f56109b8 100644
--- a/examples/data-exchange/app/[locale]/dashboard/dataset/page.tsx
+++ b/examples/data-exchange/app/[locale]/dashboard/dataset/page.tsx
@@ -1,8 +1,3 @@
-import { graphql } from '@/gql';
-import { Hydrate } from '@/lib';
-import { dehydrate } from '@tanstack/react-query';
-
-import { getQueryClient, GraphQL } from '@/lib/api';
 import { Page } from './page-layout';
 
 // const allDatasetsQueryDoc = graphql(`
diff --git a/examples/data-exchange/config/figma.tokens.json b/examples/data-exchange/config/figma.tokens.json
deleted file mode 100644
index de25304f..00000000
--- a/examples/data-exchange/config/figma.tokens.json
+++ /dev/null
@@ -1,1409 +0,0 @@
-{
-  "Default": {
-    "Transparent": {
-      "$type": "color",
-      "$value": "#00000000"
-    },
-    "Background": {
-      "Default": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#edeeefff"
-      },
-      "Selected": {
-        "$type": "color",
-        "$value": "#edeeefff"
-      },
-      "Invert": {
-        "$type": "color",
-        "$value": "#202123ff"
-      }
-    },
-    "Surface": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#fafbfbff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#edeeefff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#fafbfbff"
-      },
-      "SearchField": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      }
-    },
-    "Surface Selected": {
-      "Default": {
-        "$type": "color",
-        "$value": "#f2f7feff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#edf4feff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#e5effdff"
-      }
-    },
-    "Surface Warning": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffd79dff",
-        "$description": "Use for badges"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#fff5eaff",
-        "$description": "Used for banners"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#fff2e2ff"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#ffebd3ff"
-      }
-    },
-    "Surface Critical": {
-      "Default": {
-        "$type": "color",
-        "$value": "#fed3d1ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#fff4f4ff"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#fff0f0ff",
-        "$description": "Used on action lists"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#ffe9e8ff"
-      },
-      "Subdued Depressed": {
-        "$type": "color",
-        "$value": "#febcb9ff"
-      }
-    },
-    "Surface Success": {
-      "Default": {
-        "$type": "color",
-        "$value": "#aee9d1ff",
-        "$description": "S: 40, L: 89.9"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#f1f8f5ff"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#ecf6f1ff"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#e2f1eaff"
-      }
-    },
-    "Surface Highlight": {
-      "Default": {
-        "$type": "color",
-        "$value": "#a4e8f2ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#ebf9fcff"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#e4f7faff"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#d5f3f8ff"
-      }
-    },
-    "Surface Neutral": {
-      "Default": {
-        "$type": "color",
-        "$value": "#e4e5e7ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#dbdddfff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#c9ccd0ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      }
-    },
-    "Surface Primary": {
-      "Selected": {
-        "$type": "color",
-        "$value": "#f1f8f5ff"
-      },
-      "Selected Hovered": {
-        "$type": "color",
-        "$value": "#b3d0c3ff"
-      },
-      "Selected Pressed": {
-        "$type": "color",
-        "$value": "#a2bcb0ff"
-      }
-    },
-    "Surface Attention": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffea8aff"
-      }
-    },
-    "Interactive": {
-      "Default": {
-        "$type": "color",
-        "$value": "#2c6ecbff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#1f5199ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#103262ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#bdc1ccff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#d82c0dff"
-      },
-      "Critical Hovered": {
-        "$type": "color",
-        "$value": "#cd290cff"
-      },
-      "Critical Disabled": {
-        "$type": "color",
-        "$value": "#fd938dff"
-      },
-      "Critical Pressed": {
-        "$type": "color",
-        "$value": "#670f03ff"
-      }
-    },
-    "Text": {
-      "Default": {
-        "$type": "color",
-        "$value": "#202223ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#6d7175ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#8c9196ff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#d72c0dff"
-      },
-      "Warning": {
-        "$type": "color",
-        "$value": "#916a00ff"
-      },
-      "Success": {
-        "$type": "color",
-        "$value": "#008060ff"
-      },
-      "Highlight": {
-        "$type": "color",
-        "$value": "#347c84ff"
-      }
-    },
-    "Text On": {
-      "Interactive": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Primary": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      }
-    },
-    "Text Primary": {
-      "Default": {
-        "$type": "color",
-        "$value": "#007b5cff"
-      },
-      "hover": {
-        "$type": "color",
-        "$value": "#006c50ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#005c44ff"
-      }
-    },
-    "Icon": {
-      "Default": {
-        "$type": "color",
-        "$value": "#5c5f62ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#8c9196ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#1a1c1dff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#44474aff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#babec3ff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#d72c0dff"
-      },
-      "Warning": {
-        "$type": "color",
-        "$value": "#b98900ff"
-      },
-      "Success": {
-        "$type": "color",
-        "$value": "#007f5fff"
-      },
-      "Highlight": {
-        "$type": "color",
-        "$value": "#00a0acff"
-      },
-      "Interactive": {
-        "$type": "color",
-        "$value": "#2c6ecbff"
-      }
-    },
-    "Icon On": {
-      "Interactive": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Primary": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      }
-    },
-    "Border": {
-      "Default": {
-        "$type": "color",
-        "$value": "#8c9196ff",
-        "$description": "3:1 AA Contrast required"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#c9cccfff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#999ea4ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#575959ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#d2d5d8ff"
-      }
-    },
-    "Border Critical": {
-      "Default": {
-        "$type": "color",
-        "$value": "#fd5749ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#e0b3b2ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#ffa7a3ff"
-      }
-    },
-    "Border Warning": {
-      "Default": {
-        "$type": "color",
-        "$value": "#b98900ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#e1b878ff"
-      }
-    },
-    "Border Success": {
-      "Default": {
-        "$type": "color",
-        "$value": "#00a47cff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#95c9b4ff"
-      }
-    },
-    "Border Highlight": {
-      "Default": {
-        "$type": "color",
-        "$value": "#449da7ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#98c6cdff"
-      }
-    },
-    "Border Neutral": {
-      "Subdued": {
-        "$type": "color",
-        "$value": "#babfc3ff"
-      }
-    },
-    "Border Shadow": {
-      "Default": {
-        "$type": "color",
-        "$value": "#aeb4b9ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#aeb4b9ff"
-      }
-    },
-    "Action Primary": {
-      "Default": {
-        "$type": "color",
-        "$value": "#008060ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#006e52ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#005e46ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#003d2cff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#f1f1f1ff"
-      }
-    },
-    "Action Secondary": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#6d7175ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      }
-    },
-    "Action Critical": {
-      "Default": {
-        "$type": "color",
-        "$value": "#d82c0dff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#bc2200ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#a21b00ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#6c0f00ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#f1f1f1ff"
-      }
-    },
-    "Decorative": {
-      "Surface": {
-        "one": {
-          "$type": "color",
-          "$value": "#ffc96bff"
-        },
-        "two": {
-          "$type": "color",
-          "$value": "#ffc4b0ff"
-        },
-        "three": {
-          "$type": "color",
-          "$value": "#92e6b5ff"
-        },
-        "four": {
-          "$type": "color",
-          "$value": "#91e0d6ff"
-        },
-        "five": {
-          "$type": "color",
-          "$value": "#fdc9d0ff"
-        }
-      },
-      "Text": {
-        "one": {
-          "$type": "color",
-          "$value": "#3d2800ff"
-        },
-        "two": {
-          "$type": "color",
-          "$value": "#490b1cff"
-        },
-        "three": {
-          "$type": "color",
-          "$value": "#002f19ff"
-        },
-        "four": {
-          "$type": "color",
-          "$value": "#002d2dff"
-        },
-        "five": {
-          "$type": "color",
-          "$value": "#4f0e1fff"
-        }
-      },
-      "Icon": {
-        "one": {
-          "$type": "color",
-          "$value": "#7e5700ff"
-        },
-        "two": {
-          "$type": "color",
-          "$value": "#af294eff"
-        },
-        "three": {
-          "$type": "color",
-          "$value": "#006d41ff"
-        },
-        "four": {
-          "$type": "color",
-          "$value": "#006a68ff"
-        },
-        "icon-five": {
-          "$type": "color",
-          "$value": "#ae2b4cff"
-        }
-      }
-    },
-    "Backdrop": {
-      "Default": {
-        "$type": "color",
-        "$value": "#00000080"
-      }
-    },
-    "Focused": {
-      "Default": {
-        "$type": "color",
-        "$value": "#458fffff"
-      }
-    },
-    "Overlay": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffffff80"
-      }
-    },
-    "Divider": {
-      "Default": {
-        "$type": "color",
-        "$value": "#e1e3e5ff"
-      }
-    },
-    "shadow-inset": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#e4e5e7ff",
-        "offsetX": "-1px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": true
-      }
-    },
-    "shadow-inset-button-pressed": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000026",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": true
-      }
-    },
-    "shadow-inset-button": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000033",
-        "offsetX": "0px",
-        "offsetY": "-1px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": true
-      }
-    },
-    "shadow-button": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#0000000d",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px"
-      }
-    },
-    "shadow-modal": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000033",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "1px",
-        "spread": "0px"
-      },
-      "$description": "Used for modals"
-    },
-    "shadow-layer": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#202a3614",
-        "offsetX": "0px",
-        "offsetY": "2px",
-        "blur": "16px",
-        "spread": "0px"
-      }
-    },
-    "shadow-popover": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#17181814",
-        "offsetX": "0px",
-        "offsetY": "3px",
-        "blur": "6px",
-        "spread": "-3px"
-      },
-      "$description": "User for Popover and the fixed navigation bar"
-    },
-    "shadow-card": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1718180d",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "5px",
-        "spread": "0px"
-      },
-      "$description": "Used for Card"
-    },
-    "shadow-top-bar": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000026",
-        "offsetX": "0px",
-        "offsetY": "2px",
-        "blur": "2px",
-        "spread": "-1px"
-      }
-    },
-    "shadow-deep": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#062c521a",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "1px"
-      }
-    },
-    "shadow-base": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#3f3f4426",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "3px",
-        "spread": "0px"
-      }
-    },
-    "shadow-faint": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#161d250d",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px"
-      }
-    },
-    "shadow-transparent": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000000",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px"
-      }
-    },
-    "shadow-xs": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f21243d",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "2px",
-        "spread": "0px"
-      }
-    },
-    "shadow-sm": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f21241a",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "1px",
-        "spread": "0px"
-      }
-    },
-    "shadow-md": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f21241a",
-        "offsetX": "0px",
-        "offsetY": "2px",
-        "blur": "4px",
-        "spread": "0px"
-      }
-    },
-    "shadow-lg": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f212433",
-        "offsetX": "0px",
-        "offsetY": "4px",
-        "blur": "12px",
-        "spread": "0px"
-      }
-    },
-    "shadow-xl": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f212414",
-        "offsetX": "0px",
-        "offsetY": "4px",
-        "blur": "18px",
-        "spread": "-2px"
-      }
-    },
-    "shadow-2xl": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f212426",
-        "offsetX": "0px",
-        "offsetY": "32px",
-        "blur": "32px",
-        "spread": "0px"
-      }
-    },
-    "heading4xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "40px",
-        "lineHeight": "48px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for key moments and more learning focused content."
-    },
-    "heading3xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "32px",
-        "lineHeight": "40px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for key moments and more learning focused content."
-    },
-    "heading2xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "28px",
-        "lineHeight": "32px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for numerals and key information."
-    },
-    "headingXl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "24px",
-        "lineHeight": "28px",
-        "letterSpacing": "0px"
-      }
-    },
-    "headingLg": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "20px",
-        "lineHeight": "24px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for page, modal titles, numerals and key information."
-    },
-    "headingMd": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "16px",
-        "lineHeight": "24px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for card and section headings. Use to create various levels of hierarchy on the page."
-    },
-    "headingSm": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for card and section headings. Use to create various levels of hierarchy on the page."
-    },
-    "headingXs": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for subheadings."
-    },
-    "bodyLg": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "16px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use for larger body text within components and short blocks of text."
-    },
-    "bodyLg-medium": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "16px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to add emphasis to large body text. Typically used for buttons."
-    },
-    "bodyLg-underline": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "UNDERLINE",
-        "fontSize": "16px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use for large link text."
-    },
-    "bodyMd": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Default body text. Use within components and blocks of text."
-    },
-    "bodyMd-medium": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to add emphasis to text. Typically used for buttons."
-    },
-    "bodyMd-semibold": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to add strong emphasis to body text."
-    },
-    "bodyMd-underline": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "UNDERLINE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use for link text."
-    },
-    "bodyMd-mono": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to display an inline code block."
-    },
-    "bodySm": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "8px"
-      },
-      "$description": "Use for supporting body text like captions."
-    },
-    "bodySm-medium": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "8px"
-      },
-      "$description": "Use to add emphasis to small body text."
-    },
-    "bodySm-semibold": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0em"
-      }
-    },
-    "Font Family": {
-      "primary": {
-        "$type": "fontFamily",
-        "$value": "Inter"
-      },
-      "mono": {
-        "$type": "fontFamily",
-        "$value": "Space Mono"
-      }
-    },
-    "Font Weight": {
-      "Regular": {
-        "$type": "fontWeight",
-        "$value": "400"
-      },
-      "Medium": {
-        "$type": "fontWeight",
-        "$value": "500"
-      },
-      "Bold": {
-        "$type": "fontWeight",
-        "$value": "600"
-      },
-      "Extra Bold": {
-        "$type": "fontWeight",
-        "$value": "700"
-      }
-    },
-    "space-0": {
-      "$type": "dimension",
-      "$value": "0px"
-    },
-    "space-025": {
-      "$type": "dimension",
-      "$value": "1px"
-    },
-    "space-05": {
-      "$type": "dimension",
-      "$value": "2px"
-    },
-    "space-1": {
-      "$type": "dimension",
-      "$value": "4px"
-    },
-    "space-2": {
-      "$type": "dimension",
-      "$value": "8px"
-    },
-    "space-3": {
-      "$type": "dimension",
-      "$value": "12px"
-    },
-    "space-4": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "space-5": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "space-6": {
-      "$type": "dimension",
-      "$value": "24px"
-    },
-    "space-8": {
-      "$type": "dimension",
-      "$value": "32px"
-    },
-    "space-10": {
-      "$type": "dimension",
-      "$value": "40px"
-    },
-    "space-12": {
-      "$type": "dimension",
-      "$value": "48px"
-    },
-    "space-16": {
-      "$type": "dimension",
-      "$value": "64px"
-    },
-    "space-20": {
-      "$type": "dimension",
-      "$value": "80px"
-    },
-    "space-24": {
-      "$type": "dimension",
-      "$value": "96px"
-    },
-    "space-32": {
-      "$type": "dimension",
-      "$value": "128px"
-    },
-    "border-width-1": {
-      "$type": "dimension",
-      "$value": "1px"
-    },
-    "border-width-2": {
-      "$type": "dimension",
-      "$value": "2px"
-    },
-    "border-width-3": {
-      "$type": "dimension",
-      "$value": "3px"
-    },
-    "border-width-4": {
-      "$type": "dimension",
-      "$value": "4px"
-    },
-    "border-width-5": {
-      "$type": "dimension",
-      "$value": "5px"
-    },
-    "border-radius-05": {
-      "$type": "dimension",
-      "$value": "2px"
-    },
-    "border-radius-1": {
-      "$type": "dimension",
-      "$value": "4px"
-    },
-    "border-radius-2": {
-      "$type": "dimension",
-      "$value": "8px"
-    },
-    "border-radius-3": {
-      "$type": "dimension",
-      "$value": "12px"
-    },
-    "border-radius-4": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "border-radius-5": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "border-radius-full": {
-      "$type": "dimension",
-      "$value": "9999px"
-    },
-    "border-radius-half": {
-      "$type": "dimension",
-      "$value": "50%"
-    },
-    "border-radius-base": {
-      "$type": "dimension",
-      "$value": "3px"
-    },
-    "border-radius-large": {
-      "$type": "dimension",
-      "$value": "6px"
-    },
-    "border-base": {
-      "$type": "border",
-      "$value": {
-        "color": "#c9cccfff",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "border-dark": {
-      "$type": "border",
-      "$value": {
-        "color": "#8c9196ff",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "border-divider": {
-      "$type": "border",
-      "$value": {
-        "color": "#e1e3e5ff",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "border-transparent": {
-      "$type": "border",
-      "$value": {
-        "color": "#00000000",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "z": {
-      "1": {
-        "$type": "number",
-        "$value": 100
-      },
-      "2": {
-        "$type": "number",
-        "$value": 400
-      },
-      "3": {
-        "$type": "number",
-        "$value": 513
-      },
-      "4": {
-        "$type": "number",
-        "$value": 514
-      },
-      "5": {
-        "$type": "number",
-        "$value": 515
-      },
-      "6": {
-        "$type": "number",
-        "$value": 516
-      },
-      "7": {
-        "$type": "number",
-        "$value": 517
-      },
-      "8": {
-        "$type": "number",
-        "$value": 518
-      },
-      "9": {
-        "$type": "number",
-        "$value": 519
-      },
-      "10": {
-        "$type": "number",
-        "$value": 520
-      },
-      "max": {
-        "$type": "number",
-        "$value": 99999
-      }
-    },
-    "duration-0": {
-      "$type": "duration",
-      "$value": 0
-    },
-    "duration-100": {
-      "$type": "duration",
-      "$value": 100
-    },
-    "duration-150": {
-      "$type": "duration",
-      "$value": 150
-    },
-    "duration-200": {
-      "$type": "duration",
-      "$value": 200
-    },
-    "duration-250": {
-      "$type": "duration",
-      "$value": 250
-    },
-    "duration-300": {
-      "$type": "duration",
-      "$value": 300
-    },
-    "duration-350": {
-      "$type": "duration",
-      "$value": 350
-    },
-    "duration-400": {
-      "$type": "duration",
-      "$value": 400
-    },
-    "duration-450": {
-      "$type": "duration",
-      "$value": 450
-    },
-    "duration-500": {
-      "$type": "duration",
-      "$value": 500
-    },
-    "duration-5000": {
-      "$type": "duration",
-      "$value": 5000
-    },
-    "ease": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0.25, 0.1, 0.25, 1)"
-    },
-    "linear": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0, 0, 1, 1)"
-    },
-    "ease-in": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0.42, 0, 1, 1)"
-    },
-    "ease-out": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0, 0, 0.58, 1)"
-    },
-    "ease-in-out": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0.42, 0, 0.58, 1)"
-    },
-    "font-size-75": {
-      "$type": "dimension",
-      "$value": "12px"
-    },
-    "font-size-100": {
-      "$type": "dimension",
-      "$value": "14px"
-    },
-    "font-size-200": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "font-size-300": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "font-size-400": {
-      "$type": "dimension",
-      "$value": "24px"
-    },
-    "font-size-500": {
-      "$type": "dimension",
-      "$value": "28px"
-    },
-    "font-size-600": {
-      "$type": "dimension",
-      "$value": "32px"
-    },
-    "font-size-700": {
-      "$type": "dimension",
-      "$value": "40px"
-    },
-    "font-line-height-1": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "font-line-height-2": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "font-line-height-3": {
-      "$type": "dimension",
-      "$value": "24px"
-    },
-    "font-line-height-4": {
-      "$type": "dimension",
-      "$value": "28px"
-    },
-    "font-line-height-5": {
-      "$type": "dimension",
-      "$value": "32px"
-    },
-    "font-line-height-6": {
-      "$type": "dimension",
-      "$value": "40px"
-    },
-    "font-line-height-7": {
-      "$type": "dimension",
-      "$value": "48px"
-    }
-  }
-}
diff --git a/examples/data-exchange/config/style-dictionary.js b/examples/data-exchange/config/style-dictionary.js
deleted file mode 100644
index f81abf20..00000000
--- a/examples/data-exchange/config/style-dictionary.js
+++ /dev/null
@@ -1,145 +0,0 @@
-const tokenSanitize = require('../lib/style-dictionary/sanitize');
-const tailwindFormat = require('../lib/style-dictionary/tailwind-formattor');
-const cssFormattor = require('../lib/style-dictionary/css-formattor');
-const jsFormattor = require('../lib/style-dictionary/js-formattor');
-const config = require('./figma.tokens.json');
-
-let tokens = tokenSanitize(config);
-module.exports = {
-  format: {
-    tailwindFormat,
-    cssFormattor,
-    jsFormattor,
-  },
-  tokens,
-  platforms: {
-    css: {
-      transformGroup: 'css',
-      buildPath: 'styles/tokens/',
-      files: [
-        {
-          destination: '_variables.css',
-          format: 'cssFormattor',
-        },
-      ],
-    },
-    ts: {
-      transformGroup: 'js',
-      transforms: ['name/cti/camel'],
-      buildPath: 'styles/tokens/',
-      files: [
-        {
-          format: 'jsFormattor',
-          destination: 'variables.js',
-        },
-      ],
-    },
-    tailwind: {
-      buildPath: 'styles/tokens/tailwind/',
-      transformGroup: 'js',
-      transforms: ['attribute/cti', 'name/cti/camel'],
-      files: [
-        {
-          destination: 'space.js',
-          format: 'tailwindFormat',
-          options: {
-            type: 'space',
-            category: 'dimension',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'line-height.js',
-          format: 'tailwindFormat',
-          options: {
-            type: 'line-height',
-            category: 'dimension',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'border-radius.js',
-          format: 'tailwindFormat',
-          options: {
-            type: 'border-radius',
-            category: 'dimension',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'border-width.js',
-          format: 'tailwindFormat',
-          options: {
-            type: 'border-width',
-            category: 'dimension',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'font-size.js',
-          format: 'tailwindFormat',
-          options: {
-            type: 'font-size',
-            category: 'dimension',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'box-shadow.js',
-          format: 'tailwindFormat',
-          options: {
-            category: 'shadow',
-            removeCategory: true,
-          },
-        },
-        {
-          destination: 'z-index.js',
-          format: 'tailwindFormat',
-          options: {
-            type: 'z',
-            category: 'number',
-          },
-        },
-        {
-          destination: 'duration.js',
-          format: 'tailwindFormat',
-          options: {
-            category: 'duration',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'ease-function.js',
-          format: 'tailwindFormat',
-          options: {
-            category: 'cubicBezier',
-          },
-        },
-        {
-          destination: 'font-family.js',
-          format: 'tailwindFormat',
-          options: {
-            category: 'fontFamily',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'font-weight.js',
-          format: 'tailwindFormat',
-          options: {
-            category: 'fontWeight',
-            trimName: true,
-          },
-        },
-        {
-          destination: 'color.js',
-          format: 'tailwindFormat',
-          options: {
-            category: 'color',
-            useNameAttribute: true,
-          },
-        },
-      ],
-    },
-  },
-};
diff --git a/examples/data-exchange/config/tokens/copy.js b/examples/data-exchange/config/tokens/copy.js
new file mode 100644
index 00000000..655b0ae9
--- /dev/null
+++ b/examples/data-exchange/config/tokens/copy.js
@@ -0,0 +1,11 @@
+const fse = require('fs-extra');
+
+const srcDir = `styles/tokens`;
+const opubUI = `../../packages/opub-ui/styles`;
+
+try {
+  fse.copySync(srcDir, opubUI, { overwrite: true | false });
+  console.log('copied to opub-ui');
+} catch (err) {
+  console.error(err);
+}
diff --git a/examples/data-exchange/config/tokens/generate.js b/examples/data-exchange/config/tokens/generate.js
new file mode 100644
index 00000000..cdbdb21e
--- /dev/null
+++ b/examples/data-exchange/config/tokens/generate.js
@@ -0,0 +1,4 @@
+const StyleDictionary = require('style-dictionary');
+const config = require('./sd-config.js');
+
+StyleDictionary.extend(config).buildAllPlatforms();
diff --git a/examples/data-exchange/config/tokens/helpers/css-formattor.js b/examples/data-exchange/config/tokens/helpers/css-formattor.js
new file mode 100644
index 00000000..578b02a0
--- /dev/null
+++ b/examples/data-exchange/config/tokens/helpers/css-formattor.js
@@ -0,0 +1,91 @@
+const effectConvert = require('./effect-convert');
+
+// tokens which are not available in figma
+const extraVariables = `
+  --z-1: 100;
+  --z-2: 400;
+  --z-3: 513;
+  --z-4: 514;
+  --z-5: 515;
+  --z-6: 516;
+  --z-7: 517;
+  --z-8: 518;
+  --z-9: 519;
+  --z-10: 520;
+  --z-max: 99999;
+
+  --duration-0: 0ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-250: 250ms;
+  --duration-300: 300ms;
+  --duration-350: 350ms;
+  --duration-400: 400ms;
+  --duration-450: 450ms;
+  --duration-500: 500ms;
+  --duration-5000: 5000ms;
+
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --linear: cubic-bezier(0, 0, 1, 1);
+  --ease-in: cubic-bezier(0.42, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.58, 1);
+  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
+
+  --font-size-75: 0.75rem;
+  --font-size-100: 0.875rem;
+  --font-size-200: 1rem;
+  --font-size-300: 1.25rem;
+  --font-size-400: 1.5rem;
+  --font-size-500: 1.75rem;
+  --font-size-600: 2rem;
+  --font-size-700: 2.5rem;
+
+  --font-line-height-1: 16px;
+  --font-line-height-2: 20px;
+  --font-line-height-3: 24px;
+  --font-line-height-4: 28px;
+  --font-line-height-5: 32px;
+  --font-line-height-6: 40px;
+  --font-line-height-7: 48px;
+`;
+
+// format `design/token` to `--design-token`
+function nameFormat(name) {
+  return `--${name.toLowerCase().split('/').join('-')}`;
+}
+
+module.exports = function ({ dictionary }) {
+  let families = ':root { \n';
+  Object.values(dictionary.tokens).map((collection) => {
+    if (['Typography', 'Grids'].includes(collection.name)) return;
+
+    collection.modes[0].variables.forEach((variable) => {
+      let name = nameFormat(variable.name);
+      let value;
+      if (variable.type === 'effect') {
+        value = effectConvert(variable.value.effects);
+      } else {
+        // if the value is based on another design token
+        if (variable['isAlias'] === true) {
+          value = `var(${nameFormat(variable.value.name)})`;
+        } else {
+          // if it's a fixed value
+          const val = variable.value;
+          if (variable.type === 'number') {
+            value = `${val}px`;
+          } else {
+            value = val;
+          }
+        }
+      }
+
+      families += `  ${name}: ${value};\n`;
+    });
+    families += '\n';
+  });
+  families += extraVariables;
+  families += '}\n';
+
+  return families;
+};
diff --git a/examples/data-exchange/config/tokens/helpers/effect-convert.js b/examples/data-exchange/config/tokens/helpers/effect-convert.js
new file mode 100644
index 00000000..2efc8611
--- /dev/null
+++ b/examples/data-exchange/config/tokens/helpers/effect-convert.js
@@ -0,0 +1,33 @@
+function rgbaToString(rgba) {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+}
+
+function effectObjToString(effect) {
+  let value = '';
+  switch (effect.type) {
+    case 'DROP_SHADOW':
+      value = `${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${
+        effect.spread
+      }px ${rgbaToString(effect.color)}`;
+      break;
+    case 'INNER_SHADOW':
+      value = `inset ${effect.offset.x}px ${effect.offset.y}px ${
+        effect.radius
+      }px ${effect.spread}px ${rgbaToString(effect.color)}`;
+      break;
+    default:
+      value = `${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${
+        effect.spread
+      }px ${rgbaToString(effect.color)}`;
+      break;
+  }
+  return value;
+}
+
+module.exports = function (effects) {
+  let value = '';
+  effects.forEach((effect) => {
+    value += `${effectObjToString(effect)}, `;
+  });
+  return value.slice(0, -2);
+};
diff --git a/examples/data-exchange/config/tokens/helpers/tailwind-formattor.js b/examples/data-exchange/config/tokens/helpers/tailwind-formattor.js
new file mode 100644
index 00000000..2b76159f
--- /dev/null
+++ b/examples/data-exchange/config/tokens/helpers/tailwind-formattor.js
@@ -0,0 +1,76 @@
+function arrayToCamelCase(tokens) {
+  return tokens
+    .map((word, index) => {
+      if (index === 0) return word.toLowerCase();
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join('');
+}
+
+function nameFormat({ name, cssStyle = false, trimName = false, trimLength }) {
+  // format `design/token` to `design-token`
+  if (cssStyle) {
+    return `--${name.toLowerCase().split('/').join('-')}`;
+  }
+
+  // format `design/token/1` to `1`
+  // with trimLength = 2, format `design/token/abc/def` to `abcDef`
+  if (trimName) {
+    return arrayToCamelCase(name.split('/').slice(-trimLength));
+  }
+
+  // format `design/token` to `designToken`
+  return `${arrayToCamelCase(name.split('/'))}`;
+}
+
+module.exports = function ({ dictionary, options }) {
+  const { category, type, trimName, trimLength = 1 } = options;
+
+  let tokensObj = Object.values(dictionary.tokens).filter(
+    (token) => token.name === category
+  );
+
+  // for border-radius and border-width since they are nested
+  if (type) {
+    tokensObj = tokensObj[0].modes[0].variables.filter((token) =>
+      token.name.includes(type)
+    );
+  }
+
+  const variables = type ? tokensObj : tokensObj[0].modes[0].variables;
+
+  let families = 'module.exports = { \n';
+  variables.forEach((variable) => {
+    let name = nameFormat({
+      name: variable.name,
+      trimName,
+      trimLength,
+    });
+    let value;
+    if (variable.type === 'effect') {
+      value = `"var(${nameFormat({
+        name: variable.name,
+        cssStyle: true,
+      })})"`;
+    } else {
+      // if the value is based on another design token
+      if (variable['isAlias'] === true) {
+        value = `"var(${nameFormat({
+          name: variable.value.name,
+          cssStyle: true,
+        })})"`;
+      } else {
+        // if it's a fixed value
+        if (variable.type === 'number') {
+          value = `"${variable.value}px"`;
+        } else {
+          value = `"${variable.value}"`;
+        }
+      }
+    }
+    families += `  "${name}": ${value},\n`;
+  });
+  families += '}\n';
+
+  return families;
+};
diff --git a/examples/data-exchange/config/tokens/sd-config.js b/examples/data-exchange/config/tokens/sd-config.js
new file mode 100644
index 00000000..aed5e277
--- /dev/null
+++ b/examples/data-exchange/config/tokens/sd-config.js
@@ -0,0 +1,71 @@
+const cssFormattor = require('./helpers/css-formattor');
+const twFormat = require('./helpers/tailwind-formattor');
+const config = require('./tokens.json');
+
+module.exports = {
+  format: {
+    twFormat,
+    cssFormattor,
+  },
+  tokens: config.collections,
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'styles/tokens/',
+      files: [
+        {
+          destination: '_variables.css',
+          format: 'cssFormattor',
+        },
+      ],
+    },
+    tailwind: {
+      transformGroup: 'js',
+      buildPath: 'styles/tokens/tailwind/',
+      files: [
+        {
+          destination: 'space.js',
+          format: 'twFormat',
+          options: {
+            category: 'Spacing / Numericals',
+            trimName: true,
+          },
+        },
+        {
+          destination: 'border-radius.js',
+          format: 'twFormat',
+          options: {
+            type: 'radius',
+            category: 'Borders',
+            trimName: true,
+          },
+        },
+        {
+          destination: 'border-width.js',
+          format: 'twFormat',
+          options: {
+            type: 'width',
+            category: 'Borders',
+            trimName: true,
+          },
+        },
+        {
+          destination: 'box-shadow.js',
+          format: 'twFormat',
+          options: {
+            category: 'Effects',
+            trimName: true,
+            trimLength: 2,
+          },
+        },
+        {
+          destination: 'color.js',
+          format: 'twFormat',
+          options: {
+            category: 'Colors',
+          },
+        },
+      ],
+    },
+  },
+};
diff --git a/examples/data-exchange/config/tokens/tokens.json b/examples/data-exchange/config/tokens/tokens.json
new file mode 100644
index 00000000..892f8d90
--- /dev/null
+++ b/examples/data-exchange/config/tokens/tokens.json
@@ -0,0 +1,3391 @@
+{
+  "collections": [
+    {
+      "name": "Colors",
+      "modes": [
+        {
+          "name": "Light",
+          "variables": [
+            {
+              "name": "base/indigo/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FDFDFE"
+            },
+            {
+              "name": "base/indigo/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F8FAFF"
+            },
+            {
+              "name": "base/indigo/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F0F4FF"
+            },
+            {
+              "name": "base/indigo/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E6EDFE"
+            },
+            {
+              "name": "base/indigo/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D9E2FC"
+            },
+            {
+              "name": "base/indigo/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C6D4F9"
+            },
+            {
+              "name": "base/indigo/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AEC0F5"
+            },
+            {
+              "name": "base/indigo/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#8DA4EF"
+            },
+            {
+              "name": "base/indigo/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3E63DD"
+            },
+            {
+              "name": "base/indigo/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3A5CCC"
+            },
+            {
+              "name": "base/indigo/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3451B2"
+            },
+            {
+              "name": "base/indigo/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#101D46"
+            },
+            {
+              "name": "base/blue/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFDFF"
+            },
+            {
+              "name": "base/blue/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F5FAFF"
+            },
+            {
+              "name": "base/blue/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EDF6FF"
+            },
+            {
+              "name": "base/blue/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E1F0FF"
+            },
+            {
+              "name": "base/blue/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#CEE7FE"
+            },
+            {
+              "name": "base/blue/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#B7D9F8"
+            },
+            {
+              "name": "base/blue/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#96C7F2"
+            },
+            {
+              "name": "base/blue/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5EB0EF"
+            },
+            {
+              "name": "base/blue/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0091FF"
+            },
+            {
+              "name": "base/blue/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0081F1"
+            },
+            {
+              "name": "base/blue/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#006ADC"
+            },
+            {
+              "name": "base/blue/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00254D"
+            },
+            {
+              "name": "base/violet/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FDFCFE"
+            },
+            {
+              "name": "base/violet/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFAFF"
+            },
+            {
+              "name": "base/violet/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F5F2FF"
+            },
+            {
+              "name": "base/violet/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EDE9FE"
+            },
+            {
+              "name": "base/violet/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E4DEFC"
+            },
+            {
+              "name": "base/violet/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D7CFF9"
+            },
+            {
+              "name": "base/violet/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C4B8F3"
+            },
+            {
+              "name": "base/violet/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AA99EC"
+            },
+            {
+              "name": "base/violet/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#6E56CF"
+            },
+            {
+              "name": "base/violet/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#644FC1"
+            },
+            {
+              "name": "base/violet/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5746AF"
+            },
+            {
+              "name": "base/violet/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#20134B"
+            },
+            {
+              "name": "base/gray/slate/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFCFD"
+            },
+            {
+              "name": "base/gray/slate/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F8F9FA"
+            },
+            {
+              "name": "base/gray/slate/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F1F3F5"
+            },
+            {
+              "name": "base/gray/slate/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#ECEEF0"
+            },
+            {
+              "name": "base/gray/slate/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E6E8EB"
+            },
+            {
+              "name": "base/gray/slate/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DFE3E6"
+            },
+            {
+              "name": "base/gray/slate/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D7DBDF"
+            },
+            {
+              "name": "base/gray/slate/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C1C8CD"
+            },
+            {
+              "name": "base/gray/slate/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#889096"
+            },
+            {
+              "name": "base/gray/slate/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#7E868C"
+            },
+            {
+              "name": "base/gray/slate/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#687076"
+            },
+            {
+              "name": "base/gray/slate/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#11181C"
+            },
+            {
+              "name": "base/red/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFCFC"
+            },
+            {
+              "name": "base/red/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFF8F8"
+            },
+            {
+              "name": "base/red/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFEFEF"
+            },
+            {
+              "name": "base/red/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFE5E5"
+            },
+            {
+              "name": "base/red/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FDD8D8"
+            },
+            {
+              "name": "base/red/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F9C6C6"
+            },
+            {
+              "name": "base/red/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F3AEAF"
+            },
+            {
+              "name": "base/red/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EB9091"
+            },
+            {
+              "name": "base/red/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E5484D"
+            },
+            {
+              "name": "base/red/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DC3D43"
+            },
+            {
+              "name": "base/red/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#CD2B31"
+            },
+            {
+              "name": "base/red/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#381316"
+            },
+            {
+              "name": "base/green/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFEFC"
+            },
+            {
+              "name": "base/green/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F2FCF5"
+            },
+            {
+              "name": "base/green/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E9F9EE"
+            },
+            {
+              "name": "base/green/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DDF3E4"
+            },
+            {
+              "name": "base/green/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#CCEBD7"
+            },
+            {
+              "name": "base/green/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#B4DFC4"
+            },
+            {
+              "name": "base/green/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#92CEAC"
+            },
+            {
+              "name": "base/green/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5BB98C"
+            },
+            {
+              "name": "base/green/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#30A46C"
+            },
+            {
+              "name": "base/green/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#299764"
+            },
+            {
+              "name": "base/green/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#18794E"
+            },
+            {
+              "name": "base/green/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#153226"
+            },
+            {
+              "name": "base/amber/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FEFDFB"
+            },
+            {
+              "name": "base/amber/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFF9ED"
+            },
+            {
+              "name": "base/amber/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFF4D5"
+            },
+            {
+              "name": "base/amber/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFECBC"
+            },
+            {
+              "name": "base/amber/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFE3A2"
+            },
+            {
+              "name": "base/amber/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFD386"
+            },
+            {
+              "name": "base/amber/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F3BA63"
+            },
+            {
+              "name": "base/amber/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EE9D2B"
+            },
+            {
+              "name": "base/amber/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFB224"
+            },
+            {
+              "name": "base/amber/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFA01C"
+            },
+            {
+              "name": "base/amber/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AD5700"
+            },
+            {
+              "name": "base/amber/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#4E2009"
+            },
+            {
+              "name": "base/Pure/White",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF"
+            },
+            {
+              "name": "base/Pure/Black",
+              "type": "color",
+              "isAlias": false,
+              "value": "#000000"
+            },
+            {
+              "name": "Text/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/12"
+              }
+            },
+            {
+              "name": "Text/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
+            },
+            {
+              "name": "Text/Subdued",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3E4346"
+            },
+            {
+              "name": "Text/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Text/Critical",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/11"
+              }
+            },
+            {
+              "name": "Text/Warning",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/11"
+              }
+            },
+            {
+              "name": "Text/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/11"
+              }
+            },
+            {
+              "name": "Text/Highlight",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/11"
+              }
+            },
+            {
+              "name": "Text/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/11"
+              }
+            },
+            {
+              "name": "Text/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
+              }
+            },
+            {
+              "name": "Text/OnBG/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Border/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/8"
+              }
+            },
+            {
+              "name": "Border/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/7"
+              }
+            },
+            {
+              "name": "Border/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/6"
+              }
+            },
+            {
+              "name": "Border/Critical/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/8"
+              }
+            },
+            {
+              "name": "Border/Critical/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/7"
+              }
+            },
+            {
+              "name": "Border/Critical/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/6"
+              }
+            },
+            {
+              "name": "Border/Success/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/8"
+              }
+            },
+            {
+              "name": "Border/Success/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/7"
+              }
+            },
+            {
+              "name": "Border/Warning/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/8"
+              }
+            },
+            {
+              "name": "Border/Warning/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/8"
+              }
+            },
+            {
+              "name": "Border/Highlight/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/9"
+              }
+            },
+            {
+              "name": "Border/Interactive/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/8"
+              }
+            },
+            {
+              "name": "Border/Interactive/Focused",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/7"
+              }
+            },
+            {
+              "name": "Icon/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
+            },
+            {
+              "name": "Icon/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Icon/Critical",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/9"
+              }
+            },
+            {
+              "name": "Icon/Warning",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Highlight",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/11"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/12"
+              }
+            },
+            {
+              "name": "Icon/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/10"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
+              }
+            },
+            {
+              "name": "Action/Primary/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/4"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/9"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/10"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/6"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/3"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/9"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/11"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/12"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/11"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/10"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/3"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/12"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/11"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/6"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/6"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/12"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/2"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/6"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/6"
+              }
+            },
+            {
+              "name": "Action/Tertiary/Basic/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05058203"
+            },
+            {
+              "name": "Action/Tertiary/Interactive/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#054CFF08"
+            },
+            {
+              "name": "Action/Tertiary/Success/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/alpha/2"
+              }
+            },
+            {
+              "name": "Action/Tertiary/Critical/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0144FF0F"
+            },
+            {
+              "name": "base/indigo/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0247F51A"
+            },
+            {
+              "name": "base/indigo/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#023CEB26"
+            },
+            {
+              "name": "Background/Alpha/Dark",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/12"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#013DE438"
+            },
+            {
+              "name": "Background/Alpha/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/4"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0038E052"
+            },
+            {
+              "name": "base/indigo/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0134DB73"
+            },
+            {
+              "name": "base/indigo/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0031D2C2"
+            },
+            {
+              "name": "Background/Solid/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/2"
+              }
+            },
+            {
+              "name": "Background/Solid/Dark",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/12"
+              }
+            },
+            {
+              "name": "Background/Solid/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/3"
+              }
+            },
+            {
+              "name": "Surface/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/Pure/White"
+              }
+            },
+            {
+              "name": "Surface/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#002CBDC4"
+            },
+            {
+              "name": "Surface/Selected",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00259ECC"
+            },
+            {
+              "name": "base/indigo/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#000E3AF0"
+            },
+            {
+              "name": "Surface/Warning",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/2"
+              }
+            },
+            {
+              "name": "Surface/Critical",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0582FF05"
+            },
+            {
+              "name": "base/blue/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0582FF0A"
+            },
+            {
+              "name": "Surface/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/2"
+              }
+            },
+            {
+              "name": "Surface/Highlight/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0280FF12"
+            },
+            {
+              "name": "Surface/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0180FF1F"
+            },
+            {
+              "name": "base/blue/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0180EF30"
+            },
+            {
+              "name": "Surface/Highlight/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/4"
+              }
+            },
+            {
+              "name": "Surface/Highlight/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/6"
+              }
+            },
+            {
+              "name": "base/blue/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0177E647"
+            },
+            {
+              "name": "base/blue/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0077DF69"
+            },
+            {
+              "name": "base/blue/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0082E6A1"
+            },
+            {
+              "name": "base/blue/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0091FFFA"
+            },
+            {
+              "name": "base/blue/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0080F1FA"
+            },
+            {
+              "name": "base/blue/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0066DBFA"
+            },
+            {
+              "name": "base/blue/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#002149FA"
+            },
+            {
+              "name": "base/violet/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5805AB03"
+            },
+            {
+              "name": "base/violet/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3705FF05"
+            },
+            {
+              "name": "base/violet/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3C00FF0D"
+            },
+            {
+              "name": "base/violet/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2E02F417"
+            },
+            {
+              "name": "base/violet/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2F01E821"
+            },
+            {
+              "name": "base/violet/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2A01DF30"
+            },
+            {
+              "name": "Surface/backdrop",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/alpha/9"
+              }
+            },
+            {
+              "name": "base/violet/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2B01D447"
+            },
+            {
+              "name": "base/violet/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2A00D066"
+            },
+            {
+              "name": "base/violet/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2500B6A8"
+            },
+            {
+              "name": "base/violet/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#1F00A5B0"
+            },
+            {
+              "name": "base/violet/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#180091BA"
+            },
+            {
+              "name": "base/violet/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0E003DED"
+            },
+            {
+              "name": "base/gray/slate/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05448205"
+            },
+            {
+              "name": "base/gray/slate/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05294D08"
+            },
+            {
+              "name": "base/gray/slate/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0025490D"
+            },
+            {
+              "name": "base/gray/slate/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#021C3714"
+            },
+            {
+              "name": "base/gray/slate/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0217351A"
+            },
+            {
+              "name": "base/gray/slate/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#01213921"
+            },
+            {
+              "name": "base/gray/slate/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#001A3329"
+            },
+            {
+              "name": "base/gray/slate/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#011E323D"
+            },
+            {
+              "name": "base/gray/slate/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00111E78"
+            },
+            {
+              "name": "base/gray/slate/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00101B82"
+            },
+            {
+              "name": "base/gray/slate/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#000E1896"
+            },
+            {
+              "name": "base/gray/slate/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00080CED"
+            },
+            {
+              "name": "base/green/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05C04305"
+            },
+            {
+              "name": "base/green/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00C43B0D"
+            },
+            {
+              "name": "base/green/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#02BA3C17"
+            },
+            {
+              "name": "base/green/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#01A63521"
+            },
+            {
+              "name": "base/green/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#009B3633"
+            },
+            {
+              "name": "base/green/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0193364A"
+            },
+            {
+              "name": "base/green/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#008C3D6E"
+            },
+            {
+              "name": "base/green/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00934CA3"
+            },
+            {
+              "name": "base/green/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#008F4ACF"
+            },
+            {
+              "name": "base/green/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#008346D6"
+            },
+            {
+              "name": "base/green/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#006B3BE8"
+            },
+            {
+              "name": "base/green/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#002012EB"
+            },
+            {
+              "name": "base/amber/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C0820505"
+            },
+            {
+              "name": "base/amber/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFAB0212"
+            },
+            {
+              "name": "base/amber/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFBB012B"
+            },
+            {
+              "name": "base/amber/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFB70042"
+            },
+            {
+              "name": "base/amber/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFB3005E"
+            },
+            {
+              "name": "base/amber/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFA20178"
+            },
+            {
+              "name": "base/amber/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EC8D009C"
+            },
+            {
+              "name": "base/amber/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EA8900D4"
+            },
+            {
+              "name": "base/amber/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFA600DB"
+            },
+            {
+              "name": "base/amber/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF9500E3"
+            },
+            {
+              "name": "base/amber/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AB5300FA"
+            },
+            {
+              "name": "base/amber/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#481800F5"
+            },
+            {
+              "name": "base/red/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF050503"
+            },
+            {
+              "name": "base/red/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF050508"
+            },
+            {
+              "name": "base/red/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF01010F"
+            },
+            {
+              "name": "base/red/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF00001A"
+            },
+            {
+              "name": "base/red/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F2000026"
+            },
+            {
+              "name": "base/red/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E4010138"
+            },
+            {
+              "name": "base/red/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D9000452"
+            },
+            {
+              "name": "base/red/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D1000470"
+            },
+            {
+              "name": "base/red/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DB0007B8"
+            },
+            {
+              "name": "base/red/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D10007C2"
+            },
+            {
+              "name": "base/red/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C30007D4"
+            },
+            {
+              "name": "base/red/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#280003ED"
+            },
+            {
+              "name": "MapAreaDistrict/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Surface/Highlight/Default"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Action/Secondary/Success/Hovered"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Selected",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Action/Primary/Basic/Default"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Action/Primary/Disabled"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Border",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Border/Focus",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF03"
+            },
+            {
+              "name": "Transparent",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF00"
+            },
+            {
+              "name": "Border/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Spacing / Numericals",
+      "modes": [
+        {
+          "name": "Mode 1",
+          "variables": [
+            {
+              "name": "space/0",
+              "type": "number",
+              "isAlias": false,
+              "value": 0
+            },
+            {
+              "name": "space/025",
+              "type": "number",
+              "isAlias": false,
+              "value": 1
+            },
+            {
+              "name": "space/05",
+              "type": "number",
+              "isAlias": false,
+              "value": 2
+            },
+            {
+              "name": "space/1",
+              "type": "number",
+              "isAlias": false,
+              "value": 4
+            },
+            {
+              "name": "space/2",
+              "type": "number",
+              "isAlias": false,
+              "value": 8
+            },
+            {
+              "name": "space/3",
+              "type": "number",
+              "isAlias": false,
+              "value": 12
+            },
+            {
+              "name": "space/4",
+              "type": "number",
+              "isAlias": false,
+              "value": 16
+            },
+            {
+              "name": "space/5",
+              "type": "number",
+              "isAlias": false,
+              "value": 20
+            },
+            {
+              "name": "space/6",
+              "type": "number",
+              "isAlias": false,
+              "value": 24
+            },
+            {
+              "name": "space/8",
+              "type": "number",
+              "isAlias": false,
+              "value": 32
+            },
+            {
+              "name": "space/10",
+              "type": "number",
+              "isAlias": false,
+              "value": 40
+            },
+            {
+              "name": "space/12",
+              "type": "number",
+              "isAlias": false,
+              "value": 48
+            },
+            {
+              "name": "space/16",
+              "type": "number",
+              "isAlias": false,
+              "value": 64
+            },
+            {
+              "name": "space/20",
+              "type": "number",
+              "isAlias": false,
+              "value": 80
+            },
+            {
+              "name": "space/24",
+              "type": "number",
+              "isAlias": false,
+              "value": 96
+            },
+            {
+              "name": "space/32",
+              "type": "number",
+              "isAlias": false,
+              "value": 128
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Borders",
+      "modes": [
+        {
+          "name": "Mode 1",
+          "variables": [
+            {
+              "name": "border/radius/0",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/0"
+              }
+            },
+            {
+              "name": "border/radius/05",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/05"
+              }
+            },
+            {
+              "name": "border/radius/1",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/1"
+              }
+            },
+            {
+              "name": "border/radius/2",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/2"
+              }
+            },
+            {
+              "name": "border/radius/3",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/3"
+              }
+            },
+            {
+              "name": "border/radius/4",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/4"
+              }
+            },
+            {
+              "name": "border/radius/5",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/5"
+              }
+            },
+            {
+              "name": "border/radius/6",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/6"
+              }
+            },
+            {
+              "name": "border/radius/full",
+              "type": "number",
+              "isAlias": false,
+              "value": 9999
+            },
+            {
+              "name": "border/width/1",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/025"
+              }
+            },
+            {
+              "name": "border/width/2",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/05"
+              }
+            },
+            {
+              "name": "border/width/4",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/1"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Typography",
+      "modes": [
+        {
+          "name": "Style",
+          "variables": [
+            {
+              "name": "Desktop Heading/4xl-Bold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 40,
+                "fontFamily": "Inter",
+                "fontWeight": "Bold",
+                "lineHeight": 48,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/3xl-Bold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 32,
+                "fontFamily": "Inter",
+                "fontWeight": "Bold",
+                "lineHeight": 40,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/2xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 28,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 32,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 24,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 28,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Lg-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 26,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Md-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Sm-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Xs-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Sm Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Lg-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Lg-Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Underline-Reg",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "UNDERLINE"
+              }
+            },
+            {
+              "name": "Body/Large/Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Large/Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Large/Underline-Reg",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "UNDERLINE"
+              }
+            },
+            {
+              "name": "Body/Small/Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Small/Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Small/Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PERCENT",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Small/bodySm- underline",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "UNDERLINE"
+              }
+            },
+            {
+              "name": "Mobile Heading/4xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 32,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 40,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/3xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 24,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 28,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/2xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Md-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Sm-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Sm Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Xs-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Xs Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Effects",
+      "modes": [
+        {
+          "name": "Style",
+          "variables": [
+            {
+              "name": "shadow/modal",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 26
+                    },
+                    "radius": 80,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 1,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/layer",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 32,
+                      "g": 42,
+                      "b": 53,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 31
+                    },
+                    "radius": 41,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 32,
+                      "g": 42,
+                      "b": 54,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 16,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/inset/basic",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "INNER_SHADOW",
+                    "color": {
+                      "r": 228,
+                      "g": 229,
+                      "b": 231,
+                      "a": 1
+                    },
+                    "offset": {
+                      "x": -1,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/inset/button",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "INNER_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": -1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/button/pressed",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "INNER_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/button/default",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/deep",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 33,
+                      "g": 43,
+                      "b": 54,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 16,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 6,
+                      "g": 44,
+                      "b": 82,
+                      "a": 0.1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 1
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/faint",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 22,
+                      "g": 29,
+                      "b": 37,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/transparent",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/xs",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.24
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 2,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/sm",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 1,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/md",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 6,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 4,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/lg",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 6,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 4
+                    },
+                    "radius": 12,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/xl",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 12
+                    },
+                    "radius": 18,
+                    "spread": -2
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 4
+                    },
+                    "radius": 18,
+                    "spread": -2
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/2xl",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.16
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 32
+                    },
+                    "radius": 56,
+                    "spread": -2
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 32
+                    },
+                    "radius": 32,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/popover",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 23,
+                      "g": 24,
+                      "b": 24,
+                      "a": 0.12
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 8
+                    },
+                    "radius": 20,
+                    "spread": -4
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 23,
+                      "g": 24,
+                      "b": 24,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 3
+                    },
+                    "radius": 6,
+                    "spread": -3
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/card",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 2,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 23,
+                      "g": 24,
+                      "b": 24,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 5,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/topNav",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 2,
+                    "spread": -1
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/focus",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 145,
+                      "b": 255,
+                      "a": 1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 2
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Grids",
+      "modes": [
+        {
+          "name": "Style",
+          "variables": [
+            {
+              "name": "Basic 12 Col",
+              "type": "grid",
+              "isAlias": false,
+              "value": {
+                "layoutGrids": [
+                  {
+                    "pattern": "COLUMNS",
+                    "color": {
+                      "r": 255,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.1
+                    },
+                    "alignment": "STRETCH",
+                    "gutterSize": 16,
+                    "offset": 40,
+                    "count": 12
+                  }
+                ]
+              }
+            },
+            {
+              "name": "Basic 4 Col",
+              "type": "grid",
+              "isAlias": false,
+              "value": {
+                "layoutGrids": [
+                  {
+                    "pattern": "COLUMNS",
+                    "color": {
+                      "r": 255,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.1
+                    },
+                    "alignment": "STRETCH",
+                    "gutterSize": 16,
+                    "offset": 20,
+                    "count": 4
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/data-exchange/lib/eCharts.ts b/examples/data-exchange/lib/eCharts.ts
index 7833ee08..3b7cbc91 100644
--- a/examples/data-exchange/lib/eCharts.ts
+++ b/examples/data-exchange/lib/eCharts.ts
@@ -1,6 +1,7 @@
-import echarts from 'echarts';
 import { EChartsOption } from 'echarts-for-react';
 
+let echarts = require('echarts');
+
 export function eCharts({ options }: { options: EChartsOption }) {
   const option = {
     grid: {
@@ -25,6 +26,7 @@ export function eCharts({ options }: { options: EChartsOption }) {
   });
 
   chart.setOption(option);
+  const dataUrlBar = `data:image/svg+xml;base64,${btoa(chart.renderToSVGString())}`;
 
-  return chart.renderToSVGString();
+  return dataUrlBar;
 }
diff --git a/examples/data-exchange/lib/style-dictionary/css-formattor.js b/examples/data-exchange/lib/style-dictionary/css-formattor.js
index dd025e03..55b2a66d 100644
--- a/examples/data-exchange/lib/style-dictionary/css-formattor.js
+++ b/examples/data-exchange/lib/style-dictionary/css-formattor.js
@@ -1,4 +1,4 @@
-const convertValue = require('./converter');
+let convertValue = require('./converter');
 
 module.exports = function ({ dictionary }) {
   let families = ':root { \n';
diff --git a/examples/data-exchange/package.json b/examples/data-exchange/package.json
index c2589ba3..6d810ec2 100644
--- a/examples/data-exchange/package.json
+++ b/examples/data-exchange/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "style-dictionary:build": "style-dictionary build --config ./config/style-dictionary.js",
+    "build:tokens": "node ./config/tokens/generate.js",
     "generate": "graphql-codegen --config ./config/codegen.ts",
     "prestart": "npm run generate",
     "predev": "npm run generate",
diff --git a/examples/data-exchange/styles/tokens/_variables.css b/examples/data-exchange/styles/tokens/_variables.css
index 123b8b86..00246d28 100644
--- a/examples/data-exchange/styles/tokens/_variables.css
+++ b/examples/data-exchange/styles/tokens/_variables.css
@@ -1,93 +1,93 @@
-:root {
-  --base-indigo-solid-1: #fdfdfe;
-  --base-indigo-solid-2: #f8faff;
-  --base-indigo-solid-3: #f0f4ff;
-  --base-indigo-solid-4: #e6edfe;
-  --base-indigo-solid-5: #d9e2fc;
-  --base-indigo-solid-6: #c6d4f9;
-  --base-indigo-solid-7: #aec0f5;
-  --base-indigo-solid-8: #8da4ef;
-  --base-indigo-solid-9: #3e63dd;
-  --base-indigo-solid-10: #3a5ccc;
-  --base-indigo-solid-11: #3451b2;
-  --base-indigo-solid-12: #101d46;
-  --base-blue-solid-1: #fbfdff;
-  --base-blue-solid-2: #f5faff;
-  --base-blue-solid-3: #edf6ff;
-  --base-blue-solid-4: #e1f0ff;
-  --base-blue-solid-5: #cee7fe;
-  --base-blue-solid-6: #b7d9f8;
-  --base-blue-solid-7: #96c7f2;
-  --base-blue-solid-8: #5eb0ef;
-  --base-blue-solid-9: #0091ff;
-  --base-blue-solid-10: #0081f1;
-  --base-blue-solid-11: #006adc;
-  --base-blue-solid-12: #00254d;
-  --base-violet-solid-1: #fdfcfe;
-  --base-violet-solid-2: #fbfaff;
-  --base-violet-solid-3: #f5f2ff;
-  --base-violet-solid-4: #ede9fe;
-  --base-violet-solid-5: #e4defc;
-  --base-violet-solid-6: #d7cff9;
-  --base-violet-solid-7: #c4b8f3;
-  --base-violet-solid-8: #aa99ec;
-  --base-violet-solid-9: #6e56cf;
-  --base-violet-solid-10: #644fc1;
-  --base-violet-solid-11: #5746af;
-  --base-violet-solid-12: #20134b;
-  --base-gray-slate-solid-1: #fbfcfd;
-  --base-gray-slate-solid-2: #f8f9fa;
-  --base-gray-slate-solid-3: #f1f3f5;
-  --base-gray-slate-solid-4: #eceef0;
-  --base-gray-slate-solid-5: #e6e8eb;
-  --base-gray-slate-solid-6: #dfe3e6;
-  --base-gray-slate-solid-7: #d7dbdf;
-  --base-gray-slate-solid-8: #c1c8cd;
+:root { 
+  --base-indigo-solid-1: #FDFDFE;
+  --base-indigo-solid-2: #F8FAFF;
+  --base-indigo-solid-3: #F0F4FF;
+  --base-indigo-solid-4: #E6EDFE;
+  --base-indigo-solid-5: #D9E2FC;
+  --base-indigo-solid-6: #C6D4F9;
+  --base-indigo-solid-7: #AEC0F5;
+  --base-indigo-solid-8: #8DA4EF;
+  --base-indigo-solid-9: #3E63DD;
+  --base-indigo-solid-10: #3A5CCC;
+  --base-indigo-solid-11: #3451B2;
+  --base-indigo-solid-12: #101D46;
+  --base-blue-solid-1: #FBFDFF;
+  --base-blue-solid-2: #F5FAFF;
+  --base-blue-solid-3: #EDF6FF;
+  --base-blue-solid-4: #E1F0FF;
+  --base-blue-solid-5: #CEE7FE;
+  --base-blue-solid-6: #B7D9F8;
+  --base-blue-solid-7: #96C7F2;
+  --base-blue-solid-8: #5EB0EF;
+  --base-blue-solid-9: #0091FF;
+  --base-blue-solid-10: #0081F1;
+  --base-blue-solid-11: #006ADC;
+  --base-blue-solid-12: #00254D;
+  --base-violet-solid-1: #FDFCFE;
+  --base-violet-solid-2: #FBFAFF;
+  --base-violet-solid-3: #F5F2FF;
+  --base-violet-solid-4: #EDE9FE;
+  --base-violet-solid-5: #E4DEFC;
+  --base-violet-solid-6: #D7CFF9;
+  --base-violet-solid-7: #C4B8F3;
+  --base-violet-solid-8: #AA99EC;
+  --base-violet-solid-9: #6E56CF;
+  --base-violet-solid-10: #644FC1;
+  --base-violet-solid-11: #5746AF;
+  --base-violet-solid-12: #20134B;
+  --base-gray-slate-solid-1: #FBFCFD;
+  --base-gray-slate-solid-2: #F8F9FA;
+  --base-gray-slate-solid-3: #F1F3F5;
+  --base-gray-slate-solid-4: #ECEEF0;
+  --base-gray-slate-solid-5: #E6E8EB;
+  --base-gray-slate-solid-6: #DFE3E6;
+  --base-gray-slate-solid-7: #D7DBDF;
+  --base-gray-slate-solid-8: #C1C8CD;
   --base-gray-slate-solid-9: #889096;
-  --base-gray-slate-solid-10: #7e868c;
+  --base-gray-slate-solid-10: #7E868C;
   --base-gray-slate-solid-11: #687076;
-  --base-gray-slate-solid-12: #11181c;
-  --base-red-solid-1: #fffcfc;
-  --base-red-solid-2: #fff8f8;
-  --base-red-solid-3: #ffefef;
-  --base-red-solid-4: #ffe5e5;
-  --base-red-solid-5: #fdd8d8;
-  --base-red-solid-6: #f9c6c6;
-  --base-red-solid-7: #f3aeaf;
-  --base-red-solid-8: #eb9091;
-  --base-red-solid-9: #e5484d;
-  --base-red-solid-10: #dc3d43;
-  --base-red-solid-11: #cd2b31;
+  --base-gray-slate-solid-12: #11181C;
+  --base-red-solid-1: #FFFCFC;
+  --base-red-solid-2: #FFF8F8;
+  --base-red-solid-3: #FFEFEF;
+  --base-red-solid-4: #FFE5E5;
+  --base-red-solid-5: #FDD8D8;
+  --base-red-solid-6: #F9C6C6;
+  --base-red-solid-7: #F3AEAF;
+  --base-red-solid-8: #EB9091;
+  --base-red-solid-9: #E5484D;
+  --base-red-solid-10: #DC3D43;
+  --base-red-solid-11: #CD2B31;
   --base-red-solid-12: #381316;
-  --base-green-solid-1: #fbfefc;
-  --base-green-solid-2: #f2fcf5;
-  --base-green-solid-3: #e9f9ee;
-  --base-green-solid-4: #ddf3e4;
-  --base-green-solid-5: #ccebd7;
-  --base-green-solid-6: #b4dfc4;
-  --base-green-solid-7: #92ceac;
-  --base-green-solid-8: #5bb98c;
-  --base-green-solid-9: #30a46c;
+  --base-green-solid-1: #FBFEFC;
+  --base-green-solid-2: #F2FCF5;
+  --base-green-solid-3: #E9F9EE;
+  --base-green-solid-4: #DDF3E4;
+  --base-green-solid-5: #CCEBD7;
+  --base-green-solid-6: #B4DFC4;
+  --base-green-solid-7: #92CEAC;
+  --base-green-solid-8: #5BB98C;
+  --base-green-solid-9: #30A46C;
   --base-green-solid-10: #299764;
-  --base-green-solid-11: #18794e;
+  --base-green-solid-11: #18794E;
   --base-green-solid-12: #153226;
-  --base-amber-solid-1: #fefdfb;
-  --base-amber-solid-2: #fff9ed;
-  --base-amber-solid-3: #fff4d5;
-  --base-amber-solid-4: #ffecbc;
-  --base-amber-solid-5: #ffe3a2;
-  --base-amber-solid-6: #ffd386;
-  --base-amber-solid-7: #f3ba63;
-  --base-amber-solid-8: #ee9d2b;
-  --base-amber-solid-9: #ffb224;
-  --base-amber-solid-10: #ffa01c;
-  --base-amber-solid-11: #ad5700;
-  --base-amber-solid-12: #4e2009;
-  --base-pure-white: #ffffff;
+  --base-amber-solid-1: #FEFDFB;
+  --base-amber-solid-2: #FFF9ED;
+  --base-amber-solid-3: #FFF4D5;
+  --base-amber-solid-4: #FFECBC;
+  --base-amber-solid-5: #FFE3A2;
+  --base-amber-solid-6: #FFD386;
+  --base-amber-solid-7: #F3BA63;
+  --base-amber-solid-8: #EE9D2B;
+  --base-amber-solid-9: #FFB224;
+  --base-amber-solid-10: #FFA01C;
+  --base-amber-solid-11: #AD5700;
+  --base-amber-solid-12: #4E2009;
+  --base-pure-white: #FFFFFF;
   --base-pure-black: #000000;
   --text-default: var(--base-gray-slate-solid-12);
   --text-medium: var(--base-gray-slate-solid-11);
-  --text-subdued: #3e4346;
+  --text-subdued: #3E4346;
   --text-disabled: var(--base-gray-slate-solid-9);
   --text-critical: var(--base-red-solid-11);
   --text-warning: var(--base-amber-solid-11);
@@ -164,114 +164,114 @@
   --action-tertiary-basic-hover: var(--base-violet-alpha-2);
   --base-indigo-alpha-1: #05058203;
   --action-tertiary-interactive-hover: var(--base-blue-alpha-2);
-  --base-indigo-alpha-2: #054cff08;
+  --base-indigo-alpha-2: #054CFF08;
   --action-tertiary-success-hover: var(--base-green-alpha-2);
   --action-tertiary-critical-hover: var(--base-red-alpha-2);
-  --base-indigo-alpha-3: #0144ff0f;
-  --base-indigo-alpha-4: #0247f51a;
-  --base-indigo-alpha-5: #023ceb26;
+  --base-indigo-alpha-3: #0144FF0F;
+  --base-indigo-alpha-4: #0247F51A;
+  --base-indigo-alpha-5: #023CEB26;
   --background-alpha-dark: var(--base-indigo-alpha-12);
-  --base-indigo-alpha-6: #013de438;
+  --base-indigo-alpha-6: #013DE438;
   --background-alpha-medium: var(--base-indigo-alpha-4);
-  --base-indigo-alpha-7: #0038e052;
-  --base-indigo-alpha-8: #0134db73;
-  --base-indigo-alpha-9: #0031d2c2;
+  --base-indigo-alpha-7: #0038E052;
+  --base-indigo-alpha-8: #0134DB73;
+  --base-indigo-alpha-9: #0031D2C2;
   --background-solid-subdued: var(--base-indigo-solid-2);
   --background-solid-dark: var(--base-indigo-solid-12);
   --background-solid-default: var(--base-indigo-solid-3);
   --surface-default: var(--base-pure-white);
   --surface-subdued: var(--base-gray-slate-solid-2);
-  --base-indigo-alpha-10: #002cbdc4;
+  --base-indigo-alpha-10: #002CBDC4;
   --surface-selected: var(--base-blue-solid-2);
-  --base-indigo-alpha-11: #00259ecc;
-  --base-indigo-alpha-12: #000e3af0;
+  --base-indigo-alpha-11: #00259ECC;
+  --base-indigo-alpha-12: #000E3AF0;
   --surface-warning: var(--base-amber-solid-2);
   --surface-critical: var(--base-red-solid-2);
-  --base-blue-alpha-1: #0582ff05;
-  --base-blue-alpha-2: #0582ff0a;
+  --base-blue-alpha-1: #0582FF05;
+  --base-blue-alpha-2: #0582FF0A;
   --surface-success: var(--base-green-solid-2);
   --surface-highlight-subdued: var(--base-violet-solid-2);
-  --base-blue-alpha-3: #0280ff12;
+  --base-blue-alpha-3: #0280FF12;
   --surface-interactive: var(--base-blue-solid-2);
-  --base-blue-alpha-4: #0180ff1f;
-  --base-blue-alpha-5: #0180ef30;
+  --base-blue-alpha-4: #0180FF1F;
+  --base-blue-alpha-5: #0180EF30;
   --surface-highlight-default: var(--base-violet-solid-4);
   --surface-highlight-hovered: var(--base-violet-solid-6);
-  --base-blue-alpha-6: #0177e647;
-  --base-blue-alpha-7: #0077df69;
-  --base-blue-alpha-8: #0082e6a1;
-  --base-blue-alpha-9: #0091fffa;
-  --base-blue-alpha-10: #0080f1fa;
-  --base-blue-alpha-11: #0066dbfa;
-  --base-blue-alpha-12: #002149fa;
-  --base-violet-alpha-1: #5805ab03;
-  --base-violet-alpha-2: #3705ff05;
-  --base-violet-alpha-3: #3c00ff0d;
-  --base-violet-alpha-4: #2e02f417;
-  --base-violet-alpha-5: #2f01e821;
-  --base-violet-alpha-6: #2a01df30;
+  --base-blue-alpha-6: #0177E647;
+  --base-blue-alpha-7: #0077DF69;
+  --base-blue-alpha-8: #0082E6A1;
+  --base-blue-alpha-9: #0091FFFA;
+  --base-blue-alpha-10: #0080F1FA;
+  --base-blue-alpha-11: #0066DBFA;
+  --base-blue-alpha-12: #002149FA;
+  --base-violet-alpha-1: #5805AB03;
+  --base-violet-alpha-2: #3705FF05;
+  --base-violet-alpha-3: #3C00FF0D;
+  --base-violet-alpha-4: #2E02F417;
+  --base-violet-alpha-5: #2F01E821;
+  --base-violet-alpha-6: #2A01DF30;
   --surface-backdrop: var(--base-gray-slate-alpha-9);
-  --base-violet-alpha-7: #2b01d447;
-  --base-violet-alpha-8: #2a00d066;
-  --base-violet-alpha-9: #2500b6a8;
-  --base-violet-alpha-10: #1f00a5b0;
-  --base-violet-alpha-11: #180091ba;
-  --base-violet-alpha-12: #0e003ded;
+  --base-violet-alpha-7: #2B01D447;
+  --base-violet-alpha-8: #2A00D066;
+  --base-violet-alpha-9: #2500B6A8;
+  --base-violet-alpha-10: #1F00A5B0;
+  --base-violet-alpha-11: #180091BA;
+  --base-violet-alpha-12: #0E003DED;
   --base-gray-slate-alpha-1: #05448205;
-  --base-gray-slate-alpha-2: #05294d08;
-  --base-gray-slate-alpha-3: #0025490d;
-  --base-gray-slate-alpha-4: #021c3714;
-  --base-gray-slate-alpha-5: #0217351a;
+  --base-gray-slate-alpha-2: #05294D08;
+  --base-gray-slate-alpha-3: #0025490D;
+  --base-gray-slate-alpha-4: #021C3714;
+  --base-gray-slate-alpha-5: #0217351A;
   --base-gray-slate-alpha-6: #01213921;
-  --base-gray-slate-alpha-7: #001a3329;
-  --base-gray-slate-alpha-8: #011e323d;
-  --base-gray-slate-alpha-9: #00111e78;
-  --base-gray-slate-alpha-10: #00101b82;
-  --base-gray-slate-alpha-11: #000e1896;
-  --base-gray-slate-alpha-12: #00080ced;
-  --base-green-alpha-1: #05c04305;
-  --base-green-alpha-2: #00c43b0d;
-  --base-green-alpha-3: #02ba3c17;
-  --base-green-alpha-4: #01a63521;
-  --base-green-alpha-5: #009b3633;
-  --base-green-alpha-6: #0193364a;
-  --base-green-alpha-7: #008c3d6e;
-  --base-green-alpha-8: #00934ca3;
-  --base-green-alpha-9: #008f4acf;
-  --base-green-alpha-10: #008346d6;
-  --base-green-alpha-11: #006b3be8;
-  --base-green-alpha-12: #002012eb;
-  --base-amber-alpha-1: #c0820505;
-  --base-amber-alpha-2: #ffab0212;
-  --base-amber-alpha-3: #ffbb012b;
-  --base-amber-alpha-4: #ffb70042;
-  --base-amber-alpha-5: #ffb3005e;
-  --base-amber-alpha-6: #ffa20178;
-  --base-amber-alpha-7: #ec8d009c;
-  --base-amber-alpha-8: #ea8900d4;
-  --base-amber-alpha-9: #ffa600db;
-  --base-amber-alpha-10: #ff9500e3;
-  --base-amber-alpha-11: #ab5300fa;
-  --base-amber-alpha-12: #481800f5;
-  --base-red-alpha-1: #ff050503;
-  --base-red-alpha-2: #ff050508;
-  --base-red-alpha-3: #ff01010f;
-  --base-red-alpha-4: #ff00001a;
-  --base-red-alpha-5: #f2000026;
-  --base-red-alpha-6: #e4010138;
-  --base-red-alpha-7: #d9000452;
-  --base-red-alpha-8: #d1000470;
-  --base-red-alpha-9: #db0007b8;
-  --base-red-alpha-10: #d10007c2;
-  --base-red-alpha-11: #c30007d4;
-  --base-red-alpha-12: #280003ed;
+  --base-gray-slate-alpha-7: #001A3329;
+  --base-gray-slate-alpha-8: #011E323D;
+  --base-gray-slate-alpha-9: #00111E78;
+  --base-gray-slate-alpha-10: #00101B82;
+  --base-gray-slate-alpha-11: #000E1896;
+  --base-gray-slate-alpha-12: #00080CED;
+  --base-green-alpha-1: #05C04305;
+  --base-green-alpha-2: #00C43B0D;
+  --base-green-alpha-3: #02BA3C17;
+  --base-green-alpha-4: #01A63521;
+  --base-green-alpha-5: #009B3633;
+  --base-green-alpha-6: #0193364A;
+  --base-green-alpha-7: #008C3D6E;
+  --base-green-alpha-8: #00934CA3;
+  --base-green-alpha-9: #008F4ACF;
+  --base-green-alpha-10: #008346D6;
+  --base-green-alpha-11: #006B3BE8;
+  --base-green-alpha-12: #002012EB;
+  --base-amber-alpha-1: #C0820505;
+  --base-amber-alpha-2: #FFAB0212;
+  --base-amber-alpha-3: #FFBB012B;
+  --base-amber-alpha-4: #FFB70042;
+  --base-amber-alpha-5: #FFB3005E;
+  --base-amber-alpha-6: #FFA20178;
+  --base-amber-alpha-7: #EC8D009C;
+  --base-amber-alpha-8: #EA8900D4;
+  --base-amber-alpha-9: #FFA600DB;
+  --base-amber-alpha-10: #FF9500E3;
+  --base-amber-alpha-11: #AB5300FA;
+  --base-amber-alpha-12: #481800F5;
+  --base-red-alpha-1: #FF050503;
+  --base-red-alpha-2: #FF050508;
+  --base-red-alpha-3: #FF01010F;
+  --base-red-alpha-4: #FF00001A;
+  --base-red-alpha-5: #F2000026;
+  --base-red-alpha-6: #E4010138;
+  --base-red-alpha-7: #D9000452;
+  --base-red-alpha-8: #D1000470;
+  --base-red-alpha-9: #DB0007B8;
+  --base-red-alpha-10: #D10007C2;
+  --base-red-alpha-11: #C30007D4;
+  --base-red-alpha-12: #280003ED;
   --mapareadistrict-default: var(--surface-highlight-default);
   --mapareadistrict-hover: var(--action-secondary-success-hovered);
   --mapareadistrict-selected: var(--action-primary-basic-default);
   --mapareadistrict-disabled: var(--action-primary-disabled);
   --mapareadistrict-border: var(--base-gray-slate-solid-9);
-  --border-focus: #ffffff03;
-  --transparent: #ffffff00;
+  --border-focus: #FFFFFF03;
+  --transparent: #FFFFFF00;
   --border-onbg-subdued: var(--base-gray-slate-solid-11);
 
   --space-0: 0px;
@@ -304,35 +304,27 @@
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
 
-  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2),
-    0px 0px 1px 0px rgba(0, 0, 0, 0.2);
-  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2),
-    0px 2px 16px 0px rgba(32, 42, 54, 0.08);
+  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), 0px 2px 16px 0px rgba(32, 42, 54, 0.08);
   --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1);
   --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
   --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
   --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08),
-    0px 0px 0px 1px rgba(6, 44, 82, 0.1);
+  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.1);
   --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05);
   --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0);
   --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24);
   --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 2px 4px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 4px 12px 0px rgba(31, 33, 36, 0.2);
-  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15),
-    0px 4px 18px -2px rgba(31, 33, 36, 0.08);
-  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16),
-    0px 32px 32px 0px rgba(31, 33, 36, 0.15);
-  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12),
-    0px 3px 6px -3px rgba(23, 24, 24, 0.08);
-  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15),
-    0px 0px 5px 0px rgba(23, 24, 24, 0.05);
+  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), 0px 2px 4px 0px rgba(31, 33, 36, 0.1);
+  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), 0px 4px 12px 0px rgba(31, 33, 36, 0.2);
+  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), 0px 4px 18px -2px rgba(31, 33, 36, 0.08);
+  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), 0px 32px 32px 0px rgba(31, 33, 36, 0.15);
+  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), 0px 3px 6px -3px rgba(23, 24, 24, 0.08);
+  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05);
   --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15);
   --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1);
 
+
   --z-1: 100;
   --z-2: 400;
   --z-3: 513;
diff --git a/examples/data-exchange/styles/tokens/tailwind/duration.js b/examples/data-exchange/styles/tokens/tailwind/duration.js
index ee478106..d706b8ae 100644
--- a/examples/data-exchange/styles/tokens/tailwind/duration.js
+++ b/examples/data-exchange/styles/tokens/tailwind/duration.js
@@ -1,13 +1,13 @@
-module.exports = {
-  0: 'var(--duration-0)',
-  100: 'var(--duration-100)',
-  150: 'var(--duration-150)',
-  200: 'var(--duration-200)',
-  250: 'var(--duration-250)',
-  300: 'var(--duration-300)',
-  350: 'var(--duration-350)',
-  400: 'var(--duration-400)',
-  450: 'var(--duration-450)',
-  500: 'var(--duration-500)',
-  5000: 'var(--duration-5000)',
-};
+module.exports = { 
+  "0": "var(--duration-0)",
+  "100": "var(--duration-100)",
+  "150": "var(--duration-150)",
+  "200": "var(--duration-200)",
+  "250": "var(--duration-250)",
+  "300": "var(--duration-300)",
+  "350": "var(--duration-350)",
+  "400": "var(--duration-400)",
+  "450": "var(--duration-450)",
+  "500": "var(--duration-500)",
+  "5000": "var(--duration-5000)",
+}
diff --git a/examples/data-exchange/styles/tokens/tailwind/ease-function.js b/examples/data-exchange/styles/tokens/tailwind/ease-function.js
index 75445c09..9ef6c78f 100644
--- a/examples/data-exchange/styles/tokens/tailwind/ease-function.js
+++ b/examples/data-exchange/styles/tokens/tailwind/ease-function.js
@@ -1,7 +1,7 @@
-module.exports = {
-  ease: 'var(--ease)',
-  linear: 'var(--linear)',
-  'ease-in': 'var(--ease-in)',
-  'ease-out': 'var(--ease-out)',
-  'ease-in-out': 'var(--ease-in-out)',
-};
+module.exports = { 
+  "ease": "var(--ease)",
+  "linear": "var(--linear)",
+  "ease-in": "var(--ease-in)",
+  "ease-out": "var(--ease-out)",
+  "ease-in-out": "var(--ease-in-out)",
+}
diff --git a/examples/data-exchange/styles/tokens/tailwind/font-family.js b/examples/data-exchange/styles/tokens/tailwind/font-family.js
index 7fea5209..54cbb99e 100644
--- a/examples/data-exchange/styles/tokens/tailwind/font-family.js
+++ b/examples/data-exchange/styles/tokens/tailwind/font-family.js
@@ -1,4 +1,4 @@
-module.exports = {
-  primary: 'var(--font-family-primary)',
-  mono: 'var(--font-family-mono)',
-};
+module.exports = { 
+  "primary": "var(--font-family-primary)",
+  "mono": "var(--font-family-mono)",
+}
diff --git a/examples/data-exchange/styles/tokens/tailwind/font-size.js b/examples/data-exchange/styles/tokens/tailwind/font-size.js
index bebb8b65..17bb4a03 100644
--- a/examples/data-exchange/styles/tokens/tailwind/font-size.js
+++ b/examples/data-exchange/styles/tokens/tailwind/font-size.js
@@ -1,10 +1,10 @@
-module.exports = {
-  75: 'var(--font-size-75)',
-  100: 'var(--font-size-100)',
-  200: 'var(--font-size-200)',
-  300: 'var(--font-size-300)',
-  400: 'var(--font-size-400)',
-  500: 'var(--font-size-500)',
-  600: 'var(--font-size-600)',
-  700: 'var(--font-size-700)',
-};
+module.exports = { 
+  "75": "var(--font-size-75)",
+  "100": "var(--font-size-100)",
+  "200": "var(--font-size-200)",
+  "300": "var(--font-size-300)",
+  "400": "var(--font-size-400)",
+  "500": "var(--font-size-500)",
+  "600": "var(--font-size-600)",
+  "700": "var(--font-size-700)",
+}
diff --git a/examples/data-exchange/styles/tokens/tailwind/font-weight.js b/examples/data-exchange/styles/tokens/tailwind/font-weight.js
index b46bd26b..352c1e73 100644
--- a/examples/data-exchange/styles/tokens/tailwind/font-weight.js
+++ b/examples/data-exchange/styles/tokens/tailwind/font-weight.js
@@ -1,6 +1,6 @@
-module.exports = {
-  Regular: 'var(--font-weight-regular)',
-  Medium: 'var(--font-weight-medium)',
-  Bold: 'var(--font-weight-bold)',
-  'Extra-Bold': 'var(--font-weight-extra-bold)',
-};
+module.exports = { 
+  "Regular": "var(--font-weight-regular)",
+  "Medium": "var(--font-weight-medium)",
+  "Bold": "var(--font-weight-bold)",
+  "Extra-Bold": "var(--font-weight-extra-bold)",
+}
diff --git a/examples/data-exchange/styles/tokens/tailwind/line-height.js b/examples/data-exchange/styles/tokens/tailwind/line-height.js
index ef65b16a..5a37acc3 100644
--- a/examples/data-exchange/styles/tokens/tailwind/line-height.js
+++ b/examples/data-exchange/styles/tokens/tailwind/line-height.js
@@ -1,9 +1,9 @@
-module.exports = {
-  1: 'var(--font-line-height-1)',
-  2: 'var(--font-line-height-2)',
-  3: 'var(--font-line-height-3)',
-  4: 'var(--font-line-height-4)',
-  5: 'var(--font-line-height-5)',
-  6: 'var(--font-line-height-6)',
-  7: 'var(--font-line-height-7)',
-};
+module.exports = { 
+  "1": "var(--font-line-height-1)",
+  "2": "var(--font-line-height-2)",
+  "3": "var(--font-line-height-3)",
+  "4": "var(--font-line-height-4)",
+  "5": "var(--font-line-height-5)",
+  "6": "var(--font-line-height-6)",
+  "7": "var(--font-line-height-7)",
+}
diff --git a/examples/data-exchange/styles/tokens/tailwind/z-index.js b/examples/data-exchange/styles/tokens/tailwind/z-index.js
index b0bb0bfd..00bafbaf 100644
--- a/examples/data-exchange/styles/tokens/tailwind/z-index.js
+++ b/examples/data-exchange/styles/tokens/tailwind/z-index.js
@@ -1,13 +1,13 @@
-module.exports = {
-  1: 'var(--z-1)',
-  2: 'var(--z-2)',
-  3: 'var(--z-3)',
-  4: 'var(--z-4)',
-  5: 'var(--z-5)',
-  6: 'var(--z-6)',
-  7: 'var(--z-7)',
-  8: 'var(--z-8)',
-  9: 'var(--z-9)',
-  10: 'var(--z-10)',
-  max: 'var(--z-max)',
-};
+module.exports = { 
+  "1": "var(--z-1)",
+  "2": "var(--z-2)",
+  "3": "var(--z-3)",
+  "4": "var(--z-4)",
+  "5": "var(--z-5)",
+  "6": "var(--z-6)",
+  "7": "var(--z-7)",
+  "8": "var(--z-8)",
+  "9": "var(--z-9)",
+  "10": "var(--z-10)",
+  "max": "var(--z-max)",
+}
diff --git a/examples/data-exchange/styles/tokens/variables.js b/examples/data-exchange/styles/tokens/variables.js
new file mode 100644
index 00000000..37297abf
--- /dev/null
+++ b/examples/data-exchange/styles/tokens/variables.js
@@ -0,0 +1,231 @@
+module.exports = { 
+  "transparent": "#00000000",
+  "background": "#f6f6f7ff",
+  "backgroundHovered": "#f1f2f3ff",
+  "backgroundPressed": "#edeeefff",
+  "backgroundSelected": "#edeeefff",
+  "backgroundInvert": "#202123ff",
+  "surface": "#ffffffff",
+  "surfaceSubdued": "#fafbfbff",
+  "surfaceHovered": "#f6f6f7ff",
+  "surfacePressed": "#f1f2f3ff",
+  "surfaceDepressed": "#edeeefff",
+  "surfaceDisabled": "#fafbfbff",
+  "surfaceSearchField": "#f1f2f3ff",
+  "surfaceSelected": "#f2f7feff",
+  "surfaceSelectedHovered": "#edf4feff",
+  "surfaceSelectedPressed": "#e5effdff",
+  "surfaceWarning": "#ffd79dff",
+  "surfaceWarningSubdued": "#fff5eaff",
+  "surfaceWarningSubduedHovered": "#fff2e2ff",
+  "surfaceWarningSubduedPressed": "#ffebd3ff",
+  "surfaceCritical": "#fed3d1ff",
+  "surfaceCriticalSubdued": "#fff4f4ff",
+  "surfaceCriticalSubduedHovered": "#fff0f0ff",
+  "surfaceCriticalSubduedPressed": "#ffe9e8ff",
+  "surfaceCriticalSubduedDepressed": "#febcb9ff",
+  "surfaceSuccess": "#aee9d1ff",
+  "surfaceSuccessSubdued": "#f1f8f5ff",
+  "surfaceSuccessSubduedHovered": "#ecf6f1ff",
+  "surfaceSuccessSubduedPressed": "#e2f1eaff",
+  "surfaceHighlight": "#a4e8f2ff",
+  "surfaceHighlightSubdued": "#ebf9fcff",
+  "surfaceHighlightSubduedHovered": "#e4f7faff",
+  "surfaceHighlightSubduedPressed": "#d5f3f8ff",
+  "surfaceNeutral": "#e4e5e7ff",
+  "surfaceNeutralSubdued": "#f6f6f7ff",
+  "surfaceNeutralHovered": "#dbdddfff",
+  "surfaceNeutralPressed": "#c9ccd0ff",
+  "surfaceNeutralDisabled": "#f1f2f3ff",
+  "surfacePrimarySelected": "#f1f8f5ff",
+  "surfacePrimarySelectedHovered": "#b3d0c3ff",
+  "surfacePrimarySelectedPressed": "#a2bcb0ff",
+  "surfaceAttention": "#ffea8aff",
+  "interactive": "#2c6ecbff",
+  "interactiveHovered": "#1f5199ff",
+  "interactivePressed": "#103262ff",
+  "interactiveDisabled": "#bdc1ccff",
+  "interactiveCritical": "#d82c0dff",
+  "interactiveCriticalHovered": "#cd290cff",
+  "interactiveCriticalDisabled": "#fd938dff",
+  "interactiveCriticalPressed": "#670f03ff",
+  "text": "#202223ff",
+  "textSubdued": "#6d7175ff",
+  "textDisabled": "#8c9196ff",
+  "textCritical": "#d72c0dff",
+  "textWarning": "#916a00ff",
+  "textSuccess": "#008060ff",
+  "textHighlight": "#347c84ff",
+  "textOnInteractive": "#ffffffff",
+  "textOnPrimary": "#ffffffff",
+  "textOnCritical": "#ffffffff",
+  "textPrimary": "#007b5cff",
+  "textPrimaryHover": "#006c50ff",
+  "textPrimaryPressed": "#005c44ff",
+  "icon": "#5c5f62ff",
+  "iconSubdued": "#8c9196ff",
+  "iconHovered": "#1a1c1dff",
+  "iconPressed": "#44474aff",
+  "iconDisabled": "#babec3ff",
+  "iconCritical": "#d72c0dff",
+  "iconWarning": "#b98900ff",
+  "iconSuccess": "#007f5fff",
+  "iconHighlight": "#00a0acff",
+  "iconInteractive": "#2c6ecbff",
+  "iconOnInteractive": "#ffffffff",
+  "iconOnPrimary": "#ffffffff",
+  "iconOnCritical": "#ffffffff",
+  "border": "#8c9196ff",
+  "borderSubdued": "#c9cccfff",
+  "borderHovered": "#999ea4ff",
+  "borderDepressed": "#575959ff",
+  "borderDisabled": "#d2d5d8ff",
+  "borderCritical": "#fd5749ff",
+  "borderCriticalSubdued": "#e0b3b2ff",
+  "borderCriticalDisabled": "#ffa7a3ff",
+  "borderWarning": "#b98900ff",
+  "borderWarningSubdued": "#e1b878ff",
+  "borderSuccess": "#00a47cff",
+  "borderSuccessSubdued": "#95c9b4ff",
+  "borderHighlight": "#449da7ff",
+  "borderHighlightSubdued": "#98c6cdff",
+  "borderNeutralSubdued": "#babfc3ff",
+  "borderShadow": "#aeb4b9ff",
+  "borderShadowSubdued": "#aeb4b9ff",
+  "actionPrimary": "#008060ff",
+  "actionPrimaryHovered": "#006e52ff",
+  "actionPrimaryPressed": "#005e46ff",
+  "actionPrimaryDepressed": "#003d2cff",
+  "actionPrimaryDisabled": "#f1f1f1ff",
+  "actionSecondary": "#ffffffff",
+  "actionSecondaryHovered": "#f6f6f7ff",
+  "actionSecondaryPressed": "#f1f2f3ff",
+  "actionSecondaryDepressed": "#6d7175ff",
+  "actionSecondaryDisabled": "#ffffffff",
+  "actionCritical": "#d82c0dff",
+  "actionCriticalHovered": "#bc2200ff",
+  "actionCriticalPressed": "#a21b00ff",
+  "actionCriticalDepressed": "#6c0f00ff",
+  "actionCriticalDisabled": "#f1f1f1ff",
+  "decorativeSurfaceOne": "#ffc96bff",
+  "decorativeSurfaceTwo": "#ffc4b0ff",
+  "decorativeSurfaceThree": "#92e6b5ff",
+  "decorativeSurfaceFour": "#91e0d6ff",
+  "decorativeSurfaceFive": "#fdc9d0ff",
+  "decorativeTextOne": "#3d2800ff",
+  "decorativeTextTwo": "#490b1cff",
+  "decorativeTextThree": "#002f19ff",
+  "decorativeTextFour": "#002d2dff",
+  "decorativeTextFive": "#4f0e1fff",
+  "decorativeIconOne": "#7e5700ff",
+  "decorativeIconTwo": "#af294eff",
+  "decorativeIconThree": "#006d41ff",
+  "decorativeIconFour": "#006a68ff",
+  "decorativeIconIconFive": "#ae2b4cff",
+  "backdrop": "#00000080",
+  "focused": "#458fffff",
+  "overlay": "#ffffff80",
+  "divider": "#e1e3e5ff",
+  "shadowInset": "inset -1px 0px 0px 0px #e4e5e7ff",
+  "shadowInsetButtonPressed": "inset 0px 1px 0px 0px #00000026",
+  "shadowInsetButton": "inset 0px -1px 0px 0px #00000033",
+  "shadowButton": "0px 1px 0px 0px #0000000d",
+  "shadowModal": "0px 0px 1px 0px #00000033",
+  "shadowLayer": "0px 2px 16px 0px #202a3614",
+  "shadowPopover": "0px 3px 6px -3px #17181814",
+  "shadowCard": "0px 0px 5px 0px #1718180d",
+  "shadowTopBar": "0px 2px 2px -1px #00000026",
+  "shadowDeep": "0px 0px 0px 1px #062c521a",
+  "shadowBase": "0px 1px 3px 0px #3f3f4426",
+  "shadowFaint": "0px 1px 0px 0px #161d250d",
+  "shadowTransparent": "0px 0px 0px 0px #00000000",
+  "shadowXs": "0px 0px 2px 0px #1f21243d",
+  "shadowSm": "0px 1px 1px 0px #1f21241a",
+  "shadowMd": "0px 2px 4px 0px #1f21241a",
+  "shadowLg": "0px 4px 12px 0px #1f212433",
+  "shadowXl": "0px 4px 18px -2px #1f212414",
+  "shadow2xl": "0px 32px 32px 0px #1f212426",
+  "fontFamilyPrimary": "Inter",
+  "fontFamilyMono": "Space Mono",
+  "fontWeightRegular": "400",
+  "fontWeightMedium": "500",
+  "fontWeightBold": "600",
+  "fontWeightExtraBold": "700",
+  "space0": "0px",
+  "space025": "1px",
+  "space05": "2px",
+  "space1": "4px",
+  "space2": "8px",
+  "space3": "12px",
+  "space4": "16px",
+  "space5": "20px",
+  "space6": "24px",
+  "space8": "32px",
+  "space10": "40px",
+  "space12": "48px",
+  "space16": "64px",
+  "space20": "80px",
+  "space24": "96px",
+  "space32": "128px",
+  "borderWidth1": "1px",
+  "borderWidth2": "2px",
+  "borderWidth3": "3px",
+  "borderWidth4": "4px",
+  "borderWidth5": "5px",
+  "borderRadius05": "2px",
+  "borderRadius1": "4px",
+  "borderRadius2": "8px",
+  "borderRadius3": "12px",
+  "borderRadius4": "16px",
+  "borderRadius5": "20px",
+  "borderRadiusFull": "9999px",
+  "borderRadiusHalf": "50%",
+  "borderRadiusBase": "3px",
+  "borderRadiusLarge": "6px",
+  "borderBase": "1px solid #c9cccfff",
+  "borderDark": "1px solid #8c9196ff",
+  "borderDivider": "1px solid #e1e3e5ff",
+  "borderTransparent": "1px solid #00000000",
+  "z1": "100",
+  "z2": "400",
+  "z3": "513",
+  "z4": "514",
+  "z5": "515",
+  "z6": "516",
+  "z7": "517",
+  "z8": "518",
+  "z9": "519",
+  "z10": "520",
+  "zMax": "99999",
+  "duration0": "0ms",
+  "duration100": "100ms",
+  "duration150": "150ms",
+  "duration200": "200ms",
+  "duration250": "250ms",
+  "duration300": "300ms",
+  "duration350": "350ms",
+  "duration400": "400ms",
+  "duration450": "450ms",
+  "duration500": "500ms",
+  "duration5000": "5000ms",
+  "ease": "cubic-bezier(0.25, 0.1, 0.25, 1)",
+  "linear": "cubic-bezier(0, 0, 1, 1)",
+  "easeIn": "cubic-bezier(0.42, 0, 1, 1)",
+  "easeOut": "cubic-bezier(0, 0, 0.58, 1)",
+  "easeInOut": "cubic-bezier(0.42, 0, 0.58, 1)",
+  "fontSize75": "12px",
+  "fontSize100": "14px",
+  "fontSize200": "16px",
+  "fontSize300": "20px",
+  "fontSize400": "24px",
+  "fontSize500": "28px",
+  "fontSize600": "32px",
+  "fontSize700": "40px",
+  "fontLineHeight1": "16px",
+  "fontLineHeight2": "20px",
+  "fontLineHeight3": "24px",
+  "fontLineHeight4": "28px",
+  "fontLineHeight5": "32px",
+  "fontLineHeight6": "40px",
+  "fontLineHeight7": "48px",
+}
diff --git a/examples/district/.eslintrc.json b/examples/district/.eslintrc.json
index ca38aec4..eff9d74a 100644
--- a/examples/district/.eslintrc.json
+++ b/examples/district/.eslintrc.json
@@ -11,6 +11,7 @@
     "@typescript-eslint/no-explicit-any": ["off"],
     "react/display-name": "off",
     "@next/next/no-html-link-for-pages": "off",
-    "prefer-const": "off"
+    "prefer-const": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }
diff --git a/examples/district/config/tokens/generate.js b/examples/district/config/tokens/generate.js
new file mode 100644
index 00000000..cdbdb21e
--- /dev/null
+++ b/examples/district/config/tokens/generate.js
@@ -0,0 +1,4 @@
+const StyleDictionary = require('style-dictionary');
+const config = require('./sd-config.js');
+
+StyleDictionary.extend(config).buildAllPlatforms();
diff --git a/examples/district/config/tokens/generate.mjs b/examples/district/config/tokens/generate.mjs
deleted file mode 100644
index a70ac1cf..00000000
--- a/examples/district/config/tokens/generate.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import StyleDictionary from 'style-dictionary';
-import config from './sd-config.js';
-
-StyleDictionary.extend(config).buildAllPlatforms();
diff --git a/examples/district/package.json b/examples/district/package.json
index 1cff54d1..686ddd81 100644
--- a/examples/district/package.json
+++ b/examples/district/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "build:tokens": "node ./config/tokens/generate.mjs",
+    "build:tokens": "node ./config/tokens/generate.js",
     "postbuild:tokens": "node ./config/tokens/copy.js",
     "generate": "graphql-codegen --config ./config/codegen.ts",
     "clean": "rm -rf node_modules package-lock.json"
diff --git a/examples/drr/.eslintrc.json b/examples/drr/.eslintrc.json
index ca38aec4..eff9d74a 100644
--- a/examples/drr/.eslintrc.json
+++ b/examples/drr/.eslintrc.json
@@ -11,6 +11,7 @@
     "@typescript-eslint/no-explicit-any": ["off"],
     "react/display-name": "off",
     "@next/next/no-html-link-for-pages": "off",
-    "prefer-const": "off"
+    "prefer-const": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }
diff --git a/packages/opub-ui/styles/_variables.css b/packages/opub-ui/styles/_variables.css
index 123b8b86..00246d28 100644
--- a/packages/opub-ui/styles/_variables.css
+++ b/packages/opub-ui/styles/_variables.css
@@ -1,93 +1,93 @@
-:root {
-  --base-indigo-solid-1: #fdfdfe;
-  --base-indigo-solid-2: #f8faff;
-  --base-indigo-solid-3: #f0f4ff;
-  --base-indigo-solid-4: #e6edfe;
-  --base-indigo-solid-5: #d9e2fc;
-  --base-indigo-solid-6: #c6d4f9;
-  --base-indigo-solid-7: #aec0f5;
-  --base-indigo-solid-8: #8da4ef;
-  --base-indigo-solid-9: #3e63dd;
-  --base-indigo-solid-10: #3a5ccc;
-  --base-indigo-solid-11: #3451b2;
-  --base-indigo-solid-12: #101d46;
-  --base-blue-solid-1: #fbfdff;
-  --base-blue-solid-2: #f5faff;
-  --base-blue-solid-3: #edf6ff;
-  --base-blue-solid-4: #e1f0ff;
-  --base-blue-solid-5: #cee7fe;
-  --base-blue-solid-6: #b7d9f8;
-  --base-blue-solid-7: #96c7f2;
-  --base-blue-solid-8: #5eb0ef;
-  --base-blue-solid-9: #0091ff;
-  --base-blue-solid-10: #0081f1;
-  --base-blue-solid-11: #006adc;
-  --base-blue-solid-12: #00254d;
-  --base-violet-solid-1: #fdfcfe;
-  --base-violet-solid-2: #fbfaff;
-  --base-violet-solid-3: #f5f2ff;
-  --base-violet-solid-4: #ede9fe;
-  --base-violet-solid-5: #e4defc;
-  --base-violet-solid-6: #d7cff9;
-  --base-violet-solid-7: #c4b8f3;
-  --base-violet-solid-8: #aa99ec;
-  --base-violet-solid-9: #6e56cf;
-  --base-violet-solid-10: #644fc1;
-  --base-violet-solid-11: #5746af;
-  --base-violet-solid-12: #20134b;
-  --base-gray-slate-solid-1: #fbfcfd;
-  --base-gray-slate-solid-2: #f8f9fa;
-  --base-gray-slate-solid-3: #f1f3f5;
-  --base-gray-slate-solid-4: #eceef0;
-  --base-gray-slate-solid-5: #e6e8eb;
-  --base-gray-slate-solid-6: #dfe3e6;
-  --base-gray-slate-solid-7: #d7dbdf;
-  --base-gray-slate-solid-8: #c1c8cd;
+:root { 
+  --base-indigo-solid-1: #FDFDFE;
+  --base-indigo-solid-2: #F8FAFF;
+  --base-indigo-solid-3: #F0F4FF;
+  --base-indigo-solid-4: #E6EDFE;
+  --base-indigo-solid-5: #D9E2FC;
+  --base-indigo-solid-6: #C6D4F9;
+  --base-indigo-solid-7: #AEC0F5;
+  --base-indigo-solid-8: #8DA4EF;
+  --base-indigo-solid-9: #3E63DD;
+  --base-indigo-solid-10: #3A5CCC;
+  --base-indigo-solid-11: #3451B2;
+  --base-indigo-solid-12: #101D46;
+  --base-blue-solid-1: #FBFDFF;
+  --base-blue-solid-2: #F5FAFF;
+  --base-blue-solid-3: #EDF6FF;
+  --base-blue-solid-4: #E1F0FF;
+  --base-blue-solid-5: #CEE7FE;
+  --base-blue-solid-6: #B7D9F8;
+  --base-blue-solid-7: #96C7F2;
+  --base-blue-solid-8: #5EB0EF;
+  --base-blue-solid-9: #0091FF;
+  --base-blue-solid-10: #0081F1;
+  --base-blue-solid-11: #006ADC;
+  --base-blue-solid-12: #00254D;
+  --base-violet-solid-1: #FDFCFE;
+  --base-violet-solid-2: #FBFAFF;
+  --base-violet-solid-3: #F5F2FF;
+  --base-violet-solid-4: #EDE9FE;
+  --base-violet-solid-5: #E4DEFC;
+  --base-violet-solid-6: #D7CFF9;
+  --base-violet-solid-7: #C4B8F3;
+  --base-violet-solid-8: #AA99EC;
+  --base-violet-solid-9: #6E56CF;
+  --base-violet-solid-10: #644FC1;
+  --base-violet-solid-11: #5746AF;
+  --base-violet-solid-12: #20134B;
+  --base-gray-slate-solid-1: #FBFCFD;
+  --base-gray-slate-solid-2: #F8F9FA;
+  --base-gray-slate-solid-3: #F1F3F5;
+  --base-gray-slate-solid-4: #ECEEF0;
+  --base-gray-slate-solid-5: #E6E8EB;
+  --base-gray-slate-solid-6: #DFE3E6;
+  --base-gray-slate-solid-7: #D7DBDF;
+  --base-gray-slate-solid-8: #C1C8CD;
   --base-gray-slate-solid-9: #889096;
-  --base-gray-slate-solid-10: #7e868c;
+  --base-gray-slate-solid-10: #7E868C;
   --base-gray-slate-solid-11: #687076;
-  --base-gray-slate-solid-12: #11181c;
-  --base-red-solid-1: #fffcfc;
-  --base-red-solid-2: #fff8f8;
-  --base-red-solid-3: #ffefef;
-  --base-red-solid-4: #ffe5e5;
-  --base-red-solid-5: #fdd8d8;
-  --base-red-solid-6: #f9c6c6;
-  --base-red-solid-7: #f3aeaf;
-  --base-red-solid-8: #eb9091;
-  --base-red-solid-9: #e5484d;
-  --base-red-solid-10: #dc3d43;
-  --base-red-solid-11: #cd2b31;
+  --base-gray-slate-solid-12: #11181C;
+  --base-red-solid-1: #FFFCFC;
+  --base-red-solid-2: #FFF8F8;
+  --base-red-solid-3: #FFEFEF;
+  --base-red-solid-4: #FFE5E5;
+  --base-red-solid-5: #FDD8D8;
+  --base-red-solid-6: #F9C6C6;
+  --base-red-solid-7: #F3AEAF;
+  --base-red-solid-8: #EB9091;
+  --base-red-solid-9: #E5484D;
+  --base-red-solid-10: #DC3D43;
+  --base-red-solid-11: #CD2B31;
   --base-red-solid-12: #381316;
-  --base-green-solid-1: #fbfefc;
-  --base-green-solid-2: #f2fcf5;
-  --base-green-solid-3: #e9f9ee;
-  --base-green-solid-4: #ddf3e4;
-  --base-green-solid-5: #ccebd7;
-  --base-green-solid-6: #b4dfc4;
-  --base-green-solid-7: #92ceac;
-  --base-green-solid-8: #5bb98c;
-  --base-green-solid-9: #30a46c;
+  --base-green-solid-1: #FBFEFC;
+  --base-green-solid-2: #F2FCF5;
+  --base-green-solid-3: #E9F9EE;
+  --base-green-solid-4: #DDF3E4;
+  --base-green-solid-5: #CCEBD7;
+  --base-green-solid-6: #B4DFC4;
+  --base-green-solid-7: #92CEAC;
+  --base-green-solid-8: #5BB98C;
+  --base-green-solid-9: #30A46C;
   --base-green-solid-10: #299764;
-  --base-green-solid-11: #18794e;
+  --base-green-solid-11: #18794E;
   --base-green-solid-12: #153226;
-  --base-amber-solid-1: #fefdfb;
-  --base-amber-solid-2: #fff9ed;
-  --base-amber-solid-3: #fff4d5;
-  --base-amber-solid-4: #ffecbc;
-  --base-amber-solid-5: #ffe3a2;
-  --base-amber-solid-6: #ffd386;
-  --base-amber-solid-7: #f3ba63;
-  --base-amber-solid-8: #ee9d2b;
-  --base-amber-solid-9: #ffb224;
-  --base-amber-solid-10: #ffa01c;
-  --base-amber-solid-11: #ad5700;
-  --base-amber-solid-12: #4e2009;
-  --base-pure-white: #ffffff;
+  --base-amber-solid-1: #FEFDFB;
+  --base-amber-solid-2: #FFF9ED;
+  --base-amber-solid-3: #FFF4D5;
+  --base-amber-solid-4: #FFECBC;
+  --base-amber-solid-5: #FFE3A2;
+  --base-amber-solid-6: #FFD386;
+  --base-amber-solid-7: #F3BA63;
+  --base-amber-solid-8: #EE9D2B;
+  --base-amber-solid-9: #FFB224;
+  --base-amber-solid-10: #FFA01C;
+  --base-amber-solid-11: #AD5700;
+  --base-amber-solid-12: #4E2009;
+  --base-pure-white: #FFFFFF;
   --base-pure-black: #000000;
   --text-default: var(--base-gray-slate-solid-12);
   --text-medium: var(--base-gray-slate-solid-11);
-  --text-subdued: #3e4346;
+  --text-subdued: #3E4346;
   --text-disabled: var(--base-gray-slate-solid-9);
   --text-critical: var(--base-red-solid-11);
   --text-warning: var(--base-amber-solid-11);
@@ -164,114 +164,114 @@
   --action-tertiary-basic-hover: var(--base-violet-alpha-2);
   --base-indigo-alpha-1: #05058203;
   --action-tertiary-interactive-hover: var(--base-blue-alpha-2);
-  --base-indigo-alpha-2: #054cff08;
+  --base-indigo-alpha-2: #054CFF08;
   --action-tertiary-success-hover: var(--base-green-alpha-2);
   --action-tertiary-critical-hover: var(--base-red-alpha-2);
-  --base-indigo-alpha-3: #0144ff0f;
-  --base-indigo-alpha-4: #0247f51a;
-  --base-indigo-alpha-5: #023ceb26;
+  --base-indigo-alpha-3: #0144FF0F;
+  --base-indigo-alpha-4: #0247F51A;
+  --base-indigo-alpha-5: #023CEB26;
   --background-alpha-dark: var(--base-indigo-alpha-12);
-  --base-indigo-alpha-6: #013de438;
+  --base-indigo-alpha-6: #013DE438;
   --background-alpha-medium: var(--base-indigo-alpha-4);
-  --base-indigo-alpha-7: #0038e052;
-  --base-indigo-alpha-8: #0134db73;
-  --base-indigo-alpha-9: #0031d2c2;
+  --base-indigo-alpha-7: #0038E052;
+  --base-indigo-alpha-8: #0134DB73;
+  --base-indigo-alpha-9: #0031D2C2;
   --background-solid-subdued: var(--base-indigo-solid-2);
   --background-solid-dark: var(--base-indigo-solid-12);
   --background-solid-default: var(--base-indigo-solid-3);
   --surface-default: var(--base-pure-white);
   --surface-subdued: var(--base-gray-slate-solid-2);
-  --base-indigo-alpha-10: #002cbdc4;
+  --base-indigo-alpha-10: #002CBDC4;
   --surface-selected: var(--base-blue-solid-2);
-  --base-indigo-alpha-11: #00259ecc;
-  --base-indigo-alpha-12: #000e3af0;
+  --base-indigo-alpha-11: #00259ECC;
+  --base-indigo-alpha-12: #000E3AF0;
   --surface-warning: var(--base-amber-solid-2);
   --surface-critical: var(--base-red-solid-2);
-  --base-blue-alpha-1: #0582ff05;
-  --base-blue-alpha-2: #0582ff0a;
+  --base-blue-alpha-1: #0582FF05;
+  --base-blue-alpha-2: #0582FF0A;
   --surface-success: var(--base-green-solid-2);
   --surface-highlight-subdued: var(--base-violet-solid-2);
-  --base-blue-alpha-3: #0280ff12;
+  --base-blue-alpha-3: #0280FF12;
   --surface-interactive: var(--base-blue-solid-2);
-  --base-blue-alpha-4: #0180ff1f;
-  --base-blue-alpha-5: #0180ef30;
+  --base-blue-alpha-4: #0180FF1F;
+  --base-blue-alpha-5: #0180EF30;
   --surface-highlight-default: var(--base-violet-solid-4);
   --surface-highlight-hovered: var(--base-violet-solid-6);
-  --base-blue-alpha-6: #0177e647;
-  --base-blue-alpha-7: #0077df69;
-  --base-blue-alpha-8: #0082e6a1;
-  --base-blue-alpha-9: #0091fffa;
-  --base-blue-alpha-10: #0080f1fa;
-  --base-blue-alpha-11: #0066dbfa;
-  --base-blue-alpha-12: #002149fa;
-  --base-violet-alpha-1: #5805ab03;
-  --base-violet-alpha-2: #3705ff05;
-  --base-violet-alpha-3: #3c00ff0d;
-  --base-violet-alpha-4: #2e02f417;
-  --base-violet-alpha-5: #2f01e821;
-  --base-violet-alpha-6: #2a01df30;
+  --base-blue-alpha-6: #0177E647;
+  --base-blue-alpha-7: #0077DF69;
+  --base-blue-alpha-8: #0082E6A1;
+  --base-blue-alpha-9: #0091FFFA;
+  --base-blue-alpha-10: #0080F1FA;
+  --base-blue-alpha-11: #0066DBFA;
+  --base-blue-alpha-12: #002149FA;
+  --base-violet-alpha-1: #5805AB03;
+  --base-violet-alpha-2: #3705FF05;
+  --base-violet-alpha-3: #3C00FF0D;
+  --base-violet-alpha-4: #2E02F417;
+  --base-violet-alpha-5: #2F01E821;
+  --base-violet-alpha-6: #2A01DF30;
   --surface-backdrop: var(--base-gray-slate-alpha-9);
-  --base-violet-alpha-7: #2b01d447;
-  --base-violet-alpha-8: #2a00d066;
-  --base-violet-alpha-9: #2500b6a8;
-  --base-violet-alpha-10: #1f00a5b0;
-  --base-violet-alpha-11: #180091ba;
-  --base-violet-alpha-12: #0e003ded;
+  --base-violet-alpha-7: #2B01D447;
+  --base-violet-alpha-8: #2A00D066;
+  --base-violet-alpha-9: #2500B6A8;
+  --base-violet-alpha-10: #1F00A5B0;
+  --base-violet-alpha-11: #180091BA;
+  --base-violet-alpha-12: #0E003DED;
   --base-gray-slate-alpha-1: #05448205;
-  --base-gray-slate-alpha-2: #05294d08;
-  --base-gray-slate-alpha-3: #0025490d;
-  --base-gray-slate-alpha-4: #021c3714;
-  --base-gray-slate-alpha-5: #0217351a;
+  --base-gray-slate-alpha-2: #05294D08;
+  --base-gray-slate-alpha-3: #0025490D;
+  --base-gray-slate-alpha-4: #021C3714;
+  --base-gray-slate-alpha-5: #0217351A;
   --base-gray-slate-alpha-6: #01213921;
-  --base-gray-slate-alpha-7: #001a3329;
-  --base-gray-slate-alpha-8: #011e323d;
-  --base-gray-slate-alpha-9: #00111e78;
-  --base-gray-slate-alpha-10: #00101b82;
-  --base-gray-slate-alpha-11: #000e1896;
-  --base-gray-slate-alpha-12: #00080ced;
-  --base-green-alpha-1: #05c04305;
-  --base-green-alpha-2: #00c43b0d;
-  --base-green-alpha-3: #02ba3c17;
-  --base-green-alpha-4: #01a63521;
-  --base-green-alpha-5: #009b3633;
-  --base-green-alpha-6: #0193364a;
-  --base-green-alpha-7: #008c3d6e;
-  --base-green-alpha-8: #00934ca3;
-  --base-green-alpha-9: #008f4acf;
-  --base-green-alpha-10: #008346d6;
-  --base-green-alpha-11: #006b3be8;
-  --base-green-alpha-12: #002012eb;
-  --base-amber-alpha-1: #c0820505;
-  --base-amber-alpha-2: #ffab0212;
-  --base-amber-alpha-3: #ffbb012b;
-  --base-amber-alpha-4: #ffb70042;
-  --base-amber-alpha-5: #ffb3005e;
-  --base-amber-alpha-6: #ffa20178;
-  --base-amber-alpha-7: #ec8d009c;
-  --base-amber-alpha-8: #ea8900d4;
-  --base-amber-alpha-9: #ffa600db;
-  --base-amber-alpha-10: #ff9500e3;
-  --base-amber-alpha-11: #ab5300fa;
-  --base-amber-alpha-12: #481800f5;
-  --base-red-alpha-1: #ff050503;
-  --base-red-alpha-2: #ff050508;
-  --base-red-alpha-3: #ff01010f;
-  --base-red-alpha-4: #ff00001a;
-  --base-red-alpha-5: #f2000026;
-  --base-red-alpha-6: #e4010138;
-  --base-red-alpha-7: #d9000452;
-  --base-red-alpha-8: #d1000470;
-  --base-red-alpha-9: #db0007b8;
-  --base-red-alpha-10: #d10007c2;
-  --base-red-alpha-11: #c30007d4;
-  --base-red-alpha-12: #280003ed;
+  --base-gray-slate-alpha-7: #001A3329;
+  --base-gray-slate-alpha-8: #011E323D;
+  --base-gray-slate-alpha-9: #00111E78;
+  --base-gray-slate-alpha-10: #00101B82;
+  --base-gray-slate-alpha-11: #000E1896;
+  --base-gray-slate-alpha-12: #00080CED;
+  --base-green-alpha-1: #05C04305;
+  --base-green-alpha-2: #00C43B0D;
+  --base-green-alpha-3: #02BA3C17;
+  --base-green-alpha-4: #01A63521;
+  --base-green-alpha-5: #009B3633;
+  --base-green-alpha-6: #0193364A;
+  --base-green-alpha-7: #008C3D6E;
+  --base-green-alpha-8: #00934CA3;
+  --base-green-alpha-9: #008F4ACF;
+  --base-green-alpha-10: #008346D6;
+  --base-green-alpha-11: #006B3BE8;
+  --base-green-alpha-12: #002012EB;
+  --base-amber-alpha-1: #C0820505;
+  --base-amber-alpha-2: #FFAB0212;
+  --base-amber-alpha-3: #FFBB012B;
+  --base-amber-alpha-4: #FFB70042;
+  --base-amber-alpha-5: #FFB3005E;
+  --base-amber-alpha-6: #FFA20178;
+  --base-amber-alpha-7: #EC8D009C;
+  --base-amber-alpha-8: #EA8900D4;
+  --base-amber-alpha-9: #FFA600DB;
+  --base-amber-alpha-10: #FF9500E3;
+  --base-amber-alpha-11: #AB5300FA;
+  --base-amber-alpha-12: #481800F5;
+  --base-red-alpha-1: #FF050503;
+  --base-red-alpha-2: #FF050508;
+  --base-red-alpha-3: #FF01010F;
+  --base-red-alpha-4: #FF00001A;
+  --base-red-alpha-5: #F2000026;
+  --base-red-alpha-6: #E4010138;
+  --base-red-alpha-7: #D9000452;
+  --base-red-alpha-8: #D1000470;
+  --base-red-alpha-9: #DB0007B8;
+  --base-red-alpha-10: #D10007C2;
+  --base-red-alpha-11: #C30007D4;
+  --base-red-alpha-12: #280003ED;
   --mapareadistrict-default: var(--surface-highlight-default);
   --mapareadistrict-hover: var(--action-secondary-success-hovered);
   --mapareadistrict-selected: var(--action-primary-basic-default);
   --mapareadistrict-disabled: var(--action-primary-disabled);
   --mapareadistrict-border: var(--base-gray-slate-solid-9);
-  --border-focus: #ffffff03;
-  --transparent: #ffffff00;
+  --border-focus: #FFFFFF03;
+  --transparent: #FFFFFF00;
   --border-onbg-subdued: var(--base-gray-slate-solid-11);
 
   --space-0: 0px;
@@ -304,35 +304,27 @@
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
 
-  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2),
-    0px 0px 1px 0px rgba(0, 0, 0, 0.2);
-  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2),
-    0px 2px 16px 0px rgba(32, 42, 54, 0.08);
+  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), 0px 2px 16px 0px rgba(32, 42, 54, 0.08);
   --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1);
   --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
   --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
   --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08),
-    0px 0px 0px 1px rgba(6, 44, 82, 0.1);
+  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.1);
   --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05);
   --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0);
   --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24);
   --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 2px 4px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 4px 12px 0px rgba(31, 33, 36, 0.2);
-  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15),
-    0px 4px 18px -2px rgba(31, 33, 36, 0.08);
-  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16),
-    0px 32px 32px 0px rgba(31, 33, 36, 0.15);
-  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12),
-    0px 3px 6px -3px rgba(23, 24, 24, 0.08);
-  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15),
-    0px 0px 5px 0px rgba(23, 24, 24, 0.05);
+  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), 0px 2px 4px 0px rgba(31, 33, 36, 0.1);
+  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), 0px 4px 12px 0px rgba(31, 33, 36, 0.2);
+  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), 0px 4px 18px -2px rgba(31, 33, 36, 0.08);
+  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), 0px 32px 32px 0px rgba(31, 33, 36, 0.15);
+  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), 0px 3px 6px -3px rgba(23, 24, 24, 0.08);
+  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05);
   --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15);
   --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1);
 
+
   --z-1: 100;
   --z-2: 400;
   --z-3: 513;