@neynar/ui 0.3.0 → 0.4.0

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

@@ -1,22 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
-  Typography,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  P,
-  A,
-  Span,
+  PageTitle,
+  SectionTitle,
+  SubsectionTitle,
+  BodyText,
+  BodyTextLarge,
+  BodyTextSmall,
+  Caption,
+  Overline,
   Code,
-  Small,
-  Strong,
-  Lead,
   Blockquote,
 } from "../typography";
-import { Label } from "../label";
 import {
   Card,
   CardContent,
@@ -28,277 +22,124 @@ import {
 /**
  * Typography component stories for design system documentation
  *
- * This story file demonstrates the Typography component's capabilities through three focused stories:
- * - Interactive: Playground for testing all props and variants
- * - Variants: Systematic showcase of all available typography variants
- * - InContext: Real-world usage examples for business and design teams
+ * This story file demonstrates purpose-named typography components following 2025 best practices.
+ * Components are Tailwind-first with semantic HTML defaults and zero abstraction.
  */
 const meta = {
   title: "Typography/Typography",
-  component: Typography,
+  component: PageTitle,
   parameters: {
     layout: "centered",
     docs: {
       description: {
         component:
-          "A comprehensive typography component providing consistent text styling across the application. Built with semantic HTML elements, accessibility features, and flexible styling options using design system tokens.",
+          "Purpose-named typography components with Tailwind-first styling. Each component has sensible defaults that can be fully overridden via className prop. No magic props or variants - what you see is what you get.",
       },
     },
   },
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: [
-        "microcopy",
-        "detail",
-        "body",
-        "blogBody",
-        "paragraphLead",
-        "eyebrow",
-        "subHeadline",
-        "headline",
-        "sectionTitle",
-        "pageTitle",
-        "displayTitle",
-        "heroTitle",
-        "code",
-      ],
-      description:
-        "Typography variant for semantic styling and visual hierarchy",
-    },
-    color: {
-      control: { type: "select" },
-      options: [
-        "default",
-        "muted",
-        "faint",
-        "accent",
-        "destructive",
-        "success",
-        "warning",
-      ],
-      description: "Color variant for different semantic meanings",
-    },
-    align: {
-      control: { type: "select" },
-      options: ["left", "center", "right", "justify"],
-      description: "Text alignment",
-    },
-    transform: {
-      control: { type: "select" },
-      options: ["none", "uppercase", "lowercase", "capitalize"],
-      description: "Text transformation",
-    },
-    weight: {
-      control: { type: "select" },
-      options: ["normal", "medium", "semibold", "bold"],
-      description: "Font weight override",
-    },
-    as: {
-      control: { type: "select" },
-      options: [
-        "p",
-        "span",
-        "div",
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "code",
-        "pre",
-        "blockquote",
-      ],
-      description: "HTML element to render as",
-    },
-    asChild: {
-      control: { type: "boolean" },
-      description: "Render as Slot for composition",
-    },
-    italic: {
-      control: { type: "boolean" },
-      description: "Apply italic styling",
-    },
-    underline: {
-      control: { type: "boolean" },
-      description: "Apply underline styling",
-    },
-    strikethrough: {
-      control: { type: "boolean" },
-      description: "Apply strikethrough styling",
-    },
-    truncate: {
-      control: { type: "boolean" },
-      description: "Apply text truncation with ellipsis",
-    },
-    srOnly: {
-      control: { type: "boolean" },
-      description: "Hide visually but keep accessible to screen readers",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Text content to render",
-    },
-  },
-} satisfies Meta<typeof Typography>;
+} satisfies Meta<typeof PageTitle>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Interactive playground for testing all Typography component features.
- * Use controls to experiment with different combinations of props.
+ * Interactive playground for testing Typography components.
  */
 export const Interactive: Story = {
-  args: {
-    variant: "body",
-    color: "default",
-    align: "left",
-    transform: null,
-    children: "The quick brown fox jumps over the lazy dog.",
-    as: "p",
-    asChild: false,
-    italic: false,
-    underline: false,
-    strikethrough: false,
-    truncate: false,
-    srOnly: false,
-  },
+  render: () => (
+    <div className="space-y-4 max-w-2xl">
+      <PageTitle>Interactive Typography Playground</PageTitle>
+      <BodyText className="text-muted-foreground">
+        Experiment with different typography components using the controls
+        panel.
+      </BodyText>
+    </div>
+  ),
 };
 
 /**
- * Systematic showcase of all typography variants with consistent content.
- * Demonstrates the visual hierarchy and size relationships between variants.
+ * Systematic showcase of all typography components.
+ * Demonstrates the visual hierarchy and appropriate sizing for web applications.
  */
