O sistema visual, medido

Os dois registros

Escala editorial

A entrelinha está embutida no token: não existe título grande com entrelinha de corpo por acidente. Quanto maior o tipo, menor a entrelinha.

Hierarquia de texto

Nenhum #ccc, #999 ou #666. Alfa atravessa qualquer troca de fundo sem retradução — é o que torna o white-label da Fase 3.7 possível trocando quatro tokens.

Raio — escala corporativa

O raio codifica nível de hierarquia, não tamanho do objeto: um cartão de 400px tem o mesmo raio de um de 60px. A cápsula foi eliminada.

As quatro camadas — a prova

A diferença está nos inset: o fio claro é luz batendo na borda de cima, o escuro é a espessura da peça. Com raio de 4px isto deixou de ser acabamento e virou obrigação — sem a cápsula, é a sombra que carrega a sensação de objeto.

A fonte de luz — 51.4% 6.1%

51.4% 6.1% — peça moldada50% 50% — adesivo20% 90% — luz de baixo, errada

Um valor só, para a página inteira. Se o botão tem luz de cima e o cartão tem luz da esquerda, o cérebro registra “montagem” sem saber apontar por quê.

As três densidades de linha

Controles de formulário — produto

O <select> nativo foi abandonado por um motivo concreto: o menu dele é desenhado pelo sistema operacional. Num painel escuro ele abre branco, com a fonte do Windows e o azul de seleção do Windows, e nenhuma linha de CSS alcança aquilo. É o único componente capaz de fazer um produto inteiro parecer amador em um clique.

O preço de trocar é reimplementar o que ele fazia de graça — setas, Home/End, digitar para pular, Esc, foco de volta no gatilho, virar para cima quando falta espaço. Essa aritmética vive pura em navigation.ts, com teste: é o tipo de coisa que quebra sem lançar erro e sem aparecer em log.

Campo afunda, botão sobe. A sombra interna no campo e as quatro camadas no botão não são acabamento — são como a mão sabe onde clicar antes de ler.

Movimento editorial — GSAP

Cada palavra sobe dez pixels, em escada de setenta milissegundos

Recarregue a página para ver de novo. Se o bundle do GSAP falhar em carregar, a trava se solta em 2,5s e este bloco aparece sem animação — nunca em branco. Numa rota que recebe aplicação de R$ 50 mil, a diferença entre “sem animação” e “página quebrada” é a venda.