diff --git a/.changeset/famous-snails-relax.md b/.changeset/famous-snails-relax.md
new file mode 100644
index 0000000000..7e877bd8c9
--- /dev/null
+++ b/.changeset/famous-snails-relax.md
@@ -0,0 +1,6 @@
+---
+"@ultraviolet/themes": minor
+---
+
+- Moving from `px` to `rem`
+- Introduction of `sizing` tokens for height and width
diff --git a/packages/themes/public/style/dark.css b/packages/themes/public/style/dark.css
index e02ff5d8ce..05aee40660 100644
--- a/packages/themes/public/style/dark.css
+++ b/packages/themes/public/style/dark.css
@@ -440,12 +440,12 @@
   --color-warning-text-strong-disabled: #0c0f1a;
   --color-warning-text-strong-hover: #151a2d;
   --radius-circle: 100%;
-  --radius-default: 4px;
-  --radius-large: 8px;
-  --radius-none: 0;
-  --radius-small: 2px;
-  --radius-xlarge: 16px;
-  --radius-xxlarge: 24px;
+  --radius-default: 0.25rem;
+  --radius-large: 0.5rem;
+  --radius-none: 0rem;
+  --radius-small: 0.125rem;
+  --radius-xlarge: 1rem;
+  --radius-xxlarge: 1.5rem;
   --shadow-bulk: 0px 4px 32px 8px #0c0f1a66;
   --shadow-default-shadow: 0px 0px 8px 2px #0c0f1a66;
   --shadow-drawer: 0px 0px 40px 10px #0c0f1a8c;
@@ -478,232 +478,232 @@
   --shadow-tab-bar-active: 0px -2px 0px 0px #bf96f8;
   --shadow-tab-bar-off: 0px -1px 0px 0px #484b5a;
   --shadow-tooltip: 0px 4px 32px 8px #0c0f1a66;
-  --space-0: 0;
-  --space-1: 8px;
-  --space-2: 16px;
-  --space-3: 24px;
-  --space-4: 32px;
-  --space-5: 40px;
-  --space-6: 48px;
-  --space-7: 56px;
-  --space-8: 64px;
-  --space-9: 72px;
-  --space-10: 80px;
-  --space-0-25: 2px;
-  --space-0-5: 4px;
-  --space-1-5: 12px;
+  --space-0: 0rem;
+  --space-1: 0.5rem;
+  --space-2: 1rem;
+  --space-3: 1.5rem;
+  --space-4: 2rem;
+  --space-5: 2.5rem;
+  --space-6: 3rem;
+  --space-7: 3.5rem;
+  --space-8: 4rem;
+  --space-9: 4.5rem;
+  --space-10: 5rem;
+  --space-0-25: 0.125rem;
+  --space-0-5: 0.25rem;
+  --space-1-5: 0.75rem;
   --typography-body-font-family: Inter, sans-serif;
-  --typography-body-font-size: 16px;
+  --typography-body-font-size: 1rem;
   --typography-body-font-weight: 400;
   --typography-body-letter-spacing: 0;
-  --typography-body-line-height: 24px;
+  --typography-body-line-height: 1.5rem;
   --typography-body-paragraph-spacing: none;
   --typography-body-text-case: none;
   --typography-body-text-decoration: none;
   --typography-body-weight: 400;
   --typography-body-small-font-family: Inter, sans-serif;
-  --typography-body-small-font-size: 14px;
+  --typography-body-small-font-size: 0.875rem;
   --typography-body-small-font-weight: 400;
   --typography-body-small-letter-spacing: 0;
-  --typography-body-small-line-height: 20px;
+  --typography-body-small-line-height: 1.25rem;
   --typography-body-small-paragraph-spacing: 0;
   --typography-body-small-text-case: none;
   --typography-body-small-text-decoration: none;
   --typography-body-small-weight: 400;
   --typography-body-small-strong-font-family: Inter, sans-serif;
-  --typography-body-small-strong-font-size: 14px;
+  --typography-body-small-strong-font-size: 0.875rem;
   --typography-body-small-strong-font-weight: 500;
   --typography-body-small-strong-letter-spacing: 0;
-  --typography-body-small-strong-line-height: 20px;
+  --typography-body-small-strong-line-height: 1.25rem;
   --typography-body-small-strong-paragraph-spacing: 0;
   --typography-body-small-strong-text-case: none;
   --typography-body-small-strong-text-decoration: none;
   --typography-body-small-strong-weight: 500;
   --typography-body-small-stronger-font-family: Inter, sans-serif;
-  --typography-body-small-stronger-font-size: 14px;
+  --typography-body-small-stronger-font-size: 0.875rem;
   --typography-body-small-stronger-font-weight: 600;
   --typography-body-small-stronger-letter-spacing: 0;
-  --typography-body-small-stronger-line-height: 20px;
+  --typography-body-small-stronger-line-height: 1.25rem;
   --typography-body-small-stronger-paragraph-spacing: 0;
   --typography-body-small-stronger-text-case: none;
   --typography-body-small-stronger-text-decoration: none;
   --typography-body-small-stronger-weight: 600;
   --typography-body-strong-font-family: Inter, sans-serif;
-  --typography-body-strong-font-size: 16px;
+  --typography-body-strong-font-size: 1rem;
   --typography-body-strong-font-weight: 500;
   --typography-body-strong-letter-spacing: 0;
-  --typography-body-strong-line-height: 24px;
+  --typography-body-strong-line-height: 1.5rem;
   --typography-body-strong-paragraph-spacing: 0;
   --typography-body-strong-text-case: none;
   --typography-body-strong-text-decoration: none;
   --typography-body-strong-weight: 500;
   --typography-body-stronger-font-family: Inter, sans-serif;
-  --typography-body-stronger-font-size: 16px;
+  --typography-body-stronger-font-size: 1rem;
   --typography-body-stronger-font-weight: 600;
   --typography-body-stronger-letter-spacing: 0;
-  --typography-body-stronger-line-height: 24px;
+  --typography-body-stronger-line-height: 1.5rem;
   --typography-body-stronger-paragraph-spacing: 0;
   --typography-body-stronger-text-case: none;
   --typography-body-stronger-text-decoration: none;
   --typography-body-stronger-weight: 600;
   --typography-caption-font-family: Inter, sans-serif;
-  --typography-caption-font-size: 12px;
+  --typography-caption-font-size: 0.75rem;
   --typography-caption-font-weight: 400;
   --typography-caption-letter-spacing: 0;
-  --typography-caption-line-height: 16px;
+  --typography-caption-line-height: 1rem;
   --typography-caption-paragraph-spacing: 0;
   --typography-caption-text-case: none;
   --typography-caption-text-decoration: none;
   --typography-caption-weight: 400;
   --typography-caption-small-font-family: Inter, sans-serif;
-  --typography-caption-small-font-size: 10px;
+  --typography-caption-small-font-size: 0.625rem;
   --typography-caption-small-font-weight: 400;
   --typography-caption-small-letter-spacing: 0;
-  --typography-caption-small-line-height: 16px;
+  --typography-caption-small-line-height: 1rem;
   --typography-caption-small-paragraph-spacing: 0;
   --typography-caption-small-text-case: none;
   --typography-caption-small-text-decoration: none;
   --typography-caption-small-weight: 400;
   --typography-caption-small-strong-font-family: Inter, sans-serif;
-  --typography-caption-small-strong-font-size: 10px;
+  --typography-caption-small-strong-font-size: 0.625rem;
   --typography-caption-small-strong-font-weight: 500;
   --typography-caption-small-strong-letter-spacing: 0;
-  --typography-caption-small-strong-line-height: 16px;
+  --typography-caption-small-strong-line-height: 1rem;
   --typography-caption-small-strong-paragraph-spacing: 0;
   --typography-caption-small-strong-text-case: none;
   --typography-caption-small-strong-text-decoration: none;
   --typography-caption-small-strong-weight: 500;
   --typography-caption-small-stronger-font-family: Inter, sans-serif;
-  --typography-caption-small-stronger-font-size: 10px;
+  --typography-caption-small-stronger-font-size: 0.625rem;
   --typography-caption-small-stronger-font-weight: 600;
   --typography-caption-small-stronger-letter-spacing: 0;
