Typography
Two typefaces define the system's typographic voice:
| Role | Font | Weights Used |
|---|---|---|
| Headings | Satoshi | Bold (700) |
| Body / UI | Inter | Regular (400), Semibold (600) |
Heading Scale
All headings use Satoshi Bold. Letter spacing tightens at larger sizes for optical correction.
| Token | Size | Line Height | Weight | Family | Letter Spacing |
|---|---|---|---|---|---|
| Heading/5XL | 72px | 80px | 700 | Satoshi | -1px |
| Heading/4XL | 64px | 72px | 700 | Satoshi | -1px |
| Heading/3XL | 56px | 64px | 700 | Satoshi | -1px |
| Heading/2XL | 48px | 56px | 700 | Satoshi | -1px |
| Heading/XL | 40px | 48px | 700 | Satoshi | -1px |
| Heading/L | 32px | 40px | 700 | Satoshi | -1px |
| Heading/M | 24px | 32px | 700 | Satoshi | -0.5px |
| Heading/S | 20px | 28px | 700 | Satoshi | -0.5px |
| Heading/XS | 16px | 24px | 700 | Satoshi | -0.5px |
| Heading/2XS | 14px | 20px | 700 | Satoshi | 0px |
Text Scale
All body/UI text uses Inter. No letter spacing adjustments.
| Token | Size | Line Height | Weight | Family | Letter Spacing |
|---|---|---|---|---|---|
| Text/XL/Regular | 18px | 26px | 400 | Inter | 0px |
| Text/XL/Semibold | 18px | 26px | 600 | Inter | 0px |
| Text/L/Regular | 14px | 20px | 400 | Inter | 0px |
| Text/L/Semibold | 14px | 20px | 600 | Inter | 0px |
| Text/M/Regular | 12px | 16px | 400 | Inter | 0px |
| Text/M/Semibold | 12px | 16px | 600 | Inter | 0px |
| Text/S/Semibold | 12px | 16px | 600 | Inter | 0px |
| Text/XS/Regular | 10px | 14px | 400 | Inter | 0px |
| Text/XS/Semibold | 10px | 14px | 600 | Inter | 0px |
Usage Guidelines
- Use heading tokens for page titles, section headers, and component labels.
- Use Text/L (14px) for standard body copy and default input text.
- Use Text/M (12px) for secondary labels, captions, and helper text.
- Use Text/XS (10px) for badges, tags, and meta information only.
- Never use heading styles below Heading/XS for UI elements — use Text styles instead.
Do
- Maintain the defined line heights — don't override them.
- Use Semibold for labels, button text, and any emphasis within body copy.
Don't
- Don't use Satoshi for body text or Inter for headings.
- Don't create intermediate sizes outside the scale.
Live Specimens
Text rendered using the actual Satoshi and Inter fonts loaded via CDN.
Heading/5XL — 72px / 80px lh / w700
The quick brown fox
Heading/4XL — 64px / 72px lh / w700
The quick brown fox
Heading/3XL — 56px / 64px lh / w700
The quick brown fox
Heading/2XL — 48px / 56px lh / w700
The quick brown fox
Heading/XL — 40px / 48px lh / w700
The quick brown fox
Heading/L — 32px / 40px lh / w700
The quick brown fox
Heading/M — 24px / 32px lh / w700
The quick brown fox
Heading/S — 20px / 28px lh / w700
The quick brown fox
Heading/XS — 16px / 24px lh / w700
The quick brown fox
Heading/2XS — 14px / 20px lh / w700
The quick brown fox
Text Scale (Inter)
Text/XL/Regular — 18px / 26px lh / w400
The quick brown fox jumps over the lazy dog
Text/XL/Semibold — 18px / 26px lh / w600
The quick brown fox jumps over the lazy dog
Text/L/Regular — 14px / 20px lh / w400
The quick brown fox jumps over the lazy dog
Text/L/Semibold — 14px / 20px lh / w600
The quick brown fox jumps over the lazy dog
Text/M/Regular — 12px / 16px lh / w400
The quick brown fox jumps over the lazy dog
Text/M/Semibold — 12px / 16px lh / w600
The quick brown fox jumps over the lazy dog
Text/S/Semibold — 12px / 16px lh / w600
The quick brown fox jumps over the lazy dog
Text/XS/Regular — 10px / 14px lh / w400
The quick brown fox jumps over the lazy dog
Text/XS/Semibold — 10px / 14px lh / w600
The quick brown fox jumps over the lazy dog