Cores

Todo token semântico existe nos dois temas. Um token declarado em apenas um deles é um defeito — FE-50 — e o teste de tokens falha.

--color-bg fundo da página
--color-bg-subtle fundo alternativo
--color-surface superfície (cards, inputs)
--color-surface-raised superfície elevada
--color-surface-sunken superfície rebaixada
--color-surface-hover superfície em hover
--color-border borda
--color-border-strong borda enfática
--color-text texto
--color-text-muted texto secundário
--color-text-subtle texto terciário
--color-accent destaque (preenchimento)
--color-accent-text destaque (texto)
--color-accent-subtle destaque (fundo)
--color-accent-border destaque (borda)
--color-success sucesso
--color-success-subtle sucesso (fundo)
--color-warning atenção
--color-warning-subtle atenção (fundo)
--color-danger erro
--color-danger-subtle erro (fundo)
--color-info informação
--color-info-subtle informação (fundo)
--color-focus anel de foco
--color-skeleton esqueleto de carregamento
--color-shell-sidebar shell: barra lateral
--color-shell-sidebar-text shell: texto da barra
--color-shell-sidebar-muted shell: texto secundário
--color-shell-sidebar-border shell: borda da barra
--color-shell-sidebar-active shell: item ativo
--color-shell-sidebar-active-text shell: texto do item ativo
--color-shell-topbar-border shell: borda do topo
--color-chart-1 gráfico série 1
--color-chart-2 gráfico série 2
--color-chart-3 gráfico série 3
--color-chart-4 gráfico série 4
--color-chart-5 gráfico série 5
--color-chart-grid gráfico: linha de base

Escalas

Espaçamento, raio e tipografia.

Espaçamento

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16

Raio

--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-full

Tipografia

Venda registrada --text-xs
Venda registrada --text-sm
Venda registrada --text-base
Venda registrada --text-lg
Venda registrada --text-xl
Venda registrada --text-2xl
Venda registrada --text-3xl

Ícones

Desenhados à mão, sem dependência. Todo ícone aqui tem pelo menos um uso real.

dashboard
cart
users
package
truck
wallet
settings
palette
menu
bell
search
user
sun
moon
monitor
chevronDown
chevronRight
chevronUp
arrowDown
arrowUp
sort
check
close
alert
error
info
success
inbox
refresh
plus
database

Botões

Cada variante em cada estado. `loading` implica `disabled`: não existe estado “ocupado mas clicável”, que é o que produzia duplo envio no sistema legado (FE-31).

Como link

FE-53 / #306 ao vivo. Esta caixa tem 260px. No sistema legado a linha de ações da tela de erro era um flex com dois flex-1 e sem min-w-0, e transbordava 35px em 390px. Aqui a mesma linha quebra e empilha.

Campos de formulário

Rótulo, dica e erro sempre ligados ao controle por id — a peça que o wrapper canônico do legado deveria ter feito e que nenhum arquivo importava (FE-46).

Nome

E-mail

Usado para enviar a nota fiscal.

Documento

Informe um CPF ou CNPJ válido.

Valor

Somente leitura

Desabilitado

Categoria

Opcional: sem seleção, o valor é null — nunca string vazia.

Tipo

Categoria (com erro)

Selecione uma categoria.

Observações

Não aparece para o cliente.

Aceito os termos de uso

Selecionar todos

Com erro

É necessário aceitar para continuar.

Desabilitado

Regressão FE-06 / #139

Este Select recebe uma opção com value="" — exatamente a entrada que derrubava Nova conta a receber, Nova conta a pagar e Nova movimentação no sistema legado, substituindo toda a interface por “Algo deu errado”. A opção é descartada, o console avisa em desenvolvimento, e a tela renderiza.

Categoria (entrada envenenada)

Valor atual: null

Sinalização

Badges, spinner e avisos.

Neutro Destaque Pago Pendente Cancelado Rascunho

Um único sistema de avisos, montado uma vez pelo layout raiz (FE-44).

Tabela — lista larga

Dez colunas em 390px. A tabela rola dentro da própria caixa e a página não rola na horizontal em nenhuma das quatro larguras da baseline. Cabeçalho não fixo e coluna de ações com rótulo apenas para leitor de tela: a combinação que vazava 187px de rolagem horizontal para o documento.

