Typography

Typography sets the tone of your interface and your code. This guide helps unify how we use type across applications, documentation, and visual materials.

🔠 Primary Fonts

• UI & Headings: Inter (sans-serif)
• Code & Monospace: JetBrains Mono or Fira Code

Both are open source and optimized for clarity, especially in dense layouts and IDEs.

📏 Sizing System

• h1: 2.25rem (36px)
• h2: 1.75rem (28px)
• h3: 1.5rem (24px)
• body: 1rem (16px)
• caption: 0.875rem (14px)

💬 Usage Rules

• Use monospaced font for all code snippets, regardless of language.
• Limit headings to h1 through h3 for content consistency.
• Avoid using bold for emphasis in body text — use spacing, layout, or tone instead.

⚠️ Typography is both design and accessibility. Consistency improves UX and reduces user fatigue.