iyuyoung/young-design

Young Design

Crie sites que pareçam jovens, autorais e orientados ao produto, sem se tornarem infantis, decorativos ou genéricos. Trate a qualidade visual e a qualidade da implementação como um sistema único. Adapte a expressão visual ao produto, em vez de aplicar um estilo fixo.

Selecione o modo de tarefa

Escolha um modo antes de trabalhar:

• Direção: defina a linguagem visual, a hierarquia de páginas, os tokens e os componentes representativos.
• Design: crie uma página completa ou mockup com conteúdo realista e intenção responsiva.
• Implementação: traduza uma direção ou referência aprovada em código de produção.
• Refinamento: audite um site existente, identifique as lacunas de maior impacto e melhore-o sem desestabilizar o comportamento.
• Revisão: forneça feedback visual baseado em evidências sem modificar arquivos, a menos que solicitado.

Se o usuário pedir apenas design, não implemente o projeto de produção. Se o usuário pedir para construir ou otimizar o site, leve o trabalho até a verificação.

Estabeleça o contrato de design

Antes de escolher cores ou componentes, determine:

1. Público — quem chega e qual estado emocional eles trazem.
2. Promessa — a única coisa que o primeiro viewport deve deixar claro.
3. Ação primária — o próximo passo mais valioso.
4. Personalidade — três adjetivos úteis e três qualidades a evitar.
5. Restrições — framework, ativos da marca, SEO, desempenho, acessibilidade, impressão ou requisitos de implantação.

Inferir estas informações a partir do repositório, briefing e decisões anteriores, quando possível. Pergunte apenas quando uma resposta ausente alteraria materialmente o design.

Em seguida, defina uma impressão digital de design de 1 a 5 para: calor, ludicidade, tatilidade, densidade, precisão e contraste visual. Registre as pontuações e uma frase explicando a direção resultante. Não dê a produtos não relacionados a mesma impressão digital por padrão.

Use textos de produto realistas e dados representativos. Lorem ipsum, dashboards genéricos e prova social inventada ocultam problemas de hierarquia.

Construa o sistema visual antes da página

Leia references/visual-language.md ao definir ou alterar a aparência. Derive um motivo visual dominante do produto, público ou fluxo de trabalho; papel e colagem são opções, não padrões.

Crie um sistema pequeno e coerente:

• papéis de cor, não um saco de cores;
• tipografia para display, corpo e anotação opcional;
• ritmo de espaçamento e larguras de conteúdo;
• regras de borda, raio, sombra e material;
• linguagem de ícones e ilustrações;
• comportamento de interação e movimento;
• regras de composição para desktop, tablet e mobile.

Use tokens de design ou variáveis compartilhadas. Evite estilizar cada seção como um pôster isolado.

Preserve a distinção entre:

• camada de marca — voz reconhecível, marca, cores, tipografia;
• camada de produto — fluxo de tarefas, controles, estados, feedback;
• camada de conteúdo — hierarquia, escaneabilidade, confiança, texto SEO;
• camada de material — papel, fita adesiva, lápis, textura ou acentos de colagem.

Detalhes de material devem apoiar a hierarquia. Mantenha-os esparsos o suficiente para que o produto permaneça crível e utilizável.

Componha em torno do momento do produto

Não use por padrão um título à esquerda e uma captura de tela de dashboard arbitrária à direita. Identifique o momento que prova que o produto funciona: uma recomendação, prévia, resultado, transformação, planilha, comparação ou próximo passo.

O primeiro viewport geralmente deve conter:

• uma promessa específica;
• um momento de produto legível;
• uma ação primária;
• dicas concisas de confiança ou restrição;
• assimetria ou caráter material suficiente para parecer autoral.

Faça com que seções secundárias respondam a perguntas distintas. Não repita a mesma grade de cartões sob títulos diferentes.

Leia references/component-patterns.md ao escolher padrões de hero, seletor, cartão, ferramenta, diretório ou editorial.

Entregue o artefato correto

