---
url: "https://vueda.dev/v3/reference/theming/tokens/typography.md"
title: "Typography tokens"
---

# Typography tokens

7-step scale, Carbon-like density. Dominant body = 13px.
Not mapped through @theme (except --font-sans / --font-mono above).
Components reference sizes via arbitrary values:
text-[length:var(--vueda-text-body)], etc.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-text-micro` | `0.6875rem` |  | 11px — caps, table subtext, keycaps |  |
| `--vueda-text-supporting` | `0.75rem` |  | 12px — labels, captions, th |  |
| `--vueda-text-body` | `0.8125rem` |  | 13px — dominant UI body | `text: body` |
| `--vueda-text-reading` | `0.875rem` |  | 14px — longer prose (docs, dialogs) |  |
| `--vueda-text-heading` | `0.9375rem` |  | 15px — section headings | `text: heading` |
| `--vueda-text-title` | `1.125rem` |  | 18px — page titles | `text: title` |
| `--vueda-text-display` | `1.375rem` |  | 22px — marketing / empty-state only | `text: display` |
| `--vueda-font-weight-ui` | `500` |  | medium — controls |  |
| `--vueda-font-weight-label` | `600` |  | semibold — labels, primary button text, th | `text: heading--font-weight` |
| `--vueda-font-sans` | `"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif` |  | UI font stack: IBM Plex Sans with system fallbacks. Mapped through @theme as `font-sans`. Weights 400 / 500 / 600 only; never 700, never italic. The theme ships no font files: the application loads IBM Plex Sans at those weights, or overrides this stack with a family it loads. An unloaded family falls back to a system font silently. | `font: sans` |
| `--vueda-font-mono` | `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace` |  | data font stack: JetBrains Mono with system mono fallbacks. Mapped through @theme as `font-mono`. Reserved for machine-generated, positional, or digit-stable content. The theme ships no font files: the application loads JetBrains Mono, or overrides this stack with a family it loads. | `font: mono` |
| `--vueda-font-brand` | `"Galano Grotesque", "IBM Plex Sans", sans-serif` |  | brand display stack — Galano Grotesque with a Plex 600 fallback. Licence forbids web embedding, so live brand type ships as pre-rendered SVG paths in the repo-root `brand/` folder; this stack is the runtime fallback only. |  |

## Tokens

<a id="css-token-vueda-text-micro"></a>

### --vueda-text-micro

| Field | Value |
| --- | --- |
| Light | `0.6875rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:654` |

11px — caps, table subtext, keycaps

<a id="css-token-vueda-text-supporting"></a>

### --vueda-text-supporting

| Field | Value |
| --- | --- |
| Light | `0.75rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:655` |

12px — labels, captions, th

<a id="css-token-vueda-text-body"></a>

### --vueda-text-body

| Field | Value |
| --- | --- |
| Light | `0.8125rem` |
| Tailwind utility | `text: body` |
| Source | `client/lib/theme/vueda-tailwind/base.css:656` |

13px — dominant UI body

<a id="css-token-vueda-text-reading"></a>

### --vueda-text-reading

| Field | Value |
| --- | --- |
| Light | `0.875rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:657` |

14px — longer prose (docs, dialogs)

<a id="css-token-vueda-text-heading"></a>

### --vueda-text-heading

| Field | Value |
| --- | --- |
| Light | `0.9375rem` |
| Tailwind utility | `text: heading` |
| Source | `client/lib/theme/vueda-tailwind/base.css:658` |

15px — section headings

<a id="css-token-vueda-text-title"></a>

### --vueda-text-title

| Field | Value |
| --- | --- |
| Light | `1.125rem` |
| Tailwind utility | `text: title` |
| Source | `client/lib/theme/vueda-tailwind/base.css:659` |

18px — page titles

<a id="css-token-vueda-text-display"></a>

### --vueda-text-display

| Field | Value |
| --- | --- |
| Light | `1.375rem` |
| Tailwind utility | `text: display` |
| Source | `client/lib/theme/vueda-tailwind/base.css:660` |

22px — marketing / empty-state only

<a id="css-token-vueda-font-weight-ui"></a>

### --vueda-font-weight-ui

| Field | Value |
| --- | --- |
| Light | `500` |
| Source | `client/lib/theme/vueda-tailwind/base.css:662` |

medium — controls

<a id="css-token-vueda-font-weight-label"></a>

### --vueda-font-weight-label

| Field | Value |
| --- | --- |
| Light | `600` |
| Tailwind utility | `text: heading--font-weight` |
| Source | `client/lib/theme/vueda-tailwind/base.css:663` |

semibold — labels, primary button text, th

<a id="css-token-vueda-font-sans"></a>

### --vueda-font-sans

| Field | Value |
| --- | --- |
| Light | `"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif` |
| Tailwind utility | `font: sans` |
| Source | `client/lib/theme/vueda-tailwind/base.css:667` |

UI font stack: IBM Plex Sans with system fallbacks. Mapped through @theme as `font-sans`. Weights 400 / 500 / 600 only; never 700, never italic. The theme ships no font files: the application loads IBM Plex Sans at those weights, or overrides this stack with a family it loads. An unloaded family falls back to a system font silently.

<a id="css-token-vueda-font-mono"></a>

### --vueda-font-mono

| Field | Value |
| --- | --- |
| Light | `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace` |
| Tailwind utility | `font: mono` |
| Source | `client/lib/theme/vueda-tailwind/base.css:669` |

data font stack: JetBrains Mono with system mono fallbacks. Mapped through @theme as `font-mono`. Reserved for machine-generated, positional, or digit-stable content. The theme ships no font files: the application loads JetBrains Mono, or overrides this stack with a family it loads.

<a id="css-token-vueda-font-brand"></a>

### --vueda-font-brand

| Field | Value |
| --- | --- |
| Light | `"Galano Grotesque", "IBM Plex Sans", sans-serif` |
| Source | `client/lib/theme/vueda-tailwind/base.css:671` |

brand display stack — Galano Grotesque with a Plex 600 fallback. Licence forbids web embedding, so live brand type ships as pre-rendered SVG paths in the repo-root `brand/` folder; this stack is the runtime fallback only.