Typography Tokens
Typography token system based on Zeus Design System with Inter as the primary font, including complete scales and comparison with current tokens.
| Token | Specs | Usage | Preview |
|---|---|---|---|
| heading-2xl | Inter Bold Size: 30px Weight: 700 Line Height: 40px | Page titles, major headings | heading-2xl |
| heading-lg | Inter Semi Bold Size: 20px Weight: 650 Line Height: 24px | Section headings, card titles | heading-lg |
| body-lg | Inter Medium Size: 14px Weight: 450 Line Height: 20px | Primary body text, descriptions | body-lg |
| body-md | Inter Medium Size: 13px Weight: 450 Line Height: 20px | Secondary text, labels | body-md |
| body-sm | Inter Medium Size: 12px Weight: 550 Line Height: 16px | Small text, captions, metadata | body-sm |
Zeus Typography Principles
Typeface
- • Inter as primary font
- • Excellent readability
- • Wide language support
- • Optimized for screens
Hierarchy
- • Clear size differentiation
- • Appropriate line heights
- • Consistent weight usage
- • Semantic naming
Implementation
- • CSS Custom Properties
- • Responsive scaling
- • Accessibility friendly
- • Performance optimized
Typography Hierarchy Example
Heading 2XL - Page Title
Heading LG - Section Title
Body LG - This is the primary body text for content areas and descriptions.
Body MD - Secondary text for labels and supporting information.
Body SM - Small text for captions and metadata.