DS | Adila.coComponentes
Typography
Primitives tipográficos semânticos com as fontes Adila Std, Adila Pixel e Adila Code.
Design system
Interfaces claras começam pela tipografia.
Uma hierarquia consistente ajuda as pessoas a encontrar o que importa.
Use os componentes como blocos semânticos. O
Title
escolhe automaticamente a tag de acordo com a propriedade de nível.
Os estilos usam os tokens de cor e fonte do tema adila.co.
Adila Pixel · identidade em cada pixel.
Adila Code · const design = "legível";
Bom design torna a intenção visível.
- Hierarquia previsível
- Ritmo de leitura confortável
- Semântica HTML preservada
Atualizado há 5 minutos
Termos e condições se aplicam.Instalação
bun add @adila-sh/uiUso
import { Typography } from "@adila-sh/ui";
export function ArticleHeader() {
return (
<header className="space-y-3">
<Typography.Label>Novidades</Typography.Label>
<Typography.Title level={1}>Uma nova experiência</Typography.Title>
<Typography.Lead>Uma introdução em destaque para contextualizar a página.</Typography.Lead>
<Typography.Text>O conteúdo principal começa aqui.</Typography.Text>
<Typography.PixelText>Um destaque com a fonte Adila Pixel.</Typography.PixelText>
<Typography.CodeText>const font = "Adila Code";</Typography.CodeText>
<Typography.Description>Publicado em 18 de julho de 2026.</Typography.Description>
</header>
);
}Títulos
Typography.Title renderiza h1 por padrão. Use level de 1 a 6 para
manter a hierarquia semântica e aplicar a escala visual correspondente.
<Typography.Title level={1}>Título da página</Typography.Title>
<Typography.Title level={2}>Título da seção</Typography.Title>
<Typography.Title level={3}>Título do bloco</Typography.Title>Componentes
Typography.Title: títulos semânticos deh1ah6.Typography.Text: parágrafo de conteúdo padrão.Typography.PixelText: texto de destaque com a fonte Adila Pixel.Typography.CodeText: texto monoespaçado com a fonte Adila Code.Typography.Lead: introdução em destaque.Typography.Label: rótulo visual curto; para campos de formulário, use o componenteLabelde formulário (exportado no topo do pacote).Typography.Description: texto explicativo secundário.Typography.Small: observações compactas.Typography.Muted: metadados e informações de menor ênfase.Typography.InlineCode: termos técnicos e trechos curtos de código.Typography.Blockquote: citações em bloco.Typography.List: lista não ordenada com ritmo tipográfico consistente.