Typography System
This page demonstrates the typography system for our design system.
Typography Styles
| Preview | Variant | Weight | Size | Line Height | Suitable For |
|---|---|---|---|---|---|
h1 | h1 | bold | 1.875rem (30px) | 2.25rem (36px) | Main page headings |
h2 | h2 | bold | 1.5rem (24px) | 2rem (32px) | Section headings |
h3 | h3 | bold | 1.25rem (20px) | 1.75rem (28px) | Subsection headings |
h4 | h4 | semibold | 1.125rem (18px) | 1.75rem (28px) | Card titles |
h5 | h5 | semibold | 1rem (16px) | 1.5rem (24px) | Widget headings |
h6 | h6 | semibold | 0.875rem (14px) | 1.25rem (20px) | Small component headings |
body-l | body-l | normal | 1.125rem (18px) | 1.75rem (28px) | Long-form content |
body-m | body-m | normal | 1rem (16px) | 1.5rem (24px) | General body text |
body-s | body-s | normal | 0.875rem (14px) | 1.25rem (20px) | Captions, labels |
Font Weights
Normal weight text
Medium weight text
Semibold weight text
Bold weight text
Text Colors
Primary - text-gray-950 - #0f0f0f
Secondary - text-gray-700 - #4f4f4f
Placeholder - text-gray-400 - #888888
Disabled - text-gray-300 - #b0b0b0
Primary Brand - text-primary-500 - #f85d3b
Secondary Brand - text-primary-700 - #c13314