Typography Foundation
1. Font Family Role Tokens
Rather than referencing specific font family strings inside components, all typography primitives read semantic CSS variables that adapt dynamically to theme configuration changes.
Used by Heading for editorial titles, section headers, and hero banners.
Used by Text, buttons, inputs, labels, and all general UI copy.
Used by Code, Kbd, tables, and technical data displays.
2. Scale & Hierarchy
Our typographic scale uses harmonic steps designed to maintain visual rhythm across dense dashboards and spacious prose views. Hover rows to reveal pixel metrics.
3. Available Typography Component Primitives
Explore the dedicated component primitives built on this typography foundation:
Headings
Display typographic scale, hierarchy, and title levels.
Body Text
Paragraph copy rules, text wrapping, and muted colors.
Emphasis & Strong
Italic markers, bold tags, and semantic emphasis.
Inline Code & Kbd
Monospace code snippets and keyboard shortcut badges.
npm run devBlockquotes
Multi-line quotation layout and citation styling.
Lists
Ordered, unordered, and descriptive bullet guidelines.
- Bullet list item
- Second item row
Links
Underline animations and interactive anchor styles.
Custom Fonts
Load and configure third-party display font families.
Examples
Rich prose design layout examples.