Um núcleo. Cinco mercados. Uma marca só.

Núcleo inegociável

Logo, tipografia, tokens semânticos, grid, acessibilidade, estados e padrões de conteúdo. Não variam por mercado, campanha ou preferência de time.

Expressão calibrada

Cinco modos ajustam ênfase cromática, densidade e imagem. A adaptação acontece por tom visual — nunca por mudança de marca.

Verificável

Cada decisão tem um valor, um token e um critério de aprovação. Se não é possível checar, não é regra — é opinião.

Como cada componente é documentado

Documentation contract — todo componente da biblioteca cumpre estes doze pontos

Transformar raízes locais, proximidade e conhecimento dos territórios em potência nacional.

A EVO é a marca nacional de tecnologia e telecomunicações que unifica progressivamente as marcas do grupo. Conectividade, infraestrutura e serviços digitais entregues com uma experiência mais humana, acolhedora e desafiadora — nacional em escala, local em atendimento.

A operadora que tem o alcance de uma marca nacional e o conhecimento de quem está no território. Nem provedor regional sem escala, nem gigante distante sem rosto.

Conexão que funciona e gente que atende. Cada ponto de contato precisa provar as duas coisas — infraestrutura confiável e relação próxima.

EVO é evolução em movimento: o marcador de território do símbolo se abre em seta. Escreve-se sempre EVO em texto e sempre em minúsculas no logotipo.

• Direta, com prova ao lado da afirmação.
• Otimista sem ser ingênua.
• Técnica quando o público é técnico.
• Presente: fala do bairro, não do “mercado brasileiro”.

• Uma startup de tecnologia com estética de dashboard escuro e neon.
• Uma estatal: nada de linguagem impessoal e burocrática.
• Uma operadora de promoção: preço gritado, cor saturada, urgência artificial.
• Genérica: “soluções completas para o seu negócio” não diz nada.

Evitar linguagem interna como “B2C”, “B2B”, “B2G”, “B2W” ou “B2S”. A arquitetura de navegação fala a linguagem do cliente:

• Para Você
• Para Empresas
• Corporate
• Governo
• Operadoras, ISPs e OTTs

Os termos B2C/B2S/B2B/B2G/B2W podem existir internamente — em planilha, briefing, ticket, código — sempre como abreviatura entre parênteses depois do nome público: “Para Você (B2C)”. Nunca a sigla sozinha em uma tela ou peça voltada ao cliente.

Normalização de cor aplicada

Os vetores originais vinham com valores próprios, diferentes da paleta da seção 3. Foram alinhados ao token oficial — o logo não pode ser a única peça fora da paleta.

Se a intenção da marca era manter o ciano mais saturado do arquivo original, o ajuste correto é na paleta — não no logo.

Área de respiro

A margem mínima livre em torno do logo equivale à altura do símbolo (×) dividida por dois, em todos os lados. Nada — texto, imagem, borda ou grafismo — invade essa área.

x / 2

Tamanhos mínimos

Abaixo destes limites o contorno interno do símbolo perde definição. Nesses casos, use apenas o símbolo isolado.

Arquitetura de marca durante a transição

Enquanto as marcas do grupo migram para a EVO, o endosso segue o modelo EVO como marca-mãe: o logo EVO ocupa a posição primária e a marca legada aparece em texto, em peso regular, com no máximo 60% da altura do símbolo — nunca como logo secundário lado a lado com peso equivalente.

Proporção obrigatória

60 / 25 / 10 / 5 — a regra que mantém a marca respirável

Combinações recomendadas

Aprovadas para peças, telas e apresentações

• Deixe a base clara dominar. O branco é parte da identidade.
• Use um único acento por composição.
• Escolha o passo da rampa pelo contraste necessário, não pela aparência.
• Reserve Coral, Gold e Aqua para o que precisa de atenção real.

