Tipografia

Os tokens tipográficos do Lyra conectam uma escala de texto compacta a papéis semânticos claros. Use o token de papel indicado para cada componente, em vez de escolher família, peso ou tamanho de fonte diretamente na folha de estilos do produto.

Escala

A rampa --text-* vai de 12px a 60px. Ela é a fonte compartilhada para densidade de componentes, títulos e momentos de display: os passos menores atendem metadados, os intermediários carregam texto de interface e os maiores estabelecem a hierarquia da página. Escolha primeiro o token semântico de fonte; recorra a um passo da escala apenas ao definir um novo papel semântico.

Escala de texto — 12px a 60px

Cada linha usa o token --text-* correspondente. O rótulo é a API do token; o valor em pixels é uma referência para comparar passos, não um valor para copiar para um componente.

--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

Ver código

Display e títulos

--display-font e os tokens de título combinam Plus Jakarta Sans com o peso, o tamanho e a altura de linha planejados. Combine texto display com --tracking-display e títulos com --tracking-heading para preservar o ritmo óptico compacto da hierarquia. --h3-font volta ao tracking normal para um subtítulo mais discreto.

Papéis de display e títulos

Use esses atalhos completos de fonte em títulos de página e de seção. Os rótulos mostram o token de tracking e a composição atual do token para que sua finalidade visual permaneça verificável.

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

Ver código

Corpo

--body-font é o padrão de 14px para controles, menus, tabelas e texto em cards. Use --body-strong-font quando a ênfase precisar ficar no mesmo passo da escala; use a escala de 16px com leading relaxado para leitura longa. Combine cada papel com --text-primary, --text-secondary ou --text-muted conforme a importância do conteúdo.

Texto de corpo e interface

Overlines, captions e corpo em destaque são papéis próprios, não combinações improvisadas de caixa alta, peso e cor. Assim, a mesma hierarquia se adapta ao tema.

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.

Ver código

Mono

--font-mono usa JetBrains Mono e fica reservado para código, nomes de tokens e dados técnicos. O atalho --code-font entrega ao código o tamanho padrão de 13px e leading legível. Diferencie trechos técnicos da prosa com tokens semânticos de superfície, borda e texto, em vez de cores personalizadas.

Código e rótulos de tokens

Use monoespaçada para snippets, comandos inline e nomes de tokens. É um papel de conteúdo, não uma fonte alternativa para texto de corpo.

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

Ver código