Design System
A showcase of the design system components and patterns
Typography System
Our typography system provides consistent text styles across the application. This page demonstrates the different typography styles and their usage guidelines.
Page Title (h1)
text-3xl font-bold (36px) - Used for main page titles
Section Title (h2)
text-2xl font-semibold (30px) - Used for major section headings
Subsection Title (h3)
text-xl font-semibold (24px) - Used for subsection headings
Card Title (h4)
text-lg font-medium (18px) - Used for card titles and minor sections
Small Title (h5)
text-base font-medium (16px) - Used for small titles and labels
Usage:
<h1 className="text-3xl font-bold">Page Title</h1> <h2 className="text-2xl font-semibold">Section Title</h2> <h3 className="text-xl font-semibold">Subsection Title</h3> <h4 className="text-lg font-medium">Card Title</h4> <h5 className="text-base font-medium">Small Title</h5>
Example Page Structure (Manual Classes)
Page Title (h1)
Page description text goes here.
Section Title (h2)
This is regular body text that explains this section.
Subsection Title (h3)
More detailed explanation about this subsection.
Card Title (h4)
Secondary text that provides additional context.
Another Subsection (h3)
More detailed explanation about this subsection.
Small Title (h5)
Tiny text used for footnotes or additional information.
Typography Components
Page Title (H1 Component)
Uses the H1 component which applies text-3xl font-bold
Section Title (H2 Component)
Uses the H2 component which applies text-2xl font-semibold
Subsection Title (H3 Component)
Uses the H3 component which applies text-xl font-semibold
Card Title (H4 Component)
Uses the H4 component which applies text-lg font-medium
Small Title (H5 Component)
Uses the H5 component which applies text-base font-medium
Body Text (P Component)
Uses the P component which applies text-base
Small Text (Small Component)
Uses the Small component which applies text-sm
Tiny Text (Tiny Component)
Uses the Tiny component which applies text-xs
Muted Text (Muted Component)
Uses the Muted component which applies text-sm text-muted-foreground
Lead Text (Lead Component)
Uses the Lead component which applies text-lg text-muted-foreground
Usage:
import { H1, H2, H3, H4, H5, P, Small, Tiny, Muted, Lead } from "@/components/typography";
// Then use them in your components
<H1>Page Title</H1>
<H2>Section Title</H2>
<H3>Subsection Title</H3>
<P>Regular paragraph text</P>
<Muted>Secondary text with muted color</Muted>Combined Typography Components
Page Title with Description
This component combines an H1 with a description in Lead style
Section Title with Description
This component combines an H2 with a description in Muted style
Subsection Title with Description
This component combines an H3 with a description in Muted style
Card Title with Description
This component combines an H4 with a description in Muted style
Usage:
import {
PageTitle,
SectionTitle,
SubsectionTitle,
CardTitle
} from "@/components/typography";
// Then use them in your components
<PageTitle description="Page description text">Page Title</PageTitle>
<SectionTitle description="Section description">Section Title</SectionTitle>
<SubsectionTitle description="Subsection description">Subsection Title</SubsectionTitle>
<CardTitle description="Card description">Card Title</CardTitle>Example Page Structure (Using Components)
Page Title
Page description text goes here.
Section Title
This is regular body text that explains this section.
Subsection Title
More detailed explanation about this subsection.
Card Title
Secondary text that provides additional context.
Another Subsection
More detailed explanation about this subsection.
Small Title
Tiny text used for footnotes or additional information.