diff --git a/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap b/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap
index 26cee6e93..bc588756a 100644
--- a/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap
+++ b/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap
@@ -13,6 +13,7 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
   "color": {
     "background": {
       "default": "var(--charcoal-color-background-default)",
+      "overlay": "var(--charcoal-color-background-overlay)",
       "secondary": "var(--charcoal-color-background-secondary)",
       "tertiary": "var(--charcoal-color-background-tertiary)",
     },
@@ -160,11 +161,6 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
       },
     },
     "text": {
-      "brand-premium": {
-        "default": "var(--charcoal-color-text-brand-premium-default)",
-        "hover": "var(--charcoal-color-text-brand-premium-hover)",
-        "press": "var(--charcoal-color-text-brand-premium-press)",
-      },
       "default": "var(--charcoal-color-text-default)",
       "disable": "var(--charcoal-color-text-disable)",
       "hover": "var(--charcoal-color-text-hover)",
@@ -272,6 +268,19 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
       "horizontal": "var(--charcoal-space-between-checkboxes-horizontal)",
       "vertical": "var(--charcoal-space-between-checkboxes-vertical)",
     },
+    "component": {
+      "0": "var(--charcoal-space-component-0)",
+      "10": "var(--charcoal-space-component-10)",
+      "20": "var(--charcoal-space-component-20)",
+      "25": "var(--charcoal-space-component-25)",
+      "30": "var(--charcoal-space-component-30)",
+      "40": "var(--charcoal-space-component-40)",
+      "50": "var(--charcoal-space-component-50)",
+    },
+    "gap": {
+      "gap-buttons": "var(--charcoal-space-gap-gap-buttons)",
+      "gap-form-items": "var(--charcoal-space-gap-gap-form-items)",
+    },
     "layout": {
       "0": "var(--charcoal-space-layout-0)",
       "10": "var(--charcoal-space-layout-10)",
@@ -286,6 +295,9 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
       "80": "var(--charcoal-space-layout-80)",
       "90": "var(--charcoal-space-layout-90)",
     },
+    "padding": {
+      "padding-card": "var(--charcoal-space-padding-padding-card)",
+    },
     "target": {
       "l": "var(--charcoal-space-target-l)",
       "m": "var(--charcoal-space-target-m)",
@@ -353,6 +365,7 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
   "color": {
     "background": {
       "default": "var(--charcoal-color-background-default)",
+      "overlay": "var(--charcoal-color-background-overlay)",
       "secondary": "var(--charcoal-color-background-secondary)",
       "tertiary": "var(--charcoal-color-background-tertiary)",
     },
@@ -500,11 +513,6 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
       },
     },
     "text": {
-      "brand-premium": {
-        "default": "var(--charcoal-color-text-brand-premium-default)",
-        "hover": "var(--charcoal-color-text-brand-premium-hover)",
-        "press": "var(--charcoal-color-text-brand-premium-press)",
-      },
       "default": "var(--charcoal-color-text-default)",
       "disable": "var(--charcoal-color-text-disable)",
       "hover": "var(--charcoal-color-text-hover)",
@@ -612,6 +620,19 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
       "horizontal": "var(--charcoal-space-between-checkboxes-horizontal)",
       "vertical": "var(--charcoal-space-between-checkboxes-vertical)",
     },
+    "component": {
+      "0": "var(--charcoal-space-component-0)",
+      "10": "var(--charcoal-space-component-10)",
+      "20": "var(--charcoal-space-component-20)",
+      "25": "var(--charcoal-space-component-25)",
+      "30": "var(--charcoal-space-component-30)",
+      "40": "var(--charcoal-space-component-40)",
+      "50": "var(--charcoal-space-component-50)",
+    },
+    "gap": {
+      "gap-buttons": "var(--charcoal-space-gap-gap-buttons)",
+      "gap-form-items": "var(--charcoal-space-gap-gap-form-items)",
+    },
     "layout": {
       "0": "var(--charcoal-space-layout-0)",
       "10": "var(--charcoal-space-layout-10)",
@@ -626,6 +647,9 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
       "80": "var(--charcoal-space-layout-80)",
       "90": "var(--charcoal-space-layout-90)",
     },
