From 356996e418ebdc1383e679942fb11040d13980e3 Mon Sep 17 00:00:00 2001
From: Andrea Pregnolato <andrea.pregnolato@nearform.com>
Date: Mon, 2 Dec 2024 12:13:08 +0100
Subject: [PATCH 1/5] chore: add prose

---
 apps/docs/src/app/[...slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx
index 8e28a8a48..d73a20404 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">
         {document.status !== 'stable' && (
           <div className="flex justify-between items-center py-2">
             {document.status === 'in-review' && (

From 7d8de7e3f43e312614adf9966a16b6b7ef3af962 Mon Sep 17 00:00:00 2001
From: Andrea Pregnolato <andrea.pregnolato@nearform.com>
Date: Mon, 2 Dec 2024 14:47:06 +0100
Subject: [PATCH 2/5] chore: use prose for set margins on content

---
 .../src/components/document/common/mdx.tsx    |  32 ------
 packages/design/tailwind/src/create-theme.ts  | 108 +++++++++++++-----
 2 files changed, 80 insertions(+), 60 deletions(-)

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/packages/design/tailwind/src/create-theme.ts b/packages/design/tailwind/src/create-theme.ts
index 33b4cc0e5..a11b4d1a1 100644
--- a/packages/design/tailwind/src/create-theme.ts
+++ b/packages/design/tailwind/src/create-theme.ts
@@ -305,37 +305,50 @@ 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',
               },
               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 +357,50 @@ 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',
               },
               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 +409,50 @@ 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',
               },
               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 +461,50 @@ 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',
               },
               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',
               },
             },
           },

From 219e9ea190e5aab5f9dde224b2b2afac463f517c Mon Sep 17 00:00:00 2001
From: Andrea Pregnolato <andrea.pregnolato@nearform.com>
Date: Mon, 2 Dec 2024 12:13:08 +0100
Subject: [PATCH 3/5] chore: add prose

---
 apps/docs/src/app/[...slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx
index 8e28a8a48..d73a20404 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">
         {document.status !== 'stable' && (
           <div className="flex justify-between items-center py-2">
             {document.status === 'in-review' && (

From 315765c7ef5a019fb157d4d20be722cbb8571794 Mon Sep 17 00:00:00 2001
From: Andrea Pregnolato <andrea.pregnolato@nearform.com>
Date: Mon, 2 Dec 2024 14:47:06 +0100
Subject: [PATCH 4/5] chore: use prose for set margins on content

---
 .../src/components/document/common/mdx.tsx    |  32 ------
 packages/design/tailwind/src/create-theme.ts  | 108 +++++++++++++-----
 2 files changed, 80 insertions(+), 60 deletions(-)

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/packages/design/tailwind/src/create-theme.ts b/packages/design/tailwind/src/create-theme.ts
index 33b4cc0e5..a11b4d1a1 100644
--- a/packages/design/tailwind/src/create-theme.ts
+++ b/packages/design/tailwind/src/create-theme.ts
@@ -305,37 +305,50 @@ 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',
               },
               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 +357,50 @@ 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',
               },
               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 +409,50 @@ 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',
               },
               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 +461,50 @@ 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',
               },
               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',
               },
             },
           },

From e48aa4030031ad421928d37845e2c7b12f49335c Mon Sep 17 00:00:00 2001
From: Andrea Pregnolato <andrea.pregnolato@nearform.com>
Date: Mon, 2 Dec 2024 19:10:05 +0100
Subject: [PATCH 5/5] fix: max width

---
 apps/docs/src/app/[...slug]/layout.tsx                        | 2 +-
 apps/docs/src/app/[...slug]/page.tsx                          | 2 +-
 .../components/document/components/component-status-table.tsx | 2 +-
 packages/design/tailwind/src/create-theme.ts                  | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

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 d73a20404..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 prose">
+      <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/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 a11b4d1a1..80f1c4399 100644
--- a/packages/design/tailwind/src/create-theme.ts
+++ b/packages/design/tailwind/src/create-theme.ts
@@ -307,6 +307,7 @@ export function createTheme(
                 fontWeight: variables.primitive.font.weight['400'],
                 fontFamily: variables.primitive.font.family.primary,
                 'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.default.heading.xl,
@@ -359,6 +360,7 @@ export function createTheme(
                 fontWeight: variables.primitive.font.weight['400'],
                 fontFamily: variables.primitive.font.family.primary,
                 'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.xs.heading.xl,
@@ -411,6 +413,7 @@ export function createTheme(
                 fontWeight: variables.primitive.font.weight['400'],
                 fontFamily: variables.primitive.font.family.primary,
                 'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.md.heading.xl,
@@ -463,6 +466,7 @@ export function createTheme(
                 fontWeight: variables.primitive.font.weight['400'],
                 fontFamily: variables.primitive.font.family.primary,
                 'margin-bottom': '2em',
+                'max-width': '65ch',
               },
               h1: {
                 font: variables.semantic.typography.xl.heading.xl,