A aplicação

grade e respiro

Container de 80rem, com 20 pixels de margem no celular, 40 no tablet e 60 no desktop largo. A faixa de seção traz 64 pixels de respiro vertical, 96 a partir do tablet, e já compõe as duas coisas: recriar espaçamento à mão é como o sistema começa a divergir.

espaço

Cresce de quatro em quatro: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Qualquer valor fora dessa lista precisa de justificativa.

cantos

12 em botões e campos, 16 em cards internos e mensagens, 22 nos cards de página. Pílula em chip e selo. Uma mensagem de conversa tem um canto de 4 do lado de quem fala.

bordas

1 pixel em quase tudo, na cor de linha. A exceção é a IA: 1,5 pixel em cobalto, sólido ou tracejado, marcando o que a máquina produziu ou o campo em que ela é acionada. Ali a borda funciona como etiqueta.

sombras

Derivadas da tinta, com transparência, e nunca do cinza-azulado. Grandes, macias e deslocadas para baixo, como papel apoiado em papel.

foco

Anel neutro em grafite em tudo; anel cobalto quando o campo é afordância de IA. O foco é requisito de acessibilidade e nunca é removido.

botões

Escada de ênfase: primário em tinta sólida, um por contexto; depois contorno; depois só texto; perigo em vermelho, com parcimônia; e o gradiente por último, no máximo um por página. O botão de demo é um componente só, com destino e texto fixos.

densidade

Dois modos: confortável para quem visita e compacta para quem passa o dia dentro da caixa de entrada. Mesma marca, altura de controle diferente: 44 pixels contra 36.

movimento

Transições de 200 a 300 milissegundos. A revelação ao rolar é dirigida pela própria rolagem, sem JavaScript, e desaparece inteira quando o sistema pede menos movimento. Toda animação precisa ser desligável.

iconografia

Tipografia faz o papel de ícone: ● para equipe, ▪ para IA, → ⇄ ✓ ✕ para o resto. Emoji não sinaliza estado, categoria nem ação. Quando um ícone de interface for inevitável, ele é de linha, com traço de 1,75.