Sistema de Design
As preferências de UI do projeto, aplicadas durante a construção, não depois. Escrever UI sem consultar reference.md quebra a regra de tratamento plano antes que qualquer etapa seja executada; as regras são o contexto em reference.md, carregado primeiro.
Etapas
- Leia as regras, depois a UI existente. Pegue as regras de estilo em reference.md, então identifique o que o codebase já usa — sua fonte, paleta, pacote de ícones e arredondamento já escolhidos. Feito quando: as regras são nomeadas no plano de implementação; cada regra já presente no codebase é correspondida, não atualizada.
- Espaço antes de bordas. Separe elementos com espaços em branco; uma borda é adicionada apenas quando não há mais espaço disponível. Feito quando: cada limite de elemento é renderizado apenas por espaço; bordas existem apenas onde o plano justifica porque o espaçamento foi insuficiente.
- Cor em três faixas. Atribua neutro → 80%, secundário → 20%, destaque → 10% por superfície antes de escrever estilos; um pill ou badge é onde o destaque ocupa seu lugar. Feito quando: os controles e o texto são renderizados em apenas um ou dois tons neutros; o destaque aparece em no máximo um local por visualização.
- Verifique responsividade e legibilidade. Execute a visualização em uma largura de dispositivo móvel antes de declará-la estilizada; texto próximo ao preto ou branco puro se move para tons mais suaves. Feito quando: o layout móvel se mantém sem rolagem horizontal; cada cor de texto é um tom fora dos extremos.
- Adapte os ícones. Detecte a biblioteca de ícones do projeto e reutilize uma unidade dela em todos os lugares onde aparece. Feito quando: um ícone foi escolhido conforme as regras e nenhum novo conjunto de ícones foi introduzido.
Referência
- reference.md — as onze regras de estilo, a divisão de cores e a regra de um único conjunto completo de ícones. Direcione o conhecimento para cá; este arquivo nunca precisa ser adaptado.