Typography
Headings, body text, font weights, colors, gradient text, display sizes, letter spacing, line height, decorations, badges, icon patterns, and full prose examples
Headings
Body Text
Large intro paragraph text used for page leads and hero sections.
Slightly larger body text for introductory paragraphs and featured content.
Standard body text for main content areas, articles, and paragraphs. This is the default size used throughout the interface.
Small text for secondary content, captions, form help text, and sidebar descriptions.
Extra small text for labels, timestamps, metadata, and fine print.
Font Weights
Text Colors
Slate Scale
Semantic Colors
Special Text Styles
Gradient Heading
Green to Cyan
Amber to Red
Pink to Violet
Strikethrough — discontinued
Custom underline color
Wavy underline
Dotted underline
Double strikethrough
Overline text
Italic — emphasis and titles
Bold — strong importance
Uppercase tracking
Lowercase text example
capitalize each word
1,234,567.89 tabular
Run npm install to start
Press Ctrl + C to copy
Use ⌘ K to open the palette
Component: <Button />
Display Bold
Section Title
Overline Caption
Category Label
Single line truncate
This is a very long text that will be truncated
2-line clamp
This paragraph has multiple lines of text. When it exceeds two lines it will be gracefully cut off with an ellipsis at the end of the second line.
Break words
averylongwordthatbreaks acrosslines
Blockquotes
"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs, Apple
"The best way to predict the future is to invent it. The computer was supposed to be a tool that amplified human intelligence."
— Alan Kay, PARC
"Simplicity is the ultimate sophistication. What is not there is just as important as what is there."
— Leonardo da Vinci
Badges & Inline Labels
Lists
Unordered
- Real-time collaboration
- Advanced analytics
- API integrations
- Custom dashboards
Ordered
- 1Create an account
- 2Set up your workspace
- 3Invite your team
- 4Start building
Check List
- Design system
- Component library
- Documentation
- Unit tests
- Deploy to production
Description
- Name
- Alexandra Thompson
- Role
- Lead Designer
- Team
- Product Design
- Location
- San Francisco
- Joined
- March 2023
Link Styles
Visit our documentation to get started. If you need help, check the FAQ or contact support.
Text with Backgrounds & Highlights
This sentence contains a highlighted word for emphasis.
Search result: The word React appears in the documentation.
Deleted old version and added new version.
const Button = ({children} => {
return (
<button className="btn btn-primary">
{children}
</button>
)
}
Gradient Text
CSS gradient fills applied via bg-clip-text text-transparent. Ideal for hero headings, display titles, and marketing pages.
Bold Display
Section Headline
Subheading Text
text-primary-500
Bold Display
Section Headline
Subheading Text
text-violet-500
Bold Display
Section Headline
Subheading Text
text-emerald-500
Bold Display
Section Headline
Subheading Text
text-amber-500
Hero Usage Example
Build Faster,
Ship Smarter
The modern design system for teams that move at the speed of ideas.
Display / Hero Sizes
Extra-large sizes for hero banners, landing pages, and editorial layouts. Pair with light weights for elegance or black weight for impact.
Lead & Article Text
Full Article Layout Example
Building a Scalable Typography System for Modern Web Apps
A well-crafted type scale is the invisible backbone of every great interface. It creates rhythm, hierarchy, and readability without drawing attention to itself.
Typography is far more than choosing a typeface. It encompasses the full system of sizes, weights, spacing, and color that together create a readable, scannable, and accessible experience. When teams invest in a proper type scale early, they reduce design debt and accelerate development.
Start with a base size of 16px and build a modular scale around it. Tools like Tailwind CSS provide a carefully considered scale out of the box, though you can always override it for brand-specific needs. The key is consistency: once defined, the scale should be applied uniformly across all surfaces.
Why Line Height Matters
Cramped text reduces comprehension. Studies in reading science consistently show that generous line heights — typically between 1.4 and 1.8 times the font size — improve reading speed and retention, especially for body copy. Navigation labels and headings, by contrast, often benefit from tighter leading.
"Consistency in typography is not a constraint — it's the foundation of a system that feels intentional."
— Adapted from "Elements of Typographic Style"
The best type systems are invisible — readers never notice them. They simply feel at home, can scan at a glance, and read deeply without fatigue. If your typography is calling attention to itself, it's time to simplify. Invest in the scale, the weights, and the rhythm. Everything else follows.
Letter Spacing & Line Height
tracking-tighter-0.05emDisplay headlines, bold large type
tracking-tight-0.025emSubheadings and hero text
tracking-normal0emDefault body text spacing
tracking-wide0.025emSmall UI labels and captions
tracking-wider0.05emCategory labels and metadata
tracking-widest0.1emUPPERCASE OVERLINES
leading-none1Tight headings. Great for large display type where gaps between lines look excessive.
leading-tight1.25Compact headings and navigation items. Slightly more breathing room than none.
leading-snug1.375Card titles and short paragraph previews benefit from this comfortable spacing.
leading-normal1.5Default for body text. Readable without feeling too spacious for most screen densities.
leading-relaxed1.625Long-form articles and documentation content. Reduces eye fatigue on extended reads.
leading-loose2Very open. Used for code blocks, poetry, and sparse editorial layouts on wide screens.
Text Decoration & Overflow
decoration-solidSolid underlinedecoration-dashedDashed underlinedecoration-dottedDotted underlinedecoration-wavyWavy underlinedecoration-doubleDouble underlineline-throughDiscontinued featureoverlineOverline heading textno-underlineNo underline linkline-through decoration-red-500Price $99.00 → $49.00decoration-4Thick underline emphasistruncateThis very long title will be truncated with ellipsis
line-clamp-2This paragraph continues beyond two lines and will be clamped. The third line and beyond will be hidden gracefully.
line-clamp-3A three-line clamp is perfect for card previews and search results. It shows enough context without overwhelming the layout or pushing other cards out of alignment.
Content Badges & Labels
- 5 projects
- 2GB storage
- Community support
- 50 projects
- 50GB storage
- Priority support
- Unlimited
- 1TB storage
- Dedicated support
Text with Icons
- Real-time collaboration
- Automatic backups
- End-to-end encryption
- Role-based permissions
- Custom domain support
Your trial expires in 3 days. Upgrade to avoid interruption.
Two-factor authentication is not enabled on your account.
A new version of the app is available. Refresh to update.
+42%
Growth this quarter
4.9/5
Average rating
200ms
Average load time
128k
Active users
Last updated 2 hours ago
Created by Alex Thompson
Deployment successful
3 warnings detected
Revenue up +18% this month
Prose — Rich Article Preview
A complete editorial card layout demonstrating how typography components combine into a premium reading experience.
Alex Thompson
Senior Designer
Why Typography Is the Most Underrated Part of Your Design System
Teams spend weeks on color palettes and component APIs, then ship inconsistent type scales. Here's how to fix that — and why it will make everything else feel more cohesive.
"Good typography is invisible. Bad typography screams."
Mastering Line Height for Better Readability
A practical guide to leading values that work across all screen densities and type sizes.
Fluid Typography with CSS clamp()
Responsive font scaling without media queries. Set it once and let the browser handle the rest.
When to Use Tracking and When to Avoid It
Letter spacing adds elegance to uppercase labels but destroys lowercase body text legibility.