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

# Typography

> Aura typefaces, type scale, and how typography tokens map to Inter and Source Code Pro.

Typography is foundational to creating clear, consistent, and accessible interfaces. Our system uses design tokens and a well-defined set of styles to ensure type is applied consistently across products, platforms, and teams.

Typography tokens are predefined values that represent font properties like font family, size, weight, letter spacing and line height. Rather than using arbitrary values (e.g., setting font-size: 17px), tokens standardize how typography is applied across components and layouts.
Using type tokens:

* Ensures consistency and scalability across the design system
* Makes it easier to implement updates or refinements system-wide
* Supports design–developer alignment through shared, meaningful naming conventions

## Typefaces

| Token                          | Font            | Use                                                       |
| :----------------------------- | :-------------- | :-------------------------------------------------------- |
| `--font-sans` / `--font-inter` | Inter           | Main product copy — UI text, labels, and dense interfaces |
| `--font-mono`                  | Source Code Pro | Code blocks, technical strings, terminal output           |

## Type scale

Styles are grouped by role: **Text** for product UI copy and **Code** for monospace technical content.

### Text

Inter — main product typography.

| Token         | Description                                     | Size | Line height | Weight  |
| :------------ | :---------------------------------------------- | :--- | :---------- | :------ |
| `xxs/normal`  | Metadata; short labels                          | 10px | 12px        | Regular |
| `xxs/medium`  | Metadata; short labels; emphasized              | 10px | 12px        | Medium  |
| `xs/normal`   | Small captions & chart labels                   | 12px | 14px        | Regular |
| `xs/medium`   | Small captions & chart labels; emphasized       | 12px | 14px        | Medium  |
| `sm/normal`   | Secondary text, small labels                    | 14px | 18px        | Regular |
| `sm/medium`   | Secondary text, small labels; emphasized        | 14px | 18px        | Medium  |
| `base/normal` | Default body text                               | 16px | 20px        | Regular |
| `base/medium` | Default body text; emphasized                   | 16px | 20px        | Medium  |
| `lg/normal`   | Large text, sub-headlines                       | 18px | 24px        | Regular |
| `lg/medium`   | Large text, sub-headlines; emphasized           | 18px | 24px        | Medium  |
| `xl/normal`   | Headlines, small titles                         | 20px | 24px        | Regular |
| `xl/medium`   | Headlines, small titles; emphasized             | 20px | 24px        | Medium  |
| `2xl/normal`  | Page headers, titles                            | 24px | 28px        | Regular |
| `2xl/medium`  | Page headers, titles; emphasized                | 24px | 28px        | Medium  |
| `3xl/normal`  | Splash screens, onboarding or login             | 30px | 32px        | Regular |
| `3xl/medium`  | Splash screens, onboarding or login; emphasized | 30px | 32px        | Medium  |
| `4xl/normal`  | Splash screens, onboarding or login             | 36px | 40px        | Regular |
| `4xl/medium`  | Splash screens, onboarding or login; emphasized | 36px | 40px        | Medium  |
| `5xl/normal`  | Splash screens, onboarding or login             | 48px | 44px        | Regular |
| `5xl/medium`  | Splash screens, onboarding or login; emphasized | 48px | 44px        | Medium  |

### Code

Source Code Pro — code blocks, snippets, and technical strings.

| Token | Description                                  | Size | Line height | Weight  |
| :---- | :------------------------------------------- | :--- | :---------- | :------ |
| `sm`  | Code blocks, snippets, and technical strings | 14px | 18px        | Regular |
| `md`  | Code blocks, snippets, and technical strings | 16px | 20px        | Regular |
| `lg`  | Code blocks, snippets, and technical strings | 18px | 24px        | Regular |