A lei visual do Hub Central

Evidência

Todo par abaixo é calculado, não estimado: OKLCH → sRGB → luminância relativa → razão WCAG. O mesmo módulo alimenta esta página e o npm run verifica:contraste, que trava o commit quando um par reprova.

246 pares verificados nos dois temas, 246 aprovados.

Superfícies

Três papéis: conteúdo (background, card), estrutura (sidebar) e apoio (muted, accent, secondary). No tema escuro o card é MAIS CLARO que a página — por isso ele, e não o fundo, é o pior caso nos cálculos.

Marca e controles

O azul da marca PH SILVA é o único acento, reservado a ação primária, seleção e estado corrente. --border é divisória decorativa e não tem piso; --input é o contorno que IDENTIFICA um controle e por isso precisa de 3:1.

Alertas

Oito estados do RN-04.3, dois tokens cada. A TINTA é sempre texto e ícone; o SUAVE é sempre preenchimento. Inverter os papéis produz um bloco saturado e é defeito de revisão.

Energia

Rampa de cinco degraus dentro do matiz da marca. Piso de 3:1 porque é elemento gráfico, não texto — a informação está na contagem de barras, e a cor só reforça.

Distinguibilidade dos selos

Contraste diz se dá para LER o selo; distância diz se dá para DIFERENCIAR um do outro. A régua é o par hoje × amanhã, que já convivia na paleta sem objeção (AD-030).

Matriz completa

Todos os pares, um a um. Fica recolhida porque é referência de conferência, não leitura corrida — divulgação progressiva vale também para a documentação.

Escala — fixa em rem, nunca fluida

clamp() não serve a UI de produto: o usuário trabalha em DPI consistente, e um título que encolhe dentro de uma coluna fica pior, não melhor. Razão entre degraus de 1,125 a 1,2. Acima de text-2xl, nada.

Pesos

400 corpo · 500 títulos e ênfase · 600 título de página. 700 não é usado: font-medium faz aqui o trabalho que bold faria em outro produto.

Números tabulares

Obrigatórios em horário, contador e duração, pelo atributo data-numerico. Sem isso a agenda dança quando 08:15 vira 09:00 — repare na coluna de baixo.

Medida

Prosa limitada a 65–75ch. Listas e dados podem correr mais densos; prosa, não.

Ritmo

Hierarquia vem de espaço e peso antes de vir de tamanho. Espaçamento uniforme na página inteira é ausência de hierarquia — varie de propósito. Valor arbitrário como p-[13px] é defeito de revisão.

Raio

Uma escala derivada de --radius. Misturar raios sem motivo é o tipo de inconsistência que o usuário não sabe nomear, mas sente.

Elevação

Superfície em repouso usa anel de 1px, como no Notion. Sombra é reservada a sobreposição — se tudo flutua, nada flutua.

Camadas

Escala semântica, nunca valor arbitrário. z-[999] e z-[9999] são defeito: significam que alguém perdeu a disputa e apelou.

Densidade e alvo de toque

Mínimo de 44×44 no que é tocado com frequência, mesmo quando o desenho é menor. A moldura tracejada mostra o alvo real da caixa de concluir.

Variantes

Uma forma de botão em todo o sistema. Se o botão de salvar tem aparência diferente em duas telas, uma das duas está errada.

Tamanhos

Estados

Os oito estados não são opcionais. O erro clássico é desenhar hover e esquecer foco — quem navega por teclado nunca vê hover. Tabule pelos botões abaixo para conferir o anel.

Campos

Rótulo visível sempre. Placeholder não é rótulo: some quando o campo é preenchido, e some justamente para quem mais precisaria dele.

Controles

Alvo de toque de 44px mesmo quando o desenho tem 16. A caixa de concluir é o gesto mais repetido do dia.

Os oito estados

Matiz, ícone e palavra, sempre juntos. No tema claro as oito tintas vivem na mesma faixa de luminosidade por exigência de contraste — a cor sozinha não diz a urgência, e por isso ícone e palavra são obrigatórios, não enfeite.

Prazo concreto

Quando existe um prazo real, ele substitui a palavra na tela — e o rótulo canônico continua indo para o leitor de tela. O dado extra soma, não troca.

Só ícone — último recurso

A palavra some da tela, nunca do leitor de tela. Se você precisou disto em mais de um lugar, o problema é a densidade da lista, não o selo.

Medidor de energia

A informação está na contagem de barras. A altura cresce junto e a cor reforça — três canais para o mesmo dado, porque num dia ruim ninguém compara matizes.

A escala é uma só

O medidor não tem variante grande. Na linha de metadados ele é um metadado entre outros, e o teto da escada é a altura óptica dos ícones ao lado — o ícone ocupa caixa de 12px, mas o traço desenha uns 10, e é com a tinta que o olho compara. Um componente com dois tamanhos convida a escolher o errado.

Variantes numa lista

Deliberadamente não é card: a tela de execução mostra dezenas destas, e card sobre card come altura útil. A separação é uma hairline; o agrupamento vem do espaço. Marque uma caixa para ver o estado concluído.

Casos de borda de texto

O título corta em duas linhas. Só quem passa disso ganha o “ver mais”, no fim da segunda linha — quem cabe não mostra botão, reticência nem espaço reservado. Reduza a janela: o mesmo título que cabe no desktop transborda no celular, e o botão aparece sozinho.

Seletor de contexto

O escape do princípio “nunca preso ao palpite”: um clique, sem abrir painel. Navegue com Tab e depois com as setas — é um grupo de rádio nativo, então o teclado funciona sem uma linha de JavaScript.

Seletor de área

Recebe as opções por prop, e essa diferença é proposital: área é dado que o usuário cria e renomeia. Congelar a lista no componente transformaria o design system em regra de negócio. Sem cor por área — aqui a área está escrita.

Desativado

Vazio de partida

Ensina o próximo passo. “Nada por aqui” informa a ausência e não faz nada com ela — é defeito.

Vazio de conquista

Havia itens e acabaram. É outro vazio, e confundir os dois faz o sistema parabenizar quem ainda não começou.

Carregando

Skeleton que antecipa a forma da lista, nunca spinner solto. Salto de layout custa o foco inteiro de quem já está lutando para mantê-lo.

Erro

Três obrigações: o que falhou, o que NÃO foi perdido, e a saída. A segunda é a que mais some das mensagens de erro por aí.

Sem rede

A captura offline saiu do escopo (AD-021), então o sistema diz isso na cara. Um “salvo!” que evapora destrói a confiança que faz o usuário parar de reconferir tudo à mão.

Sincronização — o quinto estado

O canal do Google expira e o sync para sem gerar erro nenhum. Falha silenciosa não é problema de infraestrutura, é problema de interface. Note que o sinal é a MUDANÇA DE FORMA; a cor só acompanha.

Lista longa

Rola dentro do próprio contêiner e termina com uma marca de fim. Sem ela o usuário rola mais um pouco só para conferir se acabou — atrito pequeno, repetido dezenas de vezes por dia.