matching the correct font size

Author: Jialecl

apps/website/screens/theme-generator/ThemeGeneratorPage.tsx

@@ -1,4 +1,4 @@
-import { DxcLink, DxcContainer, DxcFlex, DxcHeading, DxcParagraph } from "@dxc-technology/halstack-react";
+import { DxcLink, DxcContainer, DxcFlex, DxcHeading, DxcTypography } from "@dxc-technology/halstack-react";
 import Link from "next/link";
 
 const ThemeGeneratorPage = () => {
@@ -18,11 +18,11 @@ const ThemeGeneratorPage = () => {
       <DxcFlex direction="column" justifyContent="center" gap="var(--spacing-gap-ml)">
         <DxcFlex direction="column" justifyContent="center" gap="var(--spacing-gap-m)">
           <DxcHeading text="Welcome to Halstack Theme Generators" />
-          <DxcContainer maxWidth="60%">
-            <DxcParagraph>
+          <DxcContainer maxWidth="62%">
+            <DxcTypography fontSize="var(--typography-body-xl)">
               Create and explore your brand within Halstack. Configure your core colors, upload your logo variants, and
               see in real time how your theme works across components, layouts, and real product scenarios.
-            </DxcParagraph>
+            </DxcTypography>
           </DxcContainer>
         </DxcFlex>
         <Link href="" passHref legacyBehavior>