Typography establishes visual hierarchy and readability. These are the foundational text styles for the design system.
Use headings to create clear content hierarchy.
Standard text styles for content.
Lead paragraph - Use this for introductory text that needs emphasis.
Default body text - The quick brown fox jumps over the lazy dog. This is the standard paragraph style used throughout the interface for regular content.
Small text - Use for secondary information, captions, or helper text that supports the main content.
Extra small - Fine print, timestamps, or metadata.
Different weights for different emphasis levels.
Light (300) - The quick brown fox
Normal (400) - The quick brown fox
Medium (500) - The quick brown fox
Semibold (600) - The quick brown fox
Bold (700) - The quick brown fox
Extrabold (800) - The quick brown fox
Semantic text colors for different contexts.
Default foreground text
Muted text for secondary content
Primary color text
Destructive/error text
Interactive text elements.
Inline link example: Read our documentation to learn more.
Ordered and unordered lists.
Code snippets within text.
Use the Button component for actions.
Run bun dev to start the server.
For quotations and callouts.
"Design is not just what it looks like and feels like. Design is how it works."
Typography in context.
Building consistent, scalable user interfaces.
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications. It serves as the single source of truth for an organization's design language.