diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Heading.tsx b/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Heading.tsx
index 55ff67d953..38272d9a7f 100644
--- a/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Heading.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Heading.tsx
@@ -14,7 +14,6 @@ const createHeading = (
 ) => {
   const HeadingComponent = ({ children, ref }: HeadingProps) => (
     <Text
-      color="neutral"
       data-component={`h${level}`}
       fontWeight={fontWeight}
       ref={ref as Ref<HTMLDivElement>}
@@ -30,9 +29,9 @@ const createHeading = (
   return HeadingComponent;
 };
 
-export const h1 = createHeading("heading", 1);
-export const h2 = createHeading("title", 2);
-export const h3 = createHeading("subtitle", 3);
-export const h4 = createHeading("body", 4);
+export const h1 = createHeading("heading", 1, 600);
+export const h2 = createHeading("title", 2, 600);
+export const h3 = createHeading("subtitle", 3, 600);
+export const h4 = createHeading("body", 4, 600);
 export const h5 = createHeading("body", 5, 500);
-export const h6 = createHeading("body", 6, 300);
+export const h6 = createHeading("caption", 6, 500);
diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
index 85154ff97c..0c9f84a0bb 100644
--- a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css
@@ -22,6 +22,7 @@
     vertical-align: top;
     border-bottom: var(--border-width-1) solid var(--color-bd);
     border-right: var(--border-width-1) solid var(--color-bd);
+    letter-spacing: -0.02em;
   }
 
   :is(td, th):last-child {
@@ -81,6 +82,7 @@
     margin-left: 1em;
     position: relative;
     list-style-type: auto;
+    letter-spacing: -0.02em;
   }
 
   a {
@@ -116,6 +118,7 @@
     padding-right: var(--inner-spacing-3);
     margin-left: 0;
     border-left: var(--border-width-2) solid var(--color-bd-neutral);
+    letter-spacing: -0.02em;
   }
 
   /* Images in markdown should be responsive and have a max height of 300px. Border radius is the same as button border radius */
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx b/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx
index 63a72cf5d3..76de1938d7 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx
@@ -39,6 +39,8 @@ const _Text = (props: TextProps, ref: Ref<HTMLDivElement>) => {
     <div
       className={clsx(className, styles.text, getTypographyClassName(size))}
       data-color={color ? color : undefined}
+      data-variant={size}
+      data-weight={getFontWeight(fontWeight, isBold)}
       ref={ref}
       style={{
         fontWeight: getFontWeight(fontWeight, isBold),
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css
index ca3d6294f7..1ec8914541 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css
@@ -15,6 +15,41 @@
   &[data-color="neutral-subtle"] {
     color: var(--color-fg-neutral-subtle);
   }
+
+  /* body */
+  &[data-variant="body"] {
+    letter-spacing: -0.02em;
+  }
+
+  /* h6 */
+  &[data-variant="caption"][data-weight="500"] {
+    letter-spacing: -0.01em;
+  }
+
+  /* h5 */
+  &[data-variant="body"][data-weight="500"] {
+    letter-spacing: -0.02em;
+  }
+
+  /* h4 */
+  &[data-variant="body"][data-weight="600"] {
+    letter-spacing: -0.02em;
+  }
+
+  /* h3 */
+  &[data-variant="subtitle"][data-weight="600"] {
+    letter-spacing: -0.025em;
+  }
+
+  /* h2 */
+  &[data-variant="title"][data-weight="600"] {
+    letter-spacing: -0.03em;
+  }
+
+  /* h1 */
+  &[data-variant="heading"][data-weight="600"] {
+    letter-spacing: -0.04em;
+  }
 }
 
 .clampedText {