Typography
Font styles, weights, and scale used across all components.
Typeface
Inter is the primary typeface, designed by Rasmus Andersson for excellent legibility at all sizes and weights.
Font Weights
Light 300
The quick brown fox jumps over the lazy dog
Regular 400
The quick brown fox jumps over the lazy dog
Medium 500
The quick brown fox jumps over the lazy dog
Semibold 600
The quick brown fox jumps over the lazy dog
Bold 700
The quick brown fox jumps over the lazy dog
Typography Scale
The typography scale provides consistent sizing and hierarchy across all components and layouts.
Headings
text-heading-3xlHeading 1
Page titles and hero headings
text-heading-2xlHeading 2
Section headings and major divisions
text-heading-xlHeading 3
Subsection headings
text-heading-lgHeading 4
Component headings and card titles
text-heading-mdHeading 5
Small section headings
text-heading-smHeading 6
Labels and micro headings
Body Text
text-lgLarge body text
Introduction paragraphs and emphasis text
text-baseDefault body text
Standard reading text and content
text-smSmall text
Captions, helpers, and secondary information
text-xsExtra small text
Fine print and metadata