Typography Tokens

Typography token system based on Zeus Design System with Inter as the primary font, including complete scales and comparison with current tokens.

TokenSpecsUsagePreview
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.