diff --git a/packages/design-system/src/scripts/build-colors-style.ts b/packages/design-system/src/scripts/build-colors-style.ts
index 93a43f02..355e96fd 100644
--- a/packages/design-system/src/scripts/build-colors-style.ts
+++ b/packages/design-system/src/scripts/build-colors-style.ts
@@ -44,10 +44,10 @@ const generateScssContent = (
 // Function to build and write SCSS for a given theme
 export const buildColorsScss = (theme: "dark" | "light"): void => {
   // Define the input and output file paths
-  const partFileName = theme === "dark" ? "Default" : "Light";
+  const partFileName = theme === "dark" ? "default" : "light";
   const inputFilePath = path.join(
     tokensDir,
-    `token_Color_${partFileName}.json`,
+    `token_color_${partFileName}.json`,
   );
   const outputFilePath = path.join(stylesDir, `_colors-${theme}.scss`);
 
diff --git a/packages/design-system/src/scripts/build-colors-tailwind.ts b/packages/design-system/src/scripts/build-colors-tailwind.ts
index 8ec0cb8f..4c680c28 100644
--- a/packages/design-system/src/scripts/build-colors-tailwind.ts
+++ b/packages/design-system/src/scripts/build-colors-tailwind.ts
@@ -31,7 +31,7 @@ const generateColorsTsContent = (tokens: Record<string, any>): string => {
 
 // Function to build and write colors.ts
 export const buildColorsTailwind = (): void => {
-  const inputFilePath = path.join(tokensDir, `token_Color_Light.json`);
+  const inputFilePath = path.join(tokensDir, `token_color_light.json`);
   const outputFilePath = path.join(outputDir, `colors.ts`);
 
   // Ensure the input file exists
diff --git a/packages/design-system/src/scripts/build-palette-style.ts b/packages/design-system/src/scripts/build-palette-style.ts
index e3710589..e8658e6b 100644
--- a/packages/design-system/src/scripts/build-palette-style.ts
+++ b/packages/design-system/src/scripts/build-palette-style.ts
@@ -3,7 +3,7 @@ import * as path from 'path';
 import { hexToHsl } from './utills.js';
 
 // Paths for input and output files
-const inputFilePath = path.join(__dirname, '../tokens/token_Palette_Primitive.json');
+const inputFilePath = path.join(__dirname, '../tokens/token_palette_primitive.json');
 const outputFilePath = path.join(__dirname, '../styles/base/_palette.scss');
 
 // Generate SCSS content with groups separated by an empty line
diff --git a/packages/design-system/src/scripts/build-palette-tailwind.ts b/packages/design-system/src/scripts/build-palette-tailwind.ts
index ac1e2780..ae3c42af 100644
--- a/packages/design-system/src/scripts/build-palette-tailwind.ts
+++ b/packages/design-system/src/scripts/build-palette-tailwind.ts
@@ -2,7 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 
 // Paths for input and output files
-const inputFilePath = path.join(__dirname, "../tokens/token_Palette_Primitive.json");
+const inputFilePath = path.join(__dirname, "../tokens/token_palette_primitive.json");
 const outputFilePath = path.join(__dirname, "../tailwind/palette.ts");
 
 // Generate TypeScript content with groups of palette colors
diff --git a/packages/design-system/src/styles/base/_colors-dark.scss b/packages/design-system/src/styles/base/_colors-dark.scss
index c69ef476..a3149b18 100644
--- a/packages/design-system/src/styles/base/_colors-dark.scss
+++ b/packages/design-system/src/styles/base/_colors-dark.scss
@@ -3,13 +3,14 @@
 @layer base {
   :root {
     --accent: var(--zinc-800);
-    --accent-foreground: var(--General-white);
+    --accent-foreground: var(--general-white);
     --background: var(--zinc-950);
+    --black: var(--general-black);
     --border: var(--zinc-800);
     --card: var(--zinc-900);
-    --card-foreground: var(--General-white);
+    --card-foreground: var(--general-white);
     --destructive: var(--rose-500);
-    --destructive-foreground: var(--General-black);
+    --destructive-foreground: var(--general-black);
     --error: var(--rose-500);
     --error-border: var(--red-900);
     --error-foreground: var(--red-100);
@@ -21,13 +22,13 @@
     --muted: var(--zinc-800);
     --muted-foreground: var(--zinc-400);
     --popover: var(--zinc-950);
-    --popover-foreground: var(--General-white);
+    --popover-foreground: var(--general-white);
     --primary: var(--purple-500);
-    --primary-foreground: var(--General-white);
+    --primary-foreground: var(--general-white);
     --primary-light: var(--purple-100);
     --ring: var(--zinc-600);
     --secondary: var(--zinc-800);
-    --secondary-foreground: var(--General-white);
+    --secondary-foreground: var(--general-white);
     --success: var(--emerald-500);
     --success-border: var(--green-900);
     --success-foreground: var(--green-50);
@@ -35,5 +36,6 @@
     --warning: var(--amber-500);
     --warning-border: var(--amber-900);
     --warning-foreground: var(--amber-100);
+    --white: var(--general-white);
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/src/styles/base/_colors-light.scss b/packages/design-system/src/styles/base/_colors-light.scss
index 4dd3c987..1fda683e 100644
--- a/packages/design-system/src/styles/base/_colors-light.scss
+++ b/packages/design-system/src/styles/base/_colors-light.scss
@@ -4,12 +4,13 @@
   .light {
     --accent: var(--zinc-100);
     --accent-foreground: var(--zinc-900);
-    --background: var(--General-white);
+    --background: var(--general-white);
+    --black: var(--general-black);
     --border: var(--zinc-200);
     --card: var(--zinc-100);
     --card-foreground: var(--slate-900);
     --destructive: var(--red-600);
-    --destructive-foreground: var(--General-white);
+    --destructive-foreground: var(--general-white);
     --error: var(--red-500);
     --error-border: var(--red-200);
     --error-foreground: var(--red-600);
@@ -20,10 +21,10 @@
     --input: var(--zinc-200);
     --muted: var(--zinc-100);
     --muted-foreground: var(--zinc-500);
-    --popover: var(--General-white);
+    --popover: var(--general-white);
     --popover-foreground: var(--slate-900);
     --primary: var(--purple-500);
-    --primary-foreground: var(--General-white);
+    --primary-foreground: var(--general-white);
     --primary-light: var(--purple-100);
     --ring: var(--zinc-400);
     --secondary: var(--zinc-100);
@@ -34,6 +35,7 @@
     --table-header: rgba(244, 244, 245, 0.5000);
     --warning: var(--amber-500);
     --warning-border: var(--amber-200);
-    --warning-foreground: var(--General-white);
+    --warning-foreground: var(--general-white);
+    --white: var(--general-white);
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/src/styles/base/_palette.scss b/packages/design-system/src/styles/base/_palette.scss
index f605e617..b4139c93 100644
--- a/packages/design-system/src/styles/base/_palette.scss
+++ b/packages/design-system/src/styles/base/_palette.scss
@@ -1,8 +1,5 @@
 @layer base {
   :root {
-  --General-black: 0 0% 0%;
-  --General-white: 0 0% 100%;
-
   --amber-50: 48 100% 96%;
   --amber-100: 48 96% 89%;
   --amber-200: 48 97% 77%;
@@ -63,6 +60,10 @@
   --fuchsia-900: 297 64% 28%;
   --fuchsia-950: 297 90% 16%;
 
+  --general-black: 0 0% 0%;
+  --general-white: 0 0% 100%;
+
+  --gray-50: 210 20% 98%;
   --gray-100: 220 14% 96%;
   --gray-200: 220 13% 91%;
   --gray-300: 216 12% 84%;
@@ -73,7 +74,6 @@
   --gray-800: 215 28% 17%;
   --gray-900: 221 39% 11%;
   --gray-950: 224 71% 4%;
-  --gray-ali: 210 20% 98%;
 
   --green-50: 138 76% 97%;
   --green-100: 141 84% 93%;
diff --git a/packages/design-system/src/tailwind/colors.ts b/packages/design-system/src/tailwind/colors.ts
index 35619011..d686d64b 100644
--- a/packages/design-system/src/tailwind/colors.ts
+++ b/packages/design-system/src/tailwind/colors.ts
@@ -2,6 +2,7 @@ export const colors = {
   "accent": "hsl(var(--accent))",
   "accent-foreground": "hsl(var(--accent-foreground))",
   "background": "hsl(var(--background))",
+  "black": "hsl(var(--black))",
   "border": "hsl(var(--border))",
   "card": "hsl(var(--card))",
   "card-foreground": "hsl(var(--card-foreground))",
@@ -32,4 +33,5 @@ export const colors = {
   "warning": "hsl(var(--warning))",
   "warning-border": "hsl(var(--warning-border))",
   "warning-foreground": "hsl(var(--warning-foreground))",
+  "white": "hsl(var(--white))",
 };
\ No newline at end of file
diff --git a/packages/design-system/src/tailwind/palette.ts b/packages/design-system/src/tailwind/palette.ts
index f24a06ea..4efda2c6 100644
--- a/packages/design-system/src/tailwind/palette.ts
+++ b/packages/design-system/src/tailwind/palette.ts
@@ -1,8 +1,4 @@
 export const palette = {
-  "General": {
-    "black": "var(--General-black)",
-    "white": "var(--General-white)",
-  },
   "amber": {
     "50": "var(--amber-50)",
     "100": "var(--amber-100)",
@@ -68,7 +64,12 @@ export const palette = {
     "900": "var(--fuchsia-900)",
     "950": "var(--fuchsia-950)",
   },
+  "general": {
+    "black": "var(--general-black)",
+    "white": "var(--general-white)",
+  },
   "gray": {
+    "50": "var(--gray-50)",
     "100": "var(--gray-100)",
     "200": "var(--gray-200)",
     "300": "var(--gray-300)",
@@ -79,7 +80,6 @@ export const palette = {
     "800": "var(--gray-800)",
     "900": "var(--gray-900)",
     "950": "var(--gray-950)",
-    "ali": "var(--gray-ali)",
   },
   "green": {
     "50": "var(--green-50)",
diff --git a/packages/design-system/src/tokens/token_Icon_size_Mode 1.json b/packages/design-system/src/tokens/token_Icon_size_Mode 1.json
new file mode 100644
index 00000000..a539571d
--- /dev/null
+++ b/packages/design-system/src/tokens/token_Icon_size_Mode 1.json	
@@ -0,0 +1,14 @@
+{
+  "LG": {
+    "$type": "number",
+    "$value": 24
+  },
+  "MD": {
+    "$type": "number",
+    "$value": 18
+  },
+  "XS": {
+    "$type": "number",
+    "$value": 16
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/tokens/token_color_default.json b/packages/design-system/src/tokens/token_color_default.json
new file mode 100644
index 00000000..ea9b69c7
--- /dev/null
+++ b/packages/design-system/src/tokens/token_color_default.json
@@ -0,0 +1,176 @@
+{
+  "color": {
+    "accent": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+    },
+    "accent-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{zinc.950}",
+      "$description": "Default background color of <body />...etc"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "{general.black}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Default border color"
+    },
+    "card": {
+      "$type": "color",
+      "$value": "{zinc.900}",
+      "$description": "Background color for <Card />"
+    },
+    "card-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Foreground color for <Card />"
+    },
+    "destructive": {
+      "$type": "color",
+      "$value": "{rose.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "destructive-foreground": {
+      "$type": "color",
+      "$value": "{general.black}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error": {
+      "$type": "color",
+      "$value": "{rose.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error-border": {
+      "$type": "color",
+      "$value": "{red.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error-foreground": {
+      "$type": "color",
+      "$value": "{red.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": "{zinc.50}",
+      "$description": "Default foreground color of <body />...etc"
+    },
+    "information": {
+      "$type": "color",
+      "$value": "{sky.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "information-border": {
+      "$type": "color",
+      "$value": "{blue.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "information-foreground": {
+      "$type": "color",
+      "$value": "{blue.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "input": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Border color for inputs such as <Input />, <Select />, <Textarea />"
+    },
+    "muted": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "muted-foreground": {
+      "$type": "color",
+      "$value": "{zinc.400}",
+      "$description": "Muted Foreground such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "popover": {
+      "$type": "color",
+      "$value": "{zinc.950}",
+      "$description": "Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+    },
+    "popover-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Foreground color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{purple.500}",
+      "$description": "Primary colors for <Button />"
+    },
+    "primary-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "primary-light": {
+      "$type": "color",
+      "$value": "{purple.100}"
+    },
+    "ring": {
+      "$type": "color",
+      "$value": "{zinc.600}",
+      "$description": "Used for focus ring"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{zinc.800}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "secondary-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "success": {
+      "$type": "color",
+      "$value": "{emerald.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "success-border": {
+      "$type": "color",
+      "$value": "{green.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "success-foreground": {
+      "$type": "color",
+      "$value": "{green.50}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "table-header": {
+      "$type": "color",
+      "$value": "rgba(39, 39, 42, 0.5000)",
+      "$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "warning": {
+      "$type": "color",
+      "$value": "{amber.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "warning-border": {
+      "$type": "color",
+      "$value": "{amber.900}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "warning-foreground": {
+      "$type": "color",
+      "$value": "{amber.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "white": {
+      "$type": "color",
+      "$value": "{general.white}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/tokens/token_color_light.json b/packages/design-system/src/tokens/token_color_light.json
new file mode 100644
index 00000000..0fbae022
--- /dev/null
+++ b/packages/design-system/src/tokens/token_color_light.json
@@ -0,0 +1,176 @@
+{
+  "color": {
+    "accent": {
+      "$type": "color",
+      "$value": "{zinc.100}",
+      "$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+    },
+    "accent-foreground": {
+      "$type": "color",
+      "$value": "{zinc.900}",
+      "$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
+    },
+    "background": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Default background color of <body />...etc"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "{general.black}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{zinc.200}",
+      "$description": "Default border color"
+    },
+    "card": {
+      "$type": "color",
+      "$value": "{zinc.100}",
+      "$description": "Background color for <Card />"
+    },
+    "card-foreground": {
+      "$type": "color",
+      "$value": "{slate.900}",
+      "$description": "Foreground color for <Card />"
+    },
+    "destructive": {
+      "$type": "color",
+      "$value": "{red.600}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "destructive-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error": {
+      "$type": "color",
+      "$value": "{red.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error-border": {
+      "$type": "color",
+      "$value": "{red.200}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "error-foreground": {
+      "$type": "color",
+      "$value": "{red.600}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": "{zinc.950}",
+      "$description": "Default foreground color of <body />...etc"
+    },
+    "information": {
+      "$type": "color",
+      "$value": "{blue.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "information-border": {
+      "$type": "color",
+      "$value": "{blue.200}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "information-foreground": {
+      "$type": "color",
+      "$value": "{blue.700}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "input": {
+      "$type": "color",
+      "$value": "{zinc.200}",
+      "$description": "Border color for inputs such as <Input />, <Select />, <Textarea />"
+    },
+    "muted": {
+      "$type": "color",
+      "$value": "{zinc.100}",
+      "$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "muted-foreground": {
+      "$type": "color",
+      "$value": "{zinc.500}",
+      "$description": "Muted Foreground such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "popover": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+    },
+    "popover-foreground": {
+      "$type": "color",
+      "$value": "{slate.900}",
+      "$description": "Foreground color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{purple.500}",
+      "$description": "Primary colors for <Button />"
+    },
+    "primary-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "primary-light": {
+      "$type": "color",
+      "$value": "{purple.100}"
+    },
+    "ring": {
+      "$type": "color",
+      "$value": "{zinc.400}",
+      "$description": "Used for focus ring"
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{zinc.100}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "secondary-foreground": {
+      "$type": "color",
+      "$value": "{zinc.900}",
+      "$description": "Secondary colors for <Button />"
+    },
+    "success": {
+      "$type": "color",
+      "$value": "{green.100}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "success-border": {
+      "$type": "color",
+      "$value": "{green.200}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "success-foreground": {
+      "$type": "color",
+      "$value": "{green.700}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "table-header": {
+      "$type": "color",
+      "$value": "rgba(244, 244, 245, 0.5000)",
+      "$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
+    },
+    "warning": {
+      "$type": "color",
+      "$value": "{amber.500}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "warning-border": {
+      "$type": "color",
+      "$value": "{amber.200}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "warning-foreground": {
+      "$type": "color",
+      "$value": "{general.white}",
+      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+    },
+    "white": {
+      "$type": "color",
+      "$value": "{general.white}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/tokens/token_palette_primitive.json b/packages/design-system/src/tokens/token_palette_primitive.json
new file mode 100644
index 00000000..27e75d00
--- /dev/null
+++ b/packages/design-system/src/tokens/token_palette_primitive.json
@@ -0,0 +1,1020 @@
+{
+  "amber": {
+    "100": {
+      "$type": "color",
+      "$value": "#fef3c7"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#fde68a"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#fcd34d"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#fbbf24"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fffbeb"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#f59e0b"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#d97706"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#b45309"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#92400e"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#78350f"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#451a03"
+    }
+  },
+  "blue": {
+    "100": {
+      "$type": "color",
+      "$value": "#dbeafe"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#bfdbfe"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#93c5fd"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#60a5fa"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#eff6ff"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#3b82f6"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#2563eb"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#1d4ed8"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#1e40af"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#1e3a8a"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#172554"
+    }
+  },
+  "cyan": {
+    "100": {
+      "$type": "color",
+      "$value": "#cffafe"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#a5f3fc"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#67e8f9"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#22d3ee"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#ecfeff"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#06b6d4"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#0891b2"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#0e7490"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#155e75"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#164e63"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#083344"
+    }
+  },
+  "emerald": {
+    "100": {
+      "$type": "color",
+      "$value": "#d1fae5"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#a7f3d0"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#6ee7b7"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#34d399"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#ecfdf5"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#10b981"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#059669"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#047857"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#065f46"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#064e3b"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#022c22"
+    }
+  },
+  "fuchsia": {
+    "100": {
+      "$type": "color",
+      "$value": "#fae8ff"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#f5d0fe"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#f0abfc"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#e879f9"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fdf4ff"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#d946ef"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#c026d3"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#a21caf"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#86198f"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#701a75"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#4a044e"
+    }
+  },
+  "general": {
+    "black": {
+      "$type": "color",
+      "$value": "#000000"
+    },
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff"
+    }
+  },
+  "gray": {
+    "100": {
+      "$type": "color",
+      "$value": "#f3f4f6"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#e5e7eb"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#d1d5db"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#9ca3af"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f9fafb"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#6b7280"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#4b5563"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#374151"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#1f2937"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#111827"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#030712"
+    }
+  },
+  "green": {
+    "100": {
+      "$type": "color",
+      "$value": "#dcfce7"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#bbf7d0"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#86efac"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#4ade80"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f0fdf4"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#22c55e"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#16a34a"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#15803d"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#166534"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#14532d"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#052e16"
+    }
+  },
+  "indigo": {
+    "100": {
+      "$type": "color",
+      "$value": "#e0e7ff"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#c7d2fe"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#a5b4fc"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#818cf8"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#eef2ff"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#6366f1"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#4f46e5"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#4338ca"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#3730a3"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#312e81"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#1e1b4b"
+    }
+  },
+  "lime": {
+    "100": {
+      "$type": "color",
+      "$value": "#ecfccb"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#d9f99d"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#bef264"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#a3e635"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f7fee7"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#84cc16"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#65a30d"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#4d7c0f"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#3f6212"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#365314"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#1a2e05"
+    }
+  },
+  "neutral": {
+    "100": {
+      "$type": "color",
+      "$value": "#f5f5f5"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#e5e5e5"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#d4d4d4"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#a3a3a3"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fafafa"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#737373"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#525252"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#404040"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#262626"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#171717"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#0a0a0a"
+    }
+  },
+  "orange": {
+    "100": {
+      "$type": "color",
+      "$value": "#ffedd5"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#fed7aa"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#fdba74"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#fb923c"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fff7ed"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#f97316"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#ea580c"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#c2410c"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#9a3412"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#7c2d12"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#431407"
+    }
+  },
+  "pink": {
+    "100": {
+      "$type": "color",
+      "$value": "#fce7f3"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#fbcfe8"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#f9a8d4"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#f472b6"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fdf2f8"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#ec4899"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#db2777"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#be185d"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#9d174d"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#831843"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#500724"
+    }
+  },
+  "purple": {
+    "100": {
+      "$type": "color",
+      "$value": "#dbd6f5"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#b7acec"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#9383e2"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#6f5ad8"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#edeafa"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#6751d6"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#3c27a5"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#2d1d7c"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#1e1353"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#0f0a29"
+    }
+  },
+  "red": {
+    "100": {
+      "$type": "color",
+      "$value": "#fee2e2"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#fecaca"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#fca5a5"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#f87171"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fef2f2"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#ef4444"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#dc2626"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#b91c1c"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#991b1b"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#7f1d1d"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#450a0a"
+    }
+  },
+  "rose": {
+    "100": {
+      "$type": "color",
+      "$value": "#ffe4e6"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#fecdd3"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#fda4af"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#fb7185"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fff1f2"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#f43f5e"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#e11d48"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#be123c"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#9f1239"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#881337"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#4c0519"
+    }
+  },
+  "sky": {
+    "100": {
+      "$type": "color",
+      "$value": "#e0f2fe"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#bae6fd"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#7dd3fc"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#38bdf8"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f0f9ff"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#0ea5e9"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#0284c7"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#0369a1"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#075985"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#0c4a6e"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#082f49"
+    }
+  },
+  "slate": {
+    "100": {
+      "$type": "color",
+      "$value": "#f1f5f9"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#e2e8f0"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#cbd5e1"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#94a3b8"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f8fafc"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#64748b"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#475569"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#334155"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#1e293b"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#0f172a"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#020617"
+    }
+  },
+  "stone": {
+    "100": {
+      "$type": "color",
+      "$value": "#f5f5f4"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#e7e5e4"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#d6d3d1"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#a8a29e"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fafaf9"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#78716c"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#57534e"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#44403c"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#292524"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#1c1917"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#0c0a09"
+    }
+  },
+  "teal": {
+    "100": {
+      "$type": "color",
+      "$value": "#ccfbf1"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#99f6e4"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#5eead4"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#2dd4bf"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f0fdfa"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#14b8a6"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#0d9488"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#0f766e"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#115e59"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#134e4a"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#042f2e"
+    }
+  },
+  "violet": {
+    "100": {
+      "$type": "color",
+      "$value": "#ede9fe"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#ddd6fe"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#c4b5fd"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#a78bfa"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#f5f3ff"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#8b5cf6"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#7c3aed"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#6d28d9"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#5b21b6"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#4c1d95"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#2e1065"
+    }
+  },
+  "yellow": {
+    "100": {
+      "$type": "color",
+      "$value": "#fef9c3"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#fef08a"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#fde047"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#facc15"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fefce8"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#eab308"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#ca8a04"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#a16207"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#854d0e"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#713f12"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#422006"
+    }
+  },
+  "zinc": {
+    "100": {
+      "$type": "color",
+      "$value": "#f4f4f5"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#e4e4e7"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#d4d4d8"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#a1a1aa"
+    },
+    "50": {
+      "$type": "color",
+      "$value": "#fafafa"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#71717a"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#52525b"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#3f3f46"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#27272a"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#18181b"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#09090b"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/tokens/token_radius_size.json b/packages/design-system/src/tokens/token_radius_size.json
new file mode 100644
index 00000000..b063c312
--- /dev/null
+++ b/packages/design-system/src/tokens/token_radius_size.json
@@ -0,0 +1,38 @@
+{
+  "rounded": {
+    "$type": "number",
+    "$value": 4
+  },
+  "rounded-2xl": {
+    "$type": "number",
+    "$value": 16
+  },
+  "rounded-3xl": {
+    "$type": "number",
+    "$value": 24
+  },
+  "rounded-full": {
+    "$type": "number",
+    "$value": 9999
+  },
+  "rounded-lg": {
+    "$type": "number",
+    "$value": 8
+  },
+  "rounded-md": {
+    "$type": "number",
+    "$value": 6
+  },
+  "rounded-none": {
+    "$type": "number",
+    "$value": 0
+  },
+  "rounded-sm": {
+    "$type": "number",
+    "$value": 2
+  },
+  "rounded-xl": {
+    "$type": "number",
+    "$value": 12
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/tokens/token_spacing_Desktop.json b/packages/design-system/src/tokens/token_spacing_Desktop.json
new file mode 100644
index 00000000..18f3b2d1
--- /dev/null
+++ b/packages/design-system/src/tokens/token_spacing_Desktop.json
@@ -0,0 +1,114 @@
+{
+  "spacing-1": {
+    "$type": "number",
+    "$value": 4
+  },
+  "spacing-10": {
+    "$type": "number",
+    "$value": 40
+  },
+  "spacing-11": {
+    "$type": "number",
+    "$value": 44
+  },
+  "spacing-12": {
+    "$type": "number",
+    "$value": 48
+  },
+  "spacing-16": {
+    "$type": "number",
+    "$value": 64
+  },
+  "spacing-2": {
+    "$type": "number",
+    "$value": 8
+  },
+  "spacing-20": {
+    "$type": "number",
+    "$value": 80
+  },
+  "spacing-24": {
+    "$type": "number",
+    "$value": 96
+  },
+  "spacing-28": {
+    "$type": "number",
+    "$value": 112
+  },
+  "spacing-3": {
+    "$type": "number",
+    "$value": 12
+  },
+  "spacing-32": {
+    "$type": "number",
+    "$value": 128
+  },
+  "spacing-36": {
+    "$type": "number",
+    "$value": 144
+  },
+  "spacing-4": {
+    "$type": "number",
+    "$value": 16
+  },
+  "spacing-40": {
+    "$type": "number",
+    "$value": 160
+  },
+  "spacing-44": {
+    "$type": "number",
+    "$value": 176
+  },
+  "spacing-48": {
+    "$type": "number",
+    "$value": 192
+  },
+  "spacing-5": {
+    "$type": "number",
+    "$value": 20
+  },
+  "spacing-52": {
+    "$type": "number",
+    "$value": 208
+  },
+  "spacing-56": {
+    "$type": "number",
+    "$value": 224
+  },
+  "spacing-6": {
+    "$type": "number",
+    "$value": 24
+  },
+  "spacing-60": {
+    "$type": "number",
+    "$value": 240
+  },
+  "spacing-64": {
+    "$type": "number",
+    "$value": 256
+  },
+  "spacing-7": {
+    "$type": "number",
+    "$value": 28
+  },
+  "spacing-72": {
+    "$type": "number",
+    "$value": 288
+  },
+  "spacing-8": {
+    "$type": "number",
+    "$value": 32
+  },
+  "spacing-80": {
+    "$type": "number",
+    "$value": 320
+  },
+  "spacing-9": {
+    "$type": "number",
+    "$value": 36
+  },
+  "spacing-96": {
+    "$type": "number",
+    "$value": 384
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/tokens/token_typography_Mode 1.json b/packages/design-system/src/tokens/token_typography_Mode 1.json
new file mode 100644
index 00000000..38024f2a
--- /dev/null
+++ b/packages/design-system/src/tokens/token_typography_Mode 1.json	
@@ -0,0 +1,200 @@
+{
+  "Text-black": {
+    "$type": "color",
+    "$value": "#1a1a20"
+  },
+  "font": {
+    "family": {
+      "Font Family": {
+        "$type": "string",
+        "$value": "Poppins"
+      }
+    },
+    "line height": {
+      "Display": {
+        "LG": {
+          "$type": "number",
+          "$value": 112
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 64
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 52
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 44
+        }
+      },
+      "Heading": {
+        "LG": {
+          "$type": "number",
+          "$value": 40
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 36
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 32
+        },
+        "XL": {
+          "$type": "number",
+          "$value": 44
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 28
+        },
+        "XXL": {
+          "$type": "number",
+          "$value": 52
+        }
+      },
+      "Labels": {
+        "LG": {
+          "$type": "number",
+          "$value": 24
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 20
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 16
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 16
+        }
+      },
+      "Paragraphs": {
+        "LG": {
+          "$type": "number",
+          "$value": 28
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 24
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 20
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 20
+        }
+      }
+    },
+    "size": {
+      "Display": {
+        "LG": {
+          "$type": "number",
+          "$value": 96
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 52
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 44
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 36
+        }
+      },
+      "Heading": {
+        "LG": {
+          "$type": "number",
+          "$value": 32
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 28
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 24
+        },
+        "XL": {
+          "$type": "number",
+          "$value": 36
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 20
+        },
+        "XXL": {
+          "$type": "number",
+          "$value": 40
+        }
+      },
+      "Labels": {
+        "LG": {
+          "$type": "number",
+          "$value": 18
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 16
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 14
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 12
+        }
+      },
+      "Paragraphs": {
+        "LG": {
+          "$type": "number",
+          "$value": 18
+        },
+        "MD": {
+          "$type": "number",
+          "$value": 16
+        },
+        "SM": {
+          "$type": "number",
+          "$value": 14
+        },
+        "XS": {
+          "$type": "number",
+          "$value": 12
+        },
+        "XXS": {
+          "$type": "number",
+          "$value": 10
+        }
+      }
+    },
+    "weight": {
+      "Bold": {
+        "$type": "string",
+        "$value": "Bold"
+      },
+      "Medium": {
+        "$type": "string",
+        "$value": "Medium"
+      },
+      "Regular": {
+        "$type": "string",
+        "$value": "Regular"
+      },
+      "light": {
+        "$type": "string",
+        "$value": "Light"
+      }
+    }
+  }
+}
\ No newline at end of file