Leia references/output-contracts.md e siga o contrato para o modo de tarefa selecionado. Torne as suposições, decisões, intenção responsiva e evidências de verificação explícitas o suficiente para que outro designer ou engenheiro possa continuar o trabalho.

Implemente como um sistema real

Leia references/implementation-playbook.md antes de modificar um repositório ou traduzir uma referência em código.

Ao trabalhar em um projeto existente:

1. Inspecione o framework, rotas, layouts compartilhados, tokens, componentes, testes e ativos gerados.
2. Separe alterações intencionais de código-fonte de saída gerada e ruído de formatação.
3. Preserve contratos de comportamento, URLs, hooks de analytics, seletores de teste, semântica e regras de impressão.
4. Adicione ou revise fundações compartilhadas antes de substituições específicas de página.
5. Implemente componentes reutilizáveis para padrões visuais e comportamentais repetidos.
6. Verifique todos os estados significativos: inicial, selecionado, hover, foco, carregando, vazio, erro, sucesso e, quando aplicável, impressão.
7. Valide em larguras de desktop, tablet e mobile estreito.

Prefira fontes locais ou auto-hospedadas, marcas SVG e uma biblioteca de ícones consistente. Use imagens geradas apenas quando carregarem valor narrativo real. Não compense hierarquia fraca com imagens decorativas.

Refine em ordem de impacto

Quando um site parecer "antigo", "genérico" ou "não parecer com o design", corrija os problemas nesta ordem:

1. caráter da tipografia e hierarquia;
2. composição do primeiro viewport;
3. ritmo de espaçamento e densidade de conteúdo;
4. geometria dos componentes e estados de interação;
5. papéis de cor e contraste;
6. detalhes de material e microdecoração;
7. movimento e polimento.

Não comece adicionando sombras, gradientes, bolhas ou animações. Eles raramente consertam uma composição fraca.

Verifique antes de considerar concluído

Leia references/quality-gates.md para implementação ou revisão final. Leia references/review-rubric.md ao decidir se um resultado está pronto para ser apresentado, enviado ou publicado.

No mínimo, verifique:

• nenhum transbordamento horizontal acidental da página;
• texto de interface visível tem pelo menos 14px, a menos que seja arte não essencial;
• contraste de texto normal atende 4,5:1 e texto grande atende 3:1;
• foco de teclado é claro e controles interativos têm tamanho confortável para toque;
• mobile é recomposto, não apenas reduzido;
• tipo, raios, sombras, ícones e materiais permanecem consistentes;
• o primeiro viewport implementado preserva a hierarquia do design aprovado;
• funcionalidade, estrutura SEO, arquivos gerados, downloads e saída de impressão ainda funcionam;
• verificações de tipo, testes, build e verificações de navegador passam quando o projeto as fornece.

Exija uma pontuação de pelo menos 85/100 sem nenhum bloqueador crítico antes de considerar um resultado pronto para lançamento. Use a pontuação diagnosticamente; não a infle para atingir o limite.

Se a execução do navegador não estiver disponível localmente, declare a limitação ambiental e use o CI do projeto em vez de afirmar verificação visual.

Evite modos de falha do Young Design

Nunca use por padrão:

• gradientes genéricos de startup e cartões de vidro flutuantes;
• uma serifa antiquada como a principal fonte de "personalidade";
• formas de pílula excessivas, raios superdimensionados ou grades uniformes de cartões;
• cores pastel em todo lugar com contraste insuficiente;
• rotações aleatórias, fita adesiva, rabiscos ou texturas de papel em cada elemento;
• metadados e rótulos minúsculos usados para fabricar sofisticação;
• layouts mobile que escondem o valor central do produto ou forçam rolagem horizontal no nível da página;
• reescrever a lógica funcional do produto apenas para acomodar um redesign visual;
• copiar uma referência literalmente em marcas não relacionadas;
• aplicar papel quente, cores pastel ou cartões arredondados quando o domínio exige expressão mais nítida, densa ou técnica.

O resultado deve parecer autoral, útil e atual: amigável sem ser infantil, expressivo sem ser ruidoso e polido sem parecer estéril.