diff --git a/packages/design-tokens/src/js/global-tokens/typography.ts b/packages/design-tokens/src/js/global-tokens/typography.ts
index a6d9791d58..51cdbf566f 100644
--- a/packages/design-tokens/src/js/global-tokens/typography.ts
+++ b/packages/design-tokens/src/js/global-tokens/typography.ts
@@ -2,21 +2,21 @@
 export const headingXlargeRegular = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'normal',
     fontWeight: 400,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'normal',
     fontWeight: 400,
     lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '36px',
     fontStyle: 'normal',
     fontWeight: 400,
     lineHeight: 1.2,
@@ -26,21 +26,21 @@ export const headingXlargeRegular = {
 export const headingXlargeSemibold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'normal',
     fontWeight: 600,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'normal',
     fontWeight: 600,
     lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '36px',
     fontStyle: 'normal',
     fontWeight: 600,
     lineHeight: 1.2,
@@ -50,21 +50,21 @@ export const headingXlargeSemibold = {
 export const headingXlargeBold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '36px',
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 1.2,
@@ -74,21 +74,21 @@ export const headingXlargeBold = {
 export const headingXlargeItalic = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'italic',
     fontWeight: 400,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '64px',
+    fontSize: '48px',
     fontStyle: 'italic',
     fontWeight: 400,
     lineHeight: 1.2,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '36px',
     fontStyle: 'italic',
     fontWeight: 400,
     lineHeight: 1.2,
@@ -98,14 +98,14 @@ export const headingXlargeItalic = {
 export const headingLargeRegular = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 400,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 400,
     lineHeight: 1.2,
@@ -122,14 +122,14 @@ export const headingLargeRegular = {
 export const headingLargeSemibold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 600,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 600,
     lineHeight: 1.2,
@@ -146,14 +146,14 @@ export const headingLargeSemibold = {
 export const headingLargeBold = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'normal',
     fontWeight: 700,
     lineHeight: 1.2,
@@ -170,14 +170,14 @@ export const headingLargeBold = {
 export const headingLargeItalic = {
   desktop: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'italic',
     fontWeight: 400,
     lineHeight: 1.2,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '48px',
+    fontSize: '40px',
     fontStyle: 'italic',
     fontWeight: 400,
     lineHeight: 1.2,
@@ -197,21 +197,21 @@ export const headingMediumRegular = {
     fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -221,21 +221,21 @@ export const headingMediumSemibold = {
     fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -245,21 +245,21 @@ export const headingMediumBold = {
     fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '32px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -269,21 +269,21 @@ export const headingMediumItalic = {
     fontSize: '32px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '32px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.3,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '20px',
+    fontSize: '24px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -293,21 +293,21 @@ export const headingSmallRegular = {
     fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -317,21 +317,21 @@ export const headingSmallSemibold = {
     fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -341,21 +341,21 @@ export const headingSmallBold = {
     fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -365,21 +365,21 @@ export const headingSmallItalic = {
     fontSize: '24px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '24px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '18px',
+    fontSize: '20px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -389,21 +389,21 @@ export const headingXsmallRegular = {
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -413,21 +413,21 @@ export const headingXsmallSemibold = {
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -437,21 +437,21 @@ export const headingXsmallBold = {
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -461,21 +461,21 @@ export const headingXsmallItalic = {
     fontSize: '20px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   tablet: {
     fontFamily: "'Inter', sans-serif",
     fontSize: '20px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
   mobile: {
     fontFamily: "'Inter', sans-serif",
-    fontSize: '16px',
+    fontSize: '18px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.2,
+    lineHeight: 1.4,
   },
 };
 
@@ -485,7 +485,7 @@ export const bodyXlargeRegular = {
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.6,
+    lineHeight: 1.5,
   },
 };
 
@@ -495,7 +495,7 @@ export const bodyXlargeSemibold = {
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.6,
+    lineHeight: 1.5,
   },
 };
 
@@ -505,7 +505,7 @@ export const bodyXlargeBold = {
     fontSize: '20px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.6,
+    lineHeight: 1.5,
   },
 };
 
@@ -515,7 +515,7 @@ export const bodyXlargeItalic = {
     fontSize: '20px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.6,
+    lineHeight: 1.5,
   },
 };
 
@@ -525,7 +525,7 @@ export const bodyLargeRegular = {
     fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.55,
+    lineHeight: 1.5,
   },
 };
 
@@ -535,7 +535,7 @@ export const bodyLargeSemibold = {
     fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.55,
+    lineHeight: 1.5,
   },
 };
 
@@ -545,7 +545,7 @@ export const bodyLargeBold = {
     fontSize: '18px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.55,
+    lineHeight: 1.5,
   },
 };
 
@@ -555,7 +555,7 @@ export const bodyLargeItalic = {
     fontSize: '18px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.55,
+    lineHeight: 1.5,
   },
 };
 
@@ -605,7 +605,7 @@ export const bodySmallRegular = {
     fontSize: '14px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.42,
+    lineHeight: 1.5,
   },
 };
 
@@ -615,7 +615,7 @@ export const bodySmallSemibold = {
     fontSize: '14px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.42,
+    lineHeight: 1.5,
   },
 };
 
@@ -625,7 +625,7 @@ export const bodySmallBold = {
     fontSize: '14px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.42,
+    lineHeight: 1.5,
   },
 };
 
@@ -635,7 +635,7 @@ export const bodySmallItalic = {
     fontSize: '14px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.42,
+    lineHeight: 1.5,
   },
 };
 
@@ -645,7 +645,7 @@ export const bodyXsmallRegular = {
     fontSize: '12px',
     fontStyle: 'normal',
     fontWeight: 400,
-    lineHeight: 1.32,
+    lineHeight: 1.5,
   },
 };
 
@@ -655,7 +655,7 @@ export const bodyXsmallSemibold = {
     fontSize: '12px',
     fontStyle: 'normal',
     fontWeight: 600,
-    lineHeight: 1.32,
+    lineHeight: 1.5,
   },
 };
 
@@ -665,7 +665,7 @@ export const bodyXsmallBold = {
     fontSize: '12px',
     fontStyle: 'normal',
     fontWeight: 700,
-    lineHeight: 1.32,
+    lineHeight: 1.5,
   },
 };
 
@@ -675,7 +675,7 @@ export const bodyXsmallItalic = {
     fontSize: '12px',
     fontStyle: 'italic',
     fontWeight: 400,
-    lineHeight: 1.32,
+    lineHeight: 1.5,
   },
 };
 
