# ADbotix typography system

The typography scale is defined once in `tailwind.tokens.js` and is shared by `tailwind.frontend.config.js` and `tailwind.backend.config.js`.

| Role | Tailwind class | Size |
| --- | --- | --- |
| Page title | `text-h1` | 72px |
| Section title | `text-h2` | 44px |
| Card/feature title | `text-h3` | 32px |
| Small heading | `text-h4` | 24px |
| Editorial paragraph | `text-body` | 18px |
| Navigation, buttons, cards, accordions, tables, labels and footer UI | `text-ui` | 16px |

## Reusable examples

```html
<h1 class="font-display text-h1 font-bold">Page title</h1>
<h2 class="font-display text-h2 font-semibold">Section title</h2>
<h3 class="font-display text-h3 font-semibold">Feature title</h3>
<h4 class="font-display text-h4 font-semibold">Small heading</h4>
<p class="text-body text-ink-60">Editorial paragraph copy.</p>
<button class="text-ui font-semibold">UI action</button>
<div class="text-ui">Card, accordion, table or footer copy.</div>
```

Base styles already apply `text-ui` to `body`, the matching token to `h1`–`h4`, and `text-body` to `p`. Component classes should be used when an element has a different semantic role, such as a paragraph-shaped status message that belongs to compact UI.