diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
index 512718ec7..5dc5b6802 100644
--- a/apps/docs/.eslintrc.json
+++ b/apps/docs/.eslintrc.json
@@ -14,6 +14,7 @@
       "Card": true,
       "Table": true,
       "TypographyTable": true,
+      "TypographyVariantTable": true,
       "Tabs": true,
       "TableSection": true,
       "Switcher": true,
diff --git a/apps/docs/components/preview/FontWeightPreview.tsx b/apps/docs/components/preview/FontWeightPreview.tsx
new file mode 100644
index 000000000..2c4b3e499
--- /dev/null
+++ b/apps/docs/components/preview/FontWeightPreview.tsx
@@ -0,0 +1,18 @@
+import "@hopper-ui/tokens/fonts.css";
+import "./preview.css";
+
+interface FontWeightPreviewProps {
+    values?: TypographyValues;
+    style?: React.CSSProperties;
+}
+
+interface TypographyValues {
+    fontWeight?: string;
+}
+
+const FontWeightPreview = ({ values, style }: FontWeightPreviewProps) => {
+    return <div className="hd-preview hd-preview--font hd-preview--typography" style={{ fontWeight: values?.fontWeight, ...style }}>Aa</div>;
+};
+
+export default FontWeightPreview;
+
diff --git a/apps/docs/components/ui/mdx/Mdx.tsx b/apps/docs/components/ui/mdx/Mdx.tsx
index 13acc2465..239b19f70 100644
--- a/apps/docs/components/ui/mdx/Mdx.tsx
+++ b/apps/docs/components/ui/mdx/Mdx.tsx
@@ -10,6 +10,7 @@ import Switcher from "@/components/ui/switcher/Switcher";
 import Title from "@/components/ui/title/Title";
 import Table from "@/components/ui/table/Table";
 import TypographyTable from "@/components/ui/table/TypographyTable";
+import TypographyVariantTable from "@/components/ui/table/TypographyVariantTable";
 import Tabs from "@/components/tabs/Tabs";
 import TableSection from "@/components/tableSection/TableSection";
 
@@ -21,6 +22,7 @@ const components = {
     pre: Pre,
     Table: Table,
     TypographyTable: TypographyTable,
+    TypographyVariantTable: TypographyVariantTable,
     IconTable: IconTable,
     IconSpecTable: IconSpecTable,
     Tabs: Tabs,
diff --git a/apps/docs/components/ui/table/TypographyVariantTable.tsx b/apps/docs/components/ui/table/TypographyVariantTable.tsx
new file mode 100644
index 000000000..95dd156ff
--- /dev/null
+++ b/apps/docs/components/ui/table/TypographyVariantTable.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import TypographyPreview from "@/components/preview/TypographyPreview";
+import Code from "@/components/ui/code/Code";
+
+import "./table.css";
+
+interface TypographyVariantTableProps {
+    data: Record<string, { name: string; value: string }[]>;
+    type: string;
+}
+
+const TypographyVariantTable = ({ type, data }: TypographyVariantTableProps) => {
+    const tokenData = data["fontWeight"];
+
+    const filteredDataByType: Array<{ name: string; value: string }> = tokenData.filter(item =>
+        item.name.includes(type)
+    );
+
+    const filteredDataByWeightVariation: Array<{ name: string; value: string }> = filteredDataByType.filter(item =>
+        item.name.includes("bold") ||
+        item.name.includes("semibold") ||
+        item.name.includes("medium")
+    );
+
+    const listItems = filteredDataByWeightVariation.map(item => {
+        const fontWeight = item.value;
+
+        return (
+            <React.Fragment key={`${item.name}`}>
+                <tr className="hd-typo__row hd-top__row">
+                    <td className="hd-table__cell hd-typo__cell">{item.name}</td>
+                    <td className="hd-table__cell hd-typo__cell rowSpan={2}">
+                        <Code value={`--${item.name}`}>{`--${item.name}`}</Code>
+                    </td>
+                    <td className="hd-table__cell hd-typo__cell">
+                        {item.value}
+                    </td>
+                    <td className="hd-table__cell hd-typo__cell">
+                        <TypographyPreview values={{ fontWeight }} />
+                    </td>
+                </tr>
+            </React.Fragment>
+        );
+    });
+
+    return (
+        <table className="hd-table hd-typo-table" aria-label="Tokens">
+            <thead>
+                <tr>
+                    <th className="hd-table__column">Name</th>
+                    <th className="hd-table__column" colSpan={2}>Value</th>
+                    <th className="hd-table__column">Preview</th>
+                </tr>
+            </thead>
+            <tbody>
+                {listItems}
+            </tbody>
+        </table>
+    );
+};
+
+export default TypographyVariantTable;
diff --git a/apps/docs/content/tokens/semantic/typography.mdx b/apps/docs/content/tokens/semantic/typography.mdx
index 52a1d498f..7f0340276 100644
--- a/apps/docs/content/tokens/semantic/typography.mdx
+++ b/apps/docs/content/tokens/semantic/typography.mdx
@@ -31,6 +31,10 @@ Headings are used to create a hierarchy of content. They are used to help users
 
 <TypographyTable type="heading" data={tokens.semantic} />
 
+### Variations
+
+<TypographyVariantTable type="heading" data={tokens.semantic} />
+
 ## Overline
 
 Used to introduce a headline.
@@ -45,8 +49,13 @@ Body text is used to communicate the main content of a page.
 
 <TypographyTable type="body" data={tokens.semantic} />
 
+### Variations
+
+<TypographyVariantTable type="body" data={tokens.semantic} />
+
 ## Accent
 
 Accent text is used to highlight important information on a page.
 
 <TypographyTable type="accent" data={tokens.semantic} />
+