diff --git a/packages/design-tokens/src/scss/@themes.scss b/packages/design-tokens/src/scss/@themes.scss
index 35cbaee43e..9a017c7295 100644
--- a/packages/design-tokens/src/scss/@themes.scss
+++ b/packages/design-tokens/src/scss/@themes.scss
@@ -1,15 +1,15 @@
-@use 'themes/light' as theme-light;
-@use 'themes/light-inverted' as theme-light-inverted;
+@use 'themes/theme-light' as theme-light;
+@use 'themes/theme-light-inverted' as theme-light-inverted;
 
 $themes: (
     // The first theme is the default theme, as the left column in the Figma table.
-    light:
+    theme-light:
         (
             colors: theme-light.$colors,
             gradients: theme-light.$gradients,
             shadows: theme-light.$shadows,
         ),
-    light-inverted: (
+    theme-light-inverted: (
         colors: theme-light-inverted.$colors,
         gradients: theme-light-inverted.$gradients,
         shadows: theme-light-inverted.$shadows,
diff --git a/packages/design-tokens/src/scss/global/_borders.scss b/packages/design-tokens/src/scss/global/_borders.scss
index e8c7521516..906909ca9d 100644
--- a/packages/design-tokens/src/scss/global/_borders.scss
+++ b/packages/design-tokens/src/scss/global/_borders.scss
@@ -1,8 +1,7 @@
-// Generated Borders from Supernova. Do not edit manually.
 // Manually created from Figma
-$border-none: none !default;
-$border-solid: solid !default;
-$border-dashed: dashed !default;
+$border-style-none: none !default;
+$border-style-solid: solid !default;
+$border-style-dashed: dashed !default;
 $border-width-0: 0 !default;
 $border-width-100: 1px !default;
 $border-width-200: 2px !default;
diff --git a/packages/design-tokens/src/scss/global/_other.scss b/packages/design-tokens/src/scss/global/_other.scss
index 9950536453..6b53f8a211 100644
--- a/packages/design-tokens/src/scss/global/_other.scss
+++ b/packages/design-tokens/src/scss/global/_other.scss
@@ -1,4 +1,3 @@
-// Generated Generic Tokens (Other) from Supernova. Do not edit manually.
 // Manually created from Figma
 $container-max-width: 1280px !default;
 
diff --git a/packages/design-tokens/src/scss/global/_radii.scss b/packages/design-tokens/src/scss/global/_radii.scss
index 1fc329a29d..29975c9d9f 100644
--- a/packages/design-tokens/src/scss/global/_radii.scss
+++ b/packages/design-tokens/src/scss/global/_radii.scss
@@ -1,4 +1,3 @@
-// Generated Radii from Supernova. Do not edit manually.
 // Manually created from Figma
 $radius-0: 0 !default;
 $radius-100: 2px !default;
diff --git a/packages/design-tokens/src/scss/global/_spaces.scss b/packages/design-tokens/src/scss/global/_spaces.scss
index 2293e2ef8a..c79c1a7acb 100644
--- a/packages/design-tokens/src/scss/global/_spaces.scss
+++ b/packages/design-tokens/src/scss/global/_spaces.scss
@@ -1,4 +1,3 @@
-// Generated Measures from Supernova. Do not edit manually.
 // Manually created from Figma
 $space-0: 0 !default;
 $space-100: 1px !default;
diff --git a/packages/design-tokens/src/scss/global/_typography.scss b/packages/design-tokens/src/scss/global/_typography.scss
index 20c322773d..81b3d07f5b 100644
--- a/packages/design-tokens/src/scss/global/_typography.scss
+++ b/packages/design-tokens/src/scss/global/_typography.scss
@@ -1,349 +1,1003 @@
-// Generated Typography from Supernova. Do not edit manually.
-// NOT EDITED YET
-$body-large-text-bold: (
+// Manually created from Figma
+$heading-1-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.125rem,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.55,
+        font-weight: 400,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-large-text-italic: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.125rem,
-        font-style: italic,
+        font-size: 64px,
+        font-style: normal,
         font-weight: 400,
-        line-height: 1.55,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-large-text-regular: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.125rem,
+        font-size: 64px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.55,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-large-text-semibold: (
+$heading-1-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.125rem,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 500,
-        line-height: 1.55,
+        font-weight: 600,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-medium-text-bold: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 1rem,
+        font-size: 64px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.5,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-medium-text-italic: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 1rem,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.5,
+        font-size: 64px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-medium-text-regular: (
+$heading-1-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1rem,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 400,
-        line-height: 1.5,
+        font-weight: 700,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-medium-text-semibold: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 1rem,
+        font-size: 64px,
         font-style: normal,
-        font-weight: 500,
-        line-height: 1.5,
+        font-weight: 700,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-small-text-bold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.875rem,
+        font-size: 64px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.42,
+        font-weight: 700,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-small-text-italic: (
+$heading-1-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.875rem,
+        font-size: 48px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.42,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 64px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 64px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-small-text-regular: (
+$heading-2-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.875rem,
+        font-size: 32px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.42,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-small-text-semibold: (
+$heading-2-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.875rem,
+        font-size: 32px,
         font-style: normal,
-        font-weight: 500,
-        line-height: 1.42,
+        font-weight: 600,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-text-bold: (
+$heading-2-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 32px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.6,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-text-italic: (
+$heading-2-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 32px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.6,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 48px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-text-regular: (
+$heading-3-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 24px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.6,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-text-semibold: (
+$heading-3-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 500,
-        line-height: 1.6,
+        font-weight: 600,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xsmall-text-bold: (
+$heading-3-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.75rem,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.32,
+        font-weight: 700,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xsmall-text-italic: (
+$heading-3-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.75rem,
+        font-size: 24px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.32,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xsmall-text-regular: (
+$heading-4-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.75rem,
+        font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.32,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-xsmall-text-semibold: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 0.75rem,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 500,
-        line-height: 1.32,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$heading-large-text: (
+$heading-4-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 2rem,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 600,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 3rem,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 600,
         line-height: 1.2,
     ),
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 3rem,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 600,
         line-height: 1.2,
     ),
 ) !default;
 
-$heading-medium-text: (
+$heading-4-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 2rem,
+        font-size: 24px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 2rem,
+        font-size: 24px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
 ) !default;
 
-$heading-small-text: (
+$heading-4-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+) !default;
+
+$heading-5-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.125rem,
+        font-size: 16px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 400,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.5rem,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 400,
         line-height: 1.2,
     ),
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.5rem,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 400,
         line-height: 1.2,
     ),
 ) !default;
 
-$heading-xlarge-text: (
+$heading-5-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 3rem,
+        font-size: 16px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 600,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 4rem,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 600,
         line-height: 1.2,
     ),
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 4rem,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 700,
+        font-weight: 600,
         line-height: 1.2,
     ),
 ) !default;
 
-$heading-xsmall-text: (
+$heading-5-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 1rem,
+        font-size: 16px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 1.25rem,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
 ) !default;
 
+$heading-5-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+) !default;
+
+$body-1-regular: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.6,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.6,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.6,
+    ),
+) !default;
+
+$body-1-semibold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.6,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.6,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.6,
+    ),
+) !default;
+
+$body-1-bold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.6,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.6,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.6,
+    ),
+) !default;
+
+$body-1-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.6,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.6,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.6,
+    ),
+) !default;
+
+$body-2-regular: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.55,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.55,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.55,
+    ),
+) !default;
+
+$body-2-semibold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.55,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.55,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.55,
+    ),
+) !default;
+
+$body-2-bold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.55,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.55,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.55,
+    ),
+) !default;
+
+$body-2-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.55,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.55,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.55,
+    ),
+) !default;
+
+$body-3-regular: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.5,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.5,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.5,
+    ),
+) !default;
+
+$body-3-semibold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.5,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.5,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.5,
+    ),
+) !default;
+
+$body-3-bold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.5,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.5,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.5,
+    ),
+) !default;
+
+$body-3-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.5,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.5,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 18px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.5,
+    ),
+) !default;
+
+$body-4-regular: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.42,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.42,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.42,
+    ),
+) !default;
+
+$body-4-semibold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.42,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.42,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.42,
+    ),
+) !default;
+
+$body-4-bold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.42,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.42,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.42,
+    ),
+) !default;
+
+$body-4-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.42,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.42,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 16px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.42,
+    ),
+) !default;
+
+$body-5-regular: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 12px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.32,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.32,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.32,
+    ),
+) !default;
+
+$body-5-semibold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 12px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.32,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.32,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.32,
+    ),
+) !default;
+
+$body-5-bold: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 12px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.32,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.32,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.32,
+    ),
+) !default;
+
+$body-5-italic: (
+    mobile: (
+        font-family: "'Inter', sans-serif",
+        font-size: 12px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.32,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.32,
+    ),
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 14px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.32,
+    ),
+) !default;
+
 $styles: (
-    body-large-text-bold: $body-large-text-bold,
-    body-large-text-italic: $body-large-text-italic,
-    body-large-text-regular: $body-large-text-regular,
-    body-large-text-semibold: $body-large-text-semibold,
-    body-medium-text-bold: $body-medium-text-bold,
-    body-medium-text-italic: $body-medium-text-italic,
-    body-medium-text-regular: $body-medium-text-regular,
-    body-medium-text-semibold: $body-medium-text-semibold,
-    body-small-text-bold: $body-small-text-bold,
-    body-small-text-italic: $body-small-text-italic,
-    body-small-text-regular: $body-small-text-regular,
-    body-small-text-semibold: $body-small-text-semibold,
-    body-xlarge-text-bold: $body-xlarge-text-bold,
-    body-xlarge-text-italic: $body-xlarge-text-italic,
-    body-xlarge-text-regular: $body-xlarge-text-regular,
-    body-xlarge-text-semibold: $body-xlarge-text-semibold,
-    body-xsmall-text-bold: $body-xsmall-text-bold,
-    body-xsmall-text-italic: $body-xsmall-text-italic,
-    body-xsmall-text-regular: $body-xsmall-text-regular,
-    body-xsmall-text-semibold: $body-xsmall-text-semibold,
-    heading-large-text: $heading-large-text,
-    heading-medium-text: $heading-medium-text,
-    heading-small-text: $heading-small-text,
-    heading-xlarge-text: $heading-xlarge-text,
-    heading-xsmall-text: $heading-xsmall-text,
+    heading-1-regular: $heading-1-regular,
+    heading-1-semibold: $heading-1-semibold,
+    heading-1-bold: $heading-1-bold,
+    heading-1-italic: $heading-1-italic,
+    heading-2-regular: $heading-2-regular,
+    heading-2-semibold: $heading-2-semibold,
+    heading-2-bold: $heading-2-bold,
+    heading-2-italic: $heading-2-italic,
+    heading-3-regular: $heading-3-regular,
+    heading-3-semibold: $heading-3-semibold,
+    heading-3-bold: $heading-3-bold,
+    heading-3-italic: $heading-3-italic,
+    heading-4-regular: $heading-4-regular,
+    heading-4-semibold: $heading-4-semibold,
+    heading-4-bold: $heading-4-bold,
+    heading-4-italic: $heading-4-italic,
+    heading-5-regular: $heading-5-regular,
+    heading-5-semibold: $heading-5-semibold,
+    heading-5-bold: $heading-5-bold,
+    heading-5-italic: $heading-5-italic,
+    body-1-regular: $body-1-regular,
+    body-1-semibold: $body-1-semibold,
+    body-1-bold: $body-1-bold,
+    body-1-italic: $body-1-italic,
+    body-2-regular: $body-2-regular,
+    body-2-semibold: $body-2-semibold,
+    body-2-bold: $body-2-bold,
+    body-2-italic: $body-2-italic,
+    body-3-regular: $body-3-regular,
+    body-3-semibold: $body-3-semibold,
+    body-3-bold: $body-3-bold,
+    body-3-italic: $body-3-italic,
+    body-4-regular: $body-4-regular,
+    body-4-semibold: $body-4-semibold,
+    body-4-bold: $body-4-bold,
+    body-4-italic: $body-4-italic,
+    body-5-regular: $body-5-regular,
+    body-5-semibold: $body-5-semibold,
+    body-5-bold: $body-5-bold,
+    body-5-italic: $body-5-italic,
 ) !default;