-  --typography-caption-small-stronger-line-height: 16px;
+  --typography-caption-small-stronger-line-height: 1rem;
   --typography-caption-small-stronger-paragraph-spacing: 0;
   --typography-caption-small-stronger-text-case: none;
   --typography-caption-small-stronger-text-decoration: none;
   --typography-caption-small-stronger-weight: 600;
   --typography-caption-strong-font-family: Inter, sans-serif;
-  --typography-caption-strong-font-size: 12px;
+  --typography-caption-strong-font-size: 0.75rem;
   --typography-caption-strong-font-weight: 500;
   --typography-caption-strong-letter-spacing: 0;
-  --typography-caption-strong-line-height: 16px;
+  --typography-caption-strong-line-height: 1rem;
   --typography-caption-strong-paragraph-spacing: 0;
   --typography-caption-strong-text-case: none;
   --typography-caption-strong-text-decoration: none;
   --typography-caption-strong-weight: 500;
   --typography-caption-stronger-font-family: Inter, sans-serif;
-  --typography-caption-stronger-font-size: 12px;
+  --typography-caption-stronger-font-size: 0.75rem;
   --typography-caption-stronger-font-weight: 600;
   --typography-caption-stronger-letter-spacing: 0;
-  --typography-caption-stronger-line-height: 16px;
+  --typography-caption-stronger-line-height: 1rem;
   --typography-caption-stronger-paragraph-spacing: 0;
   --typography-caption-stronger-text-case: none;
   --typography-caption-stronger-text-decoration: none;
   --typography-caption-stronger-weight: 600;
   --typography-code-font-family: JetBrains, monospace;
-  --typography-code-font-size: 14px;
+  --typography-code-font-size: 0.875rem;
   --typography-code-font-weight: 400;
   --typography-code-letter-spacing: 0;
-  --typography-code-line-height: 20px;
+  --typography-code-line-height: 1.25rem;
   --typography-code-paragraph-spacing: 0;
   --typography-code-text-case: none;
   --typography-code-text-decoration: none;
   --typography-code-weight: 400;
   --typography-code-strong-font-family: JetBrains, monospace;
-  --typography-code-strong-font-size: 14px;
+  --typography-code-strong-font-size: 0.875rem;
   --typography-code-strong-font-weight: 500;
   --typography-code-strong-letter-spacing: 0;
-  --typography-code-strong-line-height: 20px;
+  --typography-code-strong-line-height: 1.25rem;
   --typography-code-strong-paragraph-spacing: 0;
   --typography-code-strong-text-case: none;
   --typography-code-strong-text-decoration: none;
   --typography-code-strong-weight: 500;
   --typography-code-stronger-font-family: JetBrains, monospace;
-  --typography-code-stronger-font-size: 14px;
+  --typography-code-stronger-font-size: 0.875rem;
   --typography-code-stronger-font-weight: Bold;
   --typography-code-stronger-letter-spacing: 0;
-  --typography-code-stronger-line-height: 20px;
+  --typography-code-stronger-line-height: 1.25rem;
   --typography-code-stronger-paragraph-spacing: 0;
   --typography-code-stronger-text-case: none;
   --typography-code-stronger-text-decoration: none;
   --typography-code-stronger-weight: 600;
   --typography-heading-font-family: Space Grotesk, sans-serif;
-  --typography-heading-font-size: 25px;
+  --typography-heading-font-size: 1.5625rem;
   --typography-heading-font-weight: 400;
   --typography-heading-letter-spacing: 0;
-  --typography-heading-line-height: 32px;
+  --typography-heading-line-height: 2rem;
   --typography-heading-paragraph-spacing: 0;
   --typography-heading-text-case: none;
   --typography-heading-text-decoration: none;
   --typography-heading-weight: 400;
   --typography-heading-large-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-font-size: 35px;
+  --typography-heading-large-font-size: 2.1875rem;
   --typography-heading-large-font-weight: 400;
   --typography-heading-large-letter-spacing: 0;
-  --typography-heading-large-line-height: 48px;
+  --typography-heading-large-line-height: 3rem;
   --typography-heading-large-paragraph-spacing: 0;
   --typography-heading-large-text-case: none;
   --typography-heading-large-text-decoration: none;
   --typography-heading-large-weight: 400;
   --typography-heading-large-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-strong-font-size: 35px;
+  --typography-heading-large-strong-font-size: 2.1875rem;
   --typography-heading-large-strong-font-weight: 500;
   --typography-heading-large-strong-letter-spacing: 0;
-  --typography-heading-large-strong-line-height: 48px;
+  --typography-heading-large-strong-line-height: 3rem;
   --typography-heading-large-strong-paragraph-spacing: 0;
   --typography-heading-large-strong-text-case: none;
   --typography-heading-large-strong-text-decoration: none;
   --typography-heading-large-strong-weight: 500;
   --typography-heading-large-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-stronger-font-size: 35px;
+  --typography-heading-large-stronger-font-size: 2.1875rem;
   --typography-heading-large-stronger-font-weight: 600;
   --typography-heading-large-stronger-letter-spacing: 0;
-  --typography-heading-large-stronger-line-height: 48px;
+  --typography-heading-large-stronger-line-height: 3rem;
   --typography-heading-large-stronger-paragraph-spacing: 0;
   --typography-heading-large-stronger-text-case: none;
   --typography-heading-large-stronger-text-decoration: none;
   --typography-heading-large-stronger-weight: 600;
   --typography-heading-small-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-font-size: 21px;
+  --typography-heading-small-font-size: 1.3125rem;
   --typography-heading-small-font-weight: 400;
   --typography-heading-small-letter-spacing: 0;
-  --typography-heading-small-line-height: 32px;
+  --typography-heading-small-line-height: 2rem;
   --typography-heading-small-paragraph-spacing: 0;
   --typography-heading-small-text-case: none;
   --typography-heading-small-text-decoration: none;
   --typography-heading-small-weight: 400;
   --typography-heading-small-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-strong-font-size: 21px;
+  --typography-heading-small-strong-font-size: 1.3125rem;
   --typography-heading-small-strong-font-weight: 500;
   --typography-heading-small-strong-letter-spacing: 0;
-  --typography-heading-small-strong-line-height: 32px;
+  --typography-heading-small-strong-line-height: 2rem;
   --typography-heading-small-strong-paragraph-spacing: 0;
   --typography-heading-small-strong-text-case: none;
   --typography-heading-small-strong-text-decoration: none;
   --typography-heading-small-strong-weight: 500;
   --typography-heading-small-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-stronger-font-size: 21px;
+  --typography-heading-small-stronger-font-size: 1.3125rem;
   --typography-heading-small-stronger-font-weight: 600;
   --typography-heading-small-stronger-letter-spacing: 0;
-  --typography-heading-small-stronger-line-height: 32px;
+  --typography-heading-small-stronger-line-height: 2rem;
   --typography-heading-small-stronger-paragraph-spacing: 0;
   --typography-heading-small-stronger-text-case: none;
   --typography-heading-small-stronger-text-decoration: none;
   --typography-heading-small-stronger-weight: 600;
   --typography-heading-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-strong-font-size: 25px;
+  --typography-heading-strong-font-size: 1.5625rem;
   --typography-heading-strong-font-weight: 500;
   --typography-heading-strong-letter-spacing: 0;
-  --typography-heading-strong-line-height: 32px;
+  --typography-heading-strong-line-height: 2rem;
   --typography-heading-strong-paragraph-spacing: 0;
   --typography-heading-strong-text-case: none;
   --typography-heading-strong-text-decoration: none;
   --typography-heading-strong-weight: 500;
   --typography-heading-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-stronger-font-size: 25px;
+  --typography-heading-stronger-font-size: 1.5625rem;
   --typography-heading-stronger-font-weight: 600;
   --typography-heading-stronger-letter-spacing: 0;
-  --typography-heading-stronger-line-height: 32px;
+  --typography-heading-stronger-line-height: 2rem;
   --typography-heading-stronger-paragraph-spacing: 0;
   --typography-heading-stronger-text-case: none;
   --typography-heading-stronger-text-decoration: none;
diff --git a/packages/themes/public/style/darker.css b/packages/themes/public/style/darker.css
index e2b69684a8..561ca24dac 100644
--- a/packages/themes/public/style/darker.css
+++ b/packages/themes/public/style/darker.css
@@ -440,12 +440,12 @@
   --color-warning-text-strong-disabled: #000000;
   --color-warning-text-strong-hover: #080a11;
   --radius-circle: 100%;
