Typography
The type scale uses DD Sans as the primary font and Berkeley Mono for code.
Typefaces
DD Sans
Body text, headings, UIABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Berkeley Mono
Code, data, technicalABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Type Scale
The quick brown fox jumps
text-display-xl64px/ 1.1Bold (700)Hero headlines
The quick brown fox jumps
text-display-lg48px/ 1.15Bold (700)Section headers
The quick brown fox jumps
text-heading-xl32px/ 1.25Semibold (600)Page titles
The quick brown fox jumps
text-heading-lg24px/ 1.3Semibold (600)Card headers
The quick brown fox jumps
text-heading-md20px/ 1.4Semibold (600)Subsections
The quick brown fox jumps
text-heading-sm16px/ 1.4Semibold (600)Minor headers
The quick brown fox jumps
text-body-lg18px/ 1.6Regular (400)Marketing copy
The quick brown fox jumps
text-body-md16px/ 1.5Regular (400)Primary body
The quick brown fox jumps
text-body-sm14px/ 1.5Regular (400)Secondary body
The quick brown fox jumps
text-label-md14px/ 1.3Medium (500)UI labels
The quick brown fox jumps
text-label-sm12px/ 1.3Medium (500)Badges, metadata
The quick brown fox jumps
text-label-xs11px/ 1.2Medium (500)Overlines
The quick brown fox jumps
text-code-md14px/ 1.6Regular (400)Code blocks
The quick brown fox jumps
text-code-sm13px/ 1.5Regular (400)Inline code
| Class | Size | Line Height | Weight | Usage |
|---|---|---|---|---|
| text-display-xl | 64px | 1.1 | 700 | Hero headlines |
| text-display-lg | 48px | 1.15 | 700 | Section headers |
| text-heading-xl | 32px | 1.25 | 600 | Page titles |
| text-heading-lg | 24px | 1.3 | 600 | Card headers |
| text-heading-md | 20px | 1.4 | 600 | Subsections |
| text-heading-sm | 16px | 1.4 | 600 | Minor headers |
| text-body-lg | 18px | 1.6 | 400 | Marketing copy |
| text-body-md | 16px | 1.5 | 400 | Primary body |
| text-body-sm | 14px | 1.5 | 400 | Secondary body |
| text-label-md | 14px | 1.3 | 500 | UI labels |
| text-label-sm | 12px | 1.3 | 500 | Badges, metadata |
| text-label-xs | 11px | 1.2 | 500 | Overlines |
| text-code-md | 14px | 1.6 | 400 | Code blocks |
| text-code-sm | 13px | 1.5 | 400 | Inline code |
Type Tester
text-display-xl
plaaayground
text-display-lg
plaaayground
text-heading-xl
plaaayground
text-heading-lg
plaaayground
text-heading-md
plaaayground
text-heading-sm
plaaayground
text-body-lg
plaaayground
text-body-md
plaaayground
text-body-sm
plaaayground
text-label-md
plaaayground
text-label-sm
plaaayground
text-label-xs
plaaayground
text-code-md
plaaayground
text-code-sm
plaaayground