Responsive heading hierarchy using the project’s existing moderate font weight.
Display
48 / 52 · Semibold
Build clearer products
Heading 1
36 / 40 · Semibold
Workspace intelligence
Heading 2
30 / 36 · Semibold
Revenue performance
Heading 3
24 / 32 · Semibold
Customer retention
Heading 4
20 / 28 · Semibold
Recent activity
Heading 5
18 / 26 · Semibold
Account preferences
Heading 6
16 / 24 · Semibold
Notification settings
Readable text styles for descriptions, dense interfaces and supporting information.
Lead text introduces a section with calm emphasis and comfortable reading width.
Regular body text explains product behaviour without appearing heavy. It is suitable for settings, reports and onboarding content.
Secondary text supports the main content while maintaining accessible contrast.
Caption text · Updated July 28, 2026
Commerce intelligence
$184.2K revenue
A practical dark-surface example using the same hierarchy and spacing tokens.
↑ 18.4% from last month
Compact styles for metadata, form labels, overlines and numeric values.
Overline
Commerce metrics
Form label
Workspace name
Tabular number
08,492.60
Helper text
Use 8–64 characters.
Long-form content with quotes, links, emphasis and inline code.
“A dashboard should reduce uncertainty, not simply display more information.”
npm run dev remain visually distinct.Structured content and developer-facing output with consistent rhythm.
Unordered list
Ordered list
const typography = {
heading: "font-semibold",
body: "text-gray-600"
};Truncation and line clamping protect dense layouts without changing card height.
Single-line truncation
Quarterly enterprise commerce performance and customer retention analysis.pdf
Two-line clamp
This longer description demonstrates how a content preview remains compact while preserving enough context for the user to decide whether to open the full item.