diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts
index 614df53171..d48a99bcc2 100644
--- a/packages/design-system/src/stitches.config.ts
+++ b/packages/design-system/src/stitches.config.ts
@@ -118,6 +118,45 @@ import {
 import type * as Stitches from "@stitches/react";
 export type { VariantProps } from "@stitches/react";
 
+const spaceAndSize = {
+  0: "0px",
+  1: "1px",
+  2: "2px",
+  3: "4px",
+  4: "6px",
+  5: "8px",
+  6: "10px",
+  7: "12px",
+  8: "14px",
+  9: "16px",
+  10: "20px",
+  11: "24px",
+  12: "28px",
+  13: "32px",
+  14: "36px",
+  15: "40px",
+  16: "44px",
+  17: "48px",
+  18: "56px",
+  19: "64px",
+  20: "80px",
+  21: "96px",
+  22: "112px",
+  23: "128px",
+  24: "144px",
+  25: "160px",
+  26: "176px",
+  27: "192px",
+  28: "208px",
+  29: "224px",
+  30: "240px",
+  31: "256px",
+  32: "288px",
+  33: "320px",
+  34: "384px",
+  35: "448px",
+};
+
 const {
   styled,
   css,
@@ -214,31 +253,8 @@ const {
     opacity: {
       1: "0.4",
     },
-    space: {
-      1: "4px",
-      2: "8px",
-      3: "16px",
-      4: "20px",
-      5: "24px",
-      6: "32px",
-      7: "48px",
-      8: "64px",
-      9: "80px",
-      styleSection: "8px",
-    },
-    sizes: {
-      1: "4px",
-      2: "8px",
-      3: "16px",
-      4: "20px",
-      5: "24px",
-      6: "32px",
-      7: "48px",
-      8: "64px",
-      9: "80px",
-      sidebarLeft: "45px",
-      sidebarRight: "240px",
-    },
+    space: spaceAndSize,
+    sizes: spaceAndSize,
     fontSizes: {
       1: "12px",
       2: "13px",