Projetando uma página ou fluxo web
Leia web-craft primeiro. Um DESIGN.md ou sistema de design existente é a autoridade: siga-o, não invente uma nova direção para um produto existente.
1. Direção antes do código (novos produtos e novas grandes superfícies)
Decida e escreva, resumidamente:
| Decisão | Resposta |
|---|---|
| Usuário e tarefa | De quem é a tarefa que esta superfície facilita? |
| Prioridade | O que deve ser visto e feito primeiro? |
| Composição | Fluxo editorial, layout dividido, workspace denso, vitrine de produto ou outro |
| Tipografia | Caractere, escala, comprimento de linha, cobertura de script para cada idioma planejado |
| Material visual | Imagens reais do produto, fotografia, ilustração, diagramas ou baseado em texto |
| Superfície e densidade | Bordas, tom, espaços em branco, densidade de dados, ritmo da página |
| Movimento | Feedback funcional, mais movimento narrativo somente onde o produto precisa |
| Detalhe de assinatura | Um ou dois detalhes consistentes que apoiam a marca |
Referências: a marca existente vem primeiro, depois o que o usuário forneceu. Para uma nova direção, escolha algumas fontes adequadas e diga o que cada uma contribui (densidade, fotografia, ritmo, interação, tipo). Adjetivos como "moderno" ou "limpo" não são uma decisão. Não copie logotipos, texto ou uma composição inteira. Opções para um novo produto devem diferir em composição e prioridade, não apenas na cor. Detalhes: references/direction-and-references.md, references/composition.md, references/typography.md.
2. Tokens
Cor (semântica, claro e escuro), escala tipográfica, espaçamento, raio, elevação e movimento vivem como tokens em um só lugar e mapeiam para o tema do kit. A elevação é limitada: bordas e tom de superfície primeiro, alguns poucos tokens de sombra de baixa opacidade de camada única para camadas flutuantes, superfícies mais claras em vez de sombras no modo escuro e sem box-shadow animado. Detalhes: references/tokens-color-elevation.md.
3. Texto e hierarquia
Cada texto faz um trabalho. Nenhuma sobrancelha acima de um título por padrão (apenas progresso, data, objeto pai ou contexto legal; rótulos de nível como "Premium" tornam-se um selo no recurso). Subtítulos permanecem apenas para escopo, resultado, risco ou um fato concreto. Níveis de título seguem a estrutura, não o tamanho da fonte. Placeholders nunca substituem rótulos. Botões dizem o que acontece. Detalhes: references/copy-hierarchy.md.
4. Estados
Construa uma matriz de estados para toda superfície de dados e formulário: carregamento inicial (skeleton correspondente ao layout, atrasado para evitar flash, estático com movimento reduzido), vazio (primeiro uso vs. sem resultados), erro com repetição e dados mantidos, atualizando, erro de paginação, enviando, sucesso, proibido, não encontrado, offline. Detalhes: references/states.md.
5. Formulários
Valide ao perder o foco (blur), revalide ao alterar depois que um erro aparece, verificações assíncronas com debounce. Ao enviar com erros: foque no primeiro campo inválido, role-o para a visualização abaixo de qualquer cabeçalho fixo, abra a seção ou etapa recolhida que o contém e mostre um resumo de erros em formulários longos. Mensagens dizem o que está errado e como corrigir, ficam ao lado do campo e são vinculadas com aria-describedby. O botão de envio é desabilitado apenas durante o envio. Erros de campo do servidor caem em seus campos com a mesma rolagem e foco. Detalhes: references/forms.md.
6. Movimento
Preencha a matriz de movimento (references/motion-matrix.md) antes de escolher uma biblioteca:
- Botões e links: hover onde hover existe, pressionado, foco-visível, carregando, desabilitado.
- Diálogos, painéis, menus, popovers, toasts: sempre uma animação de entrada e saída (opacidade mais uma pequena escala ou translação, a saída termina antes de desmontar), foco preso e retorno, dispensa. Detalhes:
references/overlays.md. - Listas: inserção, remoção e reordenação são compreensíveis.
- Gráficos: um breve desenho na primeira visualização, transições na alteração de dados, nenhum acima de um tamanho de dados medido, nenhum com movimento reduzido; dicas de ferramentas alcançáveis por teclado e uma alternativa em tabela. Detalhes:
references/charts.md. - Narrativa de marketing: limitada, específica do produto, nunca esconde conteúdo atrás de uma animação.
Duração, suavização e distância vêm de tokens. Nem toda página recebe o mesmo escalonamento de fade-up. Nenhum atraso artificial em formulários ou telas de dados. O movimento reduzido é tratado centralmente e cobre CSS, bibliotecas e vídeo.
7. Responsivo
Os pontos de quebra seguem o conteúdo. Defina o que navegação, filtros, tabelas, ações fixas, diálogos e popovers fazem em uma tela estreita. Verifique 320 px, texto traduzido longo, zoom de 200%, toque e teclado. Um diálogo web não se torna uma bottom sheet do React Native por padrão. Detalhes: references/responsive.md.
8. Verifique o resultado
Olhe para ele em um navegador em larguras mobile e desktop, em ambos os temas e ambos os idiomas, apenas com teclado e com movimento reduzido ativado. Uma captura de tela estática não revisa movimento; interaja com ele.
Quando um kit é reutilizado em produtos muito diferentes, execute o teste de divergência em references/pilot-divergence.md.