Primitives

Typography

The token-driven type scale — one --text-* rung per size, named by role. Publish the utilities, not a component.

Display — page titles & heroes

Heading 1 — content h1

One rung per size, named by role

Applied straight to the element

No component, just the utility on the tag

Body large sets the emphasized reading size — intros, lead paragraphs, and anywhere copy needs a little more presence than the default.

Body is the default for paragraphs, controls, and most of the interface. The five boxing wizards jump quickly, and the quick brown fox jumps over the lazy dog.

Label — form labels and small chrome.

Caption — overlines, timestamps, and group labels.

Micro — keycaps, badge counters, and dense metadata.

The refined source installs this primitive from src/registry/examples/refined/primitives/type-scale.css. It installs with the chat registry, so Refined UI files keep a stable import path.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/chat.json

See registry manifest

Raw code

Primary installed primitive source

Type scale

src/registry/examples/refined/primitives/type-scale.css

/*

* Type scale, canonical excerpt. Tokens live in installed theme (app/refined-ui-theme.css, authored at

* src/registry/sources/refined/theme.css); this is the docs-facing font-size-only slice.

 * ONE rung per size by ROLE — only source of font-size; never text-[Npx] or Tailwind's text-xs/sm defaults. Paired --line-height/--font-weight ride along per rung.

*/

@theme {

  /* Body/UI family: 10-16px band, ~95% of interface text; line-height stays a utility (leading-*) for per-surface density. */

--text-micro: 0.625rem; /* 10px — kbd, badge counters, dense numeric meta */

--text-caption: 0.6875rem; /* 11px — overlines, timestamps, section / group labels */

--text-label: 0.75rem; /* 12px — form labels + small chrome (nav item, tooltip, shortcut) */

--text-body: 0.875rem; /* 14px — DEFAULT body & control text (the workhorse) */

--text-body-lg: 1rem; /* 16px — emphasized / larger body */

/* Heading family: HIERARCHY, numbered (heading-1=largest); each pairs line-height+weight so `text-heading-N`

carries all three, letting a skin retune headings by re-valuing these alone. */

--text-heading-4: 0.9375rem; /* 15px */

--text-heading-4--line-height: 1.4;

--text-heading-4--font-weight: 600;

--text-heading-3: 1.125rem; /* 18px */

--text-heading-3--line-height: 1.35;

--text-heading-3--font-weight: 600;

--text-heading-2: 1.375rem; /* 22px */

--text-heading-2--line-height: 1.25;

--text-heading-2--font-weight: 600;

--text-heading-1: 1.875rem; /* 30px — content h1 */

--text-heading-1--line-height: 1.15;

--text-heading-1--font-weight: 700;

--text-heading-1--letter-spacing: -0.01em;

/* display — the biggest rung, above the content h1: page titles (PageHeader) and heroes. */

--text-display: 2.25rem; /* 36px */

--text-display--line-height: 1.1;

--text-display--font-weight: 600;

--text-display--letter-spacing: -0.02em;

  /* Font ROLES: body+display default to --font-sans; brand re-values ONE token for headings(font-display)/body(font-body)

own face. Headings apply `font-display` utility on element (font-family isn't a paired --text-* prop). */

--font-body: var(--font-sans);

--font-display: var(--font-sans);

}

/*

 * History: fixed 3 competing type systems (Tailwind defaults + named rungs + raw text-[Npx]) into one rung/role; 14px = body.

* Usage: apply utility directly to element (no <Text> component), e.g. text-heading-1 on <h1>, text-body on <p>.

* Do NOT resize control chrome text (button/tab/sidebar item) — that reads controlSize, not these tokens.

*/