• Gradientes vibrantes de fundo ou cor nova fora da paleta.
• Coral e Gold juntos com peso equivalente — competem entre si.
• Cyan 400 em texto de interface.
• Cor como única portadora de significado (ver Acessibilidade).

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?
  family=Figtree:wght@400;500;600;700;800
  &family=JetBrains+Mono:wght@400;500;700&display=swap">

--font-text: "Figtree", "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;

Licença e distribuição

Medida de linha

Mínimos por meio

Ênfase cromática no título

Assinatura editorial da EVO: uma palavra do título em cor, nunca mais de uma.

• Um nível de hierarquia por vez: display → h2 → body, sem saltos duplos.
• text-wrap: balance em títulos, pretty em parágrafos.
• Números tabulares em qualquer coluna que se compare.
• Peso para criar ênfase antes de cor ou caixa alta.

• Itálico para ênfase — use peso 600.
• Caixa alta em frases; só em eyebrow e rótulo curto.
• Sublinhado fora de link.
• Terceira família tipográfica em qualquer peça.

Grid de 12 colunas

Breakpoints

Margens de página

Raio de canto

• Sempre como apoio, nunca competindo com o conteúdo.
• Preferir baixa opacidade em fundos.
• Usar acentos coral, gold e aqua com parcimônia.
• Manter consistência de espessura e suavidade.
• Priorizar composições leves e respiráveis.

Ícone dentro de círculo branco sobre fundo de acento sutil. Tamanho 24 ou 26, nunca maior que a altura de duas linhas do texto.

Em navegação o ícone é 20px, monocromático em fg-muted, e nunca aparece sem rótulo.

• Cor fiel: pele com tom natural, branco neutro, sem viés azul forçado.
• Ponto de respiro no quadro para o texto entrar sem competir.
• Proporções fixas: 16:9 e 3:2 em web, 4:5 e 1:1 em social, 21:9 em banner.
• Alt text descritivo em toda foto que carrega informação.

• Duotone, filtro azul, HDR ou saturação puxada.
• Pessoa de terno apontando para gráfico flutuante.
• Foto atrás de texto corrido — só atrás de título.
• Imagem gerada por IA em peça institucional ou em prova de serviço.
• Foto de baixa resolução ampliada para preencher espaço.

Anatomia

• Verbo no infinitivo + objeto: “Assinar plano”, “Ver fatura”.
• Uma ação primária por tela ou por card.
• Manter a mesma ordem: primária à esquerda, secundária depois.

• “Clique aqui”, “Saiba mais” sem objeto, ou rótulo com mais de 4 palavras.
• Dois botões primários lado a lado.
• Remover o anel de foco — nunca outline:none sem substituto.

Card de conteúdo

Ícone, título, texto de apoio e no máximo uma ação. Elevação 1 em repouso, 3 em hover se for clicável.

• Ideal para casa conectada
• Streaming em 4K
• Suporte prioritário

Estado vazio

Sempre com causa, consequência e próximo passo. Nunca só uma ilustração.

Confirmação destrutiva

Consequência explícita no corpo, verbo real no botão, ação segura em primeiro lugar na ordem de foco.

Ordem categórica

Máximo 5 séries por gráfico. Acima disso, agrupe o resto em “Outros” com neutral-300.

Composição

Rosca só com 3 a 5 fatias e valor sempre escrito. Nunca pizza 3D, nunca fatia destacada.

Série temporal

Duas séries no máximo sem eixo secundário. Ponto marcado só quando o valor é citado no texto.

Indicador operacional

• Eixo Y começando em zero em qualquer gráfico de barras.
• Unidade no rótulo do eixo, não repetida em cada valor.
• Números tabulares e separador decimal brasileiro.
• Rótulo direto na série quando houver espaço — melhor que legenda.
• Descrição textual via aria-label em todo gráfico.

• Gradiente em barra ou área — preenchimento sempre sólido.
• Sombra, 3D, perspectiva ou rotação.
• Cor de marca fora da ordem categórica só porque “ficou melhor”.
• Vermelho e verde como único diferenciador — inclua forma ou rótulo.
• Truncar o eixo para exagerar variação.

