> ## 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.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# 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 |