-  --radius-default: 4px;
-  --radius-large: 8px;
-  --radius-none: 0;
-  --radius-small: 2px;
-  --radius-xlarge: 16px;
-  --radius-xxlarge: 24px;
+  --radius-default: 0.25rem;
+  --radius-large: 0.5rem;
+  --radius-none: 0rem;
+  --radius-small: 0.125rem;
+  --radius-xlarge: 1rem;
+  --radius-xxlarge: 1.5rem;
   --shadow-bulk: 0px 4px 32px 8px #21263866;
   --shadow-default-shadow: 0px 0px 8px 2px #21263866;
   --shadow-drawer: 0px 0px 40px 10px #0c0f1a8c;
@@ -478,232 +478,232 @@
   --shadow-tab-bar-active: 0px -2px 0px 0px #b07af8;
   --shadow-tab-bar-off: 0px -1px 0px 0px #3b3f4f;
   --shadow-tooltip: 0px 4px 32px 8px #21263866;
-  --space-0: 0;
-  --space-1: 8px;
-  --space-2: 16px;
-  --space-3: 24px;
-  --space-4: 32px;
-  --space-5: 40px;
-  --space-6: 48px;
-  --space-7: 56px;
-  --space-8: 64px;
-  --space-9: 72px;
-  --space-10: 80px;
-  --space-0-25: 2px;
-  --space-0-5: 4px;
-  --space-1-5: 12px;
+  --space-0: 0rem;
+  --space-1: 0.5rem;
+  --space-2: 1rem;
+  --space-3: 1.5rem;
+  --space-4: 2rem;
+  --space-5: 2.5rem;
+  --space-6: 3rem;
+  --space-7: 3.5rem;
+  --space-8: 4rem;
+  --space-9: 4.5rem;
+  --space-10: 5rem;
+  --space-0-25: 0.125rem;
+  --space-0-5: 0.25rem;
+  --space-1-5: 0.75rem;
   --typography-body-font-family: Inter, sans-serif;
-  --typography-body-font-size: 16px;
+  --typography-body-font-size: 1rem;
   --typography-body-font-weight: 400;
   --typography-body-letter-spacing: 0;
-  --typography-body-line-height: 24px;
+  --typography-body-line-height: 1.5rem;
   --typography-body-paragraph-spacing: none;
   --typography-body-text-case: none;
   --typography-body-text-decoration: none;
   --typography-body-weight: 400;
   --typography-body-small-font-family: Inter, sans-serif;
-  --typography-body-small-font-size: 14px;
+  --typography-body-small-font-size: 0.875rem;
   --typography-body-small-font-weight: 400;
   --typography-body-small-letter-spacing: 0;
-  --typography-body-small-line-height: 20px;
+  --typography-body-small-line-height: 1.25rem;
   --typography-body-small-paragraph-spacing: 0;
   --typography-body-small-text-case: none;
   --typography-body-small-text-decoration: none;
   --typography-body-small-weight: 400;
   --typography-body-small-strong-font-family: Inter, sans-serif;
-  --typography-body-small-strong-font-size: 14px;
+  --typography-body-small-strong-font-size: 0.875rem;
   --typography-body-small-strong-font-weight: 500;
   --typography-body-small-strong-letter-spacing: 0;
-  --typography-body-small-strong-line-height: 20px;
+  --typography-body-small-strong-line-height: 1.25rem;
   --typography-body-small-strong-paragraph-spacing: 0;
   --typography-body-small-strong-text-case: none;
   --typography-body-small-strong-text-decoration: none;
   --typography-body-small-strong-weight: 500;
   --typography-body-small-stronger-font-family: Inter, sans-serif;
-  --typography-body-small-stronger-font-size: 14px;
+  --typography-body-small-stronger-font-size: 0.875rem;
   --typography-body-small-stronger-font-weight: 600;
   --typography-body-small-stronger-letter-spacing: 0;
-  --typography-body-small-stronger-line-height: 20px;
+  --typography-body-small-stronger-line-height: 1.25rem;
   --typography-body-small-stronger-paragraph-spacing: 0;
   --typography-body-small-stronger-text-case: none;
   --typography-body-small-stronger-text-decoration: none;
   --typography-body-small-stronger-weight: 600;
   --typography-body-strong-font-family: Inter, sans-serif;
-  --typography-body-strong-font-size: 16px;
+  --typography-body-strong-font-size: 1rem;
   --typography-body-strong-font-weight: 500;
   --typography-body-strong-letter-spacing: 0;
-  --typography-body-strong-line-height: 24px;
+  --typography-body-strong-line-height: 1.5rem;
   --typography-body-strong-paragraph-spacing: 0;
   --typography-body-strong-text-case: none;
   --typography-body-strong-text-decoration: none;
   --typography-body-strong-weight: 500;
   --typography-body-stronger-font-family: Inter, sans-serif;
-  --typography-body-stronger-font-size: 16px;
+  --typography-body-stronger-font-size: 1rem;
   --typography-body-stronger-font-weight: 600;
   --typography-body-stronger-letter-spacing: 0;
-  --typography-body-stronger-line-height: 24px;
+  --typography-body-stronger-line-height: 1.5rem;
   --typography-body-stronger-paragraph-spacing: 0;
   --typography-body-stronger-text-case: none;
   --typography-body-stronger-text-decoration: none;
   --typography-body-stronger-weight: 600;
   --typography-caption-font-family: Inter, sans-serif;
-  --typography-caption-font-size: 12px;
+  --typography-caption-font-size: 0.75rem;
   --typography-caption-font-weight: 400;
   --typography-caption-letter-spacing: 0;
-  --typography-caption-line-height: 16px;
+  --typography-caption-line-height: 1rem;
   --typography-caption-paragraph-spacing: 0;
   --typography-caption-text-case: none;
   --typography-caption-text-decoration: none;
   --typography-caption-weight: 400;
   --typography-caption-small-font-family: Inter, sans-serif;
-  --typography-caption-small-font-size: 10px;
+  --typography-caption-small-font-size: 0.625rem;
   --typography-caption-small-font-weight: 400;
   --typography-caption-small-letter-spacing: 0;
-  --typography-caption-small-line-height: 16px;
+  --typography-caption-small-line-height: 1rem;
   --typography-caption-small-paragraph-spacing: 0;
   --typography-caption-small-text-case: none;
   --typography-caption-small-text-decoration: none;
   --typography-caption-small-weight: 400;
   --typography-caption-small-strong-font-family: Inter, sans-serif;
-  --typography-caption-small-strong-font-size: 10px;
+  --typography-caption-small-strong-font-size: 0.625rem;
   --typography-caption-small-strong-font-weight: 500;
   --typography-caption-small-strong-letter-spacing: 0;
-  --typography-caption-small-strong-line-height: 16px;
+  --typography-caption-small-strong-line-height: 1rem;
   --typography-caption-small-strong-paragraph-spacing: 0;
   --typography-caption-small-strong-text-case: none;
   --typography-caption-small-strong-text-decoration: none;
   --typography-caption-small-strong-weight: 500;
   --typography-caption-small-stronger-font-family: Inter, sans-serif;
-  --typography-caption-small-stronger-font-size: 10px;
+  --typography-caption-small-stronger-font-size: 0.625rem;
   --typography-caption-small-stronger-font-weight: 600;
   --typography-caption-small-stronger-letter-spacing: 0;
-  --typography-caption-small-stronger-line-height: 16px;
+  --typography-caption-small-stronger-line-height: 1rem;
   --typography-caption-small-stronger-paragraph-spacing: 0;
   --typography-caption-small-stronger-text-case: none;
   --typography-caption-small-stronger-text-decoration: none;
   --typography-caption-small-stronger-weight: 600;
   --typography-caption-strong-font-family: Inter, sans-serif;
-  --typography-caption-strong-font-size: 12px;
+  --typography-caption-strong-font-size: 0.75rem;
   --typography-caption-strong-font-weight: 500;
   --typography-caption-strong-letter-spacing: 0;
-  --typography-caption-strong-line-height: 16px;
+  --typography-caption-strong-line-height: 1rem;
   --typography-caption-strong-paragraph-spacing: 0;
   --typography-caption-strong-text-case: none;
   --typography-caption-strong-text-decoration: none;
   --typography-caption-strong-weight: 500;
   --typography-caption-stronger-font-family: Inter, sans-serif;
