Fundamentos
Cantos retos · hairlines · um acento por tela · sem sombras: profundidade por tom e hairline · espaço base 4 (4 · 8 · 12 · 16 · 20 · 24 · 32 · 44 · 64) · movimento em três durações (120 · 180 · 240 ms) numa curva só, e nada de transition: all
Ações
Alturas 44 / 40 / 32 na malha de 4 · rótulo mono 11 caixa-alta · uma primária por tela · hover escurece, pressionado escurece mais um degrau · foco por contorno · ocupado = gerúndio a 70 %, sem spinner · abaixo de 32 px é link, não botão
Sinais
Selo de 22 px, mono 10, ponto quadrado, texto no tom, fundo a 10 % sobre Cal · deltas em mono tabular com sinal tipográfico (+/−), nunca seta emoji
Campos
Altura 44 · fundo Poço com borda #A5A29A · rótulo mono 11 acima, nunca flutuante · foco: borda no acento, sem anel · placeholder em cinza-pedra · erro do banco num componente só: sans 13 em óxido com fio à esquerda
Dados
O número é o herói — serifa grande, rótulo mínimo · extremidades retas · o dado usa a Tinta, o contexto fica em Papel (apagado) · fileira de quatro no alto usa o compacto · dentro da Proclamação, o contorno claro (naTinta), para o azul seguir um por tela
Navegação
Uma coluna grafite de 224 px em sanfona exclusiva: cabeçalho de módulo (ícone 16 + mono 11 + chevron) de 36 px, item de 34 px em sans 13 alinhado a 38 px da borda, ativo = fio de 2 px no acento-suave + fundo Pedra 7 % · recolhida (56 px, só ícones) só por escolha · a faixa de 44 px leva a trilha à esquerda (mono 10,5 Pedra/70: MÓDULO / TELA / SUBTELA) e a identidade à direita
Superfícies
Listas, tabelas e formulários. A superfície padrão de trabalho.
Anéis, medidores e sínteses. Um tom abaixo do papel.
Saudação, anúncio de ciclo, chamada maior.
Quatro profundidades (Cal · Papel · Pedra · Poço), nenhuma sombra · o cabeçalho de bloco é uma faixa grafite (bloco-topo) que remapeia os tokens de texto · proclamação: um por tela, no máximo · marca d'água a 7%
Tabelas
As colunas vão numa variável CSS (--colunas) lida pela classe literal sm:grid-cols-(--colunas), porque o Tailwind só gera a classe que aparece no fonte. DuasColunas + partirAoMeio partem a lista longa; Bloco agrupa em níveis.
Uma linha por item, numa linha só na tela larga (no celular ela quebra) · cabeçalho mono 11 só na tela larga · colunas em rem e uma flexível, a do nome · o selo é a categoria ou o cargo, o estado é texto · ação principal na linha, formulário abre ali mesmo · lista longa em duas colunas no xl · a tela cuja tabela não se parte põe max-w-5xl no main