+    "padding": {
+      "padding-card": "var(--charcoal-space-padding-padding-card)",
+    },
     "target": {
       "l": "var(--charcoal-space-target-l)",
       "m": "var(--charcoal-space-target-m)",
@@ -684,36 +708,37 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
 {
   "border-width": {
     "focus": {
-      "1": "1",
-      "2": "2",
+      "1": "1px",
+      "2": "2px",
     },
-    "l": "2",
-    "m": "1",
+    "l": "2px",
+    "m": "1px",
   },
   "color": {
     "background": {
       "default": "rgba(31, 31, 31, 1)",
+      "overlay": "rgba(0, 0, 0, 0.32)",
       "secondary": "rgba(21, 21, 21, 1)",
       "tertiary": "rgba(6, 6, 6, 1)",
     },
     "border": {
-      "default": "rgba(228, 228, 228, 0.41)",
-      "disable": "rgba(228, 228, 228, 0.05)",
+      "default": "rgba(255, 255, 255, 0.36)",
+      "disable": "rgba(255, 255, 255, 0.045)",
       "focus": {
         "1": "rgba(114, 181, 245, 1)",
         "2": "rgba(39, 84, 126, 1)",
         "legacy": "rgba(0, 150, 250, 0.32)",
       },
-      "hover": "rgba(228, 228, 228, 0.505)",
+      "hover": "rgba(255, 255, 255, 0.44)",
       "hud": "rgba(31, 31, 31, 1)",
       "negative": "rgba(136, 54, 46, 1)",
-      "press": "rgba(228, 228, 228, 0.61)",
-      "secondary": "rgba(228, 228, 228, 0.1)",
+      "press": "rgba(255, 255, 255, 0.535)",
+      "secondary": "rgba(255, 255, 255, 0.09)",
       "selected": "rgba(8, 114, 190, 1)",
     },
     "container": {
       "default": "rgba(31, 31, 31, 1)",
-      "default-a": "rgba(228, 228, 228, 0)",
+      "default-a": "rgba(255, 255, 255, 0)",
       "disable": "rgba(51, 51, 51, 1)",
       "discovery": {
         "default": "rgba(197, 60, 51, 1)",
@@ -721,7 +746,7 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
         "press": "rgba(233, 114, 102, 1)",
       },
       "hover": "rgba(41, 41, 41, 1)",
-      "hover-a": "rgba(228, 228, 228, 0.05)",
+      "hover-a": "rgba(255, 255, 255, 0.045)",
       "hud": {
         "default": "rgba(228, 228, 228, 1)",
         "hover": "rgba(202, 202, 202, 1)",
@@ -738,14 +763,14 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
         "press": "rgba(151, 151, 151, 1)",
       },
       "notice": {
-        "default": "rgba(222, 185, 7, 1)",
-        "hover": "rgba(231, 199, 80, 1)",
-        "press": "rgba(252, 227, 145, 1)",
+        "default": "rgba(235, 178, 19, 1)",
+        "hover": "rgba(238, 195, 92, 1)",
+        "press": "rgba(252, 225, 167, 1)",
       },
       "on-img": {
-        "default": "rgba(31, 31, 31, 0.37)",
-        "hover": "rgba(31, 31, 31, 0.475)",
-        "press": "rgba(31, 31, 31, 0.635)",
+        "default": "rgba(0, 0, 0, 0.325)",
+        "hover": "rgba(0, 0, 0, 0.42)",
+        "press": "rgba(0, 0, 0, 0.555)",
       },
       "positive": {
         "default": "rgba(13, 129, 5, 1)",
@@ -753,7 +778,7 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
         "press": "rgba(86, 169, 79, 1)",
       },
       "press": "rgba(51, 51, 51, 1)",
-      "press-a": "rgba(228, 228, 228, 0.1)",
+      "press-a": "rgba(255, 255, 255, 0.09)",
       "primary": {
         "default": "rgba(8, 114, 190, 1)",
         "hover": "rgba(55, 136, 208, 1)",
@@ -761,21 +786,21 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
       },
       "secondary": {
         "default": "rgba(41, 41, 41, 1)",
-        "default-a": "rgba(228, 228, 228, 0.05)",
+        "default-a": "rgba(255, 255, 255, 0.045)",
         "hover": "rgba(51, 51, 51, 1)",
-        "hover-a": "rgba(228, 228, 228, 0.1)",
+        "hover-a": "rgba(255, 255, 255, 0.09)",
         "press": "rgba(81, 81, 81, 1)",
-        "press-a": "rgba(228, 228, 228, 0.255)",
+        "press-a": "rgba(255, 255, 255, 0.225)",
       },
-      "skeleton": "rgba(228, 228, 228, 0.05)",
+      "skeleton": "rgba(255, 255, 255, 0.045)",
       "subtle": "rgba(228, 228, 228, 0.02)",
       "tertiary": {
         "default": "rgba(51, 51, 51, 1)",
-        "default-a": "rgba(228, 228, 228, 0.1)",
+        "default-a": "rgba(255, 255, 255, 0.09)",
         "hover": "rgba(81, 81, 81, 1)",
-        "hover-a": "rgba(228, 228, 228, 0.255)",
+        "hover-a": "rgba(255, 255, 255, 0.225)",
         "press": "rgba(112, 112, 112, 1)",
-        "pressA": "rgba(228, 228, 228, 0.41)",
+        "pressA": "rgba(255, 255, 255, 0.36)",
       },
     },
     "icon": {
@@ -789,8 +814,8 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
       },
       "notice": {
         "default": "rgba(222, 167, 29, 1)",
-        "hover": "rgba(231, 199, 80, 1)",
-        "press": "rgba(252, 227, 145, 1)",
+        "hover": "rgba(238, 195, 92, 1)",
+        "press": "rgba(252, 225, 167, 1)",
       },
       "on-negative": {
         "default": "rgba(228, 228, 228, 1)",
@@ -840,11 +865,6 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
       },
     },
     "text": {
-      "brand-premium": {
-        "default": "rgba(253, 158, 22, 1)",
-        "hover": "rgba(243, 152, 21, 1)",
-        "press": "rgba(213, 133, 18, 1)",
-      },
       "default": "rgba(228, 228, 228, 1)",
       "disable": "rgba(130, 130, 130, 1)",
       "hover": "rgba(202, 202, 202, 1)",
@@ -860,8 +880,8 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
       },
       "notice": {
         "default": "rgba(222, 167, 29, 1)",
-        "hover": "rgba(231, 199, 80, 1)",
-        "press": "rgba(252, 227, 145, 1)",
+        "hover": "rgba(238, 195, 92, 1)",
+        "press": "rgba(252, 225, 167, 1)",
       },
       "on-discovery": {
         "default": "rgba(228, 228, 228, 1)",
@@ -927,94 +947,110 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
     },
   },
   "paragraph-width": {
-    "l": "672",
-    "l-compact": "588",
-    "l-cozy": "924",
-    "m": "448",
-    "m-compact": "392",
-    "m-cozy": "616",
-    "s": "320",
-    "s-compact": "280",
-    "s-cozy": "588",
+    "l": "672px",
+    "l-compact": "588px",
+    "l-cozy": "924px",
+    "m": "448px",
+    "m-compact": "392px",
+    "m-cozy": "616px",
+    "s": "320px",
+    "s-compact": "280px",
+    "s-cozy": "588px",
   },
   "radius": {
-    "0": "0",
-    "l": "12",
-    "m": "8",
-    "oval": "999999",
-    "s": "4",
-    "xl": "16",
-    "xs": "2",
-    "xxl": "24",
+    "0": "0px",
+    "l": "12px",
+    "m": "8px",
+    "oval": "999999px",
+    "s": "4px",
+    "xl": "16px",
+    "xs": "2px",
+    "xxl": "24px",
   },
   "space": {
     "between-checkboxes": {
-      "horizontal": "12",
-      "vertical": "0",
+      "horizontal": "12px",
+      "vertical": "0px",
+    },
+    "component": {
+      "0": "0px",
+      "10": "4px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+    },
+    "gap": {
+      "gap-buttons": "8px",
+      "gap-form-items": "24px",
     },
     "layout": {
-      "0": "0",
-      "10": "4",
-      "100": "440",
-      "20": "8",
-      "25": "12",
-      "30": "16",
-      "40": "24",
-      "50": "40",
-      "60": "64",
-      "70": "104",
-      "80": "168",
-      "90": "272",
+      "0": "0px",
+      "10": "4px",
+      "100": "440px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+      "60": "64px",
+      "70": "104px",
+      "80": "168px",
+      "90": "272px",
+    },
+    "padding": {
+      "padding-card": "24px",
     },
     "target": {
-      "l": "48",
-      "m": "40",
-      "s": "32",
-      "xs": "24",
+      "l": "48px",
+      "m": "40px",
+      "s": "32px",
+      "xs": "24px",
     },
   },
   "text": {
     "font-size": {
-      "body": "16",
+      "body": "16px",
       "caption": {
-        "m": "14",
-        "s": "12",
+        "m": "14px",
+        "s": "12px",
       },
       "heading": {
-        "l": "28",
-        "m": "25",
-        "s": "22",
-        "xl": "32",
-        "xs": "20",
-        "xxl": "36",
-        "xxs": "18",
-        "xxxl": "40",
-        "xxxs": "14",
-      },
-      "paragraph": "16",
+        "l": "28px",
+        "m": "25px",
+        "s": "22px",
+        "xl": "32px",
+        "xs": "20px",
+        "xxl": "36px",
+        "xxs": "18px",
+        "xxxl": "40px",
+        "xxxs": "14px",
+      },
+      "paragraph": "16px",
     },
     "font-weight": {
-      "bold": "700",
-      "regular": "400",
+      "bold": "700px",
+      "regular": "400px",
     },
     "line-height": {
-      "body": "24",
+      "body": "24px",
       "caption": {
-        "m": "20",
-        "s": "18",
+        "m": "20px",
+        "s": "18px",
       },
       "heading": {
-        "l": "36",
-        "m": "32",
-        "s": "28",
-        "xl": "40",
-        "xs": "28",
-        "xxl": "44",
-        "xxs": "24",
-        "xxxl": "52",
-        "xxxs": "20",
-      },
-      "paragraph": "28",
+        "l": "36px",
+        "m": "32px",
+        "s": "28px",
+        "xl": "40px",
+        "xs": "28px",
+        "xxl": "44px",
+        "xxs": "24px",
+        "xxxl": "52px",
+        "xxxs": "20px",
+      },
+      "paragraph": "28px",
     },
   },
 }