-  --typography-caption-stronger-font-size: 12px;
+  --typography-caption-stronger-font-size: 0.75rem;
   --typography-caption-stronger-font-weight: 600;
   --typography-caption-stronger-letter-spacing: 0;
-  --typography-caption-stronger-line-height: 16px;
+  --typography-caption-stronger-line-height: 1rem;
   --typography-caption-stronger-paragraph-spacing: 0;
   --typography-caption-stronger-text-case: none;
   --typography-caption-stronger-text-decoration: none;
   --typography-caption-stronger-weight: 600;
   --typography-code-font-family: JetBrains, monospace;
-  --typography-code-font-size: 14px;
+  --typography-code-font-size: 0.875rem;
   --typography-code-font-weight: 400;
   --typography-code-letter-spacing: 0;
-  --typography-code-line-height: 20px;
+  --typography-code-line-height: 1.25rem;
   --typography-code-paragraph-spacing: 0;
   --typography-code-text-case: none;
   --typography-code-text-decoration: none;
   --typography-code-weight: 400;
   --typography-code-strong-font-family: JetBrains, monospace;
-  --typography-code-strong-font-size: 14px;
+  --typography-code-strong-font-size: 0.875rem;
   --typography-code-strong-font-weight: 500;
   --typography-code-strong-letter-spacing: 0;
-  --typography-code-strong-line-height: 20px;
+  --typography-code-strong-line-height: 1.25rem;
   --typography-code-strong-paragraph-spacing: 0;
   --typography-code-strong-text-case: none;
   --typography-code-strong-text-decoration: none;
   --typography-code-strong-weight: 500;
   --typography-code-stronger-font-family: JetBrains, monospace;
-  --typography-code-stronger-font-size: 14px;
+  --typography-code-stronger-font-size: 0.875rem;
   --typography-code-stronger-font-weight: Bold;
   --typography-code-stronger-letter-spacing: 0;
-  --typography-code-stronger-line-height: 20px;
+  --typography-code-stronger-line-height: 1.25rem;
   --typography-code-stronger-paragraph-spacing: 0;
   --typography-code-stronger-text-case: none;
   --typography-code-stronger-text-decoration: none;
   --typography-code-stronger-weight: 600;
   --typography-heading-font-family: Space Grotesk, sans-serif;
-  --typography-heading-font-size: 25px;
+  --typography-heading-font-size: 1.5625rem;
   --typography-heading-font-weight: 400;
   --typography-heading-letter-spacing: 0;
-  --typography-heading-line-height: 32px;
+  --typography-heading-line-height: 2rem;
   --typography-heading-paragraph-spacing: 0;
   --typography-heading-text-case: none;
   --typography-heading-text-decoration: none;
   --typography-heading-weight: 400;
   --typography-heading-large-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-font-size: 35px;
+  --typography-heading-large-font-size: 2.1875rem;
   --typography-heading-large-font-weight: 400;
   --typography-heading-large-letter-spacing: 0;
-  --typography-heading-large-line-height: 48px;
+  --typography-heading-large-line-height: 3rem;
   --typography-heading-large-paragraph-spacing: 0;
   --typography-heading-large-text-case: none;
   --typography-heading-large-text-decoration: none;
   --typography-heading-large-weight: 400;
   --typography-heading-large-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-strong-font-size: 35px;
+  --typography-heading-large-strong-font-size: 2.1875rem;
   --typography-heading-large-strong-font-weight: 500;
   --typography-heading-large-strong-letter-spacing: 0;
-  --typography-heading-large-strong-line-height: 48px;
+  --typography-heading-large-strong-line-height: 3rem;
   --typography-heading-large-strong-paragraph-spacing: 0;
   --typography-heading-large-strong-text-case: none;
   --typography-heading-large-strong-text-decoration: none;
   --typography-heading-large-strong-weight: 500;
   --typography-heading-large-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-stronger-font-size: 35px;
+  --typography-heading-large-stronger-font-size: 2.1875rem;
   --typography-heading-large-stronger-font-weight: 600;
   --typography-heading-large-stronger-letter-spacing: 0;
-  --typography-heading-large-stronger-line-height: 48px;
+  --typography-heading-large-stronger-line-height: 3rem;
   --typography-heading-large-stronger-paragraph-spacing: 0;
   --typography-heading-large-stronger-text-case: none;
   --typography-heading-large-stronger-text-decoration: none;
   --typography-heading-large-stronger-weight: 600;
   --typography-heading-small-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-font-size: 21px;
+  --typography-heading-small-font-size: 1.3125rem;
   --typography-heading-small-font-weight: 400;
   --typography-heading-small-letter-spacing: 0;
-  --typography-heading-small-line-height: 32px;
+  --typography-heading-small-line-height: 2rem;
   --typography-heading-small-paragraph-spacing: 0;
   --typography-heading-small-text-case: none;
   --typography-heading-small-text-decoration: none;
   --typography-heading-small-weight: 400;
   --typography-heading-small-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-strong-font-size: 21px;
+  --typography-heading-small-strong-font-size: 1.3125rem;
   --typography-heading-small-strong-font-weight: 500;
   --typography-heading-small-strong-letter-spacing: 0;
-  --typography-heading-small-strong-line-height: 32px;
+  --typography-heading-small-strong-line-height: 2rem;
   --typography-heading-small-strong-paragraph-spacing: 0;
   --typography-heading-small-strong-text-case: none;
   --typography-heading-small-strong-text-decoration: none;
   --typography-heading-small-strong-weight: 500;
   --typography-heading-small-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-stronger-font-size: 21px;
+  --typography-heading-small-stronger-font-size: 1.3125rem;
   --typography-heading-small-stronger-font-weight: 600;
   --typography-heading-small-stronger-letter-spacing: 0;
-  --typography-heading-small-stronger-line-height: 32px;
+  --typography-heading-small-stronger-line-height: 2rem;
   --typography-heading-small-stronger-paragraph-spacing: 0;
   --typography-heading-small-stronger-text-case: none;
   --typography-heading-small-stronger-text-decoration: none;
   --typography-heading-small-stronger-weight: 600;
   --typography-heading-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-strong-font-size: 25px;
+  --typography-heading-strong-font-size: 1.5625rem;
   --typography-heading-strong-font-weight: 500;
   --typography-heading-strong-letter-spacing: 0;
-  --typography-heading-strong-line-height: 32px;
+  --typography-heading-strong-line-height: 2rem;
   --typography-heading-strong-paragraph-spacing: 0;
   --typography-heading-strong-text-case: none;
   --typography-heading-strong-text-decoration: none;
   --typography-heading-strong-weight: 500;
   --typography-heading-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-stronger-font-size: 25px;
+  --typography-heading-stronger-font-size: 1.5625rem;
   --typography-heading-stronger-font-weight: 600;
   --typography-heading-stronger-letter-spacing: 0;
-  --typography-heading-stronger-line-height: 32px;
+  --typography-heading-stronger-line-height: 2rem;
   --typography-heading-stronger-paragraph-spacing: 0;
   --typography-heading-stronger-text-case: none;
   --typography-heading-stronger-text-decoration: none;
diff --git a/packages/themes/public/style/light.css b/packages/themes/public/style/light.css
index 8a743c70a6..cfff1320d4 100644
--- a/packages/themes/public/style/light.css
+++ b/packages/themes/public/style/light.css
@@ -440,12 +440,12 @@
   --color-warning-text-strong-disabled: #ffffff;
   --color-warning-text-strong-hover: #151a2d;
   --radius-circle: 100%;
-  --radius-default: 4px;
-  --radius-large: 8px;
-  --radius-none: 0;
-  --radius-small: 2px;
-  --radius-xlarge: 16px;
-  --radius-xxlarge: 24px;
+  --radius-default: 0.25rem;
+  --radius-large: 0.5rem;
+  --radius-none: 0rem;
+  --radius-small: 0.125rem;
+  --radius-xlarge: 1rem;
+  --radius-xxlarge: 1.5rem;
   --shadow-bulk: 0px 4px 32px 8px #d9dadd66;
   --shadow-default-shadow: 0px 0px 8px 2px #d9dadd66;
   --shadow-drawer: 0px 0px 40px 10px #151a2d5c;
@@ -478,232 +478,232 @@
   --shadow-tab-bar-active: 0px -2px 0px 0px #8c40ef;
   --shadow-tab-bar-off: 0px -1px 0px 0px #e9eaeb;
   --shadow-tooltip: 0px 4px 32px 8px #d9dadd66;
