coatdigitalgroup/coastai-skills

Sistema de Grade de Logotipos

Propósito

O Sistema de Grade de Logotipos fornece uma metodologia para organizar e apresentar logotipos de "Prova Social" — como marcas de clientes, parceiros de tecnologia ou menções na mídia. Diferente de galerias de imagens comuns, uma grade de logotipos requer normalização óptica para garantir que logotipos de diferentes proporções (altos, largos, quadrados) e densidades visuais apareçam equilibrados e com "peso" igual. Esta habilidade garante que os sinais secundários de confiança da marca suportem o design principal sem criar desordem visual ou desrespeitar a integridade das marcas externas.

Casos de Uso

• A "Nuvem de Logotipos": Uma fileira horizontal de logotipos de clientes abaixo de uma seção hero.
• A "Barra de Imprensa": Menções na mídia (por exemplo, "Como visto em...") em um rodapé ou barra lateral.
• Diretórios de Integração/Parceiros: Grades mostrando ecossistemas de tecnologia.
• Seções de Patrocínio: Contribuidores de eventos ou projetos na parte inferior de uma página.
• Marquee/Ticker: Rolagens horizontais infinitas de marcas.

Quando NÃO Usar

• Identidade Primária da Marca: Para o design do próprio logotipo do site (use habilidades profissionais de branding/identidade).
• Iconografia: Para pequenos símbolos funcionais de UI (use sistema-de-iconografia).
• Páginas de Listagem de Produtos (PLP): Onde o conteúdo principal é o produto em si, não sua marca.
• Menus de Navegação: Usar logotipos em vez de texto para navegação primária do site.

Entradas

1. Inventário de Ativos: Uma coleção de logotipos em vários formatos (SVG preferido).
2. Regras de Integridade da Marca: Conhecimento de "Espaço Livre" e requisitos de uso de cores para as marcas parceiras.
3. Contexto Pai: A largura da seção e a cor de fundo onde a grade será inserida.
4. Prioridade da Hierarquia Visual: Os logotipos devem ser proeminentes (cores completas) ou sutis (monocromáticos/atenuados)?

Saídas

1. Matriz de Normalização: Regras definidas de caixa delimitadora para logotipos Quadrados, Largos e Altos.
2. Especificação de Tratamento Visual: Regras para cor (Escala de Cinza, Recorte ou Original), opacidade e estados de hover.
3. Projeto de Grade Responsiva: Um plano para contagens de colunas (por exemplo, 2 colunas no mobile, 6 no desktop).
4. Guia de Dimensionamento Óptico: Regras de dimensionamento baseadas em porcentagem específicas para equilibrar o peso visual.

Fluxo de Trabalho

1. Auditar e Padronizar Formatos de Ativos

Colete todos os logotipos e priorize o formato SVG. Se apenas raster (PNG/JPG) estiver disponível, certifique-se de que sejam de alta resolução (pelo menos 2x o tamanho de exibição). Remova o preenchimento desnecessário dos arquivos de origem para garantir que a "caixa delimitadora" reflita com precisão as dimensões do logotipo.

2. Estabelecer o Container de Normalização

Crie um "Container de Normalização" (uma caixa de proporção fixa, geralmente quadrada ou 3:2) para cada logotipo.

• Coloque cada logotipo dentro deste container usando object-fit: contain.
• O Ajuste Óptico: Não preencha simplesmente a caixa. Um logotipo largo deve ocupar mais largura, mas menos altura; um logotipo quadrado deve ocupar menos largura e altura do que seu equivalente largo para manter "densidade de tinta" igual.

3. Definir o Tratamento Visual

Escolha um estilo que equilibre a estética do site com o reconhecimento da marca:

• Atenuado/Monocromático (Padrão): Converta todos os logotipos para uma única cor (geralmente um cinza escuro ou o "recorte" da cor de fundo), normalmente via filter: grayscale(1) mais uma opacity reduzida, ou color-mix() ao trabalhar com máscaras SVG de cor única. Isso evita um "efeito arco-íris" que distrai do CTA principal.
• Revelação no Hover: Mantenha os logotipos atenuados por padrão e revele suas cores originais da marca apenas ao passar o mouse.
• Cores Completas: Use apenas quando os próprios logotipos forem o atrativo principal (por exemplo, uma página de patrocínio de alto perfil).

