Design Denso e Calmo
Um gosto, não uma aparência. Linear e Things 3 são referências para julgamento — como apresentar muita informação sem ruído, e como permanecer calmo sem se tornar vago. Copiar o tema escuro, o acento roxo ou a cor da marca azul/verde não é copiar o gosto.
Duas lições carregam a maior parte do valor:
- Linear — densidade sem ruído. Mostre trabalho denso com hierarquia contida.
- Things — calma sem fraqueza. Mantenha a superfície principal calma escondendo detalhes até que eles mereçam seu lugar, não esvaziando a tela.
Princípios
Cada um é uma regra mais o corte que ela força. Aplique-os ao construir ou criticar uma superfície.
- Não compita por atenção que você não conquistou. Chrome, separadores, metadados, abas inativas, ícones repetidos recuam; o conteúdo principal e a única ação primária são lidos primeiro sem gritar.
- Estrutura é sentida, não vista. Obtenha hierarquia a partir de alinhamento óptico, um ritmo de espaçamento consistente, separadores de 0,5–1px, degraus de opacidade, fundos agrupados e tipografia — não de bordas pesadas, sombras grandes, gradientes decorativos, painéis saturados ou containers de ícone.
- Densidade sem desordem. Linhas compactas com alinhamento previsível e revelação progressiva de detalhes. Não: texto minúsculo ilegível, cada linha expondo todos os controles, ou espaçamento inflado vendido como "premium".
- Calma que esclarece, não calma que esconde. Calma vem de uma hierarquia clara e de uma próxima ação óbvia — não de espaços em branco pálidos, texto de baixo contraste fingindo ser discreto, ou estados vazios usados como decoração.
- Cor semântica contida. Acento marca seleção, foco, status importante e estado positivo/completo — nunca decoração. Respeite o acento do sistema; não repinte tudo com a cor da marca. Um "verde de conclusão" é uma dica semântica, não a cor primária do aplicativo.
Tipografia e movimento
- Tipografia: fontes do sistema, a menos que haja um motivo forte para o contrário; hierarquia a partir de tamanho, peso, opacidade e posicionamento. Direção: título da tela (claro, não exagerado) → título da linha (peso médio) → metadados (menor, opacidade reduzida) → status (compacto, semântico, sem excesso de badges) → corpo (curto, legível).
- Movimento: explica continuidade ou mudança de estado (um compositor aparecendo, uma seleção se movendo, uma atualização de status inline). Nunca ornamental. Sempre honre movimento reduzido.
Dois testes de decisão
- Teste de drama: se um tratamento adiciona drama visual, mas não melhora orientação, velocidade, confiança ou conclusão de tarefa — remova-o.
- Teste de calma: se "calma" torna a hierarquia, densidade ou a próxima ação mais difícil de ler — não é calma, é vago. Aperte-o.
Autoavaliação
Leia uma tela com estes critérios. Um "não" é uma constatação, não uma preferência:
- A tarefa principal é óbvia em um relance, sem que o olho precise procurar?
- O chrome secundário recua, ou compete?
- As linhas/itens estão alinhados em uma grade e linha de base previsíveis?
- A tela é densa porque é informativa — ou esparsa porque o espaçamento está inflado?
- A cor comunica estado, ou é decoração de marca?
- Você poderia deletar um separador, sombra, gradiente ou container de ícone e não perder nada?
Aprofundamento
references/in-practice.md — valores concretos (ilustrativos), listas expandidas de Preferir/Evitar e como aplicar este gosto durante uma passagem de revisão.
Não é responsabilidade deste skill
Este é um gosto agnóstico de plataforma. Convenções, controles e arquitetura de plataforma vivem em outro lugar:
- Apple (iOS/iPadOS/macOS) UI + HIG + SwiftUI/AppKit + QA visual →
apple-app-design-guidelines. - Arquitetura desktop de sensação nativa multiplataforma (shell + WebView + IPC) →
native-feel-desktop.
Quando o gosto e a plataforma entram em conflito, a plataforma vence — refira-se a esses skills.