diff --git a/packages/design-tokens/src/scss/themes/light-inverted/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-inverted/_colors.scss
similarity index 69%
rename from packages/design-tokens/src/scss/themes/light-inverted/_colors.scss
rename to packages/design-tokens/src/scss/themes/theme-light-inverted/_colors.scss
index e0ee4fb3c7..e4b617e38f 100644
--- a/packages/design-tokens/src/scss/themes/light-inverted/_colors.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-inverted/_colors.scss
@@ -1,118 +1,121 @@
-// Generated Colors from Supernova. Do not edit manually.
 // Manually created from Figma
-$text-primary: #ffffff !default;
+$text-primary: #fff !default;
 $text-secondary: #e9e9e9 !default;
 $text-tertiary: #d6d6d6 !default;
 
-$emotion-danger-active: #ffffff !default;
+$emotion-danger-active: #fff !default;
 $emotion-danger-background: #ba3e5a !default;
-$emotion-danger-border: #ffffff !default;
+$emotion-danger-border: #fff !default;
 $emotion-danger-content: #e84b6f !default;
-$emotion-danger-hover: #ffffff !default;
+$emotion-danger-default: #fff !default;
+$emotion-danger-hover: #fff !default;
 
-$emotion-informative-active: #ffffff !default;
+$emotion-informative-active: #fff !default;
 $emotion-informative-background: #3b6bab !default;
