Typography System
Font Family
Inter - Primary Font
The quick brown fox jumps over the lazy dog. 0123456789
Font Sizes
xs (12px)
The quick brown fox jumps over the lazy dog
sm (14px)
The quick brown fox jumps over the lazy dog
base (16px)
The quick brown fox jumps over the lazy dog
lg (18px)
The quick brown fox jumps over the lazy dog
xl (20px)
The quick brown fox jumps over the lazy dog
2xl (24px)
The quick brown fox jumps over the lazy dog
3xl (30px)
The quick brown fox jumps
4xl (36px)
The quick brown fox
Font Weights
Regular (400) - Body text, descriptions
Medium (500) - Labels, buttons, emphasis
Semi-bold (600) - Subheadings, important text
Bold (700) - Main headings, strong emphasis
Heading Scale
h1 - Page Title (36px / Bold)
h2 - Section Title (30px / Semi-bold)
h3 - Subsection (24px / Semi-bold)
h4 - Card Title (20px / Semi-bold)
h5 - Small Heading (18px / Medium)
h6 - Tiny Heading (16px / Medium)
Text Colors
Primary Text (#1A1A1A) - Main content, headings
Secondary Text (#6C757D) - Descriptions, labels
Muted Text (#ADB5BD) - Placeholders, disabled
Inverse Text (#FFFFFF) - Dark backgrounds
Usage in Code
Tailwind CSS
// Font sizes
<p className="text-sm">Small text (14px)</p>
<p className="text-base">Body text (16px)</p>
<h1 className="text-4xl">Page title (36px)</h1>
// Font weights
<span className="font-normal">Regular</span>
<span className="font-medium">Medium</span>
<span className="font-semibold">Semi-bold</span>
<span className="font-bold">Bold</span>
// Text colors
<p className="text-gray-900">Primary text</p>
<p className="text-gray-600">Secondary text</p>
<p className="text-gray-400">Muted text</p>
Reference
Size Scale
| Token | Tailwind | Pixels | Rem | Usage |
|---|---|---|---|---|
| xs | text-xs | 12px | 0.75rem | Captions, labels |
| sm | text-sm | 14px | 0.875rem | Small text, buttons |
| base | text-base | 16px | 1rem | Body text |
| lg | text-lg | 18px | 1.125rem | Large body |
| xl | text-xl | 20px | 1.25rem | Small headings |
| 2xl | text-2xl | 24px | 1.5rem | Medium headings |
| 3xl | text-3xl | 30px | 1.875rem | Large headings |
| 4xl | text-4xl | 36px | 2.25rem | Page titles |
Weight Scale
| Weight | Tailwind | Value | Usage |
|---|---|---|---|
| Normal | font-normal | 400 | Body text |
| Medium | font-medium | 500 | Labels, emphasis |
| Semi-bold | font-semibold | 600 | Subheadings |
| Bold | font-bold | 700 | Main headings |
Typography is configured in Tailwind with Inter as the default font.