Definir a identidade visual
Protocolo operacional
- Plano e progresso: planejar referências, rotas visuais, protótipos e
seleção.
- Fontes de verdade: ler estratégia, voz,
BRAND.md, CHROMATIC.md,
.brandfy/mvp-context.json, .brandfy/asset-brief.md,
.brandfy/interview-summary.md, ativos atuais e
visual-system.md.
- Escopo e idempotência: manter referências com origem e não substituir
ativos aprovados durante a exploração.
- Validação: testar cada rota em aplicações reais, nos modos light e dark e
em tela pequena.
- Resumo final: registrar a direção escolhida, o motivo, os ativos e as
pendências.
Fluxo
- Traduzir atributos estratégicos em forma, composição, densidade, contraste
e materialidade.
- Criar duas ou três rotas visuais distintas, sem imitar concorrentes.
- Definir a cor-base a partir de pesquisa ou preferência declarada, nunca por
gosto do agente: usar cor de referência pesquisada na categoria, cultura ou
concorrência, ou a cor preferida registrada em
preferences na entrevista
(.brandfy/interview.json, ver $brandfy-entrevista). Quando nenhuma das
duas existir, perguntar ao responsável pela marca antes de prosseguir.
- Ajustar essa cor-base tecnicamente pelo círculo cromático: escolher um
esquema de harmonia com
$brandfy-design-tokens
(references/circulo-cromatico.md) e registrar origem, esquema e escolha
em CHROMATIC.md.
- Definir paleta funcional com combinações de fundo, texto, acento, estado e
superfície, a partir das famílias derivadas do círculo cromático.
- Definir tipografia, escala, espaçamento, fotografia, tratamento de imagem,
ilustração, iconografia, grafismos, grid e motion.
- Prototipar as rotas em página web, avatar, peça social e documento.
- Selecionar uma rota e registrar os princípios em
.brandfy/visual-direction.md.
- Encaminhar cores e tipografia para
$brandfy-design-tokens e
$brandfy-tipografia-web.
O sistema visual precisa continuar reconhecível sem o logo. Não depender
somente da cor para comunicar estado ou hierarquia.
Raciocínio do especialista
Traduzir cada atributo estratégico em princípios visuais observáveis, como
contraste, ritmo, proporção, densidade, materialidade e comportamento de
imagem. Uma rota visual precisa explicar ideia, sinais, vantagens, limitações e
condições de uso. Comparar rotas nas mesmas aplicações e com acabamento
equivalente para reduzir viés de apresentação.
1---2name: brandfy-identidade-visual3description: Define o sistema visual da marca além do logo. Use para criar direção de arte, paleta, tipografia, fotografia, ilustração e iconografia.4---56# Definir a identidade visual78## Protocolo operacional910- **Plano e progresso:** planejar referências, rotas visuais, protótipos e11 seleção.12- **Fontes de verdade:** ler estratégia, voz, `BRAND.md`, `CHROMATIC.md`,13 `.brandfy/mvp-context.json`, `.brandfy/asset-brief.md`,14 `.brandfy/interview-summary.md`, ativos atuais e15 [visual-system.md](references/visual-system.md).16- **Escopo e idempotência:** manter referências com origem e não substituir17 ativos aprovados durante a exploração.18- **Validação:** testar cada rota em aplicações reais, nos modos light e dark e19 em tela pequena.20- **Resumo final:** registrar a direção escolhida, o motivo, os ativos e as21 pendências.2223## Fluxo24251. Traduzir atributos estratégicos em forma, composição, densidade, contraste26 e materialidade.272. Criar duas ou três rotas visuais distintas, sem imitar concorrentes.283. Definir a cor-base a partir de pesquisa ou preferência declarada, nunca por29 gosto do agente: usar cor de referência pesquisada na categoria, cultura ou30 concorrência, ou a cor preferida registrada em `preferences` na entrevista31 (`.brandfy/interview.json`, ver `$brandfy-entrevista`). Quando nenhuma das32 duas existir, perguntar ao responsável pela marca antes de prosseguir.334. Ajustar essa cor-base tecnicamente pelo círculo cromático: escolher um34 esquema de harmonia com `$brandfy-design-tokens`35 (`references/circulo-cromatico.md`) e registrar origem, esquema e escolha36 em `CHROMATIC.md`.375. Definir paleta funcional com combinações de fundo, texto, acento, estado e38 superfície, a partir das famílias derivadas do círculo cromático.396. Definir tipografia, escala, espaçamento, fotografia, tratamento de imagem,40 ilustração, iconografia, grafismos, grid e motion.417. Prototipar as rotas em página web, avatar, peça social e documento.428. Selecionar uma rota e registrar os princípios em43 `.brandfy/visual-direction.md`.449. Encaminhar cores e tipografia para `$brandfy-design-tokens` e45 `$brandfy-tipografia-web`.4647O sistema visual precisa continuar reconhecível sem o logo. Não depender48somente da cor para comunicar estado ou hierarquia.4950## Raciocínio do especialista5152Traduzir cada atributo estratégico em princípios visuais observáveis, como53contraste, ritmo, proporção, densidade, materialidade e comportamento de54imagem. Uma rota visual precisa explicar ideia, sinais, vantagens, limitações e55condições de uso. Comparar rotas nas mesmas aplicações e com acabamento56equivalente para reduzir viés de apresentação.