-$emotion-informative-border: #ffffff !default;
-$emotion-informative-content: #ffffff !default;
-$emotion-informative-hover: #ffffff !default;
+$emotion-informative-border: #fff !default;
+$emotion-informative-content: #fff !default;
+$emotion-informative-default: #fff !default;
+$emotion-informative-hover: #fff !default;
 
-$emotion-success-active: #ffffff !default;
+$emotion-success-active: #fff !default;
 $emotion-success-background: #607c13 !default;
-$emotion-success-border: #ffffff !default;
+$emotion-success-border: #fff !default;
 $emotion-success-content: #88b412 !default;
-$emotion-success-hover: #ffffff !default;
+$emotion-success-default: #fff !default;
+$emotion-success-hover: #fff !default;
 
-$emotion-warning-active: #ffffff !default;
+$emotion-warning-active: #fff !default;
 $emotion-warning-background: #a98300 !default;
-$emotion-warning-border: #ffffff !default;
+$emotion-warning-border: #fff !default;
 $emotion-warning-content: #d1a200 !default;
-$emotion-warning-hover: #ffffff !default;
+$emotion-warning-default: #fff !default;
+$emotion-warning-hover: #fff !default;
 
-$custom-01-active: #ffffff !default;
-$custom-01-background: #ffffff !default;
-$custom-01-content: #ffffff !default;
-$custom-01-default: #ffffff !default;
-$custom-01-hover: #ffffff !default;
+$custom-01-active: #fff !default;
+$custom-01-background: #fff !default;
+$custom-01-content: #fff !default;
+$custom-01-default: #fff !default;
+$custom-01-hover: #fff !default;
 
