# Typography

An austere, geometric scale for professional tools.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Typography in the **Monolith Design System** is unopinionated, geometric, and designed for maximum density and readability. We use a strict set of utility classes defined in `globals.css` rather than relying on arbitrary Tailwind text sizes.

## Font Families [#font-families]

* **Sans**: Inter or System Default (`var(--font-sans)`). Used for all UI elements, headings, and body text.
* **Mono**: Geist Mono or System Default (`var(--font-mono)`). Used for code, badges, numbers, and data tables. Tabular numbers (`tabular-nums`) are enforced globally on all mono text.

## Typographic Scale [#typographic-scale]

We provide explicit `@utility` classes in CSS. Do not use generic `text-sm` or `text-lg` unless building one-off marketing elements; use the semantic text classes for UI consistency.

| Utility Class     | Size | Line Height | Letter Spacing | Weight | Usage                                          |
| ----------------- | ---- | ----------- | -------------- | ------ | ---------------------------------------------- |
| `text-display`    | 32px | 1.15        | -0.03em        | 700    | Hero sections, empty states.                   |
| `text-h1`         | 24px | 1.20        | -0.02em        | 600    | Page titles, Modal headers.                    |
| `text-h2`         | 18px | 1.30        | -0.01em        | 500    | Section headers, Card titles.                  |
| `text-h3`         | 14px | 1.35        | -0.01em        | 500    | Sub-sections, component group labels.          |
| `text-body`       | 14px | 1.50        | 0.00em         | 400    | Standard interface text, paragraphs.           |
| `text-caption`    | 12px | 1.45        | 0.00em         | 400    | Metadata, helper text, timestamps.             |
| `text-mono-badge` | 11px | 1.40        | 0.02em         | 500    | Technical badges, status codes, commit hashes. |

## Core Principles [#core-principles]

* **Density**: The UI text standard is 14px (`text-body` and `text-h3`), allowing high information density without sacrificing legibility.
* **Tracking**: Headings have negative tracking (`-0.01em` to `-0.03em`) to tighten geometry. Body text has neutral tracking. Badges have positive tracking (`0.02em`) for clarity at microscopic sizes.
* **No Text Decoration**: Underlines are banned for navigation. Use bold weights or hover backgrounds instead.

## Usage [#usage]

```tsx
<h1 className="text-h1 text-foreground">Settings</h1>
<p className="text-body text-muted-foreground mt-2">
  Configure your workspace preferences.
</p>

<div className="mt-4 flex items-center gap-2">
  <span className="text-mono-badge bg-surface-raised px-2 py-1 text-foreground">v2.4.0</span>
  <span className="text-caption text-muted-foreground">Last updated today</span>
</div>
```