# Design System - Typography

## Overview
Typography scale using Space Grotesk font family. Five levels from header to body text, providing visual hierarchy across the application.

---

## Type Scale

| Level | Name | Size | Weight | Usage |
|-------|------|------|--------|-------|
| H1 | Display | 20px | 700 | Page titles, hero text |
| H2 | Heading | 18px | 700 | Section titles, card titles |
| H3 | Subheading | 16px | 500 | Subsection headers, labels |
| Body | Body | 12px | 400 | Body text, descriptions |
| Caption | Caption | 10px | 400 | Metadata, timestamps, helper text |

---

## Typography Specs

### H1 - Display

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 20px |
| Font Weight | 700 (Bold) |
| Line Height | 1.3 (26px) |
| Letter Spacing | -0.5px |
| Color | #1a1a1a |

**Usage:** Page titles, main headings, hero sections

---

### H2 - Heading

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 18px |
| Font Weight | 700 (Bold) |
| Line Height | 1.3 (23px) |
| Letter Spacing | -0.3px |
| Color | #1a1a1a |

**Usage:** Section titles, card titles, modal headers

---

### H3 - Subheading

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 16px |
| Font Weight | 500 (Medium) |
| Line Height | 1.4 (22px) |
| Letter Spacing | 0px |
| Color | #383737 |

**Usage:** Subsection headers, form labels, chat titles

---

### Body

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 12px |
| Font Weight | 400 (Regular) |
| Line Height | 1.5 (18px) |
| Letter Spacing | 0px |
| Color | #4a4a4a |

**Usage:** Body text, descriptions, card descriptions, button text

---

### Caption

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 10px |
| Font Weight | 400 (Regular) |
| Line Height | 1.4 (14px) |
| Letter Spacing | 0px |
| Color | #9a9a9a |

**Usage:** Metadata, timestamps, helper text, badges

---

## Code Reference

### HTML Structure
```html
<h1 class="text-display">Display Heading</h1>
<h2 class="text-heading">Section Heading</h2>
<h3 class="text-subheading">Subheading</h3>
<p class="text-body">Body text content goes here.</p>
<span class="text-caption">Caption or metadata</span>
```

### CSS Classes

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

/* Base Typography */
body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* H1 - Display */
.text-display {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #1a1a1a;
  margin: 0;
}

/* H2 - Heading */
.text-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #1a1a1a;
  margin: 0;
}

/* H3 - Subheading */
.text-subheading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0px;
  color: #383737;
  margin: 0;
}

/* Body */
.text-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0px;
  color: #4a4a4a;
  margin: 0;
}

/* Caption */
.text-caption {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0px;
  color: #9a9a9a;
  margin: 0;
}
```

---

## Color Variants

### Text Colors

| Class Modifier | Color | Usage |
|----------------|-------|-------|
| `.text-primary` | #1a1a1a | Primary text, headings |
| `.text-secondary` | #383737 | Secondary text, labels |
| `.text-tertiary` | #4a4a4a | Body text, descriptions |
| `.text-muted` | #9a9a9a | Captions, metadata |
| `.text-white` | #ffffff | Text on dark backgrounds |

### CSS Color Modifiers

```css
.text-primary { color: #1a1a1a; }
.text-secondary { color: #383737; }
.text-tertiary { color: #4a4a4a; }
.text-muted { color: #9a9a9a; }
.text-white { color: #ffffff; }
```

---

## Weight Variants

| Class Modifier | Weight | Value |
|----------------|--------|-------|
| `.font-light` | Light | 300 |
| `.font-regular` | Regular | 400 |
| `.font-medium` | Medium | 500 |
| `.font-bold` | Bold | 700 |

### CSS Weight Modifiers

```css
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
```

---

## Design Tokens

### Font Family
| Token | Value |
|-------|-------|
| `--font-family-primary` | 'Space Grotesk', sans-serif |
| `--font-family-fallback` | -apple-system, BlinkMacSystemFont, sans-serif |

### Font Sizes
| Token | Value |
|-------|-------|
| `--font-size-display` | 20px |
| `--font-size-heading` | 18px |
| `--font-size-subheading` | 16px |
| `--font-size-body` | 12px |
| `--font-size-caption` | 10px |

### Font Weights
| Token | Value |
|-------|-------|
| `--font-weight-light` | 300 |
| `--font-weight-regular` | 400 |
| `--font-weight-medium` | 500 |
| `--font-weight-bold` | 700 |

### Line Heights
| Token | Value |
|-------|-------|
| `--line-height-tight` | 1.3 |
| `--line-height-normal` | 1.4 |
| `--line-height-relaxed` | 1.5 |

### Text Colors
| Token | Value |
|-------|-------|
| `--color-text-primary` | #1a1a1a |
| `--color-text-secondary` | #383737 |
| `--color-text-tertiary` | #4a4a4a |
| `--color-text-muted` | #9a9a9a |
| `--color-text-white` | #ffffff |

---

## Usage in Components

| Component | Typography Level |
|-----------|------------------|
| Page Title | Display (20px) |
| Card Title | Heading (18px) |
| Section Header | Heading (18px) |
| Chat Title | Subheading (16px) |
| Strategy Mode Label | Subheading (16px) |
| Nav Links | Body (12px) with 300 weight |
| Card Description | Body (12px) |
| Button Text | Body (12px) with 500 weight |
| Metadata | Caption (10px) |
| Badge Text | Caption (10px) with 300 weight |

---

## Prototype
`typography-prototype/index.html`