-  --space-0: 0;
-  --space-1: 8px;
-  --space-2: 16px;
-  --space-3: 24px;
-  --space-4: 32px;
-  --space-5: 40px;
-  --space-6: 48px;
-  --space-7: 56px;
-  --space-8: 64px;
-  --space-9: 72px;
-  --space-10: 80px;
-  --space-0-25: 2px;
-  --space-0-5: 4px;
-  --space-1-5: 12px;
+  --space-0: 0rem;
+  --space-1: 0.5rem;
+  --space-2: 1rem;
+  --space-3: 1.5rem;
+  --space-4: 2rem;
+  --space-5: 2.5rem;
+  --space-6: 3rem;
+  --space-7: 3.5rem;
+  --space-8: 4rem;
+  --space-9: 4.5rem;
+  --space-10: 5rem;
+  --space-0-25: 0.125rem;
+  --space-0-5: 0.25rem;
+  --space-1-5: 0.75rem;
   --typography-body-font-family: Inter, sans-serif;
-  --typography-body-font-size: 16px;
+  --typography-body-font-size: 1rem;
   --typography-body-font-weight: 400;
   --typography-body-letter-spacing: 0;
-  --typography-body-line-height: 24px;
+  --typography-body-line-height: 1.5rem;
   --typography-body-paragraph-spacing: none;
   --typography-body-text-case: none;
   --typography-body-text-decoration: none;
   --typography-body-weight: 400;
   --typography-body-small-font-family: Inter, sans-serif;
-  --typography-body-small-font-size: 14px;
+  --typography-body-small-font-size: 0.875rem;
   --typography-body-small-font-weight: 400;
   --typography-body-small-letter-spacing: 0;
-  --typography-body-small-line-height: 20px;
+  --typography-body-small-line-height: 1.25rem;
   --typography-body-small-paragraph-spacing: 0;
   --typography-body-small-text-case: none;
   --typography-body-small-text-decoration: none;
   --typography-body-small-weight: 400;
   --typography-body-small-strong-font-family: Inter, sans-serif;
-  --typography-body-small-strong-font-size: 14px;
+  --typography-body-small-strong-font-size: 0.875rem;
   --typography-body-small-strong-font-weight: 500;
   --typography-body-small-strong-letter-spacing: 0;
-  --typography-body-small-strong-line-height: 20px;
+  --typography-body-small-strong-line-height: 1.25rem;
   --typography-body-small-strong-paragraph-spacing: 0;
   --typography-body-small-strong-text-case: none;
   --typography-body-small-strong-text-decoration: none;
   --typography-body-small-strong-weight: 500;
   --typography-body-small-stronger-font-family: Inter, sans-serif;
-  --typography-body-small-stronger-font-size: 14px;
+  --typography-body-small-stronger-font-size: 0.875rem;
   --typography-body-small-stronger-font-weight: 600;
   --typography-body-small-stronger-letter-spacing: 0;
-  --typography-body-small-stronger-line-height: 20px;
+  --typography-body-small-stronger-line-height: 1.25rem;
   --typography-body-small-stronger-paragraph-spacing: 0;
   --typography-body-small-stronger-text-case: none;
   --typography-body-small-stronger-text-decoration: none;
   --typography-body-small-stronger-weight: 600;
   --typography-body-strong-font-family: Inter, sans-serif;
-  --typography-body-strong-font-size: 16px;
+  --typography-body-strong-font-size: 1rem;
   --typography-body-strong-font-weight: 500;
   --typography-body-strong-letter-spacing: 0;
-  --typography-body-strong-line-height: 24px;
+  --typography-body-strong-line-height: 1.5rem;
   --typography-body-strong-paragraph-spacing: 0;
   --typography-body-strong-text-case: none;
   --typography-body-strong-text-decoration: none;
   --typography-body-strong-weight: 500;
   --typography-body-stronger-font-family: Inter, sans-serif;
-  --typography-body-stronger-font-size: 16px;
+  --typography-body-stronger-font-size: 1rem;
   --typography-body-stronger-font-weight: 600;
   --typography-body-stronger-letter-spacing: 0;
-  --typography-body-stronger-line-height: 24px;
+  --typography-body-stronger-line-height: 1.5rem;
   --typography-body-stronger-paragraph-spacing: 0;
   --typography-body-stronger-text-case: none;
   --typography-body-stronger-text-decoration: none;
   --typography-body-stronger-weight: 600;
   --typography-caption-font-family: Inter, sans-serif;
-  --typography-caption-font-size: 12px;
+  --typography-caption-font-size: 0.75rem;
   --typography-caption-font-weight: 400;
   --typography-caption-letter-spacing: 0;
-  --typography-caption-line-height: 16px;
+  --typography-caption-line-height: 1rem;
   --typography-caption-paragraph-spacing: 0;
   --typography-caption-text-case: none;
   --typography-caption-text-decoration: none;
   --typography-caption-weight: 400;
   --typography-caption-small-font-family: Inter, sans-serif;
-  --typography-caption-small-font-size: 10px;
+  --typography-caption-small-font-size: 0.625rem;
   --typography-caption-small-font-weight: 400;
   --typography-caption-small-letter-spacing: 0;
-  --typography-caption-small-line-height: 16px;
+  --typography-caption-small-line-height: 1rem;
   --typography-caption-small-paragraph-spacing: 0;
   --typography-caption-small-text-case: none;
   --typography-caption-small-text-decoration: none;
   --typography-caption-small-weight: 400;
   --typography-caption-small-strong-font-family: Inter, sans-serif;
-  --typography-caption-small-strong-font-size: 10px;
+  --typography-caption-small-strong-font-size: 0.625rem;
   --typography-caption-small-strong-font-weight: 500;
   --typography-caption-small-strong-letter-spacing: 0;
-  --typography-caption-small-strong-line-height: 16px;
+  --typography-caption-small-strong-line-height: 1rem;
   --typography-caption-small-strong-paragraph-spacing: 0;
   --typography-caption-small-strong-text-case: none;
   --typography-caption-small-strong-text-decoration: none;
   --typography-caption-small-strong-weight: 500;
   --typography-caption-small-stronger-font-family: Inter, sans-serif;
-  --typography-caption-small-stronger-font-size: 10px;
+  --typography-caption-small-stronger-font-size: 0.625rem;
   --typography-caption-small-stronger-font-weight: 600;
   --typography-caption-small-stronger-letter-spacing: 0;
-  --typography-caption-small-stronger-line-height: 16px;
+  --typography-caption-small-stronger-line-height: 1rem;
   --typography-caption-small-stronger-paragraph-spacing: 0;
   --typography-caption-small-stronger-text-case: none;
   --typography-caption-small-stronger-text-decoration: none;
   --typography-caption-small-stronger-weight: 600;
   --typography-caption-strong-font-family: Inter, sans-serif;
-  --typography-caption-strong-font-size: 12px;
+  --typography-caption-strong-font-size: 0.75rem;
   --typography-caption-strong-font-weight: 500;
   --typography-caption-strong-letter-spacing: 0;
-  --typography-caption-strong-line-height: 16px;
+  --typography-caption-strong-line-height: 1rem;
   --typography-caption-strong-paragraph-spacing: 0;
   --typography-caption-strong-text-case: none;
   --typography-caption-strong-text-decoration: none;
   --typography-caption-strong-weight: 500;
   --typography-caption-stronger-font-family: Inter, sans-serif;
-  --typography-caption-stronger-font-size: 12px;
+  --typography-caption-stronger-font-size: 0.75rem;
   --typography-caption-stronger-font-weight: 600;
   --typography-caption-stronger-letter-spacing: 0;
-  --typography-caption-stronger-line-height: 16px;
+  --typography-caption-stronger-line-height: 1rem;
   --typography-caption-stronger-paragraph-spacing: 0;
   --typography-caption-stronger-text-case: none;
   --typography-caption-stronger-text-decoration: none;
   --typography-caption-stronger-weight: 600;
   --typography-code-font-family: JetBrains, monospace;
-  --typography-code-font-size: 14px;
+  --typography-code-font-size: 0.875rem;
   --typography-code-font-weight: 400;
   --typography-code-letter-spacing: 0;