-$custom-02-active: #ffffff !default;
-$custom-02-background: #ffffff !default;
-$custom-02-content: #ffffff !default;
-$custom-02-default: #ffffff !default;
-$custom-02-hover: #ffffff !default;
+$custom-02-active: #fff !default;
+$custom-02-background: #fff !default;
+$custom-02-content: #fff !default;
+$custom-02-default: #fff !default;
+$custom-02-hover: #fff !default;
 
 $disabled-background: #ffffff1a !default;
-$disabled-border: #ffffff33 !default;
-$disabled-foreground: #ffffff !default;
+$disabled-border: #fff3 !default;
+$disabled-foreground: #fff !default;
 $disabled-text: #ffffff80 !default;
 
-$border-interactive-active: #ffffff !default;
-$border-interactive-default: #ffffff !default;
+$border-interactive-active: #fff !default;
+$border-interactive-default: #fff !default;
 $border-interactive-error: #e84b6f !default;
-$border-interactive-hover: #ffffff !default;
+$border-interactive-hover: #fff !default;
 
-$border-interactive-informative: #ffffff !default;
-$border-interactive-selected: #ffffff !default;
-$border-interactive-success: #ffffff !default;
+$border-interactive-informative: #fff !default;
+$border-interactive-selected: #fff !default;
+$border-interactive-success: #fff !default;
 $border-interactive-warning: #d1a200 !default;
 
-$border-secondary-default: #ffffff !default;
+$border-secondary-default: #fff !default;
 
-$border-focus-default: #ffffff !default;
+$border-focus-default: #fff !default;
 
-$action-button-plain-active: #ffffff !default;
-$action-button-plain-border: #ffffff !default;
-$action-button-plain-content: #ffffff !default;
-$action-button-plain-default: #ffffff !default;
-$action-button-plain-hover: #ffffff !default;
+$action-button-plain-active: #fff !default;
+$action-button-plain-border: #fff !default;
+$action-button-plain-content: #fff !default;
+$action-button-plain-default: #fff !default;
+$action-button-plain-hover: #fff !default;
 
 $action-button-primary-active: #ffffffbf !default;
 $action-button-primary-border: #0617ac80 !default;
 $action-button-primary-content: #0617ac !default;
-$action-button-primary-default: #ffffff !default;
+$action-button-primary-default: #fff !default;
 $action-button-primary-hover: #ffffffe5 !default;
 
 $action-button-secondary-active: #ffffff1a !default;
-$action-button-secondary-border: #ffffff66 !default;
-$action-button-secondary-content: #ffffff !default;
-$action-button-secondary-default: #ffffff33 !default;
+$action-button-secondary-border: #fff6 !default;
+$action-button-secondary-content: #fff !default;
+$action-button-secondary-default: #fff3 !default;
 $action-button-secondary-hover: #ffffff26 !default;
 
 $action-button-tertiary-active: #00000026 !default;
