Typography
Type scale, font families, and weights.
Type Scale
| Name | Size | Line Height | Sample |
|---|---|---|---|
Heading 1 --ds-text-4xl | 38px | 1.25 | Display heading |
Heading 2 --ds-text-3xl | 30px | 1.25 | Page title |
Heading 3 --ds-text-2xl | 24px | 1.375 | Section title |
Heading 4 --ds-text-xl | 20px | 1.375 | Card title |
LG --ds-text-lg | 16px | 1.5714 | Prominent body text |
Base (MD) --ds-text-base | 14px | 1.5714 | Default body text for most UI content |
SM --ds-text-sm | 12px | 1.667 | Caption, helper text, labels |
XS --ds-text-xs | 11px | 1.667 | Fine print, badges |
Font Families
Sans (Default)
--ds-font-sansThe quick brown fox jumps over the lazy dog
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif
Monospace
--ds-font-monoThe quick brown fox jumps over the lazy dog
SFMono-Regular, Consolas, Liberation Mono, monospace
Font Weights
Aa
Normal (400)
Body text uses normal weight
Aa
Medium (500)
Emphasis, labels use medium weight
Aa
Semibold (600)
Headings use semibold weight
Aa
Bold (700)
Display headings use bold weight