diff --git a/.prettierignore b/.prettierignore
index 8e52040617..87e6cdec03 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -42,6 +42,12 @@ packages/**/*.hbs
 # Ignore codemods test outputs, because we compare them with generated code which we cannot format
 packages/codemods/src/transforms/**/*.output.tsx
 
+# Ignore generated files by supernova
+packages/design-tokens/src/**/*
+
+# Ignore built files
+packages/design-tokens/scss/**/*
+
 # Yarn Modern
 # @see: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .yarn/plugins
diff --git a/packages/design-tokens/src/js/global-tokens/gradients.ts b/packages/design-tokens/src/js/global-tokens/gradients.ts
index 938884ef91..073aa1d488 100644
--- a/packages/design-tokens/src/js/global-tokens/gradients.ts
+++ b/packages/design-tokens/src/js/global-tokens/gradients.ts
@@ -1,6 +1,5 @@
 /* This file was generated by Supernova, don't change manually */
-export const gradientBasicOverlay =
-  'linear-gradient(var(--gradient-angle, 90deg), var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%)';
+export const gradientBasicOverlay = 'linear-gradient(var(--gradient-angle, 90deg), var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%)';
 
 export const gradients = {
   basicOverlay: gradientBasicOverlay,
diff --git a/packages/design-tokens/src/js/global-tokens/typography.ts b/packages/design-tokens/src/js/global-tokens/typography.ts
index 51cdbf566f..541fa3ca9c 100644
--- a/packages/design-tokens/src/js/global-tokens/typography.ts
+++ b/packages/design-tokens/src/js/global-tokens/typography.ts
@@ -1,145 +1,115 @@
 /* This file was generated by Supernova, don't change manually */
-export const headingXlargeRegular = {
+export const headingXlargeBold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '48px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 700,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '48px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 700,
     lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '36px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 700,
     lineHeight: 1.2,
   },
 };
 
-export const headingXlargeSemibold = {
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.2,
-  },
+export const bodyMediumRegular = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '36px',
+    fontSize: '16px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.2,
+    fontWeight: 400,
+    lineHeight: 1.5,
   },
 };
 
-export const headingXlargeBold = {
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
-  },
-  tablet: {
+export const bodyLargeRegular = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '18px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.2,
+    fontWeight: 400,
+    lineHeight: 1.5,
   },
+};
+
+export const bodyLargeBold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '36px',
+    fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.5,
   },
 };
 
-export const headingXlargeItalic = {
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.2,
-  },
+export const bodyLargeItalic = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '36px',
+    fontSize: '18px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.5,
   },
 };
 
-export const headingLargeRegular = {
-  desktop: {
+export const bodyMediumBold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '40px',
+    fontSize: '16px',
     fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.2,
+    fontWeight: 700,
+    lineHeight: 1.5,
   },
-  tablet: {
+};
+
+export const bodyMediumItalic = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '40px',
-    fontStyle: 'normal',
+    fontSize: '16px',
+    fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.5,
   },
+};
+
+export const bodySmallRegular = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
+    fontSize: '14px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.5,
   },
 };
 
-export const headingLargeSemibold = {
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '40px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.2,
-  },
-  tablet: {
+export const bodySmallBold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '40px',
+    fontSize: '14px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.2,
+    fontWeight: 700,
+    lineHeight: 1.5,
   },
+};
+
+export const bodySmallItalic = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.2,
+    fontSize: '14px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.5,
   },
 };
 
@@ -167,557 +137,587 @@ export const headingLargeBold = {
   },
 };
 
-export const headingLargeItalic = {
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '40px',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.2,
-  },
-  tablet: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '40px',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.2,
-  },
-  mobile: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.2,
-  },
-};
-
-export const headingMediumRegular = {
+export const headingMediumBold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '32px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 700,
     lineHeight: 1.3,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '32px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 700,
     lineHeight: 1.3,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 700,
     lineHeight: 1.4,
   },
 };
 
-export const headingMediumSemibold = {
+export const headingSmallBold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
+    fontSize: '24px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.3,
+    fontWeight: 700,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
+    fontSize: '24px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.3,
+    fontWeight: 700,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '20px',
     fontStyle: 'normal',
-    fontWeight: 600,
+    fontWeight: 700,
     lineHeight: 1.4,
   },
 };
 