-  --typography-code-line-height: 20px;
+  --typography-code-line-height: 1.25rem;
   --typography-code-paragraph-spacing: 0;
   --typography-code-text-case: none;
   --typography-code-text-decoration: none;
   --typography-code-weight: 400;
   --typography-code-strong-font-family: JetBrains, monospace;
-  --typography-code-strong-font-size: 14px;
+  --typography-code-strong-font-size: 0.875rem;
   --typography-code-strong-font-weight: 500;
   --typography-code-strong-letter-spacing: 0;
-  --typography-code-strong-line-height: 20px;
+  --typography-code-strong-line-height: 1.25rem;
   --typography-code-strong-paragraph-spacing: 0;
   --typography-code-strong-text-case: none;
   --typography-code-strong-text-decoration: none;
   --typography-code-strong-weight: 500;
   --typography-code-stronger-font-family: JetBrains, monospace;
-  --typography-code-stronger-font-size: 14px;
+  --typography-code-stronger-font-size: 0.875rem;
   --typography-code-stronger-font-weight: Bold;
   --typography-code-stronger-letter-spacing: 0;
-  --typography-code-stronger-line-height: 20px;
+  --typography-code-stronger-line-height: 1.25rem;
   --typography-code-stronger-paragraph-spacing: 0;
   --typography-code-stronger-text-case: none;
   --typography-code-stronger-text-decoration: none;
   --typography-code-stronger-weight: 600;
   --typography-heading-font-family: Space Grotesk, sans-serif;
-  --typography-heading-font-size: 25px;
+  --typography-heading-font-size: 1.5625rem;
   --typography-heading-font-weight: 400;
   --typography-heading-letter-spacing: 0;
-  --typography-heading-line-height: 32px;
+  --typography-heading-line-height: 2rem;
   --typography-heading-paragraph-spacing: 0;
   --typography-heading-text-case: none;
   --typography-heading-text-decoration: none;
   --typography-heading-weight: 400;
   --typography-heading-large-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-font-size: 35px;
+  --typography-heading-large-font-size: 2.1875rem;
   --typography-heading-large-font-weight: 400;
   --typography-heading-large-letter-spacing: 0;
-  --typography-heading-large-line-height: 48px;
+  --typography-heading-large-line-height: 3rem;
   --typography-heading-large-paragraph-spacing: 0;
   --typography-heading-large-text-case: none;
   --typography-heading-large-text-decoration: none;
   --typography-heading-large-weight: 400;
   --typography-heading-large-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-strong-font-size: 35px;
+  --typography-heading-large-strong-font-size: 2.1875rem;
   --typography-heading-large-strong-font-weight: 500;
   --typography-heading-large-strong-letter-spacing: 0;
-  --typography-heading-large-strong-line-height: 48px;
+  --typography-heading-large-strong-line-height: 3rem;
   --typography-heading-large-strong-paragraph-spacing: 0;
   --typography-heading-large-strong-text-case: none;
   --typography-heading-large-strong-text-decoration: none;
   --typography-heading-large-strong-weight: 500;
   --typography-heading-large-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-large-stronger-font-size: 35px;
+  --typography-heading-large-stronger-font-size: 2.1875rem;
   --typography-heading-large-stronger-font-weight: 600;
   --typography-heading-large-stronger-letter-spacing: 0;
-  --typography-heading-large-stronger-line-height: 48px;
+  --typography-heading-large-stronger-line-height: 3rem;
   --typography-heading-large-stronger-paragraph-spacing: 0;
   --typography-heading-large-stronger-text-case: none;
   --typography-heading-large-stronger-text-decoration: none;
   --typography-heading-large-stronger-weight: 600;
   --typography-heading-small-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-font-size: 21px;
+  --typography-heading-small-font-size: 1.3125rem;
   --typography-heading-small-font-weight: 400;
   --typography-heading-small-letter-spacing: 0;
-  --typography-heading-small-line-height: 32px;
+  --typography-heading-small-line-height: 2rem;
   --typography-heading-small-paragraph-spacing: 0;
   --typography-heading-small-text-case: none;
   --typography-heading-small-text-decoration: none;
   --typography-heading-small-weight: 400;
   --typography-heading-small-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-strong-font-size: 21px;
+  --typography-heading-small-strong-font-size: 1.3125rem;
   --typography-heading-small-strong-font-weight: 500;
   --typography-heading-small-strong-letter-spacing: 0;
-  --typography-heading-small-strong-line-height: 32px;
+  --typography-heading-small-strong-line-height: 2rem;
   --typography-heading-small-strong-paragraph-spacing: 0;
   --typography-heading-small-strong-text-case: none;
   --typography-heading-small-strong-text-decoration: none;
   --typography-heading-small-strong-weight: 500;
   --typography-heading-small-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-small-stronger-font-size: 21px;
+  --typography-heading-small-stronger-font-size: 1.3125rem;
   --typography-heading-small-stronger-font-weight: 600;
   --typography-heading-small-stronger-letter-spacing: 0;
-  --typography-heading-small-stronger-line-height: 32px;
+  --typography-heading-small-stronger-line-height: 2rem;
   --typography-heading-small-stronger-paragraph-spacing: 0;
   --typography-heading-small-stronger-text-case: none;
   --typography-heading-small-stronger-text-decoration: none;
   --typography-heading-small-stronger-weight: 600;
   --typography-heading-strong-font-family: Space Grotesk, sans-serif;
-  --typography-heading-strong-font-size: 25px;
+  --typography-heading-strong-font-size: 1.5625rem;
   --typography-heading-strong-font-weight: 500;
   --typography-heading-strong-letter-spacing: 0;
-  --typography-heading-strong-line-height: 32px;
+  --typography-heading-strong-line-height: 2rem;
   --typography-heading-strong-paragraph-spacing: 0;
   --typography-heading-strong-text-case: none;
   --typography-heading-strong-text-decoration: none;
   --typography-heading-strong-weight: 500;
   --typography-heading-stronger-font-family: Space Grotesk, sans-serif;
-  --typography-heading-stronger-font-size: 25px;
+  --typography-heading-stronger-font-size: 1.5625rem;
   --typography-heading-stronger-font-weight: 600;
   --typography-heading-stronger-letter-spacing: 0;
-  --typography-heading-stronger-line-height: 32px;
+  --typography-heading-stronger-line-height: 2rem;
   --typography-heading-stronger-paragraph-spacing: 0;
   --typography-heading-stronger-text-case: none;
   --typography-heading-stronger-text-decoration: none;
diff --git a/packages/themes/src/themes/console/dark/__generated__/index.ts b/packages/themes/src/themes/console/dark/__generated__/index.ts
index 59aa168c69..f02ee0b61e 100644
--- a/packages/themes/src/themes/console/dark/__generated__/index.ts
+++ b/packages/themes/src/themes/console/dark/__generated__/index.ts
@@ -367,12 +367,12 @@ export const darkTheme = {
   },
   radii: {
     circle: '100%',
-    default: '4px',
-    large: '8px',
-    none: '0',
-    small: '2px',
-    xlarge: '16px',
-    xxlarge: '24px',
+    default: '0.25rem',
+    large: '0.5rem',
+    none: '0rem',
+    small: '0.125rem',
+    xlarge: '1rem',
+    xxlarge: '1.5rem',
   },
   shadows: {
     bulk: '0px 4px 32px 8px #0c0f1a66',
@@ -420,30 +420,54 @@ export const darkTheme = {
     },
     tooltip: '0px 4px 32px 8px #0c0f1a66',
   },