Fornecedores
Código		CNPJ	Contato	E-mail	Telefone	Cidade	Condição de pagamento	Última compra	Status
`FR-0001`	Construtora Ipê Amarelo Ltda.	12.345.678/0001-90	Marcos Andrade	compras@ipeamarelo.com.br	(11) 98765-4321	São Paulo — SP	30/60/90 dias	02/08/2026	Ativo
`FR-0002`	Madeireira Serra Azul S.A.	98.765.432/0001-10	Beatriz Nogueira	beatriz.nogueira@serraazul.ind.br	(41) 3322-1100	Curitiba — PR	À vista	28/07/2026	Ativo
`FR-0003`	Ferragens do Vale Comércio de Materiais Ltda.	45.678.901/0001-23	Osvaldo Ribeiro Filho	financeiro@ferragensdovale.com.br	(51) 99988-7766	Novo Hamburgo — RS	28 dias	15/06/2026	Inativo

Tabela — cabeçalho fixo

A mesma tabela com `stickyHeader`. Renderizada à parte porque `position: sticky` no `<th>` o torna um bloco contêiner e, por acidente, esconde o defeito acima — motivo pelo qual alargar apenas a tabela original não teria bastado.

Vendas recentes
Código	Cliente	Status	Total
`VD-0001`	Maria Oliveira	Pago	R$ 1.250,00
`VD-0002`	Construtora Ipê Amarelo Ltda.	Pendente	R$ 58,00
`VD-0003`	João Pereira	Cancelado	R$ 340,90

Os três estados

Carregando, vazio e erro — componentes, não algo que cada domínio reinventa. Precedência: carregando > erro > vazio > conteúdo.

Clientes
Cliente	Status
Maria Oliveira	Pago
Construtora Ipê Amarelo Ltda.	Pendente
João Pereira	Cancelado

Esqueleto: tabela

Esqueleto: cards

Esqueleto: formulário

Esqueleto: texto

Peças soltas

Nenhuma movimentação no período

Selecione outro intervalo ou registre a primeira movimentação de caixa.

Não foi possível carregar o fluxo de caixa

O serviço financeiro não respondeu. Nada foi alterado.

Detalhes técnicos

GET /api/financeiro/fluxo — 503

Ir para o início

Sobreposições

`<dialog>` nativo: armadilha de foco, Escape, `inert` no fundo e camada superior vêm da plataforma.

Cards

Tons semânticos, usados pela linha de indicadores do dashboard.

Padrão

Superfície neutra.

Destaque

Ação ou seleção.

Sucesso

Saldo positivo.

Atenção

Estoque baixo.

Erro

Conta vencida.

Informação

Sincronização pendente.

Registro de navegação

Padrão de fragmentos: cada domínio possui um arquivo, o registro apenas importa. Uma entrada só vira link quando a rota existe de verdade — nada aponta para um 404.

Entradas de navegação declaradas
Entrada	Rota	Dono do fragmento	Capacidade	Estado
Ambiente	`/`	agent-c (shell)	`—`	rota existe
Dashboard	`/dashboard`	dashboard	`dashboard.overview.read`	rota existe
Design system	`/_ui`	agent-c (shell)	`—`	rota existe
Alterar senha	`/account/password`	agent-f (auth/users)	`auth.password.update`	rota existe
Vendas	`/sales`	sales agent (K)	`sales.sale.read`	rota existe
Clientes	`/customers`	customers agent	`customers.customer.read`	rota existe
Estoque	`/inventory`	inventory agent	`inventory.product.read`	rota existe
Contagem física	`/inventory/counts`	inventory agent	`inventory.count.read`	rota existe
Categorias	`/categories`	categories agent	`categories.category.read`	rota existe
Fornecedores	`/suppliers`	suppliers agent	`suppliers.supplier.read`	rota existe
Reconciliação (D-09)	`/suppliers/reconciliation`	suppliers agent	`suppliers.provenance.read`	rota existe
Visão geral	`/finance`	finance agent	`finance.report.read`	rota existe
Caixa	`/finance/cash`	finance agent	`finance.movement.read`	rota existe
Contas a receber	`/finance/receivables`	finance agent	`finance.receivable.read`	rota existe
Contas a pagar	`/finance/payables`	finance agent	`finance.payable.read`	rota existe
Notificações	`/notifications`	agent-i (notifications)	`notifications.notification.read`	rota existe
Usuários	`/users`	auth/users agent (F)	`auth.user.read`	rota existe
Configurações	`/settings`	settings agent	`settings.company.read`	rota existe

Contêineres hostis

Todo componente que se organiza horizontalmente, renderizado uma vez por tipo de contêiner. Três defeitos da mesma classe foram publicados antes desta seção existir: um botão virou um quadrado vazio, a linha de ações do EmptyState mediu 0px e um botão de ícone dentro de um `<td>` mediu 2px. O teste percorre todo controle de cada sonda e falha se algum colapsar ou transbordar.

