Você é um diretor de arte sênior especializado em sistemas de identidade visual para projetos autorais digitais.

Com base exclusivamente no briefing abaixo, crie a identidade visual do projeto e entregue um kit de marca: um único artifact HTML interativo que funciona como brand book e também como lugar de onde a pessoa baixa os arquivos da marca e as primeiras peças prontas, sem precisar de outro programa.

A identidade deve traduzir o posicionamento, o público e as sensações descritas no briefing. Não escolha elementos apenas por tendência estética. Todas as decisões visuais precisam pertencer ao mesmo sistema e funcionar em conjunto.

Não faça perguntas intermediárias. Quando alguma informação não tiver sido fornecida, tome uma decisão conservadora e registre brevemente a escolha no kit. Não invente dados pessoais, comerciais ou de contato.

## BRIEFING DO PROJETO

1. Nome do projeto: [escreva aqui]

2. O que você faz e para quem, em uma frase: [escreva aqui]

3. Quem é a pessoa que mais precisa do que você oferece? Descreva como se fosse uma amiga que está travada em algo específico: [escreva aqui]

4. Qual transformação, resultado ou mudança seu projeto oferece: [escreva aqui]

5. Como você quer que as pessoas se sintam ao encontrar sua marca? Escolha três palavras e, se puder, explique brevemente o que elas significam para você: [escreva aqui]

6. Referência visual que você admira (site, marca, perfil, revista ou estilo). Descreva o que especificamente atrai você nessa referência: [escreva aqui]

7. O que você definitivamente não quer que sua marca pareça: [escreva aqui]

8. Preferência de cor ou paleta que já utiliza, incluindo códigos HEX se tiver. Informe também cores que deseja evitar: [escreva aqui]

9. Preferência de tipografia, se tiver (com serifa, sem serifa, manuscrita apenas como detalhe ou uma combinação). Diga também o que você quer evitar: [escreva aqui]

10. Informações que podem aparecer nas peças: nome, cargo, site, email e perfil principal. Se não quiser informar algum dado, escreva "não incluir": [escreva aqui]

## O QUE O KIT CONTÉM

O artifact tem sete capítulos, nesta ordem, com navegação entre eles.

### 1. Direção criativa

Uma seção curta com:

- conceito central da identidade;
- relação entre o briefing e as escolhas visuais;
- três princípios que orientam o sistema;
- três características que a identidade deve evitar.

Desenvolva uma única direção visual. Não apresente alternativas.

### 2. Logotipo, com arquivos para baixar

Crie um wordmark tipográfico com o nome exato do projeto e um símbolo ou monograma derivado do nome ou do conceito. Apresente estas versões, todas com a mesma lógica visual:

- principal;
- horizontal e empilhada, quando fizerem sentido;
- monocromática escura;
- monocromática clara;
- símbolo ou monograma sozinho.

Cada versão aparece em SVG inline (com xmlns e viewBox) sobre o fundo em que funciona e tem dois botões:

- "Baixar SVG": salva o arquivo vetorial daquela versão;
- "Baixar PNG": salva a versão em PNG com fundo transparente e 2000 px de largura.

O PNG deve ser desenhado em canvas com a fonte já carregada na página (espere document.fonts.ready). Não gere o PNG convertendo o SVG em imagem, porque a fonte web não acompanha e o logotipo sai com outra letra.

Avise, em uma linha junto aos botões, que o SVG mantém o texto editável e depende de a fonte estar instalada ou disponível no programa em que for aberto, e que o PNG é o arquivo pronto para uso imediato.

Apresente também área de proteção, tamanho mínimo e três exemplos do que não fazer.

### 3. Paleta de cores

No máximo cinco cores, incluindo neutras. Se três ou quatro bastarem, use só essas.

Para cada cor: nome interno, código HEX, função no sistema, proporção aproximada de uso e combinações de fundo e texto recomendadas. Clicar na cor copia o código HEX.

As cores precisam ser distintas entre si e dar contraste suficiente para leitura. Indique quais combinações não devem ser usadas para texto.

### 4. Tipografia

