diff --git a/src/stories/StorybookMdxProvider.tsx b/src/stories/StorybookMdxProvider.tsx
index 13b52c541..a62fab9c1 100644
--- a/src/stories/StorybookMdxProvider.tsx
+++ b/src/stories/StorybookMdxProvider.tsx
@@ -17,8 +17,8 @@ import { LiveDemoStage } from './src/core/live-demo-stage';
 export const StorybookMdxComponents: Record<string, FC> = {
   wrapper: ({ children }: any) => <ForgeCard style={{ '--forge-card-padding': '16px 0' }}>{children}</ForgeCard>,
   h1: (props: any) => <h1 {...props} className="forge-typography--heading4" style={{marginTop: '16px'}}>{props.children}</h1>,
-  h2: (props: any) => <h2 {...props} className="forge-typography--title forge-docs-core--header1">{props.children}</h2>,
-  h3: (props: any) => <h3 {...props} className="forge-typography--subheading4 forge-docs-core--header2">{props.children}</h3>,
+  h2: (props: any) => <h2 {...props} className="forge-typography--subheading4 forge-docs-core--header1">{props.children}</h2>,
+  h3: (props: any) => <h3 {...props} className="forge-typography--heading2 forge-docs-core--header2">{props.children}</h3>,
   table: (props: any) => <table {...props} className="forge-docs-core__table" />,
   section: (props: any) => <section {...props} className="forge-docs-core__section">{props.children}</section>,
   blockquote: (props: any) => <Blockquote {...props} />,
diff --git a/src/stories/src/components/card/card.stories.tsx b/src/stories/src/components/card/card.stories.tsx
index 559c2fde5..91cf02c1f 100644
--- a/src/stories/src/components/card/card.stories.tsx
+++ b/src/stories/src/components/card/card.stories.tsx
@@ -71,7 +71,7 @@ export const Styled: Story<ICardProps> = ({
           </ForgeIconButton>
         </div>
         <div>
-          <p>{LOREM_IPSUM.p1}</p>
+          <p className="forge-typography--body1">{LOREM_IPSUM.p1}</p>
         </div>
         <div style={footerStyle}>
           <div>
@@ -98,10 +98,10 @@ export const WithScaffold: Story<ICardProps> = ({
     <ForgeCard raised={raised} style={{ width: '400px', '--forge-card-padding': '0', '--forge-card-height': '300px' }}>
       <ForgeScaffold>
         <ForgeToolbar slot="header">
-          <h1 slot="start" className="forge-typography--subheading4">Lorem ipsum</h1>
+          <h1 slot="start" className="forge-typography--heading4">Lorem ipsum</h1>
         </ForgeToolbar>
 
-        <p slot="body" tabIndex={0} style={{padding: '16px', margin: '0'}}>
+        <p slot="body" className="forge-typography--body1" tabIndex={0} style={{padding: '16px', margin: '0'}}>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed
           aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
           enim sint nesciunt provident excepturi dolorum pariatur illum?
diff --git a/src/stories/src/components/card/code/card-scaffold.ts b/src/stories/src/components/card/code/card-scaffold.ts
index ba09c82e9..4eccf747a 100644
--- a/src/stories/src/components/card/code/card-scaffold.ts
+++ b/src/stories/src/components/card/code/card-scaffold.ts
@@ -3,10 +3,10 @@ export const CardScaffoldCodeHtml = () => {
 <forge-card class="scaffold-card">
   <forge-scaffold>
     <forge-toolbar slot="header">
-      <h1 slot="start" class="forge-typography--subheading4">Lorem ipsum</h1>
+      <h1 slot="start" class="forge-typography--heading4">Lorem ipsum</h1>
     </forge-toolbar>
 
-    <p slot="body" tabindex="0" class="card-content">
+    <p slot="body" className="forge-typography--body1" tabindex="0" class="card-content">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed
       aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
       enim sint nesciunt provident excepturi dolorum pariatur illum?
diff --git a/src/stories/src/components/card/code/card-styled.ts b/src/stories/src/components/card/code/card-styled.ts
index b1525f0b8..cab4cc069 100644
--- a/src/stories/src/components/card/code/card-styled.ts
+++ b/src/stories/src/components/card/code/card-styled.ts
@@ -12,7 +12,7 @@ export const CardStyledCodeHtml = () => {
     </div>
 
     <div>
-      <p>
+      <p className="forge-typography--body1">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem doloremque dolorem ullam, nesciunt quia velit necessitatibus numquam quasi voluptates impedit earum dolores repudiandae facilis totam non quo labore itaque?
       </p>
     </div>