+  sizing: {
+    '0': '0rem',
+    '100': '0.5rem',
+    '125': '0.625rem',
+    '150': '0.75rem',
+    '175': '0.875rem',
+    '200': '1rem',
+    '250': '1.25rem',
+    '262': '1.3125rem',
+    '300': '1.5rem',
+    '312': '1.5625rem',
+    '400': '2rem',
+    '437': '2.1875rem',
+    '500': '2.5rem',
+    '600': '3rem',
+    '700': '3.5rem',
+    '750': '3.75rem',
+    '800': '4rem',
+    '900': '4.5rem',
+    '1000': '5rem',
+    '012': '0.0625rem',
+    '025': '0.125rem',
+    '050': '0.25rem',
+  },
   space: {
-    '0': '0',
-    '1': '8px',
-    '2': '16px',
-    '3': '24px',
-    '4': '32px',
-    '5': '40px',
-    '6': '48px',
-    '7': '56px',
-    '8': '64px',
-    '9': '72px',
-    '10': '80px',
-    '0.25': '2px',
-    '0.5': '4px',
-    '1.5': '12px',
+    '0': '0rem',
+    '1': '0.5rem',
+    '2': '1rem',
+    '3': '1.5rem',
+    '4': '2rem',
+    '5': '2.5rem',
+    '6': '3rem',
+    '7': '3.5rem',
+    '8': '4rem',
+    '9': '4.5rem',
+    '10': '5rem',
+    '0.25': '0.125rem',
+    '0.5': '0.25rem',
+    '1.5': '0.75rem',
   },
   theme: 'dark',
   typography: {
     body: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: 'none',
       textCase: 'none',
       textDecoration: 'none',
@@ -451,10 +475,10 @@ export const darkTheme = {
     },
     bodySmall: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -462,10 +486,10 @@ export const darkTheme = {
     },
     bodySmallStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -473,10 +497,10 @@ export const darkTheme = {
     },
     bodySmallStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -484,10 +508,10 @@ export const darkTheme = {
     },
     bodyStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -495,10 +519,10 @@ export const darkTheme = {
     },
     bodyStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -506,10 +530,10 @@ export const darkTheme = {
     },
     caption: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -517,10 +541,10 @@ export const darkTheme = {
     },
     captionSmall: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -528,10 +552,10 @@ export const darkTheme = {
     },
     captionSmallStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -539,10 +563,10 @@ export const darkTheme = {
     },
     captionSmallStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -550,10 +574,10 @@ export const darkTheme = {
     },
     captionStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -561,10 +585,10 @@ export const darkTheme = {
     },
     captionStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -572,10 +596,10 @@ export const darkTheme = {
     },
     code: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -583,10 +607,10 @@ export const darkTheme = {
     },
     codeStrong: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -594,10 +618,10 @@ export const darkTheme = {
     },
     codeStronger: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Bold',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -605,10 +629,10 @@ export const darkTheme = {
     },
     heading: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -616,10 +640,10 @@ export const darkTheme = {
     },
     headingLarge: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -627,10 +651,10 @@ export const darkTheme = {
     },
     headingLargeStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -638,10 +662,10 @@ export const darkTheme = {
     },
     headingLargeStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -649,10 +673,10 @@ export const darkTheme = {
     },
     headingSmall: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -660,10 +684,10 @@ export const darkTheme = {
     },
     headingSmallStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -671,10 +695,10 @@ export const darkTheme = {
     },
     headingSmallStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -682,10 +706,10 @@ export const darkTheme = {
     },
     headingStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -693,10 +717,10 @@ export const darkTheme = {
     },
     headingStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
diff --git a/packages/themes/src/themes/console/darker/__generated__/index.ts b/packages/themes/src/themes/console/darker/__generated__/index.ts
index 7dd5793137..c802fc6b56 100644
--- a/packages/themes/src/themes/console/darker/__generated__/index.ts
+++ b/packages/themes/src/themes/console/darker/__generated__/index.ts
@@ -367,12 +367,12 @@ export const darkerTheme = {
   },
   radii: {
     circle: '100%',
-    default: '4px',
-    large: '8px',
-    none: '0',
-    small: '2px',
-    xlarge: '16px',
-    xxlarge: '24px',
+    default: '0.25rem',
+    large: '0.5rem',
+    none: '0rem',
+    small: '0.125rem',
+    xlarge: '1rem',
+    xxlarge: '1.5rem',
   },
   shadows: {
     bulk: '0px 4px 32px 8px #21263866',
@@ -420,30 +420,54 @@ export const darkerTheme = {
     },
     tooltip: '0px 4px 32px 8px #21263866',
   },
+  sizing: {
+    '0': '0rem',
+    '100': '0.5rem',
+    '125': '0.625rem',
+    '150': '0.75rem',
+    '175': '0.875rem',
+    '200': '1rem',
+    '250': '1.25rem',
+    '262': '1.3125rem',
+    '300': '1.5rem',
+    '312': '1.5625rem',
+    '400': '2rem',
+    '437': '2.1875rem',
+    '500': '2.5rem',
+    '600': '3rem',
+    '700': '3.5rem',
+    '750': '3.75rem',
+    '800': '4rem',
+    '900': '4.5rem',
+    '1000': '5rem',
+    '012': '0.0625rem',
+    '025': '0.125rem',
+    '050': '0.25rem',
+  },
   space: {
-    '0': '0',
-    '1': '8px',
-    '2': '16px',
-    '3': '24px',
-    '4': '32px',
-    '5': '40px',
-    '6': '48px',
-    '7': '56px',
-    '8': '64px',
-    '9': '72px',
-    '10': '80px',
-    '0.25': '2px',
-    '0.5': '4px',
-    '1.5': '12px',
+    '0': '0rem',
+    '1': '0.5rem',
+    '2': '1rem',
+    '3': '1.5rem',
+    '4': '2rem',
+    '5': '2.5rem',
+    '6': '3rem',
+    '7': '3.5rem',
+    '8': '4rem',
+    '9': '4.5rem',
+    '10': '5rem',
+    '0.25': '0.125rem',
+    '0.5': '0.25rem',
+    '1.5': '0.75rem',
   },
   theme: 'darker',
   typography: {
     body: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: 'none',
       textCase: 'none',
       textDecoration: 'none',
@@ -451,10 +475,10 @@ export const darkerTheme = {
     },
     bodySmall: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -462,10 +486,10 @@ export const darkerTheme = {
     },
     bodySmallStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -473,10 +497,10 @@ export const darkerTheme = {
     },
     bodySmallStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -484,10 +508,10 @@ export const darkerTheme = {
     },
     bodyStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -495,10 +519,10 @@ export const darkerTheme = {
     },
     bodyStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -506,10 +530,10 @@ export const darkerTheme = {
     },
     caption: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -517,10 +541,10 @@ export const darkerTheme = {
     },
     captionSmall: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -528,10 +552,10 @@ export const darkerTheme = {
     },
     captionSmallStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -539,10 +563,10 @@ export const darkerTheme = {
     },
     captionSmallStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -550,10 +574,10 @@ export const darkerTheme = {
     },
     captionStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -561,10 +585,10 @@ export const darkerTheme = {
     },
     captionStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -572,10 +596,10 @@ export const darkerTheme = {
     },
     code: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -583,10 +607,10 @@ export const darkerTheme = {
     },
     codeStrong: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -594,10 +618,10 @@ export const darkerTheme = {
     },
     codeStronger: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Bold',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -605,10 +629,10 @@ export const darkerTheme = {
     },
     heading: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -616,10 +640,10 @@ export const darkerTheme = {
     },
     headingLarge: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -627,10 +651,10 @@ export const darkerTheme = {
     },
     headingLargeStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -638,10 +662,10 @@ export const darkerTheme = {
     },
     headingLargeStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -649,10 +673,10 @@ export const darkerTheme = {
     },
     headingSmall: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -660,10 +684,10 @@ export const darkerTheme = {
     },
     headingSmallStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -671,10 +695,10 @@ export const darkerTheme = {
     },
     headingSmallStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -682,10 +706,10 @@ export const darkerTheme = {
     },
     headingStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -693,10 +717,10 @@ export const darkerTheme = {
     },
     headingStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
diff --git a/packages/themes/src/themes/console/light/__generated__/index.ts b/packages/themes/src/themes/console/light/__generated__/index.ts
index 6fdaa8b602..5615349d47 100644
--- a/packages/themes/src/themes/console/light/__generated__/index.ts
+++ b/packages/themes/src/themes/console/light/__generated__/index.ts
@@ -367,12 +367,12 @@ export const lightTheme = {
   },
   radii: {
     circle: '100%',
-    default: '4px',
-    large: '8px',
-    none: '0',
-    small: '2px',
-    xlarge: '16px',
-    xxlarge: '24px',
+    default: '0.25rem',
+    large: '0.5rem',
+    none: '0rem',
+    small: '0.125rem',
+    xlarge: '1rem',
+    xxlarge: '1.5rem',
   },
   shadows: {
     bulk: '0px 4px 32px 8px #d9dadd66',
@@ -420,30 +420,54 @@ export const lightTheme = {
     },
     tooltip: '0px 4px 32px 8px #d9dadd66',
   },
