Typography Tokens
All type primitives live in one family, --tui-typography-*, following the
system's token grammar: --tui-{category}-{axis}-{step} (see
Naming).
Size
The base size is --tui-typography-size (16px by default). The size steps
are calculated from pixel values via --tui-typography-size-multiplier,
whose default is 1rem / 16 — one pixel in rem units, so the steps output
consistent sizes regardless of the document root font size. Override the
multiplier to rescale the whole type ramp at once.
| Variable | Default Computed Size |
|---|---|
--tui-typography-size |
16px (base) |
--tui-typography-size-xs |
12px |
--tui-typography-size-sm |
14px |
--tui-typography-size-md |
16px |
--tui-typography-size-lg |
20px |
--tui-typography-size-xl |
24px |
--tui-typography-size-xxl |
32px |
Weight
One four-step scale, emitted on .tui-interface. Hosts can remap the
steps (e.g. to suit a variable font); components read them with value
fallbacks as indicated.
| Variable | Default | Recommended Usage |
|---|---|---|
--tui-typography-weight-normal |
400 | var(--tui-typography-weight-normal, 400) |
--tui-typography-weight-medium |
500 | var(--tui-typography-weight-medium, 500) |
--tui-typography-weight-semibold |
600 | var(--tui-typography-weight-semibold, 600) |
--tui-typography-weight-bold |
700 | var(--tui-typography-weight-bold, 700) |
Line Height
The default line height is 1.4. The tight step exists for compact single-line UI text (tabs, segmented controls).
| Variable | Default | Used For |
|---|---|---|
--tui-typography-line-height |
1.4 | Body and multi-line text |
--tui-typography-line-height-tight |
1.25 | Compact single-line controls |
Family and Color
| Variable | Default |
|---|---|
--tui-typography-color-base |
currentColor |
--tui-typography-color-contrast-high |
var(--tui-color-fg) |
--tui-typography-color-contrast-low |
var(--tui-color-fg-muted) |
--tui-typography-color-headings |
var(--tui-color-fg) |
Renamed in 0.0.20
The old names below were removed in 0.0.20 — references with value fallbacks kept identical computed styles, but the old names no longer respond to overrides:
| Removed | Use Instead |
|---|---|
--tui-font-weight-medium / -semibold |
--tui-typography-weight-medium / -semibold |
--tui-font-size-base |
--tui-typography-size |
--tui-fontSize-multiplier |
--tui-typography-size-multiplier |
--tui-line |
--tui-typography-line-height |
Font family
Font families are knobs: read with fallbacks, never declared on
.tui-interface. Unset, the interface keeps the host's font, so plugin
frontends inherit their theme's typeface.
| Knob | Fallback | Where it's read |
|---|---|---|
--tui-font-family-base |
--tui-typography-font-family (legacy alias), then inherit |
.tui-interface |
--tui-font-family-sans |
system-ui stack | .tui-font-sans |
--tui-font-family-mono |
ui-monospace stack | .tui-font-mono, code-ish fields |
A page with no font of its own (it renders in the browser's serif) opts in
with a class, <body class="tui-interface tui-font-sans">, or sets the base
knob anywhere: :root { --tui-font-family-base: Inter, system-ui, sans-serif; }.
Text styles
Named typographic treatments, applied by class. See Reference/Text Styles for every style rendered.
| Collection | Classes |
|---|---|
| Display | .tui-text-style-display-01 to -04 |
| Headline | .tui-text-style-headline-01 to -06 |
| Body and UI | .tui-text-style-body, -body-sm, -label, -caption, -overline |
One class per style is the override hook. Every TUI element using a style renders its class, so one rule restyles it everywhere. The overline is the group label in every listbox, the Dropdown header and the picker field labels:
.tui-text-style-overline { text-transform: none; }
Every property is also a knob, never declared, so it works from :root:
--tui-text-{style}-{family, size, weight, line-height, tracking, transform, color}.
Display and headline levels also read a collection-wide knob (not for
size, which would flatten the scale), and a level knob beats it:
:root {
--tui-text-headline-weight: 700; /* every headline level */
--tui-text-headline-04-weight: 600; /* just level 04 */
--tui-text-overline-tracking: 0.12em;
}
Sizes are fixed rem values; for responsive type, re-point the size knobs
inside your own media or container queries. Colour defaults to inherit,
except caption and overline (fg-muted).
In SCSS, a component rule takes a style with
@include sys.text-style(sys.$prefix, overline) (or headline, 4) and also
renders the class. The mixin keeps static, CSS-only markup styled; the class
is the override hook.