{{ m.headline }}

{{ m.support }}

Os cinco modos em uma tabela

Referência rápida para quem precisa decidir em minutos

Próxima, não íntima

Trate por “você”. Fale como alguém que conhece o bairro do cliente, não como alguém que forçou intimidade.

Clara antes de criativa

Frase curta, voz ativa, uma ideia por frase. Nenhuma sigla nova sem explicação na primeira aparição.

Concreta, com prova

Número, prazo e condição no lugar de superlativo. “Instalação em até 48h” vence “instalação super-rápida”.

Responsável no erro

A EVO assume o problema, explica o impacto e dá o próximo passo. Nunca culpa o cliente nem o sistema.

Vocabulário EVO

Formatação em pt-BR

Tom por situação

Regras específicas de mobile

Tom por canal

• Texto legível sem áudio e sem clicar em “ver mais”.
• Uma ideia por peça, com o logo sempre no mesmo canto.
• Legenda e alt text em todo post com imagem ou vídeo.
• Contraste 4.5:1 mesmo em peça decorativa — o feed é lido no sol.

• Meme de trend sem relação com serviço ou território.
• Selo de “imperdível”, contagem regressiva ou seta chamativa.
• Print de conversa de cliente, mesmo anonimizado.
• Preço sem a condição completa que aparece no site.
• Texto ocupando mais de 40% da área da peça.

Hierarquia de assunto

Máximo 55 caracteres. Sem emoji, sem caixa alta, sem “urgente” quando não é.

• Uma ação primária por e-mail, acima da primeira dobra.
• Versão em texto puro equivalente, sempre.
• alt em toda imagem — muitos clientes bloqueiam por padrão.
• Preheader escrito, não herdado da primeira linha do corpo.

• E-mail inteiro como uma imagem única.
• Oferta comercial dentro de e-mail de incidente ou de cobrança.
• Fundo Navy no corpo inteiro — quebra em modo escuro de vários clientes.
• Link encurtado ou domínio que não seja evo.digital.

Uniforme e credencial

Materiais e acabamento

• Contorno interno do símbolo abaixo de 40cm — vira ruído.
• Fachada inteiramente Navy: quebra a proporção de base clara.
• Onda aplicada sobre janela, porta ou informação de horário.
• Grafismo em piso ou em superfície que recebe sujeira e desgaste.
• Sinalização de emergência com cores da marca — ela segue a norma, não o brandbook.

Mínimo para qualquer texto abaixo de 24px ou abaixo de 19px em peso 700.

Títulos, bordas de campo, ícones funcionais e estados de foco.

Área mínima tocável, com 8px de separação entre alvos adjacentes.

Visível em todos os elementos interativos, com offset de 2px. Nunca removido.

Nunca só cor

Status, erro e sucesso sempre carregam ícone e texto além da cor. Cerca de 8% dos homens têm alguma deficiência de visão de cores.

Checklist por entrega

Valores crus da marca. Nunca usados direto na UI.

Descrevem intenção, não aparência. É onde tema e modo agem.

Só quando o componente tem uma decisão própria a expressar.

Existe em um projeto só. Pode mudar sem aviso. Não use em produção.

Dois projetos em uso, documentação parcial. Mudanças anunciadas com uma sprint de antecedência.

Contrato de 12 pontos completo, acessibilidade auditada, código e Figma sincronizados.

Substituto indicado e prazo de remoção publicado. Mínimo de dois trimestres de convivência.

Versionamento

Como propor uma mudança

1. Mostre o problema com dois casos reais de produto, não com uma preferência.
2. Verifique se um componente existente resolve com uma variante nova.
3. Traga proposta em Figma usando tokens existentes.
4. Documente os 12 pontos do contrato antes do merge.
5. Aprovação: um par de design + um de engenharia + guardião do sistema.