@@ -1024,36 +1060,37 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
 {
   "border-width": {
     "focus": {
-      "1": "1",
-      "2": "2",
+      "1": "1px",
+      "2": "2px",
     },
-    "l": "2",
-    "m": "1",
+    "l": "2px",
+    "m": "1px",
   },
   "color": {
     "background": {
       "default": "rgba(255, 255, 255, 1)",
+      "overlay": "rgba(0, 0, 0, 0.325)",
       "secondary": "rgba(243, 243, 243, 1)",
       "tertiary": "rgba(232, 232, 232, 1)",
     },
     "border": {
-      "default": "rgba(31, 31, 31, 0.475)",
-      "disable": "rgba(31, 31, 31, 0.102)",
+      "default": "rgba(0, 0, 0, 0.42)",
+      "disable": "rgba(0, 0, 0, 0.09)",
       "focus": {
         "1": "rgba(31, 117, 188, 1)",
         "2": "rgba(188, 222, 252, 1)",
         "legacy": "rgba(0, 150, 250, 0.32)",
       },
-      "hover": "rgba(31, 31, 31, 0.635)",
+      "hover": "rgba(0, 0, 0, 0.555)",
       "hud": "rgba(255, 255, 255, 1)",
       "negative": "rgba(253, 206, 199, 1)",
-      "press": "rgba(31, 31, 31, 0.775)",
-      "secondary": "rgba(31, 31, 31, 0.102)",
+      "press": "rgba(0, 0, 0, 0.683)",
+      "secondary": "rgba(0, 0, 0, 0.09)",
       "selected": "rgba(0, 150, 250, 1)",
     },
     "container": {
       "default": "rgba(255, 255, 255, 1)",
-      "default-a": "rgba(31, 31, 31, 0)",
+      "default-a": "rgba(0, 0, 0, 0)",
       "disable": "rgba(232, 232, 232, 1)",
       "discovery": {
         "default": "rgba(253, 91, 78, 1)",
@@ -1061,7 +1098,7 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
         "press": "rgba(147, 33, 28, 1)",
       },
       "hover": "rgba(243, 243, 243, 1)",
-      "hover-a": "rgba(31, 31, 31, 0.055)",
+      "hover-a": "rgba(0, 0, 0, 0.047)",
       "hud": {
         "default": "rgba(56, 56, 56, 1)",
         "hover": "rgba(81, 81, 81, 1)",
@@ -1083,9 +1120,9 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
         "press": "rgba(231, 157, 20, 1)",
       },
       "on-img": {
-        "default": "rgba(31, 31, 31, 0.37)",
-        "hover": "rgba(31, 31, 31, 0.475)",
-        "press": "rgba(31, 31, 31, 0.635)",
+        "default": "rgba(0, 0, 0, 0.325)",
+        "hover": "rgba(0, 0, 0, 0.42)",
+        "press": "rgba(0, 0, 0, 0.555)",
       },
       "positive": {
         "default": "rgba(37, 170, 28, 1)",
@@ -1093,7 +1130,7 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
         "press": "rgba(4, 93, 0, 1)",
       },
       "press": "rgba(232, 232, 232, 1)",
-      "press-a": "rgba(31, 31, 31, 0.102)",
+      "press-a": "rgba(0, 0, 0, 0.09)",
       "primary": {
         "default": "rgba(0, 150, 250, 1)",
         "hover": "rgba(31, 117, 188, 1)",
@@ -1101,21 +1138,21 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
       },
       "secondary": {
         "default": "rgba(243, 243, 243, 1)",
-        "default-a": "rgba(31, 31, 31, 0.055)",
+        "default-a": "rgba(0, 0, 0, 0.047)",
         "hover": "rgba(232, 232, 232, 1)",
-        "hover-a": "rgba(31, 31, 31, 0.102)",
+        "hover-a": "rgba(0, 0, 0, 0.09)",
         "press": "rgba(217, 217, 217, 1)",
-        "press-a": "rgba(31, 31, 31, 0.17)",
+        "press-a": "rgba(0, 0, 0, 0.15)",
       },
-      "skeleton": "rgba(31, 31, 31, 0.055)",
+      "skeleton": "rgba(0, 0, 0, 0.047)",
       "subtle": "rgba(31, 31, 31, 0.02)",
       "tertiary": {
         "default": "rgba(232, 232, 232, 1)",
-        "default-a": "rgba(31, 31, 31, 0.102)",
+        "default-a": "rgba(0, 0, 0, 0.09)",
         "hover": "rgba(217, 217, 217, 1)",
-        "hover-a": "rgba(31, 31, 31, 0.17)",
+        "hover-a": "rgba(0, 0, 0, 0.15)",
         "press": "rgba(194, 194, 194, 1)",
-        "pressA": "rgba(31, 31, 31, 0.27)",
+        "pressA": "rgba(0, 0, 0, 0.24)",
       },
     },
     "icon": {
@@ -1180,11 +1217,6 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
       },
     },
     "text": {
-      "brand-premium": {
-        "default": "rgba(253, 158, 22, 1)",
-        "hover": "rgba(243, 152, 21, 1)",
-        "press": "rgba(213, 133, 18, 1)",
-      },
       "default": "rgba(31, 31, 31, 1)",
       "disable": "rgba(194, 194, 194, 1)",
       "hover": "rgba(56, 56, 56, 1)",
@@ -1267,94 +1299,110 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
     },
   },
   "paragraph-width": {
-    "l": "672",
-    "l-compact": "588",
-    "l-cozy": "924",
-    "m": "448",
-    "m-compact": "392",
-    "m-cozy": "616",
-    "s": "320",
-    "s-compact": "280",
-    "s-cozy": "588",
+    "l": "672px",
+    "l-compact": "588px",
+    "l-cozy": "924px",
+    "m": "448px",
+    "m-compact": "392px",
+    "m-cozy": "616px",
+    "s": "320px",
+    "s-compact": "280px",
+    "s-cozy": "588px",
   },
   "radius": {
-    "0": "0",
-    "l": "12",
-    "m": "8",
-    "oval": "999999",
-    "s": "4",
-    "xl": "16",
-    "xs": "2",
-    "xxl": "24",
+    "0": "0px",
+    "l": "12px",
+    "m": "8px",
+    "oval": "999999px",
+    "s": "4px",
+    "xl": "16px",
+    "xs": "2px",
+    "xxl": "24px",
   },
   "space": {
     "between-checkboxes": {
-      "horizontal": "12",
-      "vertical": "0",
+      "horizontal": "12px",
+      "vertical": "0px",
+    },
+    "component": {
+      "0": "0px",
+      "10": "4px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+    },
+    "gap": {
+      "gap-buttons": "8px",
+      "gap-form-items": "24px",
     },
     "layout": {
-      "0": "0",
-      "10": "4",
-      "100": "440",
-      "20": "8",
-      "25": "12",
-      "30": "16",
-      "40": "24",
-      "50": "40",
-      "60": "64",
-      "70": "104",
-      "80": "168",
-      "90": "272",
+      "0": "0px",
+      "10": "4px",
+      "100": "440px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+      "60": "64px",
+      "70": "104px",
+      "80": "168px",
+      "90": "272px",
+    },
+    "padding": {
+      "padding-card": "24px",
     },
     "target": {
-      "l": "48",
-      "m": "40",
-      "s": "32",
-      "xs": "24",
+      "l": "48px",
+      "m": "40px",
+      "s": "32px",
+      "xs": "24px",
     },
   },
   "text": {
     "font-size": {
-      "body": "16",
+      "body": "16px",
       "caption": {
-        "m": "14",
-        "s": "12",
+        "m": "14px",
+        "s": "12px",
       },
       "heading": {
-        "l": "28",
-        "m": "25",
-        "s": "22",
-        "xl": "32",
-        "xs": "20",
-        "xxl": "36",
-        "xxs": "18",
-        "xxxl": "40",
-        "xxxs": "14",
-      },
-      "paragraph": "16",
+        "l": "28px",
+        "m": "25px",
+        "s": "22px",
+        "xl": "32px",
+        "xs": "20px",
+        "xxl": "36px",
+        "xxs": "18px",
+        "xxxl": "40px",
+        "xxxs": "14px",
+      },
+      "paragraph": "16px",
     },
     "font-weight": {
-      "bold": "700",
-      "regular": "400",
+      "bold": "700px",
+      "regular": "400px",
     },
     "line-height": {
-      "body": "24",
+      "body": "24px",
       "caption": {
-        "m": "20",
-        "s": "18",
+        "m": "20px",
+        "s": "18px",
       },
       "heading": {
-        "l": "36",
-        "m": "32",
-        "s": "28",
-        "xl": "40",
-        "xs": "28",
-        "xxl": "44",
-        "xxs": "24",
-        "xxxl": "52",
-        "xxxs": "20",
-      },
-      "paragraph": "28",
+        "l": "36px",
+        "m": "32px",
+        "s": "28px",
+        "xl": "40px",
+        "xs": "28px",
+        "xxl": "44px",
+        "xxs": "24px",
+        "xxxl": "52px",
+        "xxxs": "20px",
+      },
+      "paragraph": "28px",
     },
   },
 }
