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
--vueda-text-micro
| Field | Value |
|---|---|
| Light | 0.6875rem |
| Source | client/lib/theme/vueda-tailwind/base.css:571 |
11px — caps, table subtext, keycaps
--vueda-text-supporting
| Field | Value |
|---|---|
| Light | 0.75rem |
| Source | client/lib/theme/vueda-tailwind/base.css:572 |
12px — labels, captions, th
--vueda-text-body
| Field | Value |
|---|---|
| Light | 0.8125rem |
| Tailwind utility | text: body |
| Source | client/lib/theme/vueda-tailwind/base.css:573 |
13px — dominant UI body
--vueda-text-reading
| Field | Value |
|---|---|
| Light | 0.875rem |
| Source | client/lib/theme/vueda-tailwind/base.css:574 |
14px — longer prose (docs, dialogs)
--vueda-text-heading
| Field | Value |
|---|---|
| Light | 0.9375rem |
| Tailwind utility | text: heading |
| Source | client/lib/theme/vueda-tailwind/base.css:575 |
15px — section headings
--vueda-text-title
| Field | Value |
|---|---|
| Light | 1.125rem |
| Tailwind utility | text: title |
| Source | client/lib/theme/vueda-tailwind/base.css:576 |
18px — page titles
--vueda-text-display
| Field | Value |
|---|---|
| Light | 1.375rem |
| Tailwind utility | text: display |
| Source | client/lib/theme/vueda-tailwind/base.css:577 |
22px — marketing / empty-state only
--vueda-font-weight-ui
| Field | Value |
|---|---|
| Light | 500 |
| Source | client/lib/theme/vueda-tailwind/base.css:579 |
medium — controls
--vueda-font-weight-label
| Field | Value |
|---|---|
| Light | 600 |
| Tailwind utility | text: heading--font-weight |
| Source | client/lib/theme/vueda-tailwind/base.css:580 |
semibold — labels, primary button text, th
--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:584 |
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.
--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:586 |
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.
--vueda-font-brand
| Field | Value |
|---|---|
| Light | "Galano Grotesque", "IBM Plex Sans", sans-serif |
| Source | client/lib/theme/vueda-tailwind/base.css:588 |
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.