Defina uma fonte de display para títulos, uma de texto para leitura e uma de apoio apenas se houver função clara. Use somente fontes do Google Fonts, carregadas no próprio arquivo.

Para cada fonte: nome, pesos utilizados, função, orientação de uso, fonte alternativa de sistema e o link da fonte no Google Fonts para a pessoa baixar e instalar.

Mostre uma escala com H1, H2, H3, corpo, label e caption, usando textos reais do projeto. Não use fonte decorativa em texto longo.

### 5. Elemento gráfico e direção fotográfica

Crie um padrão, textura, moldura ou forma de apoio coerente com o conceito. Explique de onde foi derivado, quando usar, quando evitar e como se relaciona com o logotipo e a paleta. Ofereça o elemento para baixar em SVG e em PNG.

Inclua a direção fotográfica em texto: clima, luz, enquadramento, temas, tratamento de cor e o que evitar. Não use imagens externas.

### 6. Peças prontas para baixar

Esta é a parte principal do kit. Cada peça é desenhada em um canvas no tamanho real de uso, exibido reduzido na página, e tem um botão "Baixar PNG" que salva o arquivo no tamanho real.

Peças:

1. Foto de perfil com o símbolo, 1080 × 1080;
2. Três modelos de post de Instagram, 1080 × 1350 cada;
3. Story de Instagram, 1080 × 1920;
4. Capa de LinkedIn, 1584 × 396;
5. Cartão de visita, frente e verso, 1050 × 600 cada;
6. Favicon e ícone de app, 32 × 32, 192 × 192 e 512 × 512.

As peças são fixas: não crie campos de texto, formulários nem seletores para editar peças dentro do kit.

Os três modelos de post têm composições diferentes entre si, cada um com um fundo diferente da paleta:

- modelo 1, frase: só um título grande;
- modelo 2, título e apoio: um título e uma frase de apoio;
- modelo 3, convite: um título, uma frase de apoio e uma chamada curta em destaque.

Escreva você os textos das peças, reais e coerentes com o projeto, sempre curtos: título com até seis palavras, frase de apoio com até dezoito palavras, chamada com até quatro palavras.

Regras de composição de todas as peças:

- margens laterais iguais e generosas (nos posts e no story, pelo menos 96 px de cada lado);
- hierarquia clara: um título curto e, quando houver mais texto, o resto desce para o apoio em tamanho menor;
- nos posts e no story, título com pelo menos 64 px e apoio com pelo menos 32 px;
- divida cada peça em faixas que não se cruzam: a área do texto e a área do rodapé de marca. Antes de desenhar, meça a altura do texto. Se ele não couber na área dele, reduza o tamanho da letra e, se ainda assim não couber, encurte o texto. Nenhum texto pode passar por cima do símbolo, do rodapé ou de outro elemento;
- o conjunto fica equilibrado na altura da peça, sem vazio grande embaixo;
- um mesmo rodapé de marca (símbolo e nome ou perfil) nas peças de rede social;
- nenhum elemento existe só para preencher espaço;
- use somente os dados fornecidos no briefing.

Abaixo dos modelos de post, inclua uma linha de orientação: "Para trocar o texto de um modelo, peça ao Claude nesta mesma conversa: diga qual modelo e escreva o novo título e a nova frase de apoio."

Para todo botão de download do kit: depois do clique, mostre também a imagem gerada logo abaixo, com a frase "se o download não começar, clique com o botão direito ou segure o dedo sobre a imagem para salvar".

### 7. Assinatura de email e ficha da marca

Assinatura de email: monte com os dados do briefing, em tabela HTML com estilos inline e fontes de sistema, para funcionar em Gmail e Outlook. Ao lado da assinatura, coloque campos de texto simples já preenchidos com os dados do briefing (nome, cargo, site, email e perfil), para a pessoa corrigir ou trocar qualquer um. A assinatura é atualizada enquanto ela digita, e um campo deixado vazio some da assinatura. Estes são os únicos campos editáveis do kit. Mostre a assinatura renderizada e ofereça dois botões, que copiam sempre a versão atual: "Copiar assinatura" (copia com a formatação, pronta para colar nas configurações do email) e "Copiar código HTML". Explique em duas linhas onde colar. Se a cópia automática falhar, a pessoa deve conseguir selecionar a assinatura renderizada e copiar à mão.