block — largura definida

Pago

Nome

Categoria

Nenhum registro

Cadastre o primeiro para começar.

Falha ao carregar

Nada foi alterado.

narrow — 240px

Pago

Nome

Categoria

Nenhum registro

Cadastre o primeiro para começar.

Falha ao carregar

Nada foi alterado.

shrink — coluna flex centralizada

Pago

Nome

Categoria

Nenhum registro

Cadastre o primeiro para começar.

Falha ao carregar

Nada foi alterado.

cell — célula de tabela com largura automática

Pago

Nome

Categoria

Nenhum registro

Cadastre o primeiro para começar.

Falha ao carregar

Nada foi alterado.

outra coluna

flexrow — item flex ao lado de algo largo

irmão largo, 900px

Pago

Nome

Categoria

Nenhum registro

Cadastre o primeiro para começar.

Falha ao carregar

Nada foi alterado.

Aviso disparado de dentro de um $effect

`toast.show()` lia o próprio estado antes de escrevê-lo, então um `$effect` que o chamasse passava a depender do store e a escrita reexecutava o efeito — um laço. Reagir a dados com um aviso é algo comum, então isto precisa ser seguro, não documentado como inseguro.

Nenhum disparo ainda.

Moldura de autenticação

Usada por telas fora do shell — entrar, recuperar senha, sessão expirada. Legível nos dois temas por construção: o tema é aplicado ao <html> pelo servidor, não por um componente de rota (UX-11 / #304).

ArtCraft ERP

Entrar

Acesse com as credenciais da sua conta.

E-mail

Senha

Manter conectado

UX-01 — indicadores e atenção

Valor em Fraunces 30px; o cartão de atenção usa borda esquerda de 3px. Medidos na referência aprovada.

Vendas pagas

R$ 6.099,00

12,4% 38 pedidos

Clientes ativos

24

no período

Caixa atual

R$ 18.420,35

saldo consolidado

Resultado do mês

-R$ 1.836,10

8,1% valor negativo permanece em tinta neutra

Itens sem estoque 2

Kit Presente Ateliê · Embalagem Presente

Abaixo do estoque mínimo 3

Sabonete Artesanal Rosa · Argila Natural

Contas a pagar vencidas 2

R$ 1.262,60 em atraso

Recebíveis vencidos 1

R$ 713,30 aguardando

UX-01 — período, busca e valores

Segmentado sobre radios nativos: navegação por setas e o anúncio “1 de 4” vêm da plataforma.

Hoje 7 dias 30 dias 12 meses

selecionado: 7 dias

Entrada de caixa R$ 268,90 · saída R$ 1.262,60 · quitada R$ 96,00 · manchete -R$ 1.836,10

UX-01 — gráficos

SVG inline, sem dependência de gráficos. Os mesmos números são publicados como tabela para leitores de tela.

Evolução de vendas
Período	Valor	Extremo
07/08	R$ 620,00
08/08	R$ 480,00	Menor
09/08	R$ 910,00
10/08	R$ 640,00
11/08	R$ 2.280,00	Maior
12/08	R$ 1.460,00
13/08	R$ 980,00

Sabonete Artesanal Rosa: R$ 1.240,00
Vela de Soja Lavanda: R$ 980,00
Kit Presente Ateliê: R$ 640,00
Sabonete Artesanal Mel: R$ 410,00

UX-01 — DataTable

Tabela no desktop, cartões empilhados abaixo de 48rem. Reduza a janela: a página nunca rola na horizontal.

3 de 12

Demonstração de vendas
		Data	Status
VD-2481 4 itens	Marina Albuquerque	13/08/2026	Paga	R$ 268,90
VD-2480 2 itens	Camila Ferrari	13/08/2026	Em produção	R$ 96,00
VD-2478 1 item	Juliana Prado	12/08/2026	Cancelada	R$ 38,00

Marina Albuquerque R$ 268,90
VD-2481 · 13/08/2026 · 4 itens
Paga
Camila Ferrari R$ 96,00
VD-2480 · 13/08/2026 · 2 itens
Em produção
Juliana Prado R$ 38,00
VD-2478 · 12/08/2026 · 1 item
Cancelada

UX-01 — seção de formulário

Título e explicação à esquerda, campos à direita; uma coluna abaixo de 60rem. Resumo fixo ao lado.

Cliente e data

Quem está comprando e quando o pedido entrou.

Cliente

Data do pedido

Entrega

Como a cliente vai receber o pedido.

Forma

Frete