+  sizing: {
+    '0': '0rem',
+    '100': '0.5rem',
+    '125': '0.625rem',
+    '150': '0.75rem',
+    '175': '0.875rem',
+    '200': '1rem',
+    '250': '1.25rem',
+    '262': '1.3125rem',
+    '300': '1.5rem',
+    '312': '1.5625rem',
+    '400': '2rem',
+    '437': '2.1875rem',
+    '500': '2.5rem',
+    '600': '3rem',
+    '700': '3.5rem',
+    '750': '3.75rem',
+    '800': '4rem',
+    '900': '4.5rem',
+    '1000': '5rem',
+    '012': '0.0625rem',
+    '025': '0.125rem',
+    '050': '0.25rem',
+  },
   space: {
-    '0': '0',
-    '1': '8px',
-    '2': '16px',
-    '3': '24px',
-    '4': '32px',
-    '5': '40px',
-    '6': '48px',
-    '7': '56px',
-    '8': '64px',
-    '9': '72px',
-    '10': '80px',
-    '0.25': '2px',
-    '0.5': '4px',
-    '1.5': '12px',
+    '0': '0rem',
+    '1': '0.5rem',
+    '2': '1rem',
+    '3': '1.5rem',
+    '4': '2rem',
+    '5': '2.5rem',
+    '6': '3rem',
+    '7': '3.5rem',
+    '8': '4rem',
+    '9': '4.5rem',
+    '10': '5rem',
+    '0.25': '0.125rem',
+    '0.5': '0.25rem',
+    '1.5': '0.75rem',
   },
   theme: 'light',
   typography: {
     body: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: 'none',
       textCase: 'none',
       textDecoration: 'none',
@@ -451,10 +475,10 @@ export const lightTheme = {
     },
     bodySmall: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -462,10 +486,10 @@ export const lightTheme = {
     },
     bodySmallStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -473,10 +497,10 @@ export const lightTheme = {
     },
     bodySmallStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -484,10 +508,10 @@ export const lightTheme = {
     },
     bodyStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -495,10 +519,10 @@ export const lightTheme = {
     },
     bodyStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '16px',
+      fontSize: '1rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '24px',
+      lineHeight: '1.5rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -506,10 +530,10 @@ export const lightTheme = {
     },
     caption: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -517,10 +541,10 @@ export const lightTheme = {
     },
     captionSmall: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -528,10 +552,10 @@ export const lightTheme = {
     },
     captionSmallStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -539,10 +563,10 @@ export const lightTheme = {
     },
     captionSmallStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '10px',
+      fontSize: '0.625rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -550,10 +574,10 @@ export const lightTheme = {
     },
     captionStrong: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -561,10 +585,10 @@ export const lightTheme = {
     },
     captionStronger: {
       fontFamily: 'Inter, sans-serif',
-      fontSize: '12px',
+      fontSize: '0.75rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '16px',
+      lineHeight: '1rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -572,10 +596,10 @@ export const lightTheme = {
     },
     code: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -583,10 +607,10 @@ export const lightTheme = {
     },
     codeStrong: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -594,10 +618,10 @@ export const lightTheme = {
     },
     codeStronger: {
       fontFamily: 'JetBrains, monospace',
-      fontSize: '14px',
+      fontSize: '0.875rem',
       fontWeight: 'Bold',
       letterSpacing: '0',
-      lineHeight: '20px',
+      lineHeight: '1.25rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -605,10 +629,10 @@ export const lightTheme = {
     },
     heading: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -616,10 +640,10 @@ export const lightTheme = {
     },
     headingLarge: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -627,10 +651,10 @@ export const lightTheme = {
     },
     headingLargeStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -638,10 +662,10 @@ export const lightTheme = {
     },
     headingLargeStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '35px',
+      fontSize: '2.1875rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '48px',
+      lineHeight: '3rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -649,10 +673,10 @@ export const lightTheme = {
     },
     headingSmall: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'Regular',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -660,10 +684,10 @@ export const lightTheme = {
     },
     headingSmallStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -671,10 +695,10 @@ export const lightTheme = {
     },
     headingSmallStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '21px',
+      fontSize: '1.3125rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -682,10 +706,10 @@ export const lightTheme = {
     },
     headingStrong: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'Medium',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
@@ -693,10 +717,10 @@ export const lightTheme = {
     },
     headingStronger: {
       fontFamily: 'Space Grotesk, sans-serif',
-      fontSize: '25px',
+      fontSize: '1.5625rem',
       fontWeight: 'SemiBold',
       letterSpacing: '0',
-      lineHeight: '32px',
+      lineHeight: '2rem',
       paragraphSpacing: '0',
       textCase: 'none',
       textDecoration: 'none',
diff --git a/scripts/figma-synchronise-tokens.mjs b/scripts/figma-synchronise-tokens.mjs
index 717c0231a9..d29acb00c1 100755
--- a/scripts/figma-synchronise-tokens.mjs
+++ b/scripts/figma-synchronise-tokens.mjs
@@ -30,7 +30,7 @@ const createCSSFile = (theme, content) => {
 }
 
 function alphaOrder(obj) {
-  const orderedKeys = Object.keys(obj).sort()
+  const orderedKeys = Object.keys(obj ?? {}).sort()
 
   return orderedKeys.reduce((newObj, key) => {
     // eslint-disable-next-line no-param-reassign
@@ -71,9 +71,7 @@ function evalValue(value, variables) {
         base = base[key]
       })
 
-      return keyParts[0] === 'fontSize' || keyParts[0] === 'lineHeight'
-        ? `${base}px`
-        : base
+      return base
     })
 
     // eslint-disable-next-line no-eval
@@ -114,7 +112,7 @@ export const generatePalette = (figmaTokensJson, themeMatch) => {
   const inputPalette = figmaTokensJson[themeMatch.palette]
 
   // Variable : unit
-  const unit = inputTheme.unit.value
+  // const unit = inputTheme.unit.value
 
   // Variable : palette shades
   const paletteShades = getValues(inputPalette.shades, {
@@ -142,24 +140,36 @@ export const generatePalette = (figmaTokensJson, themeMatch) => {
     },
   })
 
+  // Variable : theme space
+  const sizing = getValues(inputTheme.sizing, {
+    typeFilter: 'dimension',
+    variables: {},
+  })
+
   // Variable : theme fontSize
   const fontSize = getValues(inputTheme.fontSize, {
     typeFilter: 'fontSizes',
-    variables: {},
+    variables: { sizing },
   })
 
+  console.log('fontSize generated')
+
   // Variable : theme lineHeights
   const lineHeight = getValues(inputTheme.lineHeight, {
     typeFilter: 'lineHeights',
-    variables: { unit },
+    variables: { sizing },
   })
 
+  console.log('lineHeight generated')
+
   // Variable : theme color
   const colors = getValues(inputTheme, {
     typeFilter: 'color',
     variables: { shades: paletteShades, other: paletteOther },
   })
 
+  console.log('colors generated')
+
   // Variable : theme shadows
   const shadows = getValues(inputTheme, {
     typeFilter: 'boxShadow',
@@ -171,29 +181,41 @@ export const generatePalette = (figmaTokensJson, themeMatch) => {
     },
   })
 
+  console.log('shadows generated')
+
   // Variable : theme typography
   const typography = getValues(inputTheme, {
     typeFilter: 'typography',
-    variables: { lineHeight, unit, fontSize },
+    variables: { lineHeight, sizing, fontSize },
   })
 
+  console.log('typography generated')
+
   // Variable : theme radii
   const radii = getValues(inputTheme.radii, {
     typeFilter: 'borderRadius',
-    variables: {},
+    variables: { sizing },
   })
 
+  console.log('radii generated')
+
   // Variable : theme space
   const space = getValues(inputTheme.space, {
-    typeFilter: 'spacing',
-    variables: {},
+    typeFilter: 'dimension',
+    variables: { sizing },
   })
 
+  console.log('space generated')
+
   const breakpoints = getValues(inputTheme.breakpoints, {
     typeFilter: 'dimension',
     variables: {},
   })
 
+  console.log('breakpoints generated')
+
+  console.log(sizing, space)
+
   const output = alphaOrder({
     colors: {
       ...colors,
@@ -208,6 +230,7 @@ export const generatePalette = (figmaTokensJson, themeMatch) => {
     radii,
     shadows: formatShadows(shadows),
     space,
+    sizing,
     theme: themeMatch.outputTheme,
     typography,
     breakpoints,