Typography

Ten text styles, shared by the website, the exported design system and Figma.

When to use: Named text-style classes — Heading/SM|MD|LG (vt-heading-sm/md/lg), Body/SM|MD|LG (vt-body-sm, vt-body, vt-body-lg), Label/SM|MD|LG (vt-label-sm/md/lg), Caption (vt-caption) and the Code pair (vt-code-sm, vt-code). Prefer these over raw size utilities for standalone text. The old names still resolve: vt-h1…vt-h6, vt-display and vt-overline are aliases onto the ten styles.

Text styles

Body is reading text, Label is control text, Caption is supporting text, and Heading carries the hierarchy. Heading names describe appearance — pick the HTML level that fits the document. Inter is the default family; size, line height, weight and letter spacing are set per style in the builder.

Style	Size / line height	Weight	Purpose	Class
Heading
SM	20 / 28	600	Card heading	`vt-heading-sm`
MD	24 / 32	600	Section heading	`vt-heading-md`
LG	32 / 40	600	Page heading	`vt-heading-lg`
Body
SM	14 / 20	400	Compact interface text	`vt-body-sm`
MD	16 / 24	400	Body text	`vt-body`
LG	18 / 28	400	Intro paragraphs	`vt-body-lg`
Label
SM	12 / 16	500	Small controls	`vt-label-sm`
MD	14 / 20	500	Regular buttons and labels	`vt-label-md`
LG	16 / 24	500	Large controls	`vt-label-lg`
Caption
Caption	12 / 16	400	Supporting captions	`vt-caption`

Customization

A style is four custom properties. Changing one updates every component that uses it; a system that omits a style falls back to the value above.

:root {
  --type-label-md-size: 0.875rem;
  --type-label-md-line-height: 1.25rem;
  --type-label-md-weight: 500;
  --type-label-md-tracking: 0em;
}

Code blocks use a monospace pair (vt-code, vt-code-sm) that ships with the system but is not one of the ten roles. The primitive --font-size-* tokens are derived from the sizes these styles use, so a one-off size in a layout can never disagree with them. Exported themes carry every style as a DTCG typography token.