Exemplos · referência

Guia de estilos

O vocabulário visual deste app: cor, texto, botão, campo e estado. Use os nomes desta página nas telas que você criar — eles já acompanham a marca e o tema claro/escuro.

Cores

Toda cor da tela sai desta lista. O nome do alias é o que você escreve na classe (bg-…, text-…, border-…); ele já troca sozinho entre tema claro e escuro e entre as marcas do grupo.

superfícies e marca
bg-app
bg-surface
bg-raised
bg-sunken
bg-brand
bg-brand-soft
texto
Fornecedor homologado — títulos e números que decidemtext-strong
Fornecedor homologado — texto corrido, descriçõestext-body
Fornecedor homologado — legendas, apoio, metadadostext-muted
Texto sobre a cor da marcabg-brand · text-on-brand
feedback
Aprovadotext-ok · bg-ok-soft
Pendentetext-warn · bg-warn-soft
Recusadotext-danger · bg-danger-soft
Em análisetext-info · bg-info-soft

A borda de qualquer caixa é sempre border-subtle. Precisa de um tom que não está aqui? Ele não existe no padrão — escolha o alias mais próximo.

Tipografia

Três papéis e nada além: título (Syne), corpo e legenda. Números, códigos e valores usam a fonte monoespaçada para alinhar coluna com coluna nas tabelas.

Contratos de fornecimento

typeface-kz-syne · text-kz-32 · font-kz-700

Título de seção dentro da página

typeface-kz-syne · text-kz-18 · font-kz-600

Texto de corpo: use para explicar o que a tela faz e o que se espera da pessoa que a usa. Frases curtas, sem jargão de sistema — quem lê é a área, não a TI.

text-kz-14 · leading-kz-20 · text-body

Legenda: informação de apoio, unidade de medida, data da última atualização.

text-kz-12 · text-muted

PED-2026-0148 · 12.345.678/0001-90 · R$ 12.480,00

typeface-kz-mono — códigos, documentos e valores

Botões

Um botão de ação principal por tela (brand). O resto apoia: subtle e outlined para ações secundárias, danger para o que destrói dado, ghost e link para navegação discreta.

variantes
com ícone (slots do kit: plus, download, filter, trash…)
desabilitado — o botão não tem estado de carregamento próprio

Durante uma ação lenta, desabilite o botão e troque o rótulo (“Salvando…”) — o resultado chega pelo toast.

Formulário

Todo campo tem rótulo e um texto de apoio que diz o que se espera. Campos com formato (dinheiro, data, CPF/CNPJ) usam as máscaras de src/lib/masks.ts — máscara enquanto digita, valor normalizado ao salvar.

Digite só os números: a máscara monta o R$ sozinha.

Formato dd/mm/aaaa.

Prioridade
Confirmações
Receber aviso por e-mail a cada movimentaçãoVocê pode desligar depois, em Meus dados.

Opcional. Explique o que a área precisa e até quando.

Feedback

Nenhum clique fica sem resposta. Sucesso e falha vêm por toast; ação sem volta passa antes por uma confirmação. Nunca use as janelas nativas do navegador.

useUI() — toast e confirm
Badge — situação de um registro
Prioritário
Aprovado
Pendente
Recusado
Em análise
Piloto
Rascunho
Arquivado
Skeleton — enquanto os dados não chegam
Tooltip — explicação curta, no hover ou no foco
Considera só os contratos ativos no mês corrente.

Estados

Lista vazia e falha de carregamento não são acidentes: são telas que você desenha. Diga o que aconteceu e ofereça o próximo passo.

Nenhum contrato cadastrado

Assim que a área registrar o primeiro fornecedor, ele aparece aqui com valor, vencimento e situação.