diff --git a/packages/design-tokens/src/scss/global-tokens/_typography.scss b/packages/design-tokens/src/scss/global-tokens/_typography.scss
index 347e466353..26c0b6e5f5 100644
--- a/packages/design-tokens/src/scss/global-tokens/_typography.scss
+++ b/packages/design-tokens/src/scss/global-tokens/_typography.scss
@@ -1,6 +1,6 @@
 /* This file was generated by Supernova, don't change manually */
 $heading-xlarge-regular: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 48px,
         font-style: normal,
@@ -9,14 +9,14 @@ $heading-xlarge-regular: (
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 48px,
         font-style: normal,
         font-weight: 400,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 36px,
         font-style: normal,
         font-weight: 400,
         line-height: 1.2,
@@ -24,7 +24,7 @@ $heading-xlarge-regular: (
 ) !default;
 
 $heading-xlarge-semibold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 48px,
         font-style: normal,
@@ -33,14 +33,14 @@ $heading-xlarge-semibold: (
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 48px,
         font-style: normal,
         font-weight: 600,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 36px,
         font-style: normal,
         font-weight: 600,
         line-height: 1.2,
@@ -48,7 +48,7 @@ $heading-xlarge-semibold: (
 ) !default;
 
 $heading-xlarge-bold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 48px,
         font-style: normal,
@@ -57,14 +57,14 @@ $heading-xlarge-bold: (
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 48px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 36px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
@@ -72,7 +72,7 @@ $heading-xlarge-bold: (
 ) !default;
 
 $heading-xlarge-italic: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
         font-size: 48px,
         font-style: italic,
@@ -81,14 +81,14 @@ $heading-xlarge-italic: (
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 48px,
         font-style: italic,
         font-weight: 400,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 64px,
+        font-size: 36px,
         font-style: italic,
         font-weight: 400,
         line-height: 1.2,
@@ -96,23 +96,23 @@ $heading-xlarge-italic: (
 ) !default;
 
 $heading-large-regular: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 400,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 400,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 400,
         line-height: 1.2,
@@ -120,23 +120,23 @@ $heading-large-regular: (
 ) !default;
 
 $heading-large-semibold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 600,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 600,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 600,
         line-height: 1.2,
@@ -144,23 +144,23 @@ $heading-large-semibold: (
 ) !default;
 
 $heading-large-bold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 40px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 700,
         line-height: 1.2,
@@ -168,23 +168,23 @@ $heading-large-bold: (
 ) !default;
 
 $heading-large-italic: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 40px,
         font-style: italic,
         font-weight: 400,
         line-height: 1.2,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 40px,
         font-style: italic,
         font-weight: 400,
         line-height: 1.2,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 48px,
+        font-size: 32px,
         font-style: italic,
         font-weight: 400,
         line-height: 1.2,
@@ -192,290 +192,290 @@ $heading-large-italic: (
 ) !default;
 
 $heading-medium-regular: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 32px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-medium-semibold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 32px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-medium-bold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 32px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 32px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-medium-italic: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 32px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 32px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.3,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 32px,
+        font-size: 24px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-small-regular: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-small-semibold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-small-bold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 24px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-small-italic: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 18px,
+        font-size: 24px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 24px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 24px,
+        font-size: 20px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-xsmall-regular: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 18px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-xsmall-semibold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 18px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-xsmall-bold: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 20px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 18px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
 $heading-xsmall-italic: (
-    mobile: (
+    desktop: (
         font-family: "'Inter', sans-serif",
-        font-size: 16px,
+        font-size: 20px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
     tablet: (
         font-family: "'Inter', sans-serif",
         font-size: 20px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
-    desktop: (
+    mobile: (
         font-family: "'Inter', sans-serif",
-        font-size: 20px,
+        font-size: 18px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.2,
+        line-height: 1.4,
     ),
 ) !default;
 
@@ -485,7 +485,7 @@ $body-xlarge-regular: (
         font-size: 20px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.6,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -495,7 +495,7 @@ $body-xlarge-semibold: (
         font-size: 20px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.6,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -505,7 +505,7 @@ $body-xlarge-bold: (
         font-size: 20px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.6,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -515,7 +515,7 @@ $body-xlarge-italic: (
         font-size: 20px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.6,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -525,7 +525,7 @@ $body-large-regular: (
         font-size: 18px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.55,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -535,7 +535,7 @@ $body-large-semibold: (
         font-size: 18px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.55,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -545,7 +545,7 @@ $body-large-bold: (
         font-size: 18px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.55,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -555,7 +555,7 @@ $body-large-italic: (
         font-size: 18px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.55,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -605,7 +605,7 @@ $body-small-regular: (
         font-size: 14px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.42,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -615,7 +615,7 @@ $body-small-semibold: (
         font-size: 14px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.42,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -625,7 +625,7 @@ $body-small-bold: (
         font-size: 14px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.42,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -635,7 +635,7 @@ $body-small-italic: (
         font-size: 14px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.42,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -645,7 +645,7 @@ $body-xsmall-regular: (
         font-size: 12px,
         font-style: normal,
         font-weight: 400,
-        line-height: 1.32,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -655,7 +655,7 @@ $body-xsmall-semibold: (
         font-size: 12px,
         font-style: normal,
         font-weight: 600,
-        line-height: 1.32,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -665,7 +665,7 @@ $body-xsmall-bold: (
         font-size: 12px,
         font-style: normal,
         font-weight: 700,
-        line-height: 1.32,
+        line-height: 1.5,
     ),
 ) !default;
 
@@ -675,7 +675,7 @@ $body-xsmall-italic: (
         font-size: 12px,
         font-style: italic,
         font-weight: 400,
-        line-height: 1.32,
+        line-height: 1.5,
     ),
 ) !default;
 
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png
index 2863107489..80bf1e91bd 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png
index b6bf5945fe..4841115fb9 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png
index d9f2799e23..c1a5629a4d 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png
index 0bf2410973..a819ba85d3 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png
index 907853e0bf..09c239e040 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png
index 17f542e69c..32e4bb563f 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png
index f3984b48fe..8b23a86058 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png
index ac009da96b..69274f81db 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png
index 9159d3f1cb..bcb947aa8c 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png
index af7edfbe56..f23642451d 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png differ
diff --git a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png
index 69c216a7b8..81bd5f8fa6 100644
Binary files a/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png and b/tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png
index c735dc0e22..2fc32f46f4 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/accordion-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png
index 9b97673dbb..7467a86a99 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/alert-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/breadcrumbs-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/breadcrumbs-chromium-linux.png
index 29a14983e4..8055663ba6 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/breadcrumbs-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/breadcrumbs-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png
index 9407f65225..1f609b2429 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/button-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png
index 017e623ef3..d442235a5a 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/buttonlink-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png
index 14a5f95413..a5ef3e5e85 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png
index bf08b874bb..fdfbd8c4d3 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/collapse-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/container-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/container-chromium-linux.png
index 0e6f5debee..b170a10290 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/container-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/container-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/divider-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/divider-chromium-linux.png
index 3de0e6fcf0..ce5c8a6eac 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/divider-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/divider-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png
index 7464183c33..48a843b408 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/dropdown-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png
index c340399ec5..0647e7e2a0 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png
index 64b9187f93..532684da07 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/flex-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/flex-chromium-linux.png
index 8b48764cb0..a04566641a 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/flex-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/flex-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png
index 6c761348b3..3b1e9a4352 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/grid-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/grid-chromium-linux.png
index 083d04d27d..97f0c9a7d3 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/grid-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/grid-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png
index 5e0cd25809..527f01a4c2 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/header-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/heading-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/heading-chromium-linux.png
index d77ef681b6..7adc92475c 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/heading-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/heading-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/icon-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/icon-chromium-linux.png
index 966e3f6764..0b72c5395c 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/icon-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/icon-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png
index 3adbb2fde1..68a77f2a86 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png
index e95c175a44..6b596f2810 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/link-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png
index b6bf5945fe..4841115fb9 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/modal-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png
index 0ecd28d849..6045a9ef32 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/pagination-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/partnerlogo-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/partnerlogo-chromium-linux.png
index e4ba58af4d..c2f765f846 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/partnerlogo-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/partnerlogo-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png
index a10a1cb572..40ce12dc66 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/pill-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/productlogo-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/productlogo-chromium-linux.png
index 55401e6ba5..bddfc0c3b9 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/productlogo-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/productlogo-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png
index cf9e91b1ad..37461aabaf 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/scrollview-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/scrollview-chromium-linux.png
index efa663858c..28ea44be2a 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/scrollview-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/scrollview-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png
index c10afcd7d9..b6803ed749 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/select-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/spinner-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/spinner-chromium-linux.png
index 5e33e2fb57..5ace7d8291 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/spinner-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/spinner-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png
index 82e9be7fc4..0fdc7c55d4 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/stack-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tabs-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tabs-chromium-linux.png
index 8f6b4f6448..962eadf0a2 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tabs-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/tabs-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png
index 8cf0e394b2..5a9077d494 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/tag-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/text-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/text-chromium-linux.png
index d934432921..c516c4de8f 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/text-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/text-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png
index dd56c9d537..4cecb4c573 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/textarea-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png
index 3b69012e1c..2eec8f380b 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/textfield-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png
index 9dce5320ee..c5414c08af 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png
index 8e20382759..288430c220 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/tooltip-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png
index 8ba0c68369..20374bff0d 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-actionlayout-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-avatar-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-avatar-chromium-linux.png
index eddd63e784..6363f1745d 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-avatar-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-avatar-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png
index 96c5a12eba..5b1c7dd799 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-emptystate-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png
index 71bc533948..e305dfedb2 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-section-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png
index 5a15ca54ee..21d3de1854 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-slider-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png
index 1f45d43552..910b1df501 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png differ
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png
index d8a0e44e6f..4ddee44ad9 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-truncate-chromium-linux.png differ
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png
index f96cf36c72..8afa660e80 100644
Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png differ
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png
index 4f2cd16201..b30023dc88 100644
Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png differ