diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css
index e3c94ae51..bb6a34db7 100644
--- a/packages/theme/src/css/_variables_dark.css
+++ b/packages/theme/src/css/_variables_dark.css
@@ -1,77 +1,82 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Dec 2024 10:10:08 GMT
+ * Generated on Fri, 13 Dec 2024 10:18:27 GMT
  */
 
 :root[data-theme='dark'] {
-  --charcoal-border-width-l: 2;
-  --charcoal-border-width-m: 1;
-  --charcoal-radius-oval: 999999;
-  --charcoal-paragraph-width-l-cozy: 924;
-  --charcoal-paragraph-width-m-cozy: 616;
-  --charcoal-paragraph-width-s-cozy: 588;
-  --charcoal-paragraph-width-l-compact: 588;
-  --charcoal-paragraph-width-m-compact: 392;
-  --charcoal-paragraph-width-s-compact: 280;
-  --charcoal-paragraph-width-l: 672;
-  --charcoal-paragraph-width-m: 448;
-  --charcoal-paragraph-width-s: 320;
+  --charcoal-border-width-l: 2px;
+  --charcoal-border-width-m: 1px;
+  --charcoal-paragraph-width-l-cozy: 924px;
+  --charcoal-paragraph-width-m-cozy: 616px;
+  --charcoal-paragraph-width-s-cozy: 588px;
+  --charcoal-paragraph-width-l-compact: 588px;
+  --charcoal-paragraph-width-m-compact: 392px;
+  --charcoal-paragraph-width-s-compact: 280px;
+  --charcoal-paragraph-width-l: 672px;
+  --charcoal-paragraph-width-m: 448px;
+  --charcoal-paragraph-width-s: 320px;
+  --charcoal-radius-oval: 999999px;
+  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
+  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
+  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
+  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
+  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-text-font-family-sans: Sarasa UI J;
-  --charcoal-text-line-height-100: 72;
-  --charcoal-text-line-height-90: 64;
-  --charcoal-text-line-height-80: 56;
-  --charcoal-text-line-height-70: 52;
-  --charcoal-text-line-height-60: 44;
-  --charcoal-text-line-height-50: 40;
-  --charcoal-text-line-height-40: 36;
-  --charcoal-text-line-height-30: 32;
-  --charcoal-text-line-height-20: 28;
-  --charcoal-text-line-height-10: 24;
-  --charcoal-text-line-height-5: 20;
-  --charcoal-text-line-height-1: 18;
-  --charcoal-text-font-weight-70: 700;
-  --charcoal-text-font-weight-40: 400;
-  --charcoal-text-line-height-0: 16;
-  --charcoal-text-font-size-120: 60;
-  --charcoal-text-font-size-110: 50;
-  --charcoal-text-font-size-100: 45;
-  --charcoal-text-font-size-90: 40;
-  --charcoal-text-font-size-80: 36;
-  --charcoal-text-font-size-70: 32;
-  --charcoal-text-font-size-60: 28;
-  --charcoal-text-font-size-50: 25;
-  --charcoal-text-font-size-40: 22;
-  --charcoal-text-font-size-30: 20;
-  --charcoal-text-font-size-20: 18;
-  --charcoal-text-font-size-10: 16;
-  --charcoal-text-font-size-5: 14;
-  --charcoal-text-font-size-1: 12;
-  --charcoal-text-font-size-0: 11;
-  --charcoal-space-target-l: 48;
-  --charcoal-space-target-m: 40;
-  --charcoal-space-target-s: 32;
-  --charcoal-space-target-xs: 24;
-  --charcoal-space-999: 999999;
-  --charcoal-space-100: 440;
-  --charcoal-space-90: 272;
-  --charcoal-space-80: 168;
-  --charcoal-space-70: 104;
-  --charcoal-space-66: 96;
-  --charcoal-space-63: 80;
-  --charcoal-space-60: 64;
-  --charcoal-space-55: 48;
-  --charcoal-space-50: 40;
-  --charcoal-space-46: 32;
-  --charcoal-space-43: 28;
-  --charcoal-space-40: 24;
-  --charcoal-space-35: 20;
-  --charcoal-space-30: 16;
-  --charcoal-space-25: 12;
-  --charcoal-space-20: 8;
-  --charcoal-space-15: 6;
-  --charcoal-space-10: 4;
-  --charcoal-space-1: 2;
-  --charcoal-space-0: 0;
+  --charcoal-text-line-height-100: 72px;
+  --charcoal-text-line-height-90: 64px;
+  --charcoal-text-line-height-80: 56px;
+  --charcoal-text-line-height-70: 52px;
+  --charcoal-text-line-height-60: 44px;
+  --charcoal-text-line-height-50: 40px;
+  --charcoal-text-line-height-40: 36px;
+  --charcoal-text-line-height-30: 32px;
+  --charcoal-text-line-height-20: 28px;
+  --charcoal-text-line-height-10: 24px;
+  --charcoal-text-line-height-5: 20px;
+  --charcoal-text-line-height-1: 18px;
+  --charcoal-text-font-weight-70: 700px;
+  --charcoal-text-font-weight-40: 400px;
+  --charcoal-text-line-height-0: 16px;
+  --charcoal-text-font-size-120: 60px;
+  --charcoal-text-font-size-110: 50px;
+  --charcoal-text-font-size-100: 45px;
+  --charcoal-text-font-size-90: 40px;
+  --charcoal-text-font-size-80: 36px;
+  --charcoal-text-font-size-70: 32px;
+  --charcoal-text-font-size-60: 28px;
+  --charcoal-text-font-size-50: 25px;
+  --charcoal-text-font-size-40: 22px;
+  --charcoal-text-font-size-30: 20px;
+  --charcoal-text-font-size-20: 18px;
+  --charcoal-text-font-size-10: 16px;
+  --charcoal-text-font-size-5: 14px;
+  --charcoal-text-font-size-1: 12px;
+  --charcoal-text-font-size-0: 11px;
+  --charcoal-space-target-l: 48px;
+  --charcoal-space-target-m: 40px;
+  --charcoal-space-target-s: 32px;
+  --charcoal-space-target-xs: 24px;
+  --charcoal-space-999: 999999px;
+  --charcoal-space-100: 440px;
+  --charcoal-space-90: 272px;
+  --charcoal-space-80: 168px;
+  --charcoal-space-70: 104px;
+  --charcoal-space-66: 96px;
+  --charcoal-space-63: 80px;
+  --charcoal-space-60: 64px;
+  --charcoal-space-55: 48px;
+  --charcoal-space-50: 40px;
+  --charcoal-space-46: 32px;
+  --charcoal-space-43: 28px;
+  --charcoal-space-40: 24px;
+  --charcoal-space-35: 20px;
+  --charcoal-space-30: 16px;
+  --charcoal-space-25: 12px;
+  --charcoal-space-20: 8px;
+  --charcoal-space-15: 6px;
+  --charcoal-space-10: 4px;
+  --charcoal-space-1: 2px;
+  --charcoal-space-0: 0px;
   --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
   --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
   --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
@@ -345,11 +350,6 @@
   --charcoal-color-light-neutral-a-5: rgba(0, 0, 0, 0.047);
   --charcoal-color-light-neutral-a-0: rgba(0, 0, 0, 0);
   --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
-  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
-  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
-  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
-  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
-  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
   --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
   --charcoal-radius-xxl: var(--charcoal-space-40);
diff --git a/packages/theme/src/css/_variables_light.css b/packages/theme/src/css/_variables_light.css
index 013326116..4429f5559 100644
--- a/packages/theme/src/css/_variables_light.css
+++ b/packages/theme/src/css/_variables_light.css
@@ -1,77 +1,82 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Dec 2024 10:10:07 GMT
+ * Generated on Fri, 13 Dec 2024 10:18:25 GMT
  */
 
 :root[data-theme='light'], :root:not([data-theme]) {
-  --charcoal-border-width-l: 2;
-  --charcoal-border-width-m: 1;
-  --charcoal-radius-oval: 999999;
-  --charcoal-paragraph-width-l-cozy: 924;
-  --charcoal-paragraph-width-m-cozy: 616;
-  --charcoal-paragraph-width-s-cozy: 588;
-  --charcoal-paragraph-width-l-compact: 588;
-  --charcoal-paragraph-width-m-compact: 392;
-  --charcoal-paragraph-width-s-compact: 280;
-  --charcoal-paragraph-width-l: 672;
-  --charcoal-paragraph-width-m: 448;
-  --charcoal-paragraph-width-s: 320;
+  --charcoal-border-width-l: 2px;
+  --charcoal-border-width-m: 1px;
+  --charcoal-paragraph-width-l-cozy: 924px;
+  --charcoal-paragraph-width-m-cozy: 616px;
+  --charcoal-paragraph-width-s-cozy: 588px;
+  --charcoal-paragraph-width-l-compact: 588px;
+  --charcoal-paragraph-width-m-compact: 392px;
+  --charcoal-paragraph-width-s-compact: 280px;
+  --charcoal-paragraph-width-l: 672px;
+  --charcoal-paragraph-width-m: 448px;
+  --charcoal-paragraph-width-s: 320px;
+  --charcoal-radius-oval: 999999px;
+  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
+  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
+  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
+  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
+  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-text-font-family-sans: Sarasa UI J;
-  --charcoal-text-line-height-100: 72;
-  --charcoal-text-line-height-90: 64;
-  --charcoal-text-line-height-80: 56;
-  --charcoal-text-line-height-70: 52;
-  --charcoal-text-line-height-60: 44;
-  --charcoal-text-line-height-50: 40;
-  --charcoal-text-line-height-40: 36;
-  --charcoal-text-line-height-30: 32;
-  --charcoal-text-line-height-20: 28;
-  --charcoal-text-line-height-10: 24;
-  --charcoal-text-line-height-5: 20;
-  --charcoal-text-line-height-1: 18;
-  --charcoal-text-font-weight-70: 700;
-  --charcoal-text-font-weight-40: 400;
-  --charcoal-text-line-height-0: 16;
-  --charcoal-text-font-size-120: 60;
-  --charcoal-text-font-size-110: 50;
-  --charcoal-text-font-size-100: 45;
-  --charcoal-text-font-size-90: 40;
-  --charcoal-text-font-size-80: 36;
-  --charcoal-text-font-size-70: 32;
-  --charcoal-text-font-size-60: 28;
-  --charcoal-text-font-size-50: 25;
-  --charcoal-text-font-size-40: 22;
-  --charcoal-text-font-size-30: 20;
-  --charcoal-text-font-size-20: 18;
-  --charcoal-text-font-size-10: 16;
-  --charcoal-text-font-size-5: 14;
-  --charcoal-text-font-size-1: 12;
-  --charcoal-text-font-size-0: 11;
-  --charcoal-space-target-l: 48;
-  --charcoal-space-target-m: 40;
-  --charcoal-space-target-s: 32;
-  --charcoal-space-target-xs: 24;
-  --charcoal-space-999: 999999;
-  --charcoal-space-100: 440;
-  --charcoal-space-90: 272;
-  --charcoal-space-80: 168;
-  --charcoal-space-70: 104;
-  --charcoal-space-66: 96;
-  --charcoal-space-63: 80;
-  --charcoal-space-60: 64;
-  --charcoal-space-55: 48;
-  --charcoal-space-50: 40;
-  --charcoal-space-46: 32;
-  --charcoal-space-43: 28;
-  --charcoal-space-40: 24;
-  --charcoal-space-35: 20;
-  --charcoal-space-30: 16;
-  --charcoal-space-25: 12;
-  --charcoal-space-20: 8;
-  --charcoal-space-15: 6;
-  --charcoal-space-10: 4;
-  --charcoal-space-1: 2;
-  --charcoal-space-0: 0;
+  --charcoal-text-line-height-100: 72px;
+  --charcoal-text-line-height-90: 64px;
+  --charcoal-text-line-height-80: 56px;
+  --charcoal-text-line-height-70: 52px;
+  --charcoal-text-line-height-60: 44px;
+  --charcoal-text-line-height-50: 40px;
+  --charcoal-text-line-height-40: 36px;
+  --charcoal-text-line-height-30: 32px;
+  --charcoal-text-line-height-20: 28px;
+  --charcoal-text-line-height-10: 24px;
+  --charcoal-text-line-height-5: 20px;
+  --charcoal-text-line-height-1: 18px;
+  --charcoal-text-font-weight-70: 700px;
+  --charcoal-text-font-weight-40: 400px;
+  --charcoal-text-line-height-0: 16px;
+  --charcoal-text-font-size-120: 60px;
+  --charcoal-text-font-size-110: 50px;
+  --charcoal-text-font-size-100: 45px;
+  --charcoal-text-font-size-90: 40px;
+  --charcoal-text-font-size-80: 36px;
+  --charcoal-text-font-size-70: 32px;
+  --charcoal-text-font-size-60: 28px;
+  --charcoal-text-font-size-50: 25px;
+  --charcoal-text-font-size-40: 22px;
+  --charcoal-text-font-size-30: 20px;
+  --charcoal-text-font-size-20: 18px;
+  --charcoal-text-font-size-10: 16px;
+  --charcoal-text-font-size-5: 14px;
+  --charcoal-text-font-size-1: 12px;
+  --charcoal-text-font-size-0: 11px;
+  --charcoal-space-target-l: 48px;
+  --charcoal-space-target-m: 40px;
+  --charcoal-space-target-s: 32px;
+  --charcoal-space-target-xs: 24px;
+  --charcoal-space-999: 999999px;
+  --charcoal-space-100: 440px;
+  --charcoal-space-90: 272px;
+  --charcoal-space-80: 168px;
+  --charcoal-space-70: 104px;
+  --charcoal-space-66: 96px;
+  --charcoal-space-63: 80px;
+  --charcoal-space-60: 64px;
+  --charcoal-space-55: 48px;
+  --charcoal-space-50: 40px;
+  --charcoal-space-46: 32px;
+  --charcoal-space-43: 28px;
+  --charcoal-space-40: 24px;
+  --charcoal-space-35: 20px;
+  --charcoal-space-30: 16px;
+  --charcoal-space-25: 12px;
+  --charcoal-space-20: 8px;
+  --charcoal-space-15: 6px;
+  --charcoal-space-10: 4px;
+  --charcoal-space-1: 2px;
+  --charcoal-space-0: 0px;
   --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
   --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02);
   --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
@@ -345,11 +350,6 @@
   --charcoal-color-light-neutral-a-5: rgba(0, 0, 0, 0.047);
   --charcoal-color-light-neutral-a-0: rgba(0, 0, 0, 0);
   --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
-  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
-  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
-  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
-  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
-  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
   --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
   --charcoal-radius-xxl: var(--charcoal-space-40);
diff --git a/packages/theme/src/json/base.json b/packages/theme/src/json/base.json
index 7fd4953c0..8c597c505 100644
--- a/packages/theme/src/json/base.json
+++ b/packages/theme/src/json/base.json
@@ -1,11 +1,4 @@
 {
-  "brand-color": {
-    "pixiv": { "value": "rgba(0, 150, 250, 1)" },
-    "premium": { "value": "rgba(253, 158, 22, 1)" },
-    "comic": { "value": "rgba(255, 196, 0, 1)" },
-    "booth": { "value": "rgba(252, 77, 80, 1)" },
-    "factory": { "value": "rgba(0, 184, 205, 1)" }
-  },
   "color": {
     "light/neutral/0": { "value": "rgba(255, 255, 255, 1)" },
     "light/neutral-a/0": { "value": "rgba(0, 0, 0, 0)" },
@@ -280,59 +273,66 @@
     "dark/magenta/90": { "value": "rgba(253, 217, 233, 1)" }
   },
   "space": {
-    "0": { "value": "0" },
-    "1": { "value": "2" },
-    "10": { "value": "4" },
-    "15": { "value": "6" },
-    "20": { "value": "8" },
-    "25": { "value": "12" },
-    "30": { "value": "16" },
-    "35": { "value": "20" },
-    "40": { "value": "24" },
-    "43": { "value": "28" },
-    "46": { "value": "32" },
-    "50": { "value": "40" },
-    "55": { "value": "48" },
-    "60": { "value": "64" },
-    "63": { "value": "80" },
-    "66": { "value": "96" },
-    "70": { "value": "104" },
-    "80": { "value": "168" },
-    "90": { "value": "272" },
-    "100": { "value": "440" },
-    "999": { "value": "999999" }
+    "0": { "value": "0px" },
+    "1": { "value": "2px" },
+    "10": { "value": "4px" },
+    "15": { "value": "6px" },
+    "20": { "value": "8px" },
+    "25": { "value": "12px" },
+    "30": { "value": "16px" },
+    "35": { "value": "20px" },
+    "40": { "value": "24px" },
+    "43": { "value": "28px" },
+    "46": { "value": "32px" },
+    "50": { "value": "40px" },
+    "55": { "value": "48px" },
+    "60": { "value": "64px" },
+    "63": { "value": "80px" },
+    "66": { "value": "96px" },
+    "70": { "value": "104px" },
+    "80": { "value": "168px" },
+    "90": { "value": "272px" },
+    "100": { "value": "440px" },
+    "999": { "value": "999999px" }
   },
   "text": {
-    "font-size/0": { "value": "11" },
-    "font-size/1": { "value": "12" },
-    "font-size/5": { "value": "14" },
-    "font-size/10": { "value": "16" },
-    "font-size/20": { "value": "18" },
-    "font-size/30": { "value": "20" },
-    "font-size/40": { "value": "22" },
-    "font-size/50": { "value": "25" },
-    "font-size/60": { "value": "28" },
-    "font-size/70": { "value": "32" },
-    "font-size/80": { "value": "36" },
-    "font-size/90": { "value": "40" },
-    "font-size/100": { "value": "45" },
-    "font-size/110": { "value": "50" },
-    "font-size/120": { "value": "60" },
-    "line-height/0": { "value": "16" },
-    "font-weight/40": { "value": "400" },
-    "font-weight/70": { "value": "700" },
-    "line-height/1": { "value": "18" },
-    "line-height/5": { "value": "20" },
-    "line-height/10": { "value": "24" },
-    "line-height/20": { "value": "28" },
-    "line-height/30": { "value": "32" },
-    "line-height/40": { "value": "36" },
-    "line-height/50": { "value": "40" },
-    "line-height/60": { "value": "44" },
-    "line-height/70": { "value": "52" },
-    "line-height/80": { "value": "56" },
-    "line-height/90": { "value": "64" },
-    "line-height/100": { "value": "72" },
+    "font-size/0": { "value": "11px" },
+    "font-size/1": { "value": "12px" },
+    "font-size/5": { "value": "14px" },
+    "font-size/10": { "value": "16px" },
+    "font-size/20": { "value": "18px" },
+    "font-size/30": { "value": "20px" },
+    "font-size/40": { "value": "22px" },
+    "font-size/50": { "value": "25px" },
+    "font-size/60": { "value": "28px" },
+    "font-size/70": { "value": "32px" },
+    "font-size/80": { "value": "36px" },
+    "font-size/90": { "value": "40px" },
+    "font-size/100": { "value": "45px" },
+    "font-size/110": { "value": "50px" },
+    "font-size/120": { "value": "60px" },
+    "line-height/0": { "value": "16px" },
+    "font-weight/40": { "value": "400px" },
+    "font-weight/70": { "value": "700px" },
+    "line-height/1": { "value": "18px" },
+    "line-height/5": { "value": "20px" },
+    "line-height/10": { "value": "24px" },
+    "line-height/20": { "value": "28px" },
+    "line-height/30": { "value": "32px" },
+    "line-height/40": { "value": "36px" },
+    "line-height/50": { "value": "40px" },
+    "line-height/60": { "value": "44px" },
+    "line-height/70": { "value": "52px" },
+    "line-height/80": { "value": "56px" },
+    "line-height/90": { "value": "64px" },
+    "line-height/100": { "value": "72px" },
     "font-family/sans": { "value": "Sarasa UI J" }
+  },
+  "brand-color": {
+    "pixiv": { "value": "rgba(0, 150, 250, 1)" },
+    "premium": { "value": "rgba(253, 158, 22, 1)" },
+    "comic": { "value": "rgba(255, 196, 0, 1)" },
+    "booth": { "value": "rgba(252, 77, 80, 1)" },
+    "factory": { "value": "rgba(0, 184, 205, 1)" }
   }
 }
diff --git a/packages/theme/src/json/pixiv-dark.json b/packages/theme/src/json/pixiv-dark.json
index 3f0b61ddd..ee3a54d2d 100644
--- a/packages/theme/src/json/pixiv-dark.json
+++ b/packages/theme/src/json/pixiv-dark.json
@@ -150,10 +150,10 @@
   "space": {
     "gap/gap-buttons": { "value": "{space.layout/20}" },
     "padding/padding-card": { "value": "{space.layout/40}" },
-    "target/xs": { "value": "24" },
-    "target/s": { "value": "32" },
-    "target/m": { "value": "40" },
-    "target/l": { "value": "48" },
+    "target/xs": { "value": "24px" },
+    "target/s": { "value": "32px" },
+    "target/m": { "value": "40px" },
+    "target/l": { "value": "48px" },
     "gap/gap-form-items": { "value": "{space.layout/40}" },
     "component/0": { "value": "{space.0}" },
     "component/10": { "value": "{space.10}" },
@@ -177,17 +177,6 @@
     "between-checkboxes/vertical": { "value": "{space.layout/0}" },
     "between-checkboxes/horizontal": { "value": "{space.layout/25}" }
   },
-  "paragraph-width": {
-    "s": { "value": "320" },
-    "m": { "value": "448" },
-    "l": { "value": "672" },
-    "s-compact": { "value": "280" },
-    "m-compact": { "value": "392" },
-    "l-compact": { "value": "588" },
-    "s-cozy": { "value": "588" },
-    "m-cozy": { "value": "616" },
-    "l-cozy": { "value": "924" }
-  },
   "radius": {
     "0": { "value": "{space.0}" },
     "xs": { "value": "{space.1}" },
@@ -196,11 +185,22 @@
     "l": { "value": "{space.25}" },
     "xl": { "value": "{space.30}" },
     "xxl": { "value": "{space.40}" },
-    "oval": { "value": "999999" }
+    "oval": { "value": "999999px" }
+  },
+  "paragraph-width": {
+    "s": { "value": "320px" },
+    "m": { "value": "448px" },
+    "l": { "value": "672px" },
+    "s-compact": { "value": "280px" },
+    "m-compact": { "value": "392px" },
+    "l-compact": { "value": "588px" },
+    "s-cozy": { "value": "588px" },
+    "m-cozy": { "value": "616px" },
+    "l-cozy": { "value": "924px" }
   },
   "border-width": {
-    "m": { "value": "1" },
-    "l": { "value": "2" },
+    "m": { "value": "1px" },
+    "l": { "value": "2px" },
     "focus/1": { "value": "{border-width.m}" },
     "focus/2": { "value": "{border-width.l}" }
   },
diff --git a/packages/theme/src/json/pixiv-light.json b/packages/theme/src/json/pixiv-light.json
index 65255e545..750dde9b5 100644
--- a/packages/theme/src/json/pixiv-light.json
+++ b/packages/theme/src/json/pixiv-light.json
@@ -150,10 +150,10 @@
   "space": {
     "gap/gap-buttons": { "value": "{space.layout/20}" },
     "padding/padding-card": { "value": "{space.layout/40}" },
-    "target/xs": { "value": "24" },
-    "target/s": { "value": "32" },
-    "target/m": { "value": "40" },
-    "target/l": { "value": "48" },
+    "target/xs": { "value": "24px" },
+    "target/s": { "value": "32px" },
+    "target/m": { "value": "40px" },
+    "target/l": { "value": "48px" },
     "gap/gap-form-items": { "value": "{space.layout/40}" },
     "component/0": { "value": "{space.0}" },
     "component/10": { "value": "{space.10}" },
@@ -177,17 +177,6 @@
     "between-checkboxes/vertical": { "value": "{space.layout/0}" },
     "between-checkboxes/horizontal": { "value": "{space.layout/25}" }
   },
-  "paragraph-width": {
-    "s": { "value": "320" },
-    "m": { "value": "448" },
-    "l": { "value": "672" },
-    "s-compact": { "value": "280" },
-    "m-compact": { "value": "392" },
-    "l-compact": { "value": "588" },
-    "s-cozy": { "value": "588" },
-    "m-cozy": { "value": "616" },
-    "l-cozy": { "value": "924" }
-  },
   "radius": {
     "0": { "value": "{space.0}" },
     "xs": { "value": "{space.1}" },
@@ -196,11 +185,22 @@
     "l": { "value": "{space.25}" },
     "xl": { "value": "{space.30}" },
     "xxl": { "value": "{space.40}" },
-    "oval": { "value": "999999" }
+    "oval": { "value": "999999px" }
+  },
+  "paragraph-width": {
+    "s": { "value": "320px" },
+    "m": { "value": "448px" },
+    "l": { "value": "672px" },
+    "s-compact": { "value": "280px" },
+    "m-compact": { "value": "392px" },
+    "l-compact": { "value": "588px" },
+    "s-cozy": { "value": "588px" },
+    "m-cozy": { "value": "616px" },
+    "l-cozy": { "value": "924px" }
   },
   "border-width": {
-    "m": { "value": "1" },
-    "l": { "value": "2" },
+    "m": { "value": "1px" },
+    "l": { "value": "2px" },
     "focus/1": { "value": "{border-width.m}" },
     "focus/2": { "value": "{border-width.l}" }
   },
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",
     },
   },
 }
diff --git a/packages/token-cli/src/figma/index.ts b/packages/token-cli/src/figma/index.ts
index 504a3f8ce..f5dbc17a2 100644
--- a/packages/token-cli/src/figma/index.ts
+++ b/packages/token-cli/src/figma/index.ts
@@ -136,6 +136,6 @@ export const resolveValue = (
 
 export const resolveColor = (value: Color) => colorToRgba(value)
 
-export const resolveFloat = (value: number) => `${value}`
+export const resolveFloat = (value: number) => `${value}px`
 
 export const resolveString = (value: string) => value