Lyra

Typography

Lyra’s typography tokens connect a compact text scale to clear semantic roles. Use the role token a component calls for, rather than choosing a font family, weight or size directly in product CSS.

Scale

The --text-* ramp runs from 12px to 60px. It is the shared source for component density, headings and display moments: smaller steps support metadata, the middle steps carry interface copy, and the largest steps establish page hierarchy. Choose the semantic font token first; reach for a scale step only when defining a new semantic role.

Text scale — 12px to 60px

Each row uses its matching --text-* token. The label is the token API; the pixel value is a reference for comparing steps, not a value to copy into a component.

--text-xs12pxLyra Design System
--text-sm13pxLyra Design System
--text-base14pxLyra Design System
--text-md16pxLyra Design System
--text-lg18pxLyra Design System
--text-xl20pxLyra Design System
--text-2xl24pxLyra Design System
--text-3xl30pxLyra Design System
--text-4xl38pxLyra Design System
--text-5xl48pxLyra Design System
--text-6xl60pxLyra Design System

Display and headings

--display-font and the heading tokens combine Plus Jakarta Sans with their intended weight, size and line-height. Pair display text with --tracking-display and headings with --tracking-heading to preserve the compact optical rhythm of the hierarchy. --h3-font returns to normal tracking for a quieter subsection heading.

Display and heading roles

Use these complete font shorthands for page titles and section headings. The labels expose the tracking token and the token’s current composition so its visual purpose remains inspectable.

Build with Lyra--display-font · --tracking-display · 48px / 1.15 · 800 · -0.03em
Components that scale--h1-font · --tracking-heading · 30px / 1.3 · 700 · -0.02em
For every product surface--h2-font · --tracking-heading · 24px / 1.3 · 700 · -0.02em
A clear visual hierarchy--h3-font · --tracking-normal · 20px / 1.3 · 600 · 0

Body

--body-font is the 14px default for controls, menus, tables and card copy. Use --body-strong-font when emphasis should stay within the same scale step; use the 16px scale with relaxed leading for long-form reading. Pair each role with --text-primary, --text-secondary or --text-muted according to the importance of the content.

Body and UI copy

Overlines, captions and strong body copy are separate roles, not ad-hoc combinations of uppercase, weight and color. That lets the same hierarchy adapt with the theme.

Overline · 12px bold capsLong-form copy uses 16px with relaxed leading so documentation and articles stay easy to read.Interface copy uses --body-font: 14px with normal leading for tables, forms, menus and cards.--body-strong-font adds emphasis without changing the text scale.--caption-font · 12px medium for hints, timestamps and metadata.

Overline labels

--overline-transform defaults to uppercase. --overline-tracking defaults to initial, which keeps each label's existing spacing: --tracking-caps (0.08em) for most labels, 0.06em for combobox groups, and 0.04em for calendar and scheduling labels. These tokens control table headers, sidebar and menu group labels, pageheader eyebrows, code language labels, and other overline-style metadata. The table sort button inherits its header's casing and spacing.

For sentence case, set both tokens on your application or brand scope:

css
[data-brand='harbor'] {
  --overline-transform: none;
  --overline-tracking: normal;
}

Mono

--font-mono is JetBrains Mono, reserved for code, token names and technical data. The --code-font shorthand gives code its standard 13px size and readable leading. Keep technical fragments distinct from prose with semantic surface, border and text tokens instead of custom colors.

Code and token labels

Use monospace for snippets, inline commands and token names. It is a content role, not an alternative body typeface.

import { Button } from '@lyra-ds/react';
Inline code: install pnpm add @lyra-ds/react and import styles.css.--font-mono · JetBrains Mono · --code-font · 13px / 1.5