-export const Variants: Story = {
+export const AllComponents: Story = {
   render: () => (
-    <div className="space-y-4 max-w-4xl">
-      <div className="space-y-2">
-        <Typography variant="microcopy" color="muted" as="span">
-          Typography Variants
-        </Typography>
-        <div className="grid gap-4">
-          <div className="space-y-1">
-            <Typography variant="heroTitle" as="h1">
-              Hero Title - Largest display text for landing pages
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Largest display variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="displayTitle" as="h1">
-              Display Title - Large display text for important headings
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Large display variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="pageTitle" as="h1">
-              Page Title - Main page titles
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Primary heading variant
-            </Typography>
+    <div className="space-y-8 max-w-4xl">
+      {/* Headings */}
+      <div className="space-y-4">
+        <Overline>Headings</Overline>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <div>
+            <PageTitle>PageTitle (30px)</PageTitle>
+            <Caption className="block mt-1">Main page heading - text-3xl font-bold leading-tight tracking-wide</Caption>
           </div>
-
-          <div className="space-y-1">
-            <Typography variant="sectionTitle" as="h2">
-              Section Title - Section headings within pages
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Section heading variant
-            </Typography>
+          <div>
+            <SectionTitle>SectionTitle (24px)</SectionTitle>
+            <Caption className="block mt-1">Section headings - text-2xl font-semibold leading-tight tracking-wide</Caption>
           </div>
-
-          <div className="space-y-1">
-            <Typography variant="headline" as="h3">
-              Headline - Article and content headlines
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Content headline variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="subHeadline" as="h4">
-              Sub Headline - Secondary headlines and subheadings
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Secondary headline variant
-            </Typography>
+          <div>
+            <SubsectionTitle>SubsectionTitle (20px)</SubsectionTitle>
+            <Caption className="block mt-1">Subsection headings - text-xl font-semibold leading-snug tracking-wide</Caption>
           </div>
+        </div>
+      </div>
 
-          <div className="space-y-1">
-            <Typography variant="eyebrow" as="div">
-              Eyebrow - Small labels above headings
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Small label variant
-            </Typography>
+      {/* Body Text */}
+      <div className="space-y-4">
+        <Overline>Body Text</Overline>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <div>
+            <BodyTextLarge>
+              BodyTextLarge (18px) - Larger body text for lead paragraphs and
+              emphasized content.
+            </BodyTextLarge>
+            <Caption className="block mt-1">text-lg leading-relaxed tracking-wide</Caption>
           </div>
-
-          <div className="space-y-1">
-            <Typography variant="paragraphLead">
-              Paragraph Lead - Opening paragraph text that introduces content
-              with emphasis.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Lead paragraph variant
-            </Typography>
+          <div>
+            <BodyText>
+              BodyText (16px) - Standard paragraph text for readable body
+              content with optimal line height.
+            </BodyText>
+            <Caption className="block mt-1">text-base leading-relaxed tracking-wide</Caption>
           </div>
-
-          <div className="space-y-1">
-            <Typography variant="blogBody">
-              Blog Body - Body text for blog posts and articles with optimized
-              reading experience.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Blog content variant
-            </Typography>
+          <div>
+            <BodyTextSmall>
+              BodyTextSmall (14px) - Smaller body text for less prominent
+              content.
+            </BodyTextSmall>
+            <Caption className="block mt-1">text-sm leading-normal tracking-wide</Caption>
           </div>
+        </div>
+      </div>
 
-          <div className="space-y-1">
-            <Typography variant="body">
-              Body - Standard body text for content and paragraphs. This is the
-              default variant for most content.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Standard body variant
-            </Typography>
+      {/* Supporting Text */}
+      <div className="space-y-4">
+        <Overline>Supporting Components</Overline>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <div>
+            <Caption>Caption - Metadata, timestamps, supplementary info</Caption>
+            <Caption className="block mt-1">
+              text-sm text-muted-foreground leading-normal tracking-wide
+            </Caption>
           </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>
+            <Overline>Overline Text</Overline>
+            <Caption className="block mt-1">
+              Category tags and eyebrow labels - text-xs uppercase tracking-wider
+            </Caption>
           </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>
+            <Code>const code = "Inline code snippets";</Code>
+            <Caption className="block mt-1">
+              font-mono text-sm bg-muted px-1 rounded
+            </Caption>
           </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>
+            <Blockquote>
+              "Blockquote component for quoted text and testimonials."
+            </Blockquote>
+            <Caption className="block mt-1">
+              border-l-4 border-border pl-4 italic tracking-wide
+            </Caption>
           </div>
         </div>
       </div>
@@ -308,149 +149,102 @@ export const Variants: Story = {
 
 /**
  * Real-world usage examples demonstrating Typography in practical scenarios.
- * Shows how to combine variants with semantic HTML and accessibility features.
  */
 export const InContext: Story = {
   render: () => (
     <div className="space-y-8 max-w-4xl">
       {/* Article Layout */}
       <article className="space-y-4">
-        <Typography variant="pageTitle" as="h1">
-          Building Better Typography Systems
-        </Typography>
-        <Typography variant="subHeadline" as="h2" color="muted">
-          A comprehensive guide to design system typography
-        </Typography>
-        <Typography variant="body">
+        <PageTitle>Building Better Typography Systems</PageTitle>
+        <BodyTextLarge className="text-muted-foreground">
+          A comprehensive guide to modern web application typography
+        </BodyTextLarge>
+        <BodyText>
           Typography is one of the most critical aspects of any design system.
           It provides visual hierarchy, improves readability, and helps users
           navigate content effectively. A well-designed typography system
-          ensures consistency across all touchpoints while maintaining
-          flexibility for different use cases.
-        </Typography>
-        <Typography variant="paragraphLead">
-          Key principles include establishing clear hierarchy, ensuring
-          accessibility, and maintaining consistency across all platforms and
-          devices.
-        </Typography>
-        <Typography variant="detail" color="muted">
-          Published on March 15, 2024 • 5 min read
-        </Typography>
+          ensures consistency across all touchpoints.
+        </BodyText>
+        <Caption>Published on March 15, 2024 • 5 min read</Caption>
       </article>
 
-      {/* Form Example */}
+      {/* Card Example */}
       <Card>
         <CardHeader>
-          <CardTitle>Contact Information</CardTitle>
+          <CardTitle>Project Details</CardTitle>
           <CardDescription>
-            Example form using Typography components for labels and help text
+            Example card showing typography in a structured layout
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            <div className="space-y-1">
-              <Typography variant="body" as="label" htmlFor="email">
-                Email Address
-              </Typography>
-              <input
-                id="email"
-                type="email"
-                className="w-full px-3 py-2 border rounded-md"
-                placeholder="Enter your email"
-              />
-              <Typography variant="detail" color="muted">
-                We&apos;ll never share your email with third parties
-              </Typography>
-            </div>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <SectionTitle as="h3">Overview</SectionTitle>
+            <BodyText>
+              This project demonstrates modern typography patterns using
+              purpose-named components.
+            </BodyText>
+          </div>
+          <div className="space-y-2">
+            <SubsectionTitle>Technical Details</SubsectionTitle>
+            <BodyText>
+              Built with <Code>@neynar/ui</Code> components and Tailwind CSS.
+              All styling is transparent and overridable.
+            </BodyText>
           </div>
+          <Caption>Last updated 2 hours ago</Caption>
         </CardContent>
       </Card>
 
-      {/* Data Table */}
+      {/* Status Table */}
       <div className="space-y-4">
-        <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="body"
-                as="th"
-                className="border border-border px-4 py-2 text-left"
-                weight="semibold"
-              >
-                Project Name
-              </Typography>
-              <Typography
-                variant="body"
-                as="th"
-                className="border border-border px-4 py-2 text-left"
-                weight="semibold"
-              >
-                Status
-              </Typography>
-              <Typography
-                variant="body"
-                as="th"
-                className="border border-border px-4 py-2 text-left"
-                weight="semibold"
-              >
-                Due Date
-              </Typography>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                Design System v2.0
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-                color="success"
-              >
-                Complete
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                March 1, 2024
-              </Typography>
-            </tr>
-            <tr>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                Mobile App Redesign
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-                color="warning"
-              >
-                In Progress
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                April 15, 2024
-              </Typography>
-            </tr>
-          </tbody>
-        </table>
+        <SectionTitle>Project Status</SectionTitle>
+        <div className="border rounded-lg overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-muted/50">
+              <tr>
+                <th className="px-4 py-3 text-left">
+                  <BodyText as="span" className="font-semibold">
+                    Project
+                  </BodyText>
+                </th>
+                <th className="px-4 py-3 text-left">
+                  <BodyText as="span" className="font-semibold">
+                    Status
+                  </BodyText>
+                </th>
+                <th className="px-4 py-3 text-left">
+                  <BodyText as="span" className="font-semibold">
+                    Due Date
+                  </BodyText>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-t">
+                <td className="px-4 py-3">
+                  <BodyText>Design System v2.0</BodyText>
+                </td>
+                <td className="px-4 py-3">
+                  <BodyText className="text-success">Complete</BodyText>
+                </td>
+                <td className="px-4 py-3">
+                  <BodyText>March 1, 2025</BodyText>
+                </td>
+              </tr>
+              <tr className="border-t">
+                <td className="px-4 py-3">
+                  <BodyText>Mobile App Redesign</BodyText>
+                </td>
+                <td className="px-4 py-3">
+                  <BodyText className="text-warning">In Progress</BodyText>
+                </td>
+                <td className="px-4 py-3">
+                  <BodyText>April 15, 2025</BodyText>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
 
       {/* Code Block */}
@@ -458,1175 +252,130 @@ export const InContext: Story = {
         <CardHeader>
           <CardTitle>Code Example</CardTitle>
           <CardDescription>
-            Example showing semantic HTML with Typography variants
+            Demonstrating typography component usage
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Typography
-            variant="code"
-            as="pre"
-            className="bg-muted p-4 rounded-md overflow-x-auto"
-          >
-            {`// Typography component usage
-<Typography variant="heading" as="h1">
-  Page Title
-</Typography>
+          <pre className="bg-muted p-4 rounded-md overflow-x-auto">
+            <code className="font-mono text-sm">
+              {`// Typography component usage
+<PageTitle>Dashboard</PageTitle>
 
-<Typography variant="body" color="muted">
-  Supporting text content
-</Typography>`}
-          </Typography>
-        </CardContent>
-      </Card>
+<SectionTitle>Recent Activity</SectionTitle>
 
-      {/* Accessibility Features */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Accessibility Features</CardTitle>
-          <CardDescription>
-            Demonstrating accessibility features of the Typography component
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <ul className="space-y-2">
-            <li>
-              <Typography variant="body">
-                • Semantic HTML elements for proper document structure
-              </Typography>
-            </li>
-            <li>
-              <Typography variant="body">
-                • Color contrast ratios meeting WCAG 2.1 AA standards
-              </Typography>
-            </li>
-            <li>
-              <Typography variant="body">
-                • Screen reader support with proper labeling
-              </Typography>
-            </li>
-          </ul>
-          <Typography variant="detail" srOnly>
-            This text is hidden visually but available to screen readers
-          </Typography>
-          <Typography variant="detail" color="muted">
-            Note: The line above contains screen reader only content
-          </Typography>
+<BodyText>
+  Standard body text with optimal readability.
+</BodyText>
+
+<Caption>Last updated 5 minutes ago</Caption>`}
+            </code>
+          </pre>
         </CardContent>
       </Card>
 
-      {/* Color Variants */}
+      {/* Customization Examples */}
       <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Color Variants
-        </Typography>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Typography variant="body" color="default">
-            Default color for standard content
-          </Typography>
-          <Typography variant="body" color="muted">
-            Muted color for secondary information
-          </Typography>
-          <Typography variant="body" color="faint">
-            Faint color for tertiary information
-          </Typography>
-          <Typography variant="body" color="accent">
-            Accent color for emphasis
-          </Typography>
-          <Typography variant="body" color="destructive">
-            Destructive color for errors and warnings
-          </Typography>
-          <Typography variant="body" color="success">
-            Success color for positive states
-          </Typography>
-          <Typography variant="body" color="warning">
-            Warning color for caution states
-          </Typography>
-        </div>
-      </div>
-
-      {/* Text Styling Options */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Text Styling Options
-        </Typography>
-        <div className="space-y-2">
-          <Typography variant="body" italic>
-            Italic text for emphasis and quotes
-          </Typography>
-          <Typography variant="body" underline>
-            Underlined text for links and emphasis
-          </Typography>
-          <Typography variant="body" strikethrough>
-            Strikethrough text for corrections and deletions
-          </Typography>
-          <Typography variant="body" transform="uppercase">
-            Uppercase text for labels and headings
-          </Typography>
-          <Typography variant="body" weight="bold">
-            Bold text for strong emphasis
-          </Typography>
-          <div className="max-w-xs">
-            <Typography variant="body" truncate>
-              This is a very long text that will be truncated with ellipsis when
-              it exceeds the container width
-            </Typography>
+        <SectionTitle>Tailwind Customization</SectionTitle>
+        <div className="space-y-3">
+          <div>
+            <Overline>Custom Colors</Overline>
+            <BodyText className="text-accent-foreground">
+              Accent colored body text
+            </BodyText>
+            <BodyText className="text-destructive">Error message text</BodyText>
+            <BodyText className="text-success">Success message text</BodyText>
           </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * Showcase of individual semantic typography components for better TypeScript support.
- * Demonstrates the recommended approach using semantic components vs generic Typography.
- */
-export const SemanticComponents: Story = {
-  render: () => (
-    <div className="space-y-8 max-w-4xl">
-      <div className="space-y-2">
-        <Typography variant="microcopy" color="muted" as="span">
-          Semantic Typography Components
-        </Typography>
-        <Typography variant="body" color="muted">
-          Individual semantic components provide better TypeScript support and
-          developer experience.
-        </Typography>
-      </div>
-
-      {/* Headings */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Heading Components
-        </Typography>
-        <div className="space-y-3 pl-4 border-l-2 border-border">
-          <H1>H1 - Main page title (20px)</H1>
-          <H2>H2 - Section heading (17px)</H2>
-          <H3>H3 - Subsection heading (17px)</H3>
-          <H4>H4 - Minor heading (14px emphasized)</H4>
-          <H5>H5 - Small heading (14px emphasized)</H5>
-          <H6>H6 - Smallest heading (12px)</H6>
-        </div>
-      </div>
-
-      {/* Text Components */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Text Components
-        </Typography>
-        <div className="space-y-3 pl-4 border-l-2 border-border">
-          <P>P - Standard paragraph text for body content and descriptions.</P>
-          <P>
-            Inline text with{" "}
-            <Span color="accent">highlighted span content</Span> and
-            <Strong> emphasized strong text</Strong> for better readability.
-          </P>
-          <Lead>
-            Lead - Introductory text that stands out from regular paragraphs.
-          </Lead>
-          <Small>Small - Fine print and microcopy text (10px)</Small>
-        </div>
-      </div>
-
-      {/* Code and Technical */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Code and Technical
-        </Typography>
-        <div className="space-y-3 pl-4 border-l-2 border-border">
-          <P>
-            Use the <Code>useState</Code> hook to manage component state.
-          </P>
-          <Code>const [count, setCount] = useState(0);</Code>
-        </div>
-      </div>
-
-      {/* Form Elements */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Form Elements
-        </Typography>
-        <div className="space-y-3 pl-4 border-l-2 border-border">
-          <div className="space-y-1">
-            <Label htmlFor="example-input">Email Address</Label>
-            <input
-              id="example-input"
-              type="email"
-              className="w-full px-3 py-2 border rounded-md"
-              placeholder="Enter your email"
-            />
-            <Small color="muted">
-              We&apos;ll never share your email with third parties
-            </Small>
+          <div>
+            <Overline>Custom Weights</Overline>
+            <BodyText className="font-medium">Medium weight text</BodyText>
+            <BodyText className="font-bold">Bold body text</BodyText>
+          </div>
+          <div>
+            <Overline>Responsive Typography</Overline>
+            <PageTitle className="text-2xl md:text-3xl lg:text-4xl">
+              Responsive Heading
+            </PageTitle>
           </div>
         </div>
       </div>
 
-      {/* Links and Navigation */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Links and Navigation
-        </Typography>
-        <div className="space-y-3 pl-4 border-l-2 border-border">
-          <P>
-            Standard link with href:{" "}
-            <A href="https://example.com">External link</A>
-          </P>
-          <P>
-            Link with custom styling:{" "}
-            <A href="/about" color="accent">
-              Internal link
-            </A>
-          </P>
-          <P>
-            Composition pattern:{" "}
-            <A asChild>
-              <span role="button" tabIndex={0}>
-                Custom component
-              </span>
-            </A>
-          </P>
-        </div>
-      </div>
-
-      {/* Quoted Content */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Quoted Content
-        </Typography>
-        <div className="pl-4 border-l-2 border-border">
-          <Blockquote>
-            &quot;The best way to predict the future is to invent it.&quot; -
-            Alan Kay
-          </Blockquote>
-        </div>
-      </div>
-
-      {/* Comparison Table */}
+      {/* Quote Example */}
       <div className="space-y-4">
-        <Typography variant="sectionTitle" as="h3">
-          Generic vs Semantic Approach
-        </Typography>
-        <div className="overflow-x-auto">
-          <table className="w-full border-collapse border border-border">
-            <thead>
-              <tr className="bg-muted/50">
-                <Typography
-                  variant="body"
-                  as="th"
-                  className="border border-border px-4 py-2 text-left"
-                  weight="semibold"
-                >
-                  Approach
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="th"
-                  className="border border-border px-4 py-2 text-left"
-                  weight="semibold"
-                >
-                  Code Example
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="th"
-                  className="border border-border px-4 py-2 text-left"
-                  weight="semibold"
-                >
-                  Benefits
-                </Typography>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Generic
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  <Code>
-                    &lt;Typography variant=&quot;pageTitle&quot;
-                    as=&quot;h1&quot;&gt;
-                  </Code>
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Full control over variant and element
-                </Typography>
-              </tr>
-              <tr>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Semantic
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  <Code>&lt;H1&gt;</Code>
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Better TypeScript, shorter syntax, semantic clarity
-                </Typography>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <SectionTitle>Quoted Content</SectionTitle>
+        <Blockquote>
+          "The best way to predict the future is to invent it." — Alan Kay
+        </Blockquote>
+        <Blockquote className="bg-muted/50 p-4 rounded-lg">
+          This is a styled blockquote with custom background and padding.
+          Perfect for testimonials and customer feedback.
+        </Blockquote>
       </div>
 
-      {/* Usage Recommendations */}
+      {/* Component Reference */}
       <Card>
         <CardHeader>
-          <CardTitle>Usage Recommendations</CardTitle>
+          <CardTitle>Component Reference</CardTitle>
           <CardDescription>
-            Best practices for using Typography components in your application
+            All typography components with their default Tailwind classes
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <ul className="space-y-2">
-            <li>
-              <Strong>✅ Recommended:</Strong>{" "}
-              <P className="inline">
-                Use semantic components (H1, P, etc.) for better developer
-                experience and TypeScript support.
-              </P>
-            </li>
-            <li>
-              <Strong>⚠️ When to use generic:</Strong>{" "}
-              <P className="inline">
-                Use Typography component when you need custom variant/element
-                combinations not covered by semantic components.
-              </P>
-            </li>
-            <li>
-              <Strong>🎯 Best practice:</Strong>{" "}
-              <P className="inline">
-                Semantic components provide pre-configured defaults that match
-                design system specifications.
-              </P>
-            </li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Showcase of individual semantic typography components that provide better TypeScript support and developer experience. Compare semantic components (H1, P, etc.) with the generic Typography approach.",
-      },
-    },
-  },
-};
-
-/**
- * Complete reference table of all semantic typography components with their defaults and usage.
- * Provides a comprehensive overview for developers to quickly understand each component.
- */
-export const ComponentReference: Story = {
-  render: () => (
-    <div className="space-y-6 max-w-6xl">
-      <div className="space-y-2">
-        <Typography variant="pageTitle" as="h2">
-          Semantic Typography Components Reference
-        </Typography>
-        <Typography variant="body" color="muted">
-          Complete reference of all individual semantic components with their
-          default variants, HTML elements, and use cases.
-        </Typography>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Component Reference Table</CardTitle>
-          <CardDescription>
-            All semantic typography components with their configurations and
-            recommended usage
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-x-auto">
-            <table className="w-full border-collapse border border-border">
-              <thead>
-                <tr className="bg-muted/50">
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Component
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    HTML Element
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Default Variant
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Font Size
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Use Case
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Example
-                  </Typography>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H1</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h1
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    pageTitle
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Main page titles
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H1 className="text-sm">Page Title</H1>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H2</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h2
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    sectionTitle
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Section headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H2 className="text-sm">Section Title</H2>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H3</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h3
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    headline
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Subsection headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H3 className="text-sm">Subsection</H3>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H4</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h4
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    subHeadline
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Sub headlines
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H4 className="text-sm">Minor Heading</H4>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H5</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h5
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    eyebrow
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Small headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H5 className="text-sm">Small Heading</H5>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H6</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h6
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    detail
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Smallest headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H6 className="text-sm">Tiny Heading</H6>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>P</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    p
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    body
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Body text, paragraphs
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <P className="text-sm">Standard paragraph text.</P>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>A</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    a
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    body + underline
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Links with hover states
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <A className="text-sm" href="https://example.com">
-                      Example Link
-                    </A>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Span</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    span
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    body (default)
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Inline text, highlights
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Span className="text-sm" color="accent">
-                      Highlighted text
-                    </Span>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Strong</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    strong
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    bodyEmphasized
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Emphasized text
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Strong className="text-sm">Important text</Strong>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Lead</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    p
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    paragraphLead
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Introductory text
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Lead className="text-sm">Article introduction</Lead>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Small</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    small
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    microcopy
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Fine print, captions
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Small className="text-xs">Terms apply</Small>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Code</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    code
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    code
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Inline code snippets
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code className="text-xs">useState</Code>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Blockquote</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    blockquote
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    blogBody + italic
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Quoted text
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Blockquote className="text-xs border-l-2 border-border pl-2">
-                      &quot;Quote text&quot;
-                    </Blockquote>
-                  </Typography>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Additional Properties</CardTitle>
-          <CardDescription>
-            All semantic components inherit the full Typography component API
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
+          <div className="space-y-2">
             <div>
-              <Typography variant="paragraphLead">Available Props:</Typography>
-              <ul className="mt-2 space-y-1 ml-4">
-                <li>
-                  <Code>color</Code> - default, muted, faint, accent, destructive,
-                  success, warning
-                </li>
-                <li>
-                  <Code>align</Code> - left, center, right, justify
-                </li>
-                <li>
-                  <Code>transform</Code> - none, uppercase, lowercase,
-                  capitalize
-                </li>
-                <li>
-                  <Code>weight</Code> - normal, medium, semibold, bold
-                </li>
-                <li>
-                  <Code>italic</Code> - boolean
-                </li>
-                <li>
-                  <Code>underline</Code> - boolean
-                </li>
-                <li>
-                  <Code>strikethrough</Code> - boolean
-                </li>
-                <li>
-                  <Code>truncate</Code> - boolean
-                </li>
-                <li>
-                  <Code>srOnly</Code> - boolean
-                </li>
-                <li>
-                  <Code>className</Code> - additional CSS classes
-                </li>
-              </ul>
+              <Code className="text-xs">PageTitle</Code>
+              <Caption className="block">
+                text-3xl font-bold leading-tight tracking-wide
+              </Caption>
             </div>
             <div>
-              <Typography variant="paragraphLead">Usage Examples:</Typography>
-              <div className="mt-2 space-y-2">
-                <div>
-                  <Code>
-                    &lt;H1 color=&quot;accent&quot;&gt;Colored
-                    heading&lt;/H1&gt;
-                  </Code>
-                </div>
-                <div>
-                  <Code>
-                    &lt;P align=&quot;center&quot; italic&gt;Centered italic
-                    text&lt;/P&gt;
-                  </Code>
-                </div>
-                <div>
-                  <Code>
-                    &lt;Span weight=&quot;bold&quot;
-                    color=&quot;destructive&quot;&gt;Bold red text&lt;/Span&gt;
-                  </Code>
-                </div>
-              </div>
+              <Code className="text-xs">SectionTitle</Code>
+              <Caption className="block">
+                text-2xl font-semibold leading-tight tracking-wide
+              </Caption>
+            </div>
+            <div>
+              <Code className="text-xs">SubsectionTitle</Code>
+              <Caption className="block">text-xl font-semibold leading-snug tracking-wide</Caption>
+            </div>
+            <div>
+              <Code className="text-xs">BodyText</Code>
+              <Caption className="block">text-base leading-relaxed tracking-wide</Caption>
+            </div>
+            <div>
+              <Code className="text-xs">BodyTextLarge</Code>
+              <Caption className="block">text-lg leading-relaxed tracking-wide</Caption>
+            </div>
+            <div>
+              <Code className="text-xs">BodyTextSmall</Code>
+              <Caption className="block">text-sm leading-normal tracking-wide</Caption>
+            </div>
+            <div>
+              <Code className="text-xs">Caption</Code>
+              <Caption className="block">
+                text-sm text-muted-foreground leading-normal tracking-wide
+              </Caption>
+            </div>
+            <div>
+              <Code className="text-xs">Overline</Code>
+              <Caption className="block">
+                text-xs font-medium uppercase tracking-wider
+              </Caption>
+            </div>
+            <div>
+              <Code className="text-xs">Code</Code>
+              <Caption className="block">
+                font-mono text-sm bg-muted px-1 rounded
+              </Caption>
+            </div>
+            <div>
+              <Code className="text-xs">Blockquote</Code>
+              <Caption className="block">
+                border-l-4 border-border pl-4 italic tracking-wide
+              </Caption>
             </div>
           </div>
         </CardContent>
       </Card>
     </div>
   ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive reference table showing all semantic typography components with their default configurations, HTML elements, font sizes, and use cases. Perfect for quick lookup during development.",
-      },
-    },
-  },
 };