Gráficos

04 Grade de planta

A grade de planta vem do desenho técnico. Ela fica visível nas peças e mostra que existe método por trás do que a gente entrega.

Sobre a grade, blocos de cor marcam etapas e guiam o olho. Cada bloco ocupa um ou mais módulos inteiros.

Pense nos blocos como etapas de um projeto: validar, desenhar, construir e publicar.

Evite blocos soltos sem relação com o texto. Em peças com foto em tela cheia, a grade sai: a foto já faz o papel de fundo.

04 Grade e composição

Composições podem ir do simples ao denso. Mantenha a grade constante: misturar módulos de tamanhos aleatórios quebra o ritmo.

Evite grade de tabuleiro e não deixe blocos competirem com o conteúdo.

Use a grade para criar composições flexíveis que continuam sendo da marca.

04 Blocos e cor

Blocos usam cores sólidas da paleta. Nada de transparência, sombra ou degradê dentro do bloco.

Nunca use blocos brancos sobre fundo branco: eles somem. Branco só entra sobre fundo escuro ou foto.

Sobre fundo escuro, o rosa é destaque pontual: no máximo um bloco rosa por peça. Sobre fundo claro, ele assume o papel da turquesa.

Não coloque o logo sobre bloco rosa.

04 Blocos / exemplos de aplicação

Blocos sobre foto e em fundos de cor dão ênfase e conduzem o olho até a mensagem. Quando a foto já tem muita informação, use blocos só nas bordas.

Em documentos, blocos marcam o início de uma seção e o canto de imagens. Isso mantém a hierarquia sem poluir a página. Recortes de papel escaneado podem entrar como colagem, levemente tortos, para marcar um rótulo.

04 Blocos / cases com foto

Cases e depoimentos aparecem em cartões com foto em preto e branco, nome do cliente e etiqueta do setor.

Agrupe de um a seis cartões, conforme o formato. Mais que seis dificulta a leitura.

Use só os fundos aprovados: noturno, azul sinal e turquesa.

04 Marcações

Marcações são círculos, fios e etiquetas que anotam a peça como um revisor anota uma planta. Elas mostram processo e decisões.

Use contorno de 5 px na cor de destaque do fundo: turquesa no escuro, rosa ou azul sinal no claro. Sem preenchimento. A etiqueta sempre fica na ponta do fio.

O amarelo marca-texto, vindo da roda de cores, pode sublinhar uma palavra.

04 Marcações / aplicação

Marcações funcionam bem sobre foto de processo: mãos, telas, esboços e mesas de trabalho. Elas contam o que estava sendo decidido naquele momento.

Use no máximo três marcações por peça. Fotos com fundo limpo ajudam a leitura.

Este estilo é para bastidores, cases e conteúdo de processo. Em comunicação institucional, prefira a peça limpa.

04 Ficha de procedência

A ficha é a assinatura de processo da Squad22. Toda peça mostra de onde veio: número, data, quem fez, onde a IA entrou e qual versão está no ar.

Em 2027, quando qualquer imagem pode ser gerada em segundos, mostrar o processo vira prova de trabalho. A ficha faz isso sem discurso.

Use em todo post, proposta e documento. Ela fica no rodapé, alinhada à margem.

Campos

nº: sequência da peça no ano.
data: mês e ano de publicação.
autor: quem assina o trabalho.
processo: em uma frase, onde a IA ajudou e onde a decisão foi de uma pessoa.
versão: quantas iterações até publicar.

Sempre em minúsculas, Montserrat Bold, 22 px nos posts.

04 Fotografia

A foto da Squad22 tem cara de saída de copiadora: preto e branco, contraste alto, grão aparente.

O que fotografar: gente trabalhando de verdade, mãos, telas, esboços, mesas com papel. Ângulos de cima e luz de monitor funcionam bem.

Evite foto de banco com pessoas posando, aperto de mão, gente apontando para tela vazia e qualquer filtro colorido.

Na peça, aplique saturação zero e contraste entre +25 e +35.

04 Ícones

Os ícones da Squad22 são de traço, com cantos arredondados e espessura constante. Eles explicam e apoiam o conteúdo, nunca enfeitam.

Use sempre os ícones da biblioteca do Figma, pintados com uma cor da paleta. Não desenhe ícone à mão nem use caractere tipográfico no lugar.

Para dar ênfase a um tema, coloque o ícone num bloco de cor: turquesa para sites e produto, azul sinal para sistemas e IA, noturno para marca.