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