-export const headingMediumBold = {
+export const headingXsmallBold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.3,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.3,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 1.4,
   },
 };
 
-export const headingMediumItalic = {
-  desktop: {
+export const bodyXsmallRegular = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
-    fontStyle: 'italic',
+    fontSize: '12px',
+    fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.3,
+    lineHeight: 1.5,
   },
-  tablet: {
+};
+
+export const bodyXsmallBold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '32px',
-    fontStyle: 'italic',
-    fontWeight: 400,
-    lineHeight: 1.3,
+    fontSize: '12px',
+    fontStyle: 'normal',
+    fontWeight: 700,
+    lineHeight: 1.5,
   },
+};
+
+export const bodyXsmallItalic = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '12px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
 };
 
-export const headingSmallRegular = {
-  desktop: {
+export const bodyXlargeRegular = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
-  tablet: {
+};
+
+export const bodyXlargeBold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '20px',
     fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: 1.4,
+    fontWeight: 700,
+    lineHeight: 1.5,
   },
+};
+
+export const bodyXlargeItalic = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
-    fontStyle: 'normal',
+    fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
 };
 
-export const headingSmallSemibold = {
-  desktop: {
+export const bodyXlargeSemibold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
-  tablet: {
+};
+
+export const bodyLargeSemibold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
+};
+
+export const bodyMediumSemibold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '16px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.4,
+    lineHeight: 1.5,
   },
 };
 
-export const headingSmallBold = {
-  desktop: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
-    fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.4,
-  },
-  tablet: {
+export const bodySmallSemibold = {
+  mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '24px',
+    fontSize: '14px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.4,
+    fontWeight: 600,
+    lineHeight: 1.5,
   },
+};
+
+export const bodyXsmallSemibold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '12px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.4,
+    fontWeight: 600,
+    lineHeight: 1.5,
   },
 };
 
-export const headingSmallItalic = {
+export const headingSmallSemibold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
-    fontStyle: 'italic',
-    fontWeight: 400,
+    fontStyle: 'normal',
+    fontWeight: 600,
     lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
-    fontStyle: 'italic',
-    fontWeight: 400,
+    fontStyle: 'normal',
+    fontWeight: 600,
     lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
-    fontStyle: 'italic',
-    fontWeight: 400,
+    fontStyle: 'normal',
+    fontWeight: 600,
     lineHeight: 1.4,
   },
 };
 
-export const headingXsmallRegular = {
+export const headingXsmallSemibold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 600,
     lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 600,
     lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '18px',
     fontStyle: 'normal',
-    fontWeight: 400,
+    fontWeight: 600,
     lineHeight: 1.4,
   },
 };
 
-export const headingXsmallSemibold = {
+export const headingXlargeRegular = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '48px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.4,
+    fontWeight: 400,
+    lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '48px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.4,
+    fontWeight: 400,
+    lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '36px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.4,
+    fontWeight: 400,
+    lineHeight: 1.2,
   },
 };
 
-export const headingXsmallBold = {
+export const headingXlargeSemibold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '48px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.4,
+    fontWeight: 600,
+    lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '48px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.4,
+    fontWeight: 600,
+    lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '36px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.4,
+    fontWeight: 600,
+    lineHeight: 1.2,
   },
 };
 
-export const headingXsmallItalic = {
+export const headingXlargeItalic = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '48px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.4,
+    lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '48px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.4,
+    lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '36px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.4,
+    lineHeight: 1.2,
   },
 };
 
-export const bodyXlargeRegular = {
+export const headingLargeRegular = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '40px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '40px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: 1.2,
+  },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.2,
   },
 };
 
-export const bodyXlargeSemibold = {
-  mobile: {
+export const headingLargeSemibold = {
+  desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.5,
+    lineHeight: 1.2,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '40px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.2,
   },
-};
-
-export const bodyXlargeBold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '32px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.5,
+    fontWeight: 600,
+    lineHeight: 1.2,
   },
 };
 
-export const bodyXlargeItalic = {
-  mobile: {
+export const headingLargeItalic = {
+  desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '40px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.2,
   },
-};
-
-export const bodyLargeRegular = {
-  mobile: {
+  tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
-    fontStyle: 'normal',
+    fontSize: '40px',
+    fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.2,
   },
-};
-
-export const bodyLargeSemibold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
-    fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.5,
+    fontSize: '32px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.2,
   },
 };
 
