Padrão de Design

O que Padrão de Design faz?

Use esta habilidade sempre que criar, editar, dar briefing ou revisar um visual: post ou carrossel para redes sociais, panfleto, cartaz, convite, logotipo ou sistema de marca, apresentação, infográfico ou gráfico, vídeo ou peça de motion design, arquivo para impressão, tela web ou aplicativo, ou imagem feita com gerador de imagens de IA (ChatGPT, Gemini, Midjourney, Flux, Firefly e outros).

O guia completo, com fontes de pesquisa, está em references/. Leia este arquivo primeiro, depois abra apenas os arquivos de referência que a tarefa precisar (índice abaixo).

Padrão central

Clareza primeiro, hierarquia em segundo, consistência em terceiro. A estética serve à mensagem e nunca a esconde.

Quando as regras entrarem em conflito, decida nesta ordem:

1. Verdade e legalidade
2. Legibilidade e acessibilidade
3. Hierarquia e mensagem
4. Consistência da marca
5. Preferência estética

Quando as diretrizes da marca de um cliente entrarem em conflito com este padrão, a diretriz da marca vence em identidade (cor, tipo, logotipo) e este padrão vence em legibilidade, precisão e acessibilidade.

Fluxo de trabalho para cada tarefa de design

1. Reformule o briefing em uma frase: objetivo, público, formato e tamanho, mensagem única, chamada para ação. Se não conseguir, pergunte antes de projetar.
2. Obtenha o texto exato. Use apenas o texto fornecido, escrito exatamente. Use os termos do próprio público (para trabalho imobiliário na Nigéria: "tenancy agreement", não "lease").
3. Escolha o formato e a tela a partir de references/11-platform-specs.md. Padrão para post em feed de rede social: 1080 x 1350 px (4:5). Vídeo vertical: 1080 x 1920 px, com todo o conteúdo essencial dentro de uma área segura centralizada de 900 x 1400 px.
4. Construa em uma grade com escala de espaçamento de 8 px e margens de pelo menos 64 px em uma tela de 1080 px.
5. Defina um ponto focal e uma ordem de leitura clara: primeiro, segundo e terceiro.
6. Aplique as regras de tipo e cor (mínimos abaixo).
7. Se usar um gerador de imagens de IA, siga as salvaguardas de IA abaixo e references/17-ai-guardrails.md.
8. Execute a verificação de qualidade abaixo, mais references/20-quality-control.md, no arquivo exportado antes de apresentá-lo.

Mínimos inegociáveis (DEVE)

• Contraste: texto do corpo pelo menos 4,5:1 contra seu fundo; texto grande (24 px ou mais, ou 18,5 px em negrito) pelo menos 3:1; ícones e partes de gráficos pelo menos 3:1 (WCAG 2.2 AA).
• Tamanho do texto em um gráfico social de 1080 px de largura: título 60 px ou mais, corpo 32 px ou mais, nota de rodapé 24 px ou mais, no máximo cerca de 30 a 40 palavras por gráfico. Texto do corpo na web 16 px ou mais. Corpo impresso 9 a 12 pt.
• Se o texto não couber, corte o texto, nunca o tamanho.
• Uma mensagem principal e uma chamada para ação principal.
• Nunca transmita significado apenas pela cor (cerca de 1 em cada 20 homens tem deficiência de visão de cores).
• Áreas seguras: nada importante nos 5% externos da tela ou sob sobreposições da plataforma.
• Precisão: cada palavra, número, nome, data, preço e detalhe de contato verificado letra por letra com a fonte.
• Direitos: apenas imagens, fontes e músicas licenciadas; consentimento de pessoas identificáveis; sem emblemas nacionais (como um brasão) em trabalhos comerciais sem autorização.
• Carrosséis e peças de várias páginas: um layout idêntico em cada página. Varie o layout entre posts, não dentro de um conjunto.
• Texto alternativo em toda imagem informativa e legendas em todo vídeo.

Padrões de tipografia

• Uma ou duas famílias tipográficas. Uma escala tipográfica fixa com uma proporção clara entre os níveis (título pelo menos 2,5 vezes o tamanho do corpo em gráficos sociais).
• Entrelinha do corpo de 1,4 a 1,6; entrelinha do título de 1,0 a 1,2.
• Comprimento da linha: 45 a 75 caracteres para texto do corpo, 30 a 50 em mobile e redes sociais.
• Maiúsculas apenas para rótulos curtos, com espaçamento entre caracteres de +5% a +12%.
• Nenhuma palavra sozinha na última linha de um título. Quebre linhas de exibição por significado.
• Aspas curvas, travessão en dash para intervalos (₦12–18m), e verifique se a fonte contém todos os glifos necessários (₦, letras iorubá, igbo e haúça).

Padrões de cor

• Aproximadamente 60% dominante, 30% secundária, 10% ou menos de acento. Um acento saturado; neutralize o resto.
• Escolha harmonias a partir do círculo cromático: monocromática, análoga, complementar, complementar dividida, tríade ou tétrade. Veja references/05-colour.md e as imagens em assets/.
• Acentos quentes e brilhantes (coral, dourado, limão, amarelo) funcionam em fundos escuros ou como formas grandes, não como texto pequeno sobre branco.
• Projete para telas em sRGB. Impressão no perfil CMYK da impressora, com Pantone para cores exatas da marca.

