diff --git a/apps/docs/src/app/[...slug]/layout.tsx b/apps/docs/src/app/[...slug]/layout.tsx
index 24db08cee..5b2b6d98c 100644
--- a/apps/docs/src/app/[...slug]/layout.tsx
+++ b/apps/docs/src/app/[...slug]/layout.tsx
@@ -39,7 +39,7 @@ export default function DocumentLayoutProps({
   }
 
   return (
-    <div className="gi-layout-container-full-width flex flex-row gap-4 lg:gap-6 py-6 lg:py-8">
+    <div className="gi-layout-container-full-width flex flex-row gap-4 lg:gap-6 py-6 lg:py-8 content-stretch">
       <SideNavigationConnected />
       {children}
     </div>
diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx
index 8e28a8a48..7dca6e6ff 100644
--- a/apps/docs/src/app/[...slug]/page.tsx
+++ b/apps/docs/src/app/[...slug]/page.tsx
@@ -43,7 +43,7 @@ export default function DocumentPage({ params }: DocumentPageProps) {
 
   return (
     <>
-      <div className="w-full flex-auto">
+      <div className="w-full flex-auto prose max-w-none">
         {document.status !== 'stable' && (
           <div className="flex justify-between items-center py-2">
             {document.status === 'in-review' && (
diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
index bafa0191b..371fa449a 100644
--- a/apps/docs/src/components/document/common/mdx.tsx
+++ b/apps/docs/src/components/document/common/mdx.tsx
@@ -97,38 +97,6 @@ export type MdxProps = {
 };
 
 const standardComponents: MDXComponents = {
-  h1: ({ children, id }) => (
-    <Heading as="h1" id={id}>
-      {children}
-    </Heading>
-  ),
-  h2: ({ children, id }) => (
-    <Heading as="h2" id={id}>
-      {children}
-    </Heading>
-  ),
-  h3: ({ children, id }) => (
-    <Heading as="h3" id={id}>
-      {children}
-    </Heading>
-  ),
-  h4: ({ children, id }) => (
-    <Heading as="h4" id={id}>
-      {children}
-    </Heading>
-  ),
-  h5: ({ children, id }) => (
-    <Heading as="h5" id={id}>
-      {children}
-    </Heading>
-  ),
-  h6: ({ children, id }) => (
-    <Heading as="h6" id={id}>
-      {children}
-    </Heading>
-  ),
-  p: ({ children }) => <Paragraph>{children}</Paragraph>,
-  span: ({ children }) => <Paragraph as="span">{children}</Paragraph>,
   a: ({ children, href }) =>
     href ? <Link href={href}>{children}</Link> : null,
   ul: ({ children }) => <ul className="gi-list-bullet">{children}</ul>,
diff --git a/apps/docs/src/components/document/components/component-status-table.tsx b/apps/docs/src/components/document/components/component-status-table.tsx
index a00b1a5c6..25e6c53b2 100644
--- a/apps/docs/src/components/document/components/component-status-table.tsx
+++ b/apps/docs/src/components/document/components/component-status-table.tsx
@@ -100,7 +100,7 @@ export function ComponentStatusBlock({ componentId }: { componentId: string }) {
     throw new Error(`Component status not found '${componentId}'.`);
   }
   return (
-    <table className="table-fixed">
+    <table className="table-fixed max-w-prose">
       <tbody>
         <tr>
           <td className="p-2">Figma Library</td>
diff --git a/packages/design/tailwind/src/create-theme.ts b/packages/design/tailwind/src/create-theme.ts
index 33b4cc0e5..80f1c4399 100644
--- a/packages/design/tailwind/src/create-theme.ts
+++ b/packages/design/tailwind/src/create-theme.ts
@@ -305,37 +305,51 @@ export function createTheme(
               p: {
                 font: variables.semantic.typography.default.text.md,
                 fontWeight: variables.primitive.font.weight['400'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.default.heading.xl,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h2: {
                 font: variables.semantic.typography.default.heading.lg,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h3: {
                 font: variables.semantic.typography.default.heading.md,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h4: {
                 font: variables.semantic.typography.default.heading.sm,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h5: {
                 font: variables.semantic.typography.default.heading.xs,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h6: {
                 font: variables.semantic.typography.default.heading.xs,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
             },
           },
@@ -344,37 +358,51 @@ export function createTheme(
               p: {
                 font: variables.semantic.typography.xs.text.md,
                 fontWeight: variables.primitive.font.weight['400'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.xs.heading.xl,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h2: {
                 font: variables.semantic.typography.xs.heading.lg,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h3: {
                 font: variables.semantic.typography.xs.heading.md,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h4: {
                 font: variables.semantic.typography.xs.heading.sm,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h5: {
                 font: variables.semantic.typography.xs.heading.xs,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h6: {
                 font: variables.semantic.typography.xs.heading['2xs'],
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
             },
           },
@@ -383,37 +411,51 @@ export function createTheme(
               p: {
                 font: variables.semantic.typography.md.text.md,
                 fontWeight: variables.primitive.font.weight['400'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.md.heading.xl,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h2: {
                 font: variables.semantic.typography.md.heading.lg,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h3: {
                 font: variables.semantic.typography.md.heading.md,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h4: {
                 font: variables.semantic.typography.md.heading.sm,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h5: {
                 font: variables.semantic.typography.md.heading.xs,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h6: {
                 font: variables.semantic.typography.md.heading['2xs'],
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
             },
           },
@@ -422,37 +464,51 @@ export function createTheme(
               p: {
                 font: variables.semantic.typography.xl.text.md,
                 fontWeight: variables.primitive.font.weight['400'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.xl.heading.xl,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h2: {
                 font: variables.semantic.typography.xl.heading.lg,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h3: {
                 font: variables.semantic.typography.xl.heading.md,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h4: {
                 font: variables.semantic.typography.xl.heading.sm,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h5: {
                 font: variables.semantic.typography.xl.heading.xs,
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
               h6: {
                 font: variables.semantic.typography.xl.heading['2xs'],
                 fontWeight: variables.primitive.font.weight['700'],
-                fontFamily: 'inherit',
+                fontFamily: variables.primitive.font.family.primary,
+                'margin-top': '0.5em',
+                'margin-bottom': '1em',
               },
             },
           },