> For the complete documentation index, see [llms.txt](https://docs.airops.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airops.com/docs/pt/contexto/brand-kit/visual-guidelines.md). # Diretrizes Visuais Defina regras visuais e modelos de casos de uso no seu Brand Kit As Diretrizes Visuais estruturam as cores, tipografia, logótipos e regras visuais da sua marca para que os recursos gerados por IA permaneçam alinhados com a marca. Usando o Brand Kit MCP, pode configurar a sua identidade visual (preenchendo-a, por exemplo, via Claude) e recuperá-la com igual facilidade, para que cada resultado se baseie não só no que dizer, mas em como o apresentar. O separador Diretrizes Visuais está organizado em **Logótipos**, **Cores**, **Tipografia**, e visual **modelos de casos de utilização**. Os modelos mantêm juntas as instruções e os exemplos para um determinado tipo de recurso, em vez de armazenar todas as imagens de referência numa única coleção plana. *** ## Casos de utilização As Diretrizes Visuais podem ser lidas e escritas via MCP, pelo que qualquer ferramenta de IA ligada pode produzir resultados visuais alinhados com a marca. Eis alguns exemplos. **Gere relatórios e páginas únicas alinhados com a marca.** Uma ferramenta de IA ligada via MCP obtém as suas cores exatas, tipos de letra, escala tipográfica e regras do logótipo e depois aplica-os ao gerar um relatório, uma página única ou um resumo de dados. Os relatórios de desempenho de AEO, por exemplo, podem ficar totalmente com a marca já de origem. **Produza visualizações de dados com a paleta da sua marca.** Quando a paleta de cores dos seus gráficos, as regras de utilização de cores e o modelo de Visualização de Dados estão armazenados nas Diretrizes Visuais, um agente de IA pode recuperá-los para renderizar gráficos, diagramas e painéis que correspondam à sua marca. Preenchimentos planos, cores de destaque específicas, tipos de letra corretos nos rótulos dos eixos. **Crie apresentações que pareçam da sua marca.** O Claude ou outra ferramenta ligada ao MCP pode recuperar a sua escala tipográfica completa, variantes do logótipo e paletas de cores para gerar diapositivos de apresentação que sigam a sua identidade visual. **Aplique a direção criativa certa a cada recurso.** Uma Imagem Principal pode pedir arte editorial expressiva, enquanto um Cartão de Citação pode especificar uma composição contida e a colocação exata do logótipo. Cada caso de utilização traz as suas próprias instruções e exemplos, pelo que a orientação de um tipo de recurso não é aplicada indiscriminadamente a outro. *** ## Como Configurar as Diretrizes Visuais Em vez de introduzir manualmente cada cor, tipo de letra e regra, **pode usar o Claude via MCP para ler as suas diretrizes de marca existentes**, seja um PDF, uma apresentação ou qualquer outro documento, e escrever os campos estruturados diretamente no seu Brand Kit. Esta é a forma mais rápida de preencher as Diretrizes Visuais. Também pode adicionar campos manualmente através do separador Diretrizes Visuais: 1. Aceda ao **Diretrizes Visuais** separador no seu Brand Kit 2. Em **Logótipos**, adicione variantes com ficheiros de logótipo, cores de fundo e instruções de utilização. Defina tamanhos e regras de utilização do logótipo. 3. Em **Cores**, crie paletas com grupos nomeados e cores individuais. Adicione regras de utilização de cores. 4. Em **Tipografia**, registe tipos de letra com contexto de utilização e carregamentos de ficheiros de tipos de letra. Defina a sua escala tipográfica. Adicione regras de utilização da tipografia. 5. Crie modelos de casos de utilização como **Imagem Principal**, **Visualização de Dados**, e **Cartão de Citação**. Adicione instruções e exemplos de referência a cada modelo. 6. Guarde as suas alterações > **Dica**: Pode preencher as Diretrizes Visuais via MCP a partir das suas diretrizes de marca ou recursos visuais. [Saiba mais sobre o Brand Kit MCP →](https://docs.airops.com/mcp/tools) *** ## Exemplo Uma empresa poderia configurar as suas Diretrizes Visuais assim: **Logótipos:** Quatro variantes para diferentes superfícies (claro, escuro, verde floresta, verde néon). Vários níveis de tamanho, de grande (secções principais) até ao mínimo (rodapés e favicons). Regras que abrangem área de proteção, sem alongamento e combinação com o fundo. **Cores:** Cinco paletas que abrangem a marca principal, hierarquia de texto, traços, modo escuro e uma paleta dedicada a gráficos. Regras que impõem cantos retos em todo o lado e preenchimentos planos para gráficos. **Tipografia:** Três tipos de letra com ficheiros de fonte alojados. Um tipo de letra com serifa para títulos, um sem serifa para o corpo, um monoespaçado para rótulos. Uma escala tipográfica completa de Display até Caption. Regras que restringem a serifa aos títulos e exigem monoespaçado em maiúsculas para rótulos. **Modelos de casos de utilização:** Um modelo de Imagem Principal com orientação para ilustração editorial e referências de landing page; um modelo de Visualização de Dados com exemplos de gráficos e regras de composição; e um modelo de Cartão de Citação com orientação sobre tipografia, atribuição e colocação do logótipo. *** ## Detalhes da secção ### Logótipos **Variantes do logótipo** Defina diferentes versões do seu logótipo para diferentes contextos de fundo. | Campo | Descrição | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **Nome** | Um nome descritivo para esta variante (por exemplo, "Cor Total em Branco", "Branco Invertido em Quase Preto"). | | **Cor de fundo** | A cor hexadecimal para a qual esta variante foi concebida (por exemplo, `#ffffff`, `#002910`). | | **Instruções de utilização** | Quando e como utilizar esta variante. Inclua regras de área de proteção, restrições e lógica de combinação com o fundo. | | **Ficheiro do logótipo** | Carregue a imagem do seu logótipo (SVG, PNG, JPG, GIF ou WebP). | **Tamanhos do logótipo** Defina os tamanhos de renderização permitidos para que as ferramentas de IA nunca renderizem o seu logótipo demasiado pequeno ou demasiado grande. | Campo | Descrição | | ---------------------------- | -------------------------------------------------------------------------------- | | **Nome** | Um rótulo para este nível de tamanho (por exemplo, "Grande", "Mínimo"). | | **Largura** | Largura em píxeis (opcional se a altura estiver definida). | | **Altura** | Altura em píxeis (opcional se a largura estiver definida). | | **Instruções de utilização** | Onde este tamanho deve ser usado (por exemplo, "secções principais", "rodapés"). | **Regras de utilização do logótipo** Regras em texto livre que regem o tratamento do logótipo. | Campo | Descrição | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Regra** | O texto da regra (por exemplo, "A área mínima de proteção é igual à altura do A em todos os lados", "Nunca estique, rode ou altere a cor do logótipo"). | *** ### Cores **Paletas de cores** Agrupe as cores da sua marca em paletas nomeadas. Cada paleta contém cores individuais com valores hexadecimais e instruções de utilização. Pode criar várias paletas para separar aspetos, por exemplo: Principal, Texto, Traços, Modo Escuro e Gráficos. | Campo | Descrição | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | **Nome da paleta** | Um nome para este grupo de cores (por exemplo, "Principal", "Gráficos"). | | **Nome da cor** | Um nome descritivo para cada cor (por exemplo, "Verde de interação", "Texto secundário"). | | **Valor da cor** | O valor hexadecimal (por exemplo, `#00ff64`). | | **Instruções de utilização** | Quando e onde utilizar esta cor (por exemplo, "estados de passagem do rato e destaques interativos", "legendas e metadados"). | **Regras de utilização das cores** Regras em texto livre que regem a utilização das cores. | Campo | Descrição | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Regra** | O texto da regra (por exemplo, "Todas as superfícies grandes devem usar verde-escuro #002910", "Apenas cantos retos, border-radius: 0", "Visualização de dados: apenas preenchimentos planos, sem gradientes"). | *** ### Tipografia **Tipos de letra** Registe os tipos de letra que a sua marca utiliza. | Campo | Descrição | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | **Nome** | O nome do tipo de letra exatamente como deve ser referenciado (por exemplo, "Saans", "Serrif VF"). | | **Instruções de utilização** | Quais os contextos a que este tipo de letra se aplica, tipos de letra de recurso e substitutos específicos da plataforma. | | **Ligação do Google Fonts** | Um URL do Google Fonts, se o tipo de letra estiver alojado aí. | | **Ficheiro do tipo de letra** | Carregue um ficheiro de tipo de letra personalizado (por exemplo, .woff2). Os agentes podem carregá-los através de @font-face. | **Escala tipográfica** Defina a sua escala tipográfica completa associando configurações específicas de tamanho, peso e altura de linha a um tipo de letra. | Campo | Descrição | | ---------------------------- | --------------------------------------------------------------------------------------- | | **Tipo de letra** | A que tipo de letra registado pertence este tamanho de tipo. | | **Nome** | Um rótulo para este passo na escala (por exemplo, "Display", "H1", "Corpo", "Legenda"). | | **Peso** | Peso do tipo de letra (por exemplo, "400", "600"). | | **Tamanho** | Tamanho do tipo de letra em píxeis. | | **Altura da linha** | Altura da linha em píxeis. | | **Instruções de utilização** | Onde este tamanho de texto deve ser aplicado. | **Regras de utilização da tipografia** Regras em texto livre que regem o tratamento tipográfico. | Campo | Descrição | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Regra** | O texto da regra (por exemplo, "Serrif VF é apenas para títulos editoriais grandes", "Os rótulos monoespaçados devem estar sempre em maiúsculas, 11-12px, peso 500"). | *** ### Modelos de casos de utilização Crie um modelo separado para cada tipo de recurso visual que a sua equipa produz. Cada caso de utilização traz as suas próprias instruções e exemplos, pelo que uma ferramenta de IA pode recuperar orientação que corresponda ao resultado solicitado em vez de interpretar um despejo plano de imagens não relacionadas. Os modelos comuns incluem: * **Imagem Principal:** Composição, proporção, tratamento do tema, estilo de ilustração ou fotografia e exemplos de arte principal bem-sucedida. * **Visualização de Dados:** Paleta de gráficos, rotulagem, tratamento da grelha e dos eixos, estilo das anotações e exemplos de gráficos alinhados com a marca. * **Cartão de Citação:** Hierarquia tipográfica, colocação da atribuição, tratamento do fundo, colocação do logótipo e exemplos de cartões sociais aprovados. Adicione outros casos de utilização para os recursos que a sua equipa cria, como capturas de ecrã de produto, capas de relatórios ou diapositivos de título de apresentações. Para cada um, forneça: * **Instruções** que descrevem a composição pretendida, o estilo, os elementos obrigatórios e os padrões a evitar. * **Exemplos** que mostram o caso de utilização aplicado com sucesso e dão a uma ferramenta de IA uma referência visual concreta. Use as secções estruturadas Logótipos, Cores e Tipografia para regras que se aplicam a todos os recursos. Mantenha as instruções dos modelos focadas no que é único nesse caso de utilização visual. *** ## Perguntas frequentes **Como acedo às Diretrizes Visuais nas minhas ferramentas de IA?** As Diretrizes Visuais estão disponíveis através do Brand Kit MCP. Ligue-o ao Claude, Cursor ou a qualquer ferramenta compatível com MCP para ler e escrever programaticamente a sua identidade visual. As variáveis Liquid do fluxo de trabalho ainda não estão disponíveis para os campos das Diretrizes Visuais. **Posso preencher as Diretrizes Visuais usando IA?** Sim. Usando o Brand Kit MCP, pode pedir ao Claude para ler o seu PDF de diretrizes de marca existente e escrever os campos estruturados diretamente no seu Brand Kit. **Que casos de utilização é que isto desbloqueia?** Qualquer ferramenta de IA ligada via MCP pode recuperar a sua identidade visual para produzir relatórios, apresentações, páginas únicas e visualizações de dados alinhados com a marca, com as suas cores, tipos de letra e regras exatas. **Qual é a diferença entre as instruções do caso de utilização e as outras orientações estruturadas?** As instruções de um modelo descrevem como produzir um tipo de recurso, como uma Imagem Principal ou um Cartão de Citação. As instruções ao nível do campo explicam quando utilizar um logótipo, cor ou tipo de letra específicos, enquanto as regras de utilização por categoria estabelecem guardrails mais amplos que se aplicam a todos os recursos. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.airops.com/docs/pt/contexto/brand-kit/visual-guidelines.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.