Typography
Heading scale (Display, H1-H6)
Display
3rem / 700
text-5xl font-boldBuild global connections.
H1
2.25rem / 700
text-4xl font-boldDesign System
H2
1.875rem / 600
text-3xl font-semiboldBrand Architecture
H3
1.5rem / 600
text-2xl font-semiboldFoundation Rules
H4
1.25rem / 600
text-xl font-semiboldSection Title
H5
1.125rem / 500
text-lg font-mediumSub-section
H6
1rem / 500
text-base font-mediumMinor heading
Body and utility scale
Body
1rem / 400
text-base font-normalBody copy for most content and descriptions.
Body Small
0.875rem / 400
text-sm font-normalSupporting details, helper text, and metadata.
Caption
0.75rem / 400
text-xs font-normalUpdated 2 days ago
Label
0.75rem / 500
text-xs font-medium uppercase tracking-wideEmail address
Button
0.875rem / 700
text-sm font-boldSave changes
Code
0.75rem / 400
text-xs font-mono--primary: hsl(231 100% 77%);
Tailwind class reference
Token
Element
Tailwind class
Size
Weight
Display
display
text-5xl font-bold3rem
700
H1
h1
text-4xl font-bold2.25rem
700
H2
h2
text-3xl font-semibold1.875rem
600
H3
h3
text-2xl font-semibold1.5rem
600
H4
h4
text-xl font-semibold1.25rem
600
H5
h5
text-lg font-medium1.125rem
500
H6
h6
text-base font-medium1rem
500
Body
paragraph
text-base font-normal1rem
400
Body Small
secondary body
text-sm font-normal0.875rem
400
Caption
status/meta
text-xs font-normal0.75rem
400
Label
form label
text-xs font-medium uppercase tracking-wide0.75rem
500
Button
button text
text-sm font-bold0.875rem
700
Code
technical values
text-xs font-mono0.75rem
400
Page Context
Purpose
Provide the exact type scale and utility references to build consistent UI.
Audience
Designers and frontend engineers implementing production interfaces.
Updated March 2026
Key Takeaways
- Use heading font for Display and H1-H6.
- Use body font for paragraphs, labels, and utility text.
- Apply the Tailwind class map directly for implementation.
Related Next Steps