@neynar/ui 0.1.2 → 0.2.0

package/src/components/ui/stories/typography.stories.tsx

@@ -50,16 +50,19 @@ const meta = {
     variant: {
       control: { type: "select" },
       options: [
-        "heading",
-        "subheading",
+        "microcopy",
+        "detail",
         "body",
-        "bodyEmphasized",
-        "details",
-        "field",
+        "blogBody",
+        "paragraphLead",
+        "eyebrow",
+        "subHeadline",
+        "headline",
+        "sectionTitle",
+        "pageTitle",
+        "displayTitle",
+        "heroTitle",
         "code",
-        "microcopy",
-        "tableCell",
-        "tableHeader",
       ],
       description:
         "Typography variant for semantic styling and visual hierarchy",
@@ -177,96 +180,124 @@ export const Variants: Story = {
         </Typography>
         <div className="grid gap-4">
           <div className="space-y-1">
-            <Typography variant="heading" as="h1">
-              Heading (20px) - Main page and section titles
+            <Typography variant="heroTitle" as="h1">
+              Hero Title - Largest display text for landing pages
             </Typography>
-            <Typography variant="details" color="muted">
-              text-lg font-semibold leading-tight
+            <Typography variant="detail" color="muted">
+              Largest display variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="subheading" as="h2">
-              Sub Heading (17px) - Secondary headings for subsections
+            <Typography variant="displayTitle" as="h1">
+              Display Title - Large display text for important headings
             </Typography>
-            <Typography variant="details" color="muted">
-              text-base font-medium leading-relaxed
+            <Typography variant="detail" color="muted">
+              Large display variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="body">
-              Body (14px) - Standard body text for content and paragraphs. This
-              is the default variant for most content.
+            <Typography variant="pageTitle" as="h1">
+              Page Title - Main page titles
             </Typography>
-            <Typography variant="details" color="muted">
-              text-sm leading-relaxed
+            <Typography variant="detail" color="muted">
+              Primary heading variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="bodyEmphasized">
-              Body Emphasized (14px) - Emphasized body text with medium weight
-              for important content.
+            <Typography variant="sectionTitle" as="h2">
+              Section Title - Section headings within pages
             </Typography>
-            <Typography variant="details" color="muted">
-              text-sm font-medium leading-relaxed
+            <Typography variant="detail" color="muted">
+              Section heading variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="details">
-              Details (12px) - Smaller text for details, descriptions, and
-              secondary information.
+            <Typography variant="headline" as="h3">
+              Headline - Article and content headlines
             </Typography>
-            <Typography variant="details" color="muted">
-              text-xs leading-normal
+            <Typography variant="detail" color="muted">
+              Content headline variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="field" as="label">
-              Field Label (17px) - Text for form fields and input labels
+            <Typography variant="subHeadline" as="h4">
+              Sub Headline - Secondary headlines and subheadings
             </Typography>
-            <Typography variant="details" color="muted">
-              text-base leading-normal
+            <Typography variant="detail" color="muted">
+              Secondary headline variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="code" as="code">
-              const codeExample = &quot;Code text (17px) for snippets and
-              technical content&quot;;
+            <Typography variant="eyebrow" as="div">
+              Eyebrow - Small labels above headings
             </Typography>
-            <Typography variant="details" color="muted">
-              text-base font-mono leading-normal
+            <Typography variant="detail" color="muted">
+              Small label variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="microcopy">
-              Microcopy (10px) - Very small text for captions and fine print
+            <Typography variant="paragraphLead">
+              Paragraph Lead - Opening paragraph text that introduces content
+              with emphasis.
             </Typography>
-            <Typography variant="details" color="muted">
-              text-microcopy leading-tight
+            <Typography variant="detail" color="muted">
+              Lead paragraph variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="tableCell">
-              Table Cell (17px) - Content for table cells and data display
+            <Typography variant="blogBody">
+              Blog Body - Body text for blog posts and articles with optimized
+              reading experience.
             </Typography>
-            <Typography variant="details" color="muted">
-              text-base leading-normal
+            <Typography variant="detail" color="muted">
+              Blog content variant
             </Typography>
           </div>
 
           <div className="space-y-1">
-            <Typography variant="tableHeader" as="th">
-              Table Header (17px) - Headers for table columns with emphasis
+            <Typography variant="body">
+              Body - Standard body text for content and paragraphs. This is the
+              default variant for most content.
             </Typography>
-            <Typography variant="details" color="muted">
-              text-base font-medium leading-normal
+            <Typography variant="detail" color="muted">
+              Standard body variant
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="detail">
+              Detail - Smaller text for details, descriptions, and secondary
+              information.
+            </Typography>
+            <Typography variant="detail" color="muted">
+              Detail text variant
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="code" as="code">
+              const codeExample = &quot;Code text for snippets and technical
+              content&quot;;
+            </Typography>
+            <Typography variant="detail" color="muted">
+              Monospace code variant
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="microcopy">
+              Microcopy - Very small text for captions and fine print
+            </Typography>
+            <Typography variant="detail" color="muted">
+              Smallest text variant
             </Typography>
           </div>
         </div>
@@ -284,10 +315,10 @@ export const InContext: Story = {
     <div className="space-y-8 max-w-4xl">
       {/* Article Layout */}
       <article className="space-y-4">
-        <Typography variant="heading" as="h1">
+        <Typography variant="pageTitle" as="h1">
           Building Better Typography Systems
         </Typography>
-        <Typography variant="subheading" as="h2" color="muted">
+        <Typography variant="subHeadline" as="h2" color="muted">
           A comprehensive guide to design system typography
         </Typography>
         <Typography variant="body">
@@ -297,12 +328,12 @@ export const InContext: Story = {
           ensures consistency across all touchpoints while maintaining
           flexibility for different use cases.
         </Typography>
-        <Typography variant="bodyEmphasized">
+        <Typography variant="paragraphLead">
           Key principles include establishing clear hierarchy, ensuring
           accessibility, and maintaining consistency across all platforms and
           devices.
         </Typography>
-        <Typography variant="details" color="muted">
+        <Typography variant="detail" color="muted">
           Published on March 15, 2024 • 5 min read
         </Typography>
       </article>
@@ -318,7 +349,7 @@ export const InContext: Story = {
         <CardContent>
           <div className="space-y-3">
             <div className="space-y-1">
-              <Typography variant="field" as="label" htmlFor="email">
+              <Typography variant="body" as="label" htmlFor="email">
                 Email Address
               </Typography>
               <input
@@ -327,7 +358,7 @@ export const InContext: Story = {
                 className="w-full px-3 py-2 border rounded-md"
                 placeholder="Enter your email"
               />
-              <Typography variant="details" color="muted">
+              <Typography variant="detail" color="muted">
                 We&apos;ll never share your email with third parties
               </Typography>
             </div>
@@ -337,30 +368,33 @@ export const InContext: Story = {
 
       {/* Data Table */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Project Status
         </Typography>
         <table className="w-full border-collapse border border-border">
           <thead>
             <tr className="bg-muted/50">
               <Typography
-                variant="tableHeader"
+                variant="body"
                 as="th"
                 className="border border-border px-4 py-2 text-left"
+                weight="semibold"
               >
                 Project Name
               </Typography>
               <Typography
-                variant="tableHeader"
+                variant="body"
                 as="th"
                 className="border border-border px-4 py-2 text-left"
+                weight="semibold"
               >
                 Status
               </Typography>
               <Typography
-                variant="tableHeader"
+                variant="body"
                 as="th"
                 className="border border-border px-4 py-2 text-left"
+                weight="semibold"
               >
                 Due Date
               </Typography>
@@ -369,14 +403,14 @@ export const InContext: Story = {
           <tbody>
             <tr>
               <Typography
-                variant="tableCell"
+                variant="body"
                 as="td"
                 className="border border-border px-4 py-2"
               >
                 Design System v2.0
               </Typography>
               <Typography
-                variant="tableCell"
+                variant="body"
                 as="td"
                 className="border border-border px-4 py-2"
                 color="success"
@@ -384,7 +418,7 @@ export const InContext: Story = {
                 Complete
               </Typography>
               <Typography
-                variant="tableCell"
+                variant="body"
                 as="td"
                 className="border border-border px-4 py-2"
               >
@@ -393,14 +427,14 @@ export const InContext: Story = {
             </tr>
             <tr>
               <Typography
-                variant="tableCell"
+                variant="body"
                 as="td"
                 className="border border-border px-4 py-2"
               >
                 Mobile App Redesign
               </Typography>
               <Typography
-                variant="tableCell"
+                variant="body"
                 as="td"
                 className="border border-border px-4 py-2"
                 color="warning"
@@ -408,7 +442,7 @@ export const InContext: Story = {
                 In Progress
               </Typography>
               <Typography
-                variant="tableCell"
+                variant="body"
                 as="td"
                 className="border border-border px-4 py-2"
               >
@@ -471,10 +505,10 @@ export const InContext: Story = {
               </Typography>
             </li>
           </ul>
-          <Typography variant="details" srOnly>
+          <Typography variant="detail" srOnly>
             This text is hidden visually but available to screen readers
           </Typography>
-          <Typography variant="details" color="muted">
+          <Typography variant="detail" color="muted">
             Note: The line above contains screen reader only content
           </Typography>
         </CardContent>
@@ -482,7 +516,7 @@ export const InContext: Story = {
 
       {/* Color Variants */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Color Variants
         </Typography>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -509,7 +543,7 @@ export const InContext: Story = {
 
       {/* Text Styling Options */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Text Styling Options
         </Typography>
         <div className="space-y-2">
@@ -559,7 +593,7 @@ export const SemanticComponents: Story = {
 
       {/* Headings */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Heading Components
         </Typography>
         <div className="space-y-3 pl-4 border-l-2 border-border">
@@ -574,7 +608,7 @@ export const SemanticComponents: Story = {
 
       {/* Text Components */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Text Components
         </Typography>
         <div className="space-y-3 pl-4 border-l-2 border-border">
@@ -593,7 +627,7 @@ export const SemanticComponents: Story = {
 
       {/* Code and Technical */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Code and Technical
         </Typography>
         <div className="space-y-3 pl-4 border-l-2 border-border">
@@ -606,7 +640,7 @@ export const SemanticComponents: Story = {
 
       {/* Form Elements */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Form Elements
         </Typography>
         <div className="space-y-3 pl-4 border-l-2 border-border">
@@ -627,7 +661,7 @@ export const SemanticComponents: Story = {
 
       {/* Links and Navigation */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Links and Navigation
         </Typography>
         <div className="space-y-3 pl-4 border-l-2 border-border">
@@ -654,7 +688,7 @@ export const SemanticComponents: Story = {
 
       {/* Quoted Content */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Quoted Content
         </Typography>
         <div className="pl-4 border-l-2 border-border">
@@ -667,7 +701,7 @@ export const SemanticComponents: Story = {
 
       {/* Comparison Table */}
       <div className="space-y-4">
-        <Typography variant="subheading" as="h3">
+        <Typography variant="sectionTitle" as="h3">
           Generic vs Semantic Approach
         </Typography>
         <div className="overflow-x-auto">
@@ -675,23 +709,26 @@ export const SemanticComponents: Story = {
             <thead>
               <tr className="bg-muted/50">
                 <Typography
-                  variant="tableHeader"
+                  variant="body"
                   as="th"
                   className="border border-border px-4 py-2 text-left"
+                  weight="semibold"
                 >
                   Approach
                 </Typography>
                 <Typography
-                  variant="tableHeader"
+                  variant="body"
                   as="th"
                   className="border border-border px-4 py-2 text-left"
+                  weight="semibold"
                 >
                   Code Example
                 </Typography>
                 <Typography
-                  variant="tableHeader"
+                  variant="body"
                   as="th"
                   className="border border-border px-4 py-2 text-left"
+                  weight="semibold"
                 >
                   Benefits
                 </Typography>
@@ -700,24 +737,24 @@ export const SemanticComponents: Story = {
             <tbody>
               <tr>
                 <Typography
-                  variant="tableCell"
+                  variant="body"
                   as="td"
                   className="border border-border px-4 py-2"
                 >
                   Generic
                 </Typography>
                 <Typography
-                  variant="tableCell"
+                  variant="body"
                   as="td"
                   className="border border-border px-4 py-2"
                 >
                   <Code>
-                    &lt;Typography variant=&quot;heading&quot;
+                    &lt;Typography variant=&quot;pageTitle&quot;
                     as=&quot;h1&quot;&gt;
                   </Code>
                 </Typography>
                 <Typography
-                  variant="tableCell"
+                  variant="body"
                   as="td"
                   className="border border-border px-4 py-2"
                 >
@@ -726,21 +763,21 @@ export const SemanticComponents: Story = {
               </tr>
               <tr>
                 <Typography
-                  variant="tableCell"
+                  variant="body"
                   as="td"
                   className="border border-border px-4 py-2"
                 >
                   Semantic
                 </Typography>
                 <Typography
-                  variant="tableCell"
+                  variant="body"
                   as="td"
                   className="border border-border px-4 py-2"
                 >
                   <Code>&lt;H1&gt;</Code>
                 </Typography>
                 <Typography
-                  variant="tableCell"
+                  variant="body"
                   as="td"
                   className="border border-border px-4 py-2"
                 >
@@ -806,7 +843,7 @@ export const ComponentReference: Story = {
   render: () => (
     <div className="space-y-6 max-w-6xl">
       <div className="space-y-2">
-        <Typography variant="heading" as="h2">
+        <Typography variant="pageTitle" as="h2">
           Semantic Typography Components Reference
         </Typography>
         <Typography variant="body" color="muted">
@@ -829,44 +866,50 @@ export const ComponentReference: Story = {
               <thead>
                 <tr className="bg-muted/50">
                   <Typography
-                    variant="tableHeader"
+                    variant="body"
                     as="th"
                     className="border border-border px-4 py-2 text-left"
+                    weight="semibold"
                   >
                     Component
                   </Typography>
                   <Typography
-                    variant="tableHeader"
+                    variant="body"
                     as="th"
                     className="border border-border px-4 py-2 text-left"
+                    weight="semibold"
                   >
                     HTML Element
                   </Typography>
                   <Typography
-                    variant="tableHeader"
+                    variant="body"
                     as="th"
                     className="border border-border px-4 py-2 text-left"
+                    weight="semibold"
                   >
                     Default Variant
                   </Typography>
                   <Typography
-                    variant="tableHeader"
+                    variant="body"
                     as="th"
                     className="border border-border px-4 py-2 text-left"
+                    weight="semibold"
                   >
                     Font Size
                   </Typography>
                   <Typography
-                    variant="tableHeader"
+                    variant="body"
                     as="th"
                     className="border border-border px-4 py-2 text-left"
+                    weight="semibold"
                   >
                     Use Case
                   </Typography>
                   <Typography
-                    variant="tableHeader"
+                    variant="body"
                     as="th"
                     className="border border-border px-4 py-2 text-left"
+                    weight="semibold"
                   >
                     Example
                   </Typography>
@@ -875,42 +918,42 @@ export const ComponentReference: Story = {
               <tbody>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>H1</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     h1
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    heading
+                    pageTitle
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    20px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Main page titles
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -919,42 +962,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>H2</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     h2
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    subheading
+                    sectionTitle
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    17px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Section headings
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -963,42 +1006,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>H3</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     h3
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    subheading
+                    headline
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    17px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Subsection headings
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1007,42 +1050,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>H4</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     h4
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    bodyEmphasized
+                    subHeadline
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    Minor headings
+                    Sub headlines
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1051,42 +1094,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>H5</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     h5
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    bodyEmphasized
+                    eyebrow
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Small headings
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1095,42 +1138,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>H6</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     h6
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    details
+                    detail
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    12px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Smallest headings
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1139,42 +1182,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>P</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     p
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     body
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Body text, paragraphs
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1183,42 +1226,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>A</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     a
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     body + underline
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Links with hover states
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1229,42 +1272,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>Span</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     span
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     body (default)
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Inline text, highlights
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1275,42 +1318,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>Strong</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     strong
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     bodyEmphasized
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Emphasized text
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1319,42 +1362,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>Lead</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     p
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    subheading + muted
+                    paragraphLead
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    17px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Introductory text
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1363,42 +1406,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>Small</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     small
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     microcopy
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    10px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Fine print, captions
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1407,42 +1450,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>Code</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     code
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     code
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    17px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Inline code snippets
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1451,42 +1494,42 @@ export const ComponentReference: Story = {
                 </tr>
                 <tr>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     <Code>Blockquote</Code>
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     blockquote
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    body + italic
+                    blogBody + italic
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
-                    14px
+                    Variable
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
                     Quoted text
                   </Typography>
                   <Typography
-                    variant="tableCell"
+                    variant="body"
                     as="td"
                     className="border border-border px-4 py-2"
                   >
@@ -1511,7 +1554,7 @@ export const ComponentReference: Story = {
         <CardContent>
           <div className="space-y-4">
             <div>
-              <Typography variant="bodyEmphasized">Available Props:</Typography>
+              <Typography variant="paragraphLead">Available Props:</Typography>
               <ul className="mt-2 space-y-1 ml-4">
                 <li>
                   <Code>color</Code> - default, muted, accent, destructive,
@@ -1548,7 +1591,7 @@ export const ComponentReference: Story = {
               </ul>
             </div>
             <div>
-              <Typography variant="bodyEmphasized">Usage Examples:</Typography>
+              <Typography variant="paragraphLead">Usage Examples:</Typography>
               <div className="mt-2 space-y-2">
                 <div>
                   <Code>