# Aavya Design Tokens — Typography

Our type system uses two fonts: Inter for everything human-facing, JetBrains Mono for everything machine-facing. Headings run tight (-2% letter-spacing) for a sharper, more confident feel.

---

## Font Families

| Font | Token | Used For |
|---|---|---|
| **Inter** | `var(--font-sans)` | Headings, UI, navigation, body copy |
| **JetBrains Mono** | `var(--font-mono)` | Code, data, technical labels |

---

## Heading Scale

Inter Bold and Extra Bold with tight tracking (`-0.02em`). Use these for hierarchy — Display for hero moments, H1–H5 for structured content.

| Level | Size | Weight | Tracking |
|---|---|---|---|
| Display | `3.75rem` | 800 | `-0.02em` |
| H1 | `2.25rem` | 700 | `-0.02em` |
| H2 | `1.875rem` | 700 | `-0.02em` |
| H3 | `1.5rem` | 600 | `-0.02em` |
| H4 | `1.25rem` | 600 | `-0.02em` |
| H5 | `1.125rem` | 600 | `-0.02em` |

---

## Body Scale

Inter Regular with comfortable line heights for readability. Use Body as the default — step up or down based on density.

| Level | Size | Weight | Leading |
|---|---|---|---|
| Body Large | `1.125rem` | 400 | 1.75 |
| Body | `1rem` | 400 | 1.625 |
| Body Small | `0.875rem` | 400 | 1.5 |
| Caption | `0.75rem` | 500 | 1.5 |

---

## Monospace Scale

JetBrains Mono for code blocks and data labels. Keep it small — mono should feel technical, not loud.

| Level | Size | Weight | Leading |
|---|---|---|---|
| Code Block | `0.875rem` | 400 | 1.7 |
| Data Label | `0.75rem` | 500 | 1.5 |

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Typography Tokens */

/* Font Families */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Headings */
--font-size-display: 3.75rem;
--font-size-h1: 2.25rem;
--font-size-h2: 1.875rem;
--font-size-h3: 1.5rem;
--font-size-h4: 1.25rem;
--font-size-h5: 1.125rem;

/* Body */
--font-size-body-lg: 1.125rem;
--font-size-body: 1rem;
--font-size-body-sm: 0.875rem;
--font-size-caption: 0.75rem;

/* Monospace */
--font-size-code: 0.875rem;
--font-size-data: 0.75rem;
```

---

## Usage Rules

1. **One Display per page.** Display is for hero moments — landing pages, section openers, marketing surfaces. Don't stack them.
2. **Headings stay tight.** Every heading uses `-0.02em` tracking. No exceptions.
3. **Body is the default.** Start with Body. Only step up or down when the content density demands it.
4. **Mono is for machines.** Code, terminal output, API responses, data labels. Never use mono for body copy or headings.
5. **Use tokens, not raw values.** Reference `var(--font-size-h2)` instead of `1.875rem` so updates flow through everywhere at once.