4. Aplicar Espaçamento e Ritmo

Use o sistema-de-espaçamento-fluido para definir o espaço entre os logotipos:

• Largura da Calha: Garanta "Espaço Livre" suficiente ao redor de cada logotipo para respeitar as diretrizes da marca (geralmente pelo menos 50% da altura do logotipo).
• Alinhamento: Alinhe os containers de normalização em seus eixos centrais (tanto horizontal quanto vertical) para criar uma linha de horizonte estável.

5. Projetar para Reflow Responsivo

Mapeie como a grade se reorganiza para telas menores:

• Desktop: 5–8 logotipos por linha.
• Tablet: 3–4 logotipos por linha.
• Mobile: 2 logotipos por linha (ou uma rolagem horizontal "Marquee" se o espaço for extremamente limitado).
• Redução: Garanta que os logotipos permaneçam legíveis no mobile; se um logotipo se tornar um "borrão", mude para uma versão "Apenas Marca" da identidade dessa marca.

Regras de Decisão

• A "Regra da Densidade de Tinta": Um logotipo muito "pesado" ou sólido (como um círculo preenchido) deve ser dimensionado 10–15% menor do que um logotipo "leve" ou arejado (como uma palavra fina) para parecer igual em peso.
• O Padrão de Escala de Cinza: Sempre comece com logotipos monocromáticos. Adicione cor apenas se o cliente exigir especificamente "Autenticidade da Marca" para todos os parceiros.
• Horizonte Centralizado: Sempre alinhe os logotipos verticalmente ao centro dentro de suas linhas. Alinhar logotipos de alturas diferentes ao topo cria um efeito de "escada" que parece pouco profissional.
• Largura/Altura Máxima: Defina uma max-height para o container de normalização (por exemplo, 40px a 60px) para evitar que qualquer logotipo domine a seção.

Restrições

• Acessibilidade: Cada logotipo deve ter um atributo alt nomeando a empresa (por exemplo, alt="Logotipo da Acme Corp"). Se a seção tiver um título como "Nossos Parceiros", os logotipos podem ser marcados como decorativos (alt="") para evitar redundância.
• Integridade da Marca: Nunca estique ou distorça um logotipo. Nunca altere as proporções internas de um logotipo.
• Responsividade: A grade deve ser fluida. Evite larguras fixas em pixels para toda a grade; use largura 100% com uma restrição de max-width.

Padrões Comuns de Falha

• O "Quadrado Gigante": Um logotipo quadrado ocupando a mesma altura que um logotipo largo, fazendo-o parecer 3x maior.
• Caos de Cores: Misturar logotipos coloridos com diferentes paletas, fazendo o site parecer uma "fazenda de links".
• Preenchimento da Fonte: Deixar diferentes quantidades de "espaço em branco" dentro dos próprios arquivos de logotipo, tornando o alinhamento automatizado impossível.
• Agrupamento Mobile: Tentar encaixar 4 logotipos em uma linha em uma tela mobile, tornando todos ilegíveis.
• Alinhamento em Escada: Alinhar logotipos de alturas diferentes ao topo, criando uma borda inferior irregular e distrativa.

Critérios de Validação

• Logotipos estão opticamente equilibrados (nenhum logotipo parece significativamente mais "pesado").
• Todos os logotipos compartilham um tratamento visual consistente (por exemplo, todos em escala de cinza).
• O alinhamento é centralizado tanto horizontal quanto verticalmente dentro das células.
• Os arquivos de origem são SVGs ou rasters de alta resolução sem preenchimento interno.
• A visualização em mobile evita agrupamento e mantém a legibilidade.
• Acessibilidade: Todos os logotipos têm texto alt apropriado ou marcas decorativas.
• Os requisitos de "Espaço Livre" para cada marca são respeitados.