-$action-button-tertiary-border: #ffffff66 !default;
-$action-button-tertiary-content: #ffffff !default;
-$action-button-tertiary-default: #ffffff00 !default;
+$action-button-tertiary-border: #fff6 !default;
+$action-button-tertiary-content: #fff !default;
+$action-button-tertiary-default: #fff0 !default;
 $action-button-tertiary-hover: #0000001a !default;
 
 $action-link-primary-active: #9d9d9d !default;
 $action-link-primary-default: #ededed !default;
 $action-link-primary-hover: #ededed !default;
 
-$action-link-secondary-active: #ffffff !default;
+$action-link-secondary-active: #fff !default;
 $action-link-secondary-default: #9d9d9d !default;
 $action-link-secondary-hover: #ededed !default;
 
-$action-link-tertiary-active: #ffffff !default;
+$action-link-tertiary-active: #fff !default;
 $action-link-tertiary-default: #b6efec !default;
 $action-link-tertiary-hover: #ededed !default;
 
 $action-link-visited-default: #cfe161 !default;
 
-$background-formfield-active: #ffffff1a !default;
-$background-formfield-default: #ffffff00 !default;
-$background-formfield-hover: #ffffff1a !default;
+$background-form-field-active: #ffffff1a !default;
+$background-form-field-default: #fff0 !default;
+$background-form-field-hover: #ffffff1a !default;
 
-$background-brand-primary: #ffffff !default;
-$background-brand-secondary: #ffffff !default;
+$background-brand-primary: #fff !default;
+$background-brand-secondary: #fff !default;
 
-$background-interactive-active: #ffffff33 !default;
-$background-interactive-default: #ffffff00 !default;
+$background-interactive-active: #fff3 !default;
+$background-interactive-default: #fff0 !default;
 $background-interactive-hover: #ffffff1a !default;
 
 $background-backdrop: #0b1c2199 !default;
 
 $background-primary: #0617ac !default;
 $background-secondary: #07181e !default;