Salvaguardas para imagens de IA (resumo)

• Trate toda imagem de IA como um rascunho que pode conter fatos inventados, caracteres mal escritos ou mal formados, logotipos, selos ou brasões fantasma, desvio de layout ou um rosto alterado.
• Faça o briefing com um prompt completo: propósito, tamanho, layout, paleta (HEX), estilo de tipo, o texto exato entre aspas, assunto da imagem e restrições ("sem logotipos, sem brasões, sem marcas d'água, sem texto ou números extras").
• Altere uma coisa por solicitação de edição, e diga "mantenha tudo o resto exatamente igual". Repita a lista de preservação toda vez.
• Prefira gerar a imagem sem texto e definir o tipo em uma ferramenta de design, HTML ou SVG, para que as palavras sejam exatas.
• Antes de apresentar um resultado de IA, verifique: texto, fatos, marcas, consistência com o mestre aprovado, os mínimos do guia, pessoas, direitos e divulgação (references/17-ai-guardrails.md, seção 17.6). Reporte qualquer incompatibilidade em vez de apresentar a imagem como final.
• Não remova metadados de Credenciais de Conteúdo (C2PA). Divulgue o uso de IA onde um espectador se importaria, especialmente pessoas, lugares e produtos realistas.

Verificação de qualidade antes de apresentar

Revise se alguma destas falhar, independentemente do que mais estiver bom:

1. Uma palavra, número, nome, data, preço ou detalhe de contato errado.
2. Um fato inventado, logotipo, selo, brasão ou marca d'água.
3. Texto abaixo do tamanho mínimo, ou contraste abaixo de 4,5:1 (3:1 para texto grande).
4. Nenhum ponto focal ou ordem de leitura clara.
5. Conteúdo essencial fora da área segura ou cortado por um recorte da plataforma.
6. Significado transmitido apenas pela cor.
7. Direitos não liberados.
8. Paleta fora da marca, uso incorreto de tipo ou logotipo.
9. Divulgação ou aprovação regulatória ausente (parceria paga, realismo de IA, aprovação ARCON para anúncios nigerianos).
10. Layout inconsistente dentro de um carrossel ou peça de várias páginas.

Em seguida, pontue cada categoria em references/20-quality-control.md de 0 a 10; toda categoria deve atingir pelo menos 8.

Índice de referência

Arquivo	Abra quando
references/00-how-to-use.md	Notas de regras (DEVE, DEVERIA, PODE), níveis de evidência, ordem de julgamento
references/01-perception-cognition.md	Explicar por que um design funciona: primeiras impressões, fluência, Gestalt, padrões de varredura
references/02-core-principles.md	Hierarquia, contraste, alinhamento, proximidade, equilíbrio, espaço em branco
references/03-composition-layout-grids.md	Grades, escala de espaçamento, áreas seguras, proporções, recorte, tangências
references/04-typography.md	Escolher fontes, tamanhos por meio, escalas tipográficas, entrelinha, quebras de linha
references/05-colour.md	Paletas, círculo cromático, harmonias, o que combina com o quê, paletas setoriais, pares de contraste, significado de cor na Nigéria
references/06-imagery-icons.md	Escolher, recortar e tratar fotos, ilustração, sistemas de ícones
references/07-information-design-dataviz.md	Gráficos, eixos honestos, infográficos
references/08-copy-content.md	Títulos, orçamento de palavras, chamadas para ação, terminologia, revisão
references/09-brand-identity-logos.md	Sistemas de identidade, design e uso de logotipos, consistência de série
references/10-accessibility.md	Números WCAG 2.2, texto alternativo, segurança de movimento, representação inclusiva
references/11-platform-specs.md	Tamanhos de tela e zonas seguras para Instagram, LinkedIn, TikTok, Reels, Shorts, YouTube, slides, e-mail
references/12-motion-video.md	Estrutura de vídeo curto, legendas, temporização de animação, áudio
references/13-print-production.md	Sangria, resolução, CMYK, limites de tinta, papel, PDF/X
references/14-ui-ux-web.md	Heurísticas de usabilidade, alvos de toque, estados de componentes, padrões enganosos
references/15-cultural-context-nigeria.md	Localização, termos nigerianos, moeda, calendário, símbolos
references/16-legal-ethics.md	Direitos autorais, propriedade de IA, semelhança e privacidade, ARCON, alegações publicitárias
references/17-ai-guardrails.md	Modelo de prompt, disciplina de edição, modos de falha, protocolo de verificação, divulgação
references/18-design-process.md	Briefings, conceitos, crítica, versionamento, teste
references/19-file-delivery.md	Formatos de exportação, compressão, nomeação, entrega
references/20-quality-control.md	Rubrica de pontuação e listas de verificação pré-voo por formato
references/21-glossary-sources.md	Definições e fontes de pesquisa por trás de cada regra
assets/colour_wheel.png	Círculo cromático de 12 matizes com matizes, tons e sombras
assets/colour_harmonies.png	Seis harmonias de cor com amostras de exemplo