> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mantle.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Font families, sizes, and weights

Consistent type scales create hierarchy and improve readability across all interfaces.

## Typography Scale

| Name        | Class                     | Size            | Line Height | Weight | Usage                                                  |
| ----------- | ------------------------- | --------------- | ----------- | ------ | ------------------------------------------------------ |
| Heading 1   | `text-2xl font-semibold`  | 1.5rem (24px)   | 1.25        | 600    | Main page headings, Article titles, Dashboard sections |
| Heading 2   | `text-lg font-medium`     | 1.125rem (18px) | 1.4         | 500    | Subsection headers, Component titles, Form sections    |
| Heading 3   | `text-base font-semibold` | 1rem (16px)     | 1.5         | 600    | Card headers, List titles, Settings groups             |
| Heading 4   | `text-sm font-medium`     | 0.875rem (14px) | 1.43        | 500    | Small headers, Table headers, Form labels              |
| Body Large  | `text-base`               | 1rem (16px)     | 1.5         | 400    | Body text, Paragraphs, Default content                 |
| Body Medium | `text-sm`                 | 0.875rem (14px) | 1.43        | 400    | Secondary text, Captions, Helper text                  |
| Body Small  | `text-xs`                 | 0.75rem (12px)  | 1.5         | 400    | Fine print, Labels, Metadata, Timestamps               |

## Font Families

<CardGroup cols={3}>
  <Card title="Inter (Primary)" icon="font">
    **Usage:** All UI text, Body content, Headings, Navigation, Interface elements

    ```
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
    ```
  </Card>

  <Card title="Fira Code (Code)" icon="code">
    **Usage:** Code blocks, Syntax highlighting, Terminal output, Technical documentation

    ```
    'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace
    ```
  </Card>

  <Card title="System Serif" icon="book">
    **Usage:** Long-form reading, Articles, Documentation (when needed)

    ```
    ui-serif, Georgia, Cambria, "Times New Roman", serif
    ```
  </Card>
</CardGroup>

## Font Weights

| Name     | Class           | Weight | Usage            |
| -------- | --------------- | ------ | ---------------- |
| Thin     | `font-thin`     | 100    | Decorative text  |
| Light    | `font-light`    | 300    | Subtle text      |
| Normal   | `font-normal`   | 400    | Body text        |
| Medium   | `font-medium`   | 500    | Emphasis         |
| Semibold | `font-semibold` | 600    | Headings         |
| Bold     | `font-bold`     | 700    | Strong emphasis  |
| Black    | `font-black`    | 900    | Maximum emphasis |

## Guidelines

<CardGroup cols={2}>
  <Card title="Hierarchy Best Practices" icon="list-tree">
    * Use display sizes for hero sections and landing pages - Follow heading order (H1 → H2 → H3) for proper structure -
      Maintain consistent spacing between text elements - Use font weights to create emphasis and hierarchy - Keep line
      lengths between 45-75 characters for readability
  </Card>

  <Card title="Accessibility Guidelines" icon="universal-access">
    * Ensure minimum 4.5:1 contrast ratio for body text - Use 3:1 contrast ratio for large text (18px+ or 14px+ bold) -
      Avoid using color alone to convey information - Test with screen readers and keyboard navigation - Provide
      sufficient spacing for touch targets
  </Card>
</CardGroup>

## Implementation

### HTML/Angular

```html theme={null}
<h1 class="text-2xl font-semibold">Page Title</h1>

<p class="text-sm text-muted-foreground">Body content with proper hierarchy</p>
```

### CSS Custom Properties

```css theme={null}
.heading {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: hsl(var(--foreground));
}
```