diff --git a/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap b/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap
index 0f9cf8453..fc62ae08f 100644
--- a/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap
+++ b/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap
@@ -4,36 +4,37 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
 {
   "borderWidth": {
     "focus": {
-      "1": "1",
-      "2": "2",
+      "1": "1px",
+      "2": "2px",
     },
-    "l": "2",
-    "m": "1",
+    "l": "2px",
+    "m": "1px",
   },
   "color": {
     "background": {
       "default": "rgba(31, 31, 31, 1)",
+      "overlay": "rgba(0, 0, 0, 0.32)",
       "secondary": "rgba(21, 21, 21, 1)",
       "tertiary": "rgba(6, 6, 6, 1)",
     },
     "border": {
-      "default": "rgba(228, 228, 228, 0.41)",
-      "disable": "rgba(228, 228, 228, 0.05)",
+      "default": "rgba(255, 255, 255, 0.36)",
+      "disable": "rgba(255, 255, 255, 0.045)",
       "focus": {
         "1": "rgba(114, 181, 245, 1)",
         "2": "rgba(39, 84, 126, 1)",
         "legacy": "rgba(0, 150, 250, 0.32)",
       },
-      "hover": "rgba(228, 228, 228, 0.505)",
+      "hover": "rgba(255, 255, 255, 0.44)",
       "hud": "rgba(31, 31, 31, 1)",
       "negative": "rgba(136, 54, 46, 1)",
-      "press": "rgba(228, 228, 228, 0.61)",
-      "secondary": "rgba(228, 228, 228, 0.1)",
+      "press": "rgba(255, 255, 255, 0.535)",
+      "secondary": "rgba(255, 255, 255, 0.09)",
       "selected": "rgba(8, 114, 190, 1)",
     },
     "container": {
       "default": "rgba(31, 31, 31, 1)",
-      "defaultA": "rgba(228, 228, 228, 0)",
+      "defaultA": "rgba(255, 255, 255, 0)",
       "disable": "rgba(51, 51, 51, 1)",
       "discovery": {
         "default": "rgba(197, 60, 51, 1)",
@@ -41,7 +42,7 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
         "press": "rgba(233, 114, 102, 1)",
       },
       "hover": "rgba(41, 41, 41, 1)",
-      "hoverA": "rgba(228, 228, 228, 0.05)",
+      "hoverA": "rgba(255, 255, 255, 0.045)",
       "hud": {
         "default": "rgba(228, 228, 228, 1)",
         "hover": "rgba(202, 202, 202, 1)",
@@ -58,14 +59,14 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
         "press": "rgba(151, 151, 151, 1)",
       },
       "notice": {
-        "default": "rgba(222, 185, 7, 1)",
-        "hover": "rgba(231, 199, 80, 1)",
-        "press": "rgba(252, 227, 145, 1)",
+        "default": "rgba(235, 178, 19, 1)",
+        "hover": "rgba(238, 195, 92, 1)",
+        "press": "rgba(252, 225, 167, 1)",
       },
       "onImg": {
-        "default": "rgba(31, 31, 31, 0.37)",
-        "hover": "rgba(31, 31, 31, 0.475)",
-        "press": "rgba(31, 31, 31, 0.635)",
+        "default": "rgba(0, 0, 0, 0.325)",
+        "hover": "rgba(0, 0, 0, 0.42)",
+        "press": "rgba(0, 0, 0, 0.555)",
       },
       "positive": {
         "default": "rgba(13, 129, 5, 1)",
@@ -73,7 +74,7 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
         "press": "rgba(86, 169, 79, 1)",
       },
       "press": "rgba(51, 51, 51, 1)",
-      "pressA": "rgba(228, 228, 228, 0.1)",
+      "pressA": "rgba(255, 255, 255, 0.09)",
       "primary": {
         "default": "rgba(8, 114, 190, 1)",
         "hover": "rgba(55, 136, 208, 1)",
@@ -81,21 +82,21 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
       },
       "secondary": {
         "default": "rgba(41, 41, 41, 1)",
-        "defaultA": "rgba(228, 228, 228, 0.05)",
+        "defaultA": "rgba(255, 255, 255, 0.045)",
         "hover": "rgba(51, 51, 51, 1)",
-        "hoverA": "rgba(228, 228, 228, 0.1)",
+        "hoverA": "rgba(255, 255, 255, 0.09)",
         "press": "rgba(81, 81, 81, 1)",
-        "pressA": "rgba(228, 228, 228, 0.255)",
+        "pressA": "rgba(255, 255, 255, 0.225)",
       },
-      "skeleton": "rgba(228, 228, 228, 0.05)",
+      "skeleton": "rgba(255, 255, 255, 0.045)",
       "subtle": "rgba(228, 228, 228, 0.02)",
       "tertiary": {
         "default": "rgba(51, 51, 51, 1)",
-        "defaultA": "rgba(228, 228, 228, 0.1)",
+        "defaultA": "rgba(255, 255, 255, 0.09)",
         "hover": "rgba(81, 81, 81, 1)",
-        "hoverA": "rgba(228, 228, 228, 0.255)",
+        "hoverA": "rgba(255, 255, 255, 0.225)",
         "press": "rgba(112, 112, 112, 1)",
-        "pressA": "rgba(228, 228, 228, 0.41)",
+        "pressA": "rgba(255, 255, 255, 0.36)",
       },
     },
     "icon": {
@@ -109,8 +110,8 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
       },
       "notice": {
         "default": "rgba(222, 167, 29, 1)",
-        "hover": "rgba(231, 199, 80, 1)",
-        "press": "rgba(252, 227, 145, 1)",
+        "hover": "rgba(238, 195, 92, 1)",
+        "press": "rgba(252, 225, 167, 1)",
       },
       "onNegative": {
         "default": "rgba(228, 228, 228, 1)",
@@ -160,11 +161,6 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
       },
     },
     "text": {
-      "brandPremium": {
-        "default": "rgba(253, 158, 22, 1)",
-        "hover": "rgba(243, 152, 21, 1)",
-        "press": "rgba(213, 133, 18, 1)",
-      },
       "default": "rgba(228, 228, 228, 1)",
       "disable": "rgba(130, 130, 130, 1)",
       "hover": "rgba(202, 202, 202, 1)",
@@ -180,8 +176,8 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
       },
       "notice": {
         "default": "rgba(222, 167, 29, 1)",
-        "hover": "rgba(231, 199, 80, 1)",
-        "press": "rgba(252, 227, 145, 1)",
+        "hover": "rgba(238, 195, 92, 1)",
+        "press": "rgba(252, 225, 167, 1)",
       },
       "onDiscovery": {
         "default": "rgba(228, 228, 228, 1)",
@@ -247,94 +243,110 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
     },
   },
   "paragraphWidth": {
-    "l": "672",
-    "lCompact": "588",
-    "lCozy": "924",
-    "m": "448",
-    "mCompact": "392",
-    "mCozy": "616",
-    "s": "320",
-    "sCompact": "280",
-    "sCozy": "588",
+    "l": "672px",
+    "lCompact": "588px",
+    "lCozy": "924px",
+    "m": "448px",
+    "mCompact": "392px",
+    "mCozy": "616px",
+    "s": "320px",
+    "sCompact": "280px",
+    "sCozy": "588px",
   },
   "radius": {
-    "0": "0",
-    "l": "12",
-    "m": "8",
-    "oval": "999999",
-    "s": "4",
-    "xl": "16",
-    "xs": "2",
-    "xxl": "24",
+    "0": "0px",
+    "l": "12px",
+    "m": "8px",
+    "oval": "999999px",
+    "s": "4px",
+    "xl": "16px",
+    "xs": "2px",
+    "xxl": "24px",
   },
   "space": {
     "betweenCheckboxes": {
-      "horizontal": "12",
-      "vertical": "0",
+      "horizontal": "12px",
+      "vertical": "0px",
+    },
+    "component": {
+      "0": "0px",
+      "10": "4px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+    },
+    "gap": {
+      "gapButtons": "8px",
+      "gapFormItems": "24px",
     },
     "layout": {
-      "0": "0",
-      "10": "4",
-      "100": "440",
-      "20": "8",
-      "25": "12",
-      "30": "16",
-      "40": "24",
-      "50": "40",
-      "60": "64",
-      "70": "104",
-      "80": "168",
-      "90": "272",
+      "0": "0px",
+      "10": "4px",
+      "100": "440px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+      "60": "64px",
+      "70": "104px",
+      "80": "168px",
+      "90": "272px",
+    },
+    "padding": {
+      "paddingCard": "24px",
     },
     "target": {
-      "l": "48",
-      "m": "40",
-      "s": "32",
-      "xs": "24",
+      "l": "48px",
+      "m": "40px",
+      "s": "32px",
+      "xs": "24px",
     },
   },
   "text": {
     "fontSize": {
-      "body": "16",
+      "body": "16px",
       "caption": {
-        "m": "14",
-        "s": "12",
+        "m": "14px",
+        "s": "12px",
       },
       "heading": {
-        "l": "28",
-        "m": "25",
-        "s": "22",
-        "xl": "32",
-        "xs": "20",
-        "xxl": "36",
-        "xxs": "18",
-        "xxxl": "40",
-        "xxxs": "14",
-      },
-      "paragraph": "16",
+        "l": "28px",
+        "m": "25px",
+        "s": "22px",
+        "xl": "32px",
+        "xs": "20px",
+        "xxl": "36px",
+        "xxs": "18px",
+        "xxxl": "40px",
+        "xxxs": "14px",
+      },
+      "paragraph": "16px",
     },
     "fontWeight": {
-      "bold": "700",
-      "regular": "400",
+      "bold": "700px",
+      "regular": "400px",
     },
     "lineHeight": {
-      "body": "24",
+      "body": "24px",
       "caption": {
-        "m": "20",
-        "s": "18",
+        "m": "20px",
+        "s": "18px",
       },
       "heading": {
-        "l": "36",
-        "m": "32",
-        "s": "28",
-        "xl": "40",
-        "xs": "28",
-        "xxl": "44",
-        "xxs": "24",
-        "xxxl": "52",
-        "xxxs": "20",
-      },
-      "paragraph": "28",
+        "l": "36px",
+        "m": "32px",
+        "s": "28px",
+        "xl": "40px",
+        "xs": "28px",
+        "xxl": "44px",
+        "xxs": "24px",
+        "xxxl": "52px",
+        "xxxs": "20px",
+      },
+      "paragraph": "28px",
     },
   },
 }
