A showcase of heading styles and weights available in the design system.
text-5xl md:text-6xl lg:text-8xl — Use for hero sections and primary page titles.
text-3xl md:text-4xl lg:text-5xl — Use for major section headings.
text-2xl md:text-3xl — Use for subsections and card titles.
text-xl md:text-2xl — Use for smaller subsections and labels.
font-light — Elegant, minimal emphasis.
font-normal — Standard body-like weight.
font-medium — Subtle emphasis.
font-semibold — Moderate emphasis.
font-bold — Strong emphasis.
font-extrabold — Maximum emphasis, default for headings.
text-foreground — Standard text color.
text-primary — Brand accent color.
text-muted-foreground — Subtle, secondary text.
Combine a light base weight with bold spans for two-tone hero headings.
Hero pattern: weight="light" base with font-extrabold spans.
Alternating weights for rhythm and emphasis.
Use the "as" prop to render a different HTML element while keeping the visual style.
Useful when you need H1 styling but H2 semantics for accessibility.