@codecademy/gamut

Index: package/agent-tools/guidelines/foundations/typography.md
===================================================================
--- package/agent-tools/guidelines/foundations/typography.md
+++ package/agent-tools/guidelines/foundations/typography.md
@@ -0,0 +1,50 @@
+# Typography
+
+## Typefaces
+
+| Token | Codecademy font | Non-Codecademy | Use for |
+|---|---|---|---|
+| `base` | Apercu Pro | Hanken Grotesk | All UI text, headlines, body copy |
+| `accent` | Suisse Intl Mono | Hanken Grotesk | Code, captions, labels, technical context |
+| `monospace` | Monaco / Menlo / Consolas | Monaco / Menlo / Consolas | Code editor contexts |
+
+Percipio overrides all families to Roboto. Apercu is licensed for codecademy.com only.
+
+## Font size scale
+
+| Token | Size | Common use |
+|---|---|---|
+| `64` | 64px | Hero / display |
+| `44` | 44px | Page titles |
+| `34` | 34px | Section titles |
+| `26` | 26px | Sub-section titles |
+| `22` | 22px | Card titles, large UI labels |
+| `20` | 20px | Secondary titles |
+| `18` | 18px | Large body, intro text |
+| `16` | 16px | Default body text |
+| `14` | 14px | Small body, captions, labels |
+
+## Font weight
+
+| Token | Value | Use |
+|---|---|---|
+| `base` | 400 | Body text, UI labels |
+| `title` | 700 | Headlines, CTAs, buttons |
+
+## Line height
+
+| Token | Value | Use |
+|---|---|---|
+| `base` | 1.5 | Body text |
+| `spacedTitle` | 1.3 | Sub-headlines, medium titles |
+| `title` | 1.2 | Large headlines |
+
+Target 45–85 characters per line (66 ideal for web body text).
+
+## Rules
+
+- Use `title` weight (700) for headlines, CTAs, and buttons.
+- Use Apercu Italic to emphasize within a Regular paragraph — not Bold.
+- Use `accent` (Suisse) sparingly: code snippets, captions, enumerated items. Suisse reads ~10–15% large — size it down relative to Apercu equivalents.
+- Left-align text by default. Center-align only for short marketing headlines. Never right-align.
+- Do not adjust letter-spacing.