@@ -344,36 +356,37 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
 {
   "borderWidth": {
     "focus": {
-      "1": "1",
-      "2": "2",
+      "1": "1px",
+      "2": "2px",
     },
-    "l": "2",
-    "m": "1",
+    "l": "2px",
+    "m": "1px",
   },
   "color": {
     "background": {
       "default": "rgba(255, 255, 255, 1)",
+      "overlay": "rgba(0, 0, 0, 0.325)",
       "secondary": "rgba(243, 243, 243, 1)",
       "tertiary": "rgba(232, 232, 232, 1)",
     },
     "border": {
-      "default": "rgba(31, 31, 31, 0.475)",
-      "disable": "rgba(31, 31, 31, 0.102)",
+      "default": "rgba(0, 0, 0, 0.42)",
+      "disable": "rgba(0, 0, 0, 0.09)",
       "focus": {
         "1": "rgba(31, 117, 188, 1)",
         "2": "rgba(188, 222, 252, 1)",
         "legacy": "rgba(0, 150, 250, 0.32)",
       },
-      "hover": "rgba(31, 31, 31, 0.635)",
+      "hover": "rgba(0, 0, 0, 0.555)",
       "hud": "rgba(255, 255, 255, 1)",
       "negative": "rgba(253, 206, 199, 1)",
-      "press": "rgba(31, 31, 31, 0.775)",
-      "secondary": "rgba(31, 31, 31, 0.102)",
+      "press": "rgba(0, 0, 0, 0.683)",
+      "secondary": "rgba(0, 0, 0, 0.09)",
       "selected": "rgba(0, 150, 250, 1)",
     },
     "container": {
       "default": "rgba(255, 255, 255, 1)",
-      "defaultA": "rgba(31, 31, 31, 0)",
+      "defaultA": "rgba(0, 0, 0, 0)",
       "disable": "rgba(232, 232, 232, 1)",
       "discovery": {
         "default": "rgba(253, 91, 78, 1)",
@@ -381,7 +394,7 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
         "press": "rgba(147, 33, 28, 1)",
       },
       "hover": "rgba(243, 243, 243, 1)",
-      "hoverA": "rgba(31, 31, 31, 0.055)",
+      "hoverA": "rgba(0, 0, 0, 0.047)",
       "hud": {
         "default": "rgba(56, 56, 56, 1)",
         "hover": "rgba(81, 81, 81, 1)",
@@ -403,9 +416,9 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
         "press": "rgba(231, 157, 20, 1)",
       },
       "onImg": {
-        "default": "rgba(31, 31, 31, 0.37)",
-        "hover": "rgba(31, 31, 31, 0.475)",
-        "press": "rgba(31, 31, 31, 0.635)",
+        "default": "rgba(0, 0, 0, 0.325)",
+        "hover": "rgba(0, 0, 0, 0.42)",
+        "press": "rgba(0, 0, 0, 0.555)",
       },
       "positive": {
         "default": "rgba(37, 170, 28, 1)",
@@ -413,7 +426,7 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
         "press": "rgba(4, 93, 0, 1)",
       },
       "press": "rgba(232, 232, 232, 1)",
-      "pressA": "rgba(31, 31, 31, 0.102)",
+      "pressA": "rgba(0, 0, 0, 0.09)",
       "primary": {
         "default": "rgba(0, 150, 250, 1)",
         "hover": "rgba(31, 117, 188, 1)",
@@ -421,21 +434,21 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
       },
       "secondary": {
         "default": "rgba(243, 243, 243, 1)",
-        "defaultA": "rgba(31, 31, 31, 0.055)",
+        "defaultA": "rgba(0, 0, 0, 0.047)",
         "hover": "rgba(232, 232, 232, 1)",
-        "hoverA": "rgba(31, 31, 31, 0.102)",
+        "hoverA": "rgba(0, 0, 0, 0.09)",
         "press": "rgba(217, 217, 217, 1)",
-        "pressA": "rgba(31, 31, 31, 0.17)",
+        "pressA": "rgba(0, 0, 0, 0.15)",
       },
-      "skeleton": "rgba(31, 31, 31, 0.055)",
+      "skeleton": "rgba(0, 0, 0, 0.047)",
       "subtle": "rgba(31, 31, 31, 0.02)",
       "tertiary": {
         "default": "rgba(232, 232, 232, 1)",
-        "defaultA": "rgba(31, 31, 31, 0.102)",
+        "defaultA": "rgba(0, 0, 0, 0.09)",
         "hover": "rgba(217, 217, 217, 1)",
-        "hoverA": "rgba(31, 31, 31, 0.17)",
+        "hoverA": "rgba(0, 0, 0, 0.15)",
         "press": "rgba(194, 194, 194, 1)",
-        "pressA": "rgba(31, 31, 31, 0.27)",
+        "pressA": "rgba(0, 0, 0, 0.24)",
       },
     },
     "icon": {
@@ -500,11 +513,6 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
       },
     },
     "text": {
-      "brandPremium": {
-        "default": "rgba(253, 158, 22, 1)",
-        "hover": "rgba(243, 152, 21, 1)",
-        "press": "rgba(213, 133, 18, 1)",
-      },
       "default": "rgba(31, 31, 31, 1)",
       "disable": "rgba(194, 194, 194, 1)",
       "hover": "rgba(56, 56, 56, 1)",
@@ -587,94 +595,110 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
     },
   },
   "paragraphWidth": {
-    "l": "672",
-    "lCompact": "588",
-    "lCozy": "924",
-    "m": "448",
-    "mCompact": "392",
-    "mCozy": "616",
-    "s": "320",
-    "sCompact": "280",
-    "sCozy": "588",
+    "l": "672px",
+    "lCompact": "588px",
+    "lCozy": "924px",
+    "m": "448px",
+    "mCompact": "392px",
+    "mCozy": "616px",
+    "s": "320px",
+    "sCompact": "280px",
+    "sCozy": "588px",
   },
   "radius": {
-    "0": "0",
-    "l": "12",
-    "m": "8",
-    "oval": "999999",
-    "s": "4",
-    "xl": "16",
-    "xs": "2",
-    "xxl": "24",
+    "0": "0px",
+    "l": "12px",
+    "m": "8px",
+    "oval": "999999px",
+    "s": "4px",
+    "xl": "16px",
+    "xs": "2px",
+    "xxl": "24px",
   },
   "space": {
     "betweenCheckboxes": {
-      "horizontal": "12",
-      "vertical": "0",
+      "horizontal": "12px",
+      "vertical": "0px",
+    },
+    "component": {
+      "0": "0px",
+      "10": "4px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+    },
+    "gap": {
+      "gapButtons": "8px",
+      "gapFormItems": "24px",
     },
     "layout": {
-      "0": "0",
-      "10": "4",
-      "100": "440",
-      "20": "8",
-      "25": "12",
-      "30": "16",
-      "40": "24",
-      "50": "40",
-      "60": "64",
-      "70": "104",
-      "80": "168",
-      "90": "272",
+      "0": "0px",
+      "10": "4px",
+      "100": "440px",
+      "20": "8px",
+      "25": "12px",
+      "30": "16px",
+      "40": "24px",
+      "50": "40px",
+      "60": "64px",
+      "70": "104px",
+      "80": "168px",
+      "90": "272px",
+    },
+    "padding": {
+      "paddingCard": "24px",
     },
     "target": {
-      "l": "48",
-      "m": "40",
-      "s": "32",
-      "xs": "24",
+      "l": "48px",
+      "m": "40px",
+      "s": "32px",
+      "xs": "24px",
     },
   },
   "text": {
     "fontSize": {
-      "body": "16",
+      "body": "16px",
       "caption": {
-        "m": "14",
-        "s": "12",
+        "m": "14px",
+        "s": "12px",
       },
       "heading": {
-        "l": "28",
-        "m": "25",
-        "s": "22",
-        "xl": "32",
-        "xs": "20",
-        "xxl": "36",
-        "xxs": "18",
-        "xxxl": "40",
-        "xxxs": "14",
-      },
-      "paragraph": "16",
+        "l": "28px",
+        "m": "25px",
+        "s": "22px",
+        "xl": "32px",
+        "xs": "20px",
+        "xxl": "36px",
+        "xxs": "18px",
+        "xxxl": "40px",
+        "xxxs": "14px",
+      },
+      "paragraph": "16px",
     },
     "fontWeight": {
-      "bold": "700",
-      "regular": "400",
+      "bold": "700px",
+      "regular": "400px",
     },
     "lineHeight": {
-      "body": "24",
+      "body": "24px",
       "caption": {
-        "m": "20",
-        "s": "18",
+        "m": "20px",
+        "s": "18px",
       },
       "heading": {
-        "l": "36",
-        "m": "32",
-        "s": "28",
-        "xl": "40",
-        "xs": "28",
-        "xxl": "44",
-        "xxs": "24",
-        "xxxl": "52",
-        "xxxs": "20",
-      },
-      "paragraph": "28",
+        "l": "36px",
+        "m": "32px",
+        "s": "28px",
+        "xl": "40px",
+        "xs": "28px",
+        "xxl": "44px",
+        "xxs": "24px",
+        "xxxl": "52px",
+        "xxxs": "20px",
+      },
+      "paragraph": "28px",
     },
   },
 }