-export const bodyLargeBold = {
-  mobile: {
+export const headingMediumRegular = {
+  desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '32px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.5,
+    fontWeight: 400,
+    lineHeight: 1.3,
   },
-};
-
-export const bodyLargeItalic = {
-  mobile: {
+  tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
-    fontStyle: 'italic',
+    fontSize: '32px',
+    fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.3,
   },
-};
-
-export const bodyMediumRegular = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
 };
 
-export const bodyMediumSemibold = {
-  mobile: {
+export const headingMediumSemibold = {
+  desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.5,
+    lineHeight: 1.3,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1.3,
   },
-};
-
-export const bodyMediumBold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '24px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.5,
+    fontWeight: 600,
+    lineHeight: 1.4,
   },
 };
 
-export const bodyMediumItalic = {
+export const headingMediumItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.3,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '32px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.3,
+  },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '24px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
 };
 
-export const bodySmallRegular = {
-  mobile: {
+export const headingSmallRegular = {
+  desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '14px',
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
-};
-
-export const bodySmallSemibold = {
-  mobile: {
+  tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '14px',
+    fontSize: '24px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.5,
+    fontWeight: 400,
+    lineHeight: 1.4,
   },
-};
-
-export const bodySmallBold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '14px',
+    fontSize: '20px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.5,
+    fontWeight: 400,
+    lineHeight: 1.4,
   },
 };
 
-export const bodySmallItalic = {
+export const headingSmallItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.4,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '24px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.4,
+  },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '14px',
+    fontSize: '20px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
 };
 
-export const bodyXsmallRegular = {
-  mobile: {
+export const headingXsmallRegular = {
+  desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '12px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
-};
-
-export const bodyXsmallSemibold = {
-  mobile: {
+  tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '12px',
+    fontSize: '20px',
     fontStyle: 'normal',
-    fontWeight: 600,
-    lineHeight: 1.5,
+    fontWeight: 400,
+    lineHeight: 1.4,
   },
-};
-
-export const bodyXsmallBold = {
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '12px',
+    fontSize: '18px',
     fontStyle: 'normal',
-    fontWeight: 700,
-    lineHeight: 1.5,
+    fontWeight: 400,
+    lineHeight: 1.4,
   },
 };
 
-export const bodyXsmallItalic = {
+export const headingXsmallItalic = {
+  desktop: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.4,
+  },
+  tablet: {
+    fontFamily: "'Inter', sans-serif",
+    fontSize: '20px',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    lineHeight: 1.4,
+  },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '12px',
+    fontSize: '18px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.5,
+    lineHeight: 1.4,
   },
 };
 
 export const styles = {
+  headingXlargeBold,
+  bodyMediumRegular,
+  bodyLargeRegular,
+  bodyLargeBold,
+  bodyLargeItalic,
+  bodyMediumBold,
+  bodyMediumItalic,
+  bodySmallRegular,
+  bodySmallBold,
+  bodySmallItalic,
+  headingLargeBold,
+  headingMediumBold,
+  headingSmallBold,
+  headingXsmallBold,
+  bodyXsmallRegular,
+  bodyXsmallBold,
+  bodyXsmallItalic,
+  bodyXlargeRegular,
+  bodyXlargeBold,
+  bodyXlargeItalic,
+  bodyXlargeSemibold,
+  bodyLargeSemibold,
+  bodyMediumSemibold,
+  bodySmallSemibold,
+  bodyXsmallSemibold,
+  headingSmallSemibold,
+  headingXsmallSemibold,
   headingXlargeRegular,
   headingXlargeSemibold,
-  headingXlargeBold,
   headingXlargeItalic,
   headingLargeRegular,
   headingLargeSemibold,
-  headingLargeBold,
   headingLargeItalic,
   headingMediumRegular,
   headingMediumSemibold,
-  headingMediumBold,
   headingMediumItalic,
   headingSmallRegular,
-  headingSmallSemibold,
-  headingSmallBold,
   headingSmallItalic,
   headingXsmallRegular,
-  headingXsmallSemibold,
-  headingXsmallBold,
   headingXsmallItalic,
-  bodyXlargeRegular,
-  bodyXlargeSemibold,
-  bodyXlargeBold,
-  bodyXlargeItalic,
-  bodyLargeRegular,
-  bodyLargeSemibold,
-  bodyLargeBold,
-  bodyLargeItalic,
-  bodyMediumRegular,
-  bodyMediumSemibold,
-  bodyMediumBold,
-  bodyMediumItalic,
-  bodySmallRegular,
-  bodySmallSemibold,
-  bodySmallBold,
-  bodySmallItalic,
-  bodyXsmallRegular,
-  bodyXsmallSemibold,
-  bodyXsmallBold,
-  bodyXsmallItalic,
 };