Ficha da marca: um bloco de texto simples que resume a identidade (nome, conceito, cores com HEX e função, fontes com pesos e função, regras de uso, o que evitar e a direção fotográfica), com botão "Copiar ficha". Explique em uma linha que esse texto serve para colar em qualquer conversa futura com uma inteligência artificial ou enviar a quem for produzir peças, para que tudo saia dentro da identidade.

Rodapé do kit: feche a página com um rodapé discreto, em texto pequeno, com esta frase exata e o endereço como link: "Identidade criada com o Prompt de Identidade Visual de Chris Oliveiras. Para criar o conteúdo que vai usar essa identidade toda semana, conheça o Brand to Content: https://chrisoliveiras.me/brandtocontent/". Não altere essa frase e não a repita em outro lugar do kit.

## ESTRUTURA TÉCNICA

Entregue um único arquivo HTML completo, começando pela declaração DOCTYPE, que abre direto no navegador.

- Todo o CSS e o JavaScript ficam dentro do próprio arquivo, sem frameworks nem bibliotecas externas. A única dependência externa permitida são as fontes do Google Fonts.
- Defina no :root variáveis CSS para cores, famílias tipográficas, espaçamentos e raios. Guarde os mesmos valores em um único objeto JavaScript, usado por todos os desenhos em canvas. Nenhum HEX ou nome de fonte repetido solto pelo código.
- Escreva uma única função de desenho por tipo de peça e uma única função de download, reutilizadas em todo o kit. Mantenha o código enxuto.
- Só desenhe em canvas depois que as fontes carregarem.
- Todo id do HTML é único na página. Os canvas das peças usam um prefixo próprio, diferente do usado nos capítulos e na navegação (se os capítulos usam "c1" a "c7", os canvas não podem usar "c1", "c2" e assim por diante).
- Preencha a assinatura de email e a ficha da marca antes de desenhar as peças, e desenhe cada peça dentro de um try/catch próprio, para que um erro em uma peça não deixe as outras em branco.
- Não use localStorage nem sessionStorage.
- Estética editorial, com espaço em branco. Responsivo em desktop, tablet e celular.
- Copy real em português brasileiro.
- Organize o código em seções identificadas com comentários.

Priorize que os downloads funcionem e que as peças saiam bem compostas. Se for preciso escolher, simplifique a decoração da página, nunca as peças.

## RESTRIÇÕES

- Não invente informações pessoais, comerciais ou de contato.
- Não altere nem corrija o nome informado no briefing.
- Não crie mais de uma direção visual.
- Não use lâmpadas, foguetes, engrenagens, cérebros ou mãos dadas.
- Não use gradientes coloridos genéricos.
- Não use lorem ipsum.
- Não use linguagem motivacional no copy.
- Não use sombras, formas ou efeitos apenas para preencher espaço.
- Não reproduza nem imite o logotipo de uma referência citada.
- Não dependa de imagens externas.
- Não sacrifique legibilidade em nome da estética.
- A identidade deve parecer específica para este projeto, não um template que poderia pertencer a qualquer marca.
- A marca deve parecer que existe de verdade.

Antes de concluir, verifique silenciosamente:

- se os sete capítulos foram incluídos;
- se os dados do projeto estão corretos;
- se cada botão de download gera um arquivo com o nome do projeto e a versão no nome;
- se os PNGs saem com a fonte certa, e não com uma fonte substituta;
- se em nenhuma peça o texto é cortado ou passa por cima do símbolo, do rodapé ou de outro elemento;
- se a assinatura de email é atualizada ao editar os campos;
- se todas as peças usam as mesmas cores e fontes declaradas;
- se a assinatura de email usa apenas dados do briefing;
- se o rodapé do kit traz a frase indicada, sem alterações;
- se nenhum id se repete na página;
- se todas as peças aparecem desenhadas, nenhuma em branco;
- se o HTML está completo.

Entregue somente o artifact HTML final. Depois dele, escreva no máximo três linhas dizendo por onde começar: baixar o logotipo, baixar as peças e copiar a assinatura de email.