-$background-tertiary: #ffffff !default;
+$background-tertiary: #fff !default;
 
 $text-colors: (
     primary: $text-primary,
@@ -121,6 +124,13 @@ $text-colors: (
 ) !default;
 
 $emotion-colors: (
+    danger: (
+        hover: $emotion-danger-hover,
+        active: $emotion-danger-active,
+        background: $emotion-danger-background,
+        content: $emotion-danger-content,
+        border: $emotion-danger-border,
+    ),
     informative: (
         hover: $emotion-informative-hover,
         active: $emotion-informative-active,
@@ -142,13 +152,6 @@ $emotion-colors: (
         content: $emotion-warning-content,
         border: $emotion-warning-border,
     ),
-    danger: (
-        hover: $emotion-danger-hover,
-        active: $emotion-danger-active,
-        background: $emotion-danger-background,
-        content: $emotion-danger-content,
-        border: $emotion-danger-border,
-    ),
 ) !default;
 
 $custom-colors: (
@@ -244,10 +247,10 @@ $action-colors: (
 ) !default;
 
 $background-colors: (
-    formfield: (
-        default: $background-formfield-default,
-        hover: $background-formfield-hover,
-        active: $background-formfield-active,
+    form-field: (
+        default: $background-form-field-default,
+        hover: $background-form-field-hover,
+        active: $background-form-field-active,
     ),
     brand: (
         primary: $background-brand-primary,
diff --git a/packages/design-tokens/src/scss/themes/light-inverted/_gradients.scss b/packages/design-tokens/src/scss/themes/theme-light-inverted/_gradients.scss
similarity index 77%
rename from packages/design-tokens/src/scss/themes/light-inverted/_gradients.scss
rename to packages/design-tokens/src/scss/themes/theme-light-inverted/_gradients.scss
index 71aab252b1..484ceb9f04 100644
--- a/packages/design-tokens/src/scss/themes/light-inverted/_gradients.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-inverted/_gradients.scss
@@ -1,4 +1,3 @@
-// Generated Gradients from Supernova. Do not edit manually.
 // Copied from light theme
 $gradient-background-basic: linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%) !default;
 
diff --git a/packages/design-tokens/src/scss/themes/light-inverted/_shadows.scss b/packages/design-tokens/src/scss/themes/theme-light-inverted/_shadows.scss
similarity index 86%
rename from packages/design-tokens/src/scss/themes/light-inverted/_shadows.scss
rename to packages/design-tokens/src/scss/themes/theme-light-inverted/_shadows.scss
index 76cea487f4..e58f84818a 100644
--- a/packages/design-tokens/src/scss/themes/light-inverted/_shadows.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-inverted/_shadows.scss
@@ -1,4 +1,3 @@
-// Generated Shadows from Supernova. Do not edit manually.
 // Copied from light theme
 $shadow-100: 0 2px 8px 0 #00000026 !default;
 $shadow-200: 0 4px 12px 0 #0003 !default;
diff --git a/packages/design-tokens/src/scss/themes/light-inverted/index.scss b/packages/design-tokens/src/scss/themes/theme-light-inverted/index.scss
similarity index 100%
rename from packages/design-tokens/src/scss/themes/light-inverted/index.scss
rename to packages/design-tokens/src/scss/themes/theme-light-inverted/index.scss
diff --git a/packages/design-tokens/src/scss/themes/light/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light/_colors.scss
similarity index 89%
rename from packages/design-tokens/src/scss/themes/light/_colors.scss
rename to packages/design-tokens/src/scss/themes/theme-light/_colors.scss
index a209a66689..c456dc1545 100644
--- a/packages/design-tokens/src/scss/themes/light/_colors.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light/_colors.scss
@@ -1,42 +1,45 @@
-// Generated Colors from Supernova. Do not edit manually.
 // Manually created from Figma
 $text-primary: #132930 !default;
 $text-secondary: #5c747b !default;
 $text-tertiary: #e4e4e4 !default;
 
+$emotion-danger-active: #6f2535 !default;
+$emotion-danger-background: #fbeef1 !default;
+$emotion-danger-border: #ba3e5a !default;
+$emotion-danger-content: #ba3e5a !default;
+$emotion-danger-default: #ba3e5a !default;
+$emotion-danger-hover: #953248 !default;
+
 $emotion-informative-active: #26456e !default;
 $emotion-informative-background: #e8eff7 !default;
 $emotion-informative-border: #3b6bab !default;
 $emotion-informative-content: #3b6bab !default;
+$emotion-informative-default: #3b6bab !default;
 $emotion-informative-hover: #30588c !default;
 
 $emotion-success-active: #33420a !default;
 $emotion-success-background: #f6fbe9 !default;
 $emotion-success-border: #607c13 !default;
 $emotion-success-content: #607c13 !default;
+$emotion-success-default: #607c13 !default;
 $emotion-success-hover: #485d0e !default;
 
 $emotion-warning-active: #423400 !default;
 $emotion-warning-background: #f8f2e4 !default;
 $emotion-warning-border: #a98300 !default;
 $emotion-warning-content: #a98300 !default;
+$emotion-warning-default: #a98300 !default;
 $emotion-warning-hover: #755b00 !default;
 
-$emotion-danger-active: #6f2535 !default;
-$emotion-danger-background: #fbeef1 !default;
-$emotion-danger-border: #ba3e5a !default;
-$emotion-danger-content: #ba3e5a !default;
-$emotion-danger-hover: #953248 !default;
-
 $custom-01-active: #cca22f !default;
-$custom-01-background: #ffffff !default;
-$custom-01-content: #ffffff !default;
+$custom-01-background: #fff !default;
+$custom-01-content: #fff !default;
 $custom-01-default: #ffcb3b !default;
 $custom-01-hover: #e6b735 !default;
 
 $custom-02-active: #0aa085 !default;
-$custom-02-background: #ffffff !default;
-$custom-02-content: #ffffff !default;
+$custom-02-background: #fff !default;
+$custom-02-content: #fff !default;
 $custom-02-default: #0cc8a6 !default;
 $custom-02-hover: #0bb496 !default;
 
@@ -60,21 +63,21 @@ $border-secondary-default: #e9e9e9 !default;
 $border-focus-default: #4666ae !default;
 
 $action-button-plain-active: #e7e7e7 !default;
-$action-button-plain-border: #ffffff !default;
+$action-button-plain-border: #fff !default;
 $action-button-plain-content: #132930 !default;
-$action-button-plain-default: #ffffff !default;
+$action-button-plain-default: #fff !default;
 $action-button-plain-hover: #f1f1f1 !default;
 
 $action-button-primary-active: #0b3a46 !default;
 $action-button-primary-border: #0b3a46 !default;
-$action-button-primary-content: #ffffff !default;
+$action-button-primary-content: #fff !default;
 $action-button-primary-default: #29616f !default;
 $action-button-primary-hover: #1b5260 !default;
 
 $action-button-secondary-active: #e5e5e5 !default;
-$action-button-secondary-border: #dddddd !default;
+$action-button-secondary-border: #ddd !default;
 $action-button-secondary-content: #132930 !default;
-$action-button-secondary-default: #ffffff !default;
+$action-button-secondary-default: #fff !default;
 $action-button-secondary-hover: #efefef !default;
 
 $action-button-tertiary-active: #dbdbdb !default;
@@ -97,22 +100,22 @@ $action-link-tertiary-hover: #ababab !default;
 
 $action-link-visited-default: #835ea1 !default;
 
-$background-formfield-active: #ffffff !default;
-$background-formfield-default: #ffffff !default;
-$background-formfield-hover: #ffffff !default;
+$background-form-field-active: #fff !default;
+$background-form-field-default: #fff !default;
+$background-form-field-hover: #fff !default;
 
 $background-brand-primary: #0b1c21 !default;
 $background-brand-secondary: #30588c !default;
 
 $background-interactive-active: #f1f1f1 !default;
-$background-interactive-default: #ffffff00 !default;
+$background-interactive-default: #fff0 !default;
 $background-interactive-hover: #f5f5f5 !default;
 
 $background-backdrop: #0b1c2199 !default;
 
-$background-primary: #ffffff !default;
+$background-primary: #fff !default;
 $background-secondary: #f0f0f0 !default;
-$background-tertiary: #000000 !default;
+$background-tertiary: #000 !default;
 
 $text-colors: (
     primary: $text-primary,
@@ -121,6 +124,13 @@ $text-colors: (
 ) !default;
 
 $emotion-colors: (
+    danger: (
+        hover: $emotion-danger-hover,
+        active: $emotion-danger-active,
+        background: $emotion-danger-background,
+        content: $emotion-danger-content,
+        border: $emotion-danger-border,
+    ),
     informative: (
         hover: $emotion-informative-hover,
         active: $emotion-informative-active,
@@ -142,13 +152,6 @@ $emotion-colors: (
         content: $emotion-warning-content,
         border: $emotion-warning-border,
     ),
-    danger: (
-        hover: $emotion-danger-hover,
-        active: $emotion-danger-active,
-        background: $emotion-danger-background,
-        content: $emotion-danger-content,
-        border: $emotion-danger-border,
-    ),
 ) !default;
 
 $custom-colors: (
@@ -244,10 +247,10 @@ $action-colors: (
 ) !default;
 
 $background-colors: (
-    formfield: (
-        default: $background-formfield-default,
-        hover: $background-formfield-hover,
-        active: $background-formfield-active,
+    form-field: (
+        default: $background-form-field-default,
+        hover: $background-form-field-hover,
+        active: $background-form-field-active,
     ),
     brand: (
         primary: $background-brand-primary,
diff --git a/packages/design-tokens/src/scss/themes/light/_gradients.scss b/packages/design-tokens/src/scss/themes/theme-light/_gradients.scss
similarity index 77%
rename from packages/design-tokens/src/scss/themes/light/_gradients.scss
rename to packages/design-tokens/src/scss/themes/theme-light/_gradients.scss
index d4f1b24477..c5c6b08c8a 100644
--- a/packages/design-tokens/src/scss/themes/light/_gradients.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light/_gradients.scss
@@ -1,4 +1,3 @@
-// Generated Gradients from Supernova. Do not edit manually.
 // Copied from last version
 $gradient-background-basic: linear-gradient(var(--gradient-angle, 90deg), #fff 0%, #fff0 100%) !default;
 
diff --git a/packages/design-tokens/src/scss/themes/light/_shadows.scss b/packages/design-tokens/src/scss/themes/theme-light/_shadows.scss
similarity index 86%
rename from packages/design-tokens/src/scss/themes/light/_shadows.scss
rename to packages/design-tokens/src/scss/themes/theme-light/_shadows.scss
index 4a6baa9825..3578b0b993 100644
--- a/packages/design-tokens/src/scss/themes/light/_shadows.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light/_shadows.scss
@@ -1,4 +1,3 @@
-// Generated Shadows from Supernova. Do not edit manually.
 // Copied from last version
 $shadow-100: 0 2px 8px 0 #00000026 !default;
 $shadow-200: 0 4px 12px 0 #0003 !default;
diff --git a/packages/design-tokens/src/scss/themes/light/index.scss b/packages/design-tokens/src/scss/themes/theme-light/index.scss
similarity index 100%
rename from packages/design-tokens/src/scss/themes/light/index.scss
rename to packages/design-tokens/src/scss/themes/theme-light/index.scss
diff --git a/packages/web/src/scss/components/Divider/_theme.scss b/packages/web/src/scss/components/Divider/_theme.scss
index 8e5ecd4f08..d00504fb9b 100644
--- a/packages/web/src/scss/components/Divider/_theme.scss
+++ b/packages/web/src/scss/components/Divider/_theme.scss
@@ -1,5 +1,5 @@
 @use '@global' as global-tokens;
 
 $border-width: global-tokens.$border-width-100;
-$border-style: global-tokens.$border-solid;
+$border-style: global-tokens.$border-style-solid;
 $border-color: var(--spirit-color-border-secondary-default);
diff --git a/packages/web/src/scss/components/Stack/_theme.scss b/packages/web/src/scss/components/Stack/_theme.scss
index d0aab09221..03e6299ec5 100644
--- a/packages/web/src/scss/components/Stack/_theme.scss
+++ b/packages/web/src/scss/components/Stack/_theme.scss
@@ -1,5 +1,5 @@
 @use '@global' as global-tokens;
 
 $breakpoints: global-tokens.$breakpoints;
-$border: global-tokens.$border-width-100 global-tokens.$border-solid var(--spirit-color-border-secondary-default);
+$border: global-tokens.$border-width-100 global-tokens.$border-style-solid var(--spirit-color-border-secondary-default);
 $spacing-fallback: global-tokens.$space-600;
diff --git a/packages/web/src/scss/components/Tabs/_theme.scss b/packages/web/src/scss/components/Tabs/_theme.scss
index 2f1eb7018f..6affee8232 100644
--- a/packages/web/src/scss/components/Tabs/_theme.scss
+++ b/packages/web/src/scss/components/Tabs/_theme.scss
@@ -5,7 +5,7 @@ $item-padding-x: global-tokens.$space-600;
 $link-padding-y: global-tokens.$space-400;
 $link-color: var(--spirit-color-text-primary);
 $spacing-fallback: global-tokens.$space-700;
-$item-typography: global-tokens.$body-medium-text-regular;
-$item-selected-typography: global-tokens.$body-medium-text-bold;
+$item-typography: global-tokens.$body-3-regular;
+$item-selected-typography: global-tokens.$body-3-bold;
 $item-selected-underline-background: var(--spirit-color-border-interactive-selected);
 $item-selected-underline-border-radius: global-tokens.$radius-100;
diff --git a/packages/web/src/scss/foundation/_tokens.scss b/packages/web/src/scss/foundation/_tokens.scss
index 0a328f5c7e..d694959b18 100644
--- a/packages/web/src/scss/foundation/_tokens.scss
+++ b/packages/web/src/scss/foundation/_tokens.scss
@@ -3,9 +3,9 @@
 :root {
     // Print all token values as CSS variables
     // Borders
-    --spirit-border-style-none: #{global-tokens.$border-none};
-    --spirit-border-style-solid: #{global-tokens.$border-solid};
-    --spirit-border-style-dashed: #{global-tokens.$border-dashed};
+    --spirit-border-style-none: #{global-tokens.$border-style-none};
+    --spirit-border-style-solid: #{global-tokens.$border-style-solid};
+    --spirit-border-style-dashed: #{global-tokens.$border-style-dashed};
     --spirit-border-width-0: #{global-tokens.$border-width-0};
     --spirit-border-width-100: #{global-tokens.$border-width-100};
     --spirit-border-width-200: #{global-tokens.$border-width-200};
diff --git a/packages/web/src/scss/foundation/_typography.scss b/packages/web/src/scss/foundation/_typography.scss
index 5b0d5f65d2..ab66c73e82 100644
--- a/packages/web/src/scss/foundation/_typography.scss
+++ b/packages/web/src/scss/foundation/_typography.scss
@@ -8,7 +8,7 @@
 }
 
 :where(body) {
-    @include typography.generate(global-tokens.$body-medium-text-regular);
+    @include typography.generate(global-tokens.$body-3-regular);
 }
 
 // stylelint-disable-next-line selector-max-universal
diff --git a/packages/web/src/scss/themes/index.scss b/packages/web/src/scss/themes/index.scss
index d158c138eb..b7ef6af754 100644
--- a/packages/web/src/scss/themes/index.scss
+++ b/packages/web/src/scss/themes/index.scss
@@ -14,7 +14,7 @@ $global-prefix: 'spirit-';
     $theme-colors: map.get($value, 'colors');
     $theme-gradients: map.get($value, 'gradients');
     $theme-shadows: map.get($value, 'shadows');
-    $selector: if($is-default-theme, ':root, .#{$global-prefix}theme-#{$key}', '.#{$global-prefix}theme-#{$key}');
+    $selector: if($is-default-theme, ':root, .#{$global-prefix}#{$key}', '.#{$global-prefix}#{$key}');
 
     #{$selector} {
         @each $token-type-key, $token-type-value in $value {