diff --git a/packages/design-tokens/src/scss/README.md b/packages/design-tokens/src/scss/README.md
deleted file mode 100644
index 140eab6934..0000000000
--- a/packages/design-tokens/src/scss/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# ⚠️ **DO NOT EDIT MANUALLY!**
-
-The content of this directory is generated by [Supernova][supernova].
-
-[supernova]: https://spirit.supernova-docs.io
diff --git a/packages/design-tokens/src/scss/global-tokens/_gradients.scss b/packages/design-tokens/src/scss/global-tokens/_gradients.scss
index 9ebdd85b8e..d932a4ee78 100644
--- a/packages/design-tokens/src/scss/global-tokens/_gradients.scss
+++ b/packages/design-tokens/src/scss/global-tokens/_gradients.scss
@@ -1,9 +1,5 @@
 /* This file was generated by Supernova, don't change manually */
-$gradient-basic-overlay: linear-gradient(
-    var(--gradient-angle, 90deg),
-    var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%,
-    var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%
-) !default;
+$gradient-basic-overlay: linear-gradient(var(--gradient-angle, 90deg), var(--spirit-color-gradient-basic-overlay-color-01, #fff) 0%, var(--spirit-color-gradient-basic-overlay-color-02, #fff0) 100%) !default;
 
 $gradients: (
     basic-overlay: $gradient-basic-overlay,
diff --git a/packages/design-tokens/src/scss/global-tokens/_typography.scss b/packages/design-tokens/src/scss/global-tokens/_typography.scss
index 26c0b6e5f5..7aee11303f 100644
--- a/packages/design-tokens/src/scss/global-tokens/_typography.scss
+++ b/packages/design-tokens/src/scss/global-tokens/_typography.scss
@@ -1,145 +1,115 @@
 /* This file was generated by Supernova, don't change manually */
-$heading-xlarge-regular: (
+$heading-xlarge-bold: (
     desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 48px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 700,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 48px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 700,
         line-height: 1.2,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
         font-size: 36px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 700,
         line-height: 1.2,
     ),
 ) !default;
 
-$heading-xlarge-semibold: (
-    desktop: (
-        font-family: "'Inter', sans-serif",
-        font-size: 48px,
-        font-style: normal,
-        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,
-    ),
+$body-medium-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 36px,
+        font-size: 16px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.2,
+        font-weight: 400,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-xlarge-bold: (
-    desktop: (
-        font-family: "'Inter', sans-serif",
-        font-size: 48px,
-        font-style: normal,
-        font-weight: 700,
-        line-height: 1.2,
-    ),
-    tablet: (
+$body-large-regular: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 18px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.2,
+        font-weight: 400,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-large-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 36px,
+        font-size: 18px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-xlarge-italic: (
-    desktop: (
-        font-family: "'Inter', sans-serif",
-        font-size: 48px,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.2,
-    ),
-    tablet: (
-        font-family: "'Inter', sans-serif",
-        font-size: 48px,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.2,
-    ),
+$body-large-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 36px,
+        font-size: 18px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-large-regular: (
-    desktop: (
+$body-medium-bold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 40px,
+        font-size: 16px,
         font-style: normal,
-        font-weight: 400,
-        line-height: 1.2,
+        font-weight: 700,
+        line-height: 1.5,
     ),
-    tablet: (
+) !default;
+
+$body-medium-italic: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 40px,
-        font-style: normal,
+        font-size: 16px,
+        font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-small-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 14px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-large-semibold: (
-    desktop: (
-        font-family: "'Inter', sans-serif",
-        font-size: 40px,
-        font-style: normal,
-        font-weight: 600,
-        line-height: 1.2,
-    ),
-    tablet: (
+$body-small-bold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 40px,
+        font-size: 14px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.2,
+        font-weight: 700,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-small-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
-        font-style: normal,
-        font-weight: 600,
-        line-height: 1.2,
+        font-size: 14px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -167,557 +137,587 @@ $heading-large-bold: (
     ),
 ) !default;
 
-$heading-large-italic: (
-    desktop: (
-        font-family: "'Inter', sans-serif",
-        font-size: 40px,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.2,
-    ),
-    tablet: (
-        font-family: "'Inter', sans-serif",
-        font-size: 40px,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.2,
-    ),
-    mobile: (
-        font-family: "'Inter', sans-serif",
-        font-size: 32px,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.2,
-    ),
-) !default;
-
-$heading-medium-regular: (
+$heading-medium-bold: (
     desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 32px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 700,
         line-height: 1.3,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 32px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 700,
         line-height: 1.3,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 700,
         line-height: 1.4,
     ),
 ) !default;
 
-$heading-medium-semibold: (
+$heading-small-bold: (
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.3,
+        font-weight: 700,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.3,
+        font-weight: 700,
+        line-height: 1.4,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 600,
+        font-weight: 700,
         line-height: 1.4,
     ),
 ) !default;
 
-$heading-medium-bold: (
+$heading-xsmall-bold: (
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.3,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.3,
+        line-height: 1.4,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 18px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.4,
     ),
 ) !default;
 
-$heading-medium-italic: (
-    desktop: (
+$body-xsmall-regular: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
-        font-style: italic,
+        font-size: 12px,
+        font-style: normal,
         font-weight: 400,
-        line-height: 1.3,
+        line-height: 1.5,
     ),
-    tablet: (
+) !default;
+
+$body-xsmall-bold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
-        font-style: italic,
-        font-weight: 400,
-        line-height: 1.3,
+        font-size: 12px,
+        font-style: normal,
+        font-weight: 700,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-xsmall-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 12px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.4,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-small-regular: (
-    desktop: (
+$body-xlarge-regular: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.4,
+        line-height: 1.5,
     ),
-    tablet: (
+) !default;
+
+$body-xlarge-bold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 400,
-        line-height: 1.4,
+        font-weight: 700,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-xlarge-italic: (
     mobile: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
-        font-style: normal,
+        font-style: italic,
         font-weight: 400,
-        line-height: 1.4,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-small-semibold: (
-    desktop: (
+$body-xlarge-semibold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.4,
+        line-height: 1.5,
     ),
-    tablet: (
+) !default;
+
+$body-large-semibold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 18px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.4,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-medium-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 16px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.4,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-small-bold: (
-    desktop: (
-        font-family: "'Inter', sans-serif",
-        font-size: 24px,
-        font-style: normal,
-        font-weight: 700,
-        line-height: 1.4,
-    ),
-    tablet: (
+$body-small-semibold: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 14px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.4,
+        font-weight: 600,
+        line-height: 1.5,
     ),
+) !default;
+
+$body-xsmall-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 12px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.4,
+        font-weight: 600,
+        line-height: 1.5,
     ),
 ) !default;
 
-$heading-small-italic: (
+$heading-small-semibold: (
     desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
-        font-style: italic,
-        font-weight: 400,
+        font-style: normal,
+        font-weight: 600,
         line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
-        font-style: italic,
-        font-weight: 400,
+        font-style: normal,
+        font-weight: 600,
         line-height: 1.4,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
-        font-style: italic,
-        font-weight: 400,
+        font-style: normal,
+        font-weight: 600,
         line-height: 1.4,
     ),
 ) !default;
 
-$heading-xsmall-regular: (
+$heading-xsmall-semibold: (
     desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 600,
         line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 600,
         line-height: 1.4,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
         font-size: 18px,
         font-style: normal,
-        font-weight: 400,
+        font-weight: 600,
         line-height: 1.4,
     ),
 ) !default;
 
-$heading-xsmall-semibold: (
+$heading-xlarge-regular: (
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.4,
+        font-weight: 400,
+        line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.4,
+        font-weight: 400,
+        line-height: 1.2,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 36px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.4,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$heading-xsmall-bold: (
+$heading-xlarge-semibold: (
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.4,
+        font-weight: 600,
+        line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 48px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.4,
+        font-weight: 600,
+        line-height: 1.2,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 36px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.4,
+        font-weight: 600,
+        line-height: 1.2,
     ),
 ) !default;
 
-$heading-xsmall-italic: (
+$heading-xlarge-italic: (
     desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 48px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.4,
+        line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 48px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.4,
+        line-height: 1.2,
     ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 36px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.4,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-regular: (
+$heading-large-regular: (
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 40px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 40px,
+        font-style: normal,
+        font-weight: 400,
+        line-height: 1.2,
+    ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-semibold: (
-    mobile: (
+$heading-large-semibold: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.5,
+        line-height: 1.2,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 40px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-xlarge-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 32px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.5,
+        font-weight: 600,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-xlarge-italic: (
-    mobile: (
+$heading-large-italic: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 40px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-large-regular: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
-        font-style: normal,
+        font-size: 40px,
+        font-style: italic,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.2,
     ),
-) !default;
-
-$body-large-semibold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
-        font-style: normal,
-        font-weight: 600,
-        line-height: 1.5,
+        font-size: 32px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.2,
     ),
 ) !default;
 
-$body-large-bold: (
-    mobile: (
+$heading-medium-regular: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 32px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.5,
+        font-weight: 400,
+        line-height: 1.3,
     ),
-) !default;
-
-$body-large-italic: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
-        font-style: italic,
+        font-size: 32px,
+        font-style: normal,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.3,
     ),
-) !default;
-
-$body-medium-regular: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.4,
     ),
 ) !default;
 
-$body-medium-semibold: (
-    mobile: (
+$heading-medium-semibold: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.5,
+        line-height: 1.3,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: normal,
+        font-weight: 600,
+        line-height: 1.3,
     ),
-) !default;
-
-$body-medium-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.5,
+        font-weight: 600,
+        line-height: 1.4,
     ),
 ) !default;
 
-$body-medium-italic: (
+$heading-medium-italic: (
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.3,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 32px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.3,
+    ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 24px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.4,
     ),
 ) !default;
 
-$body-small-regular: (
-    mobile: (
+$heading-small-regular: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 14px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.4,
     ),
-) !default;
-
-$body-small-semibold: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 14px,
+        font-size: 24px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.5,
+        font-weight: 400,
+        line-height: 1.4,
     ),
-) !default;
-
-$body-small-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 14px,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.5,
+        font-weight: 400,
+        line-height: 1.4,
     ),
 ) !default;
 
-$body-small-italic: (
+$heading-small-italic: (
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.4,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 24px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.4,
+    ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 14px,
+        font-size: 20px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.4,
     ),
 ) !default;
 
-$body-xsmall-regular: (
-    mobile: (
+$heading-xsmall-regular: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 12px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.4,
     ),
-) !default;
-
-$body-xsmall-semibold: (
-    mobile: (
+    tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 12px,
+        font-size: 20px,
         font-style: normal,
-        font-weight: 600,
-        line-height: 1.5,
+        font-weight: 400,
+        line-height: 1.4,
     ),
-) !default;
-
-$body-xsmall-bold: (
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 12px,
+        font-size: 18px,
         font-style: normal,
-        font-weight: 700,
-        line-height: 1.5,
+        font-weight: 400,
+        line-height: 1.4,
     ),
 ) !default;
 
-$body-xsmall-italic: (
+$heading-xsmall-italic: (
+    desktop: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.4,
+    ),
+    tablet: (
+        font-family: "'Inter', sans-serif",
+        font-size: 20px,
+        font-style: italic,
+        font-weight: 400,
+        line-height: 1.4,
+    ),
     mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 12px,
+        font-size: 18px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.5,
+        line-height: 1.4,
     ),
 ) !default;
 
 $styles: (
+    heading-xlarge-bold: $heading-xlarge-bold,
+    body-medium-regular: $body-medium-regular,
+    body-large-regular: $body-large-regular,
+    body-large-bold: $body-large-bold,
+    body-large-italic: $body-large-italic,
+    body-medium-bold: $body-medium-bold,
+    body-medium-italic: $body-medium-italic,
+    body-small-regular: $body-small-regular,
+    body-small-bold: $body-small-bold,
+    body-small-italic: $body-small-italic,
+    heading-large-bold: $heading-large-bold,
+    heading-medium-bold: $heading-medium-bold,
+    heading-small-bold: $heading-small-bold,
+    heading-xsmall-bold: $heading-xsmall-bold,
+    body-xsmall-regular: $body-xsmall-regular,
+    body-xsmall-bold: $body-xsmall-bold,
+    body-xsmall-italic: $body-xsmall-italic,
+    body-xlarge-regular: $body-xlarge-regular,
+    body-xlarge-bold: $body-xlarge-bold,
+    body-xlarge-italic: $body-xlarge-italic,
+    body-xlarge-semibold: $body-xlarge-semibold,
+    body-large-semibold: $body-large-semibold,
+    body-medium-semibold: $body-medium-semibold,
+    body-small-semibold: $body-small-semibold,
+    body-xsmall-semibold: $body-xsmall-semibold,
+    heading-small-semibold: $heading-small-semibold,
+    heading-xsmall-semibold: $heading-xsmall-semibold,
     heading-xlarge-regular: $heading-xlarge-regular,
     heading-xlarge-semibold: $heading-xlarge-semibold,
-    heading-xlarge-bold: $heading-xlarge-bold,
     heading-xlarge-italic: $heading-xlarge-italic,
     heading-large-regular: $heading-large-regular,
     heading-large-semibold: $heading-large-semibold,
-    heading-large-bold: $heading-large-bold,
     heading-large-italic: $heading-large-italic,
     heading-medium-regular: $heading-medium-regular,
     heading-medium-semibold: $heading-medium-semibold,
-    heading-medium-bold: $heading-medium-bold,
     heading-medium-italic: $heading-medium-italic,
     heading-small-regular: $heading-small-regular,
-    heading-small-semibold: $heading-small-semibold,
-    heading-small-bold: $heading-small-bold,
     heading-small-italic: $heading-small-italic,
     heading-xsmall-regular: $heading-xsmall-regular,
-    heading-xsmall-semibold: $heading-xsmall-semibold,
-    heading-xsmall-bold: $heading-xsmall-bold,
     heading-xsmall-italic: $heading-xsmall-italic,
-    body-xlarge-regular: $body-xlarge-regular,
-    body-xlarge-semibold: $body-xlarge-semibold,
-    body-xlarge-bold: $body-xlarge-bold,
-    body-xlarge-italic: $body-xlarge-italic,
-    body-large-regular: $body-large-regular,
-    body-large-semibold: $body-large-semibold,
-    body-large-bold: $body-large-bold,
-    body-large-italic: $body-large-italic,
-    body-medium-regular: $body-medium-regular,
-    body-medium-semibold: $body-medium-semibold,
-    body-medium-bold: $body-medium-bold,
-    body-medium-italic: $body-medium-italic,
-    body-small-regular: $body-small-regular,
-    body-small-semibold: $body-small-semibold,
-    body-small-bold: $body-small-bold,
-    body-small-italic: $body-small-italic,
-    body-xsmall-regular: $body-xsmall-regular,
-    body-xsmall-semibold: $body-xsmall-semibold,
-    body-xsmall-bold: $body-xsmall-bold,
-    body-xsmall-italic: $body-xsmall-italic,
 ) !default;
diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss
index 98f5f6ebe4..656f6e043d 100644
--- a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss
@@ -208,6 +208,7 @@ $text-tertiary: #7f7f7f !default;
     --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default};
     --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover};
     --spirit-color-component-header-background: #{$component-header-background};
+    --spirit-color-component-header-item-background-state-active: #{$component-header-item-background-state-active};
     --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default};
     --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover};
     --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected};
diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss
index 1bb0bbc19d..fab7bda4c4 100644
--- a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss
+++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss
@@ -208,6 +208,7 @@ $text-tertiary: #b2b2b2 !default;
     --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default};
     --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover};
     --spirit-color-component-header-background: #{$component-header-background};
+    --spirit-color-component-header-item-background-state-active: #{$component-header-item-background-state-active};
     --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default};
     --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover};
     --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected};