Design System
v1.0.0-draft · Julho 2026
Fonte: EVO Brandbook (draft v2)
Design System · v1.0.0-draft

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

Este é o sistema de design da EVO — a tradução operacional do brandbook em tokens, componentes e regras verificáveis. Ele existe para que Para Você, Para Empresas, Corporate, Governo e Operadoras, ISPs e OTTs possam falar com vozes diferentes sem que a marca se fragmente.

Começar pelos fundamentos Tokens para desenvolvimento
9
cores de marca
5
modos de expressão
12
ícones conceituais
2
temas: claro e escuro
AA+
meta de acessibilidade
00 Fundamentos · Foundations

## Sobre este sistema

About this system — how to read, use and extend it

O brandbook define como a EVO se parece. O design system define como a EVO funciona — em produto, em documento, em apresentação e em tela. Ele é derivado diretamente do draft do brandbook e não substitui nenhuma de suas decisões: traduz cada uma delas em valores, componentes e critérios que times de design, conteúdo e engenharia possam aplicar sem interpretar.

### 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

01 Propósito e contexto de uso
02 Anatomia
03 Variantes aprovadas
04 Estados e comportamentos
05 Responsividade
06 Conteúdo e tom de voz
07 Acessibilidade
08 Tokens utilizados
09 Exemplos corretos
10 Aplicações incorretas
11 Código e componente Figma
12 Critérios de alteração e contribuição
01 Fundamentos · Foundations

## Essência da marca

Brand essence — purpose, positioning, attributes, architecture

Todo o resto deste sistema — a cor, o botão, o tom de uma mensagem de erro — existe para sustentar o que está nesta seção. Quando houver dúvida sobre uma decisão de design, o critério é: isso reforça a essência ou apenas decora?

Propósito

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.

Tagline institucional EVO — Conectando o que Vem Depois
Posicionamento

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.

Promessa

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.

O nome

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.

### Atributos de marca

Cada atributo tem uma consequência de design verificável. Sem consequência, é só adjetivo.

Atributo
Significa
Consequência no design
Humana
Gente conversando com gente, não sistema falando com usuário.
Tratamento por “você”. Fotografia de pessoas reais. Erro que assume responsabilidade.
Acolhedora
Espaço para respirar, sem pressão nem letra miúda.
Base clara em 60%. Margens amplas. Preço com condição completa e sem asterisco.
Desafiadora
Questiona o padrão do setor em vez de repeti-lo.
Assinatura editorial com uma palavra em cor. Grafismo de trajetória. Nenhum clichê de “velocidade” genérico.
Territorial
Nacional na escala, local no reconhecimento.
Silhuetas e cenários em baixo contraste. Referência à cidade do cliente antes da referência ao país.
Confiável
Promessa medida, não promessa grande.
Número com fonte e período. SLA visível. Navy como cor de maior peso institucional.
A EVO é

- 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”.

A EVO não é

- 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.

### Arquitetura de marca

Modelo de marca-mãe única. Os mercados não são marcas — são modos de expressão (ver seção 12).

marca-mãe única
EVO
Para Você (B2C)
EVO
Para Empresas (B2S)
EVO
Corporate (B2B)
EVO
Governo (B2G)
EVO
Operadoras, ISPs e OTTs (B2W)
Nomenclatura de produto“EVO” + descritor funcional em português: EVO Fibra, EVO Móvel, EVO Cloud, EVO Data Center. Nunca sub-logotipo próprio.
Linhas comerciaisNomes de tier em inglês são aceitos quando já consolidados: EVO Connect, EVO Business, EVO Enterprise.
Marca legada em transiçãoEndosso por texto, em peso regular, no máximo 60% da altura do símbolo. Nunca logo secundário com peso equivalente.
2.3

### Mercados atendidos

A arquitetura pública organiza o ecossistema em cinco grandes mercados.

1
Para Você (B2C)
Clientes residenciais.
2
Para Empresas (B2S)
Pequenas e médias empresas.
3
Corporate (B2B)
Grandes empresas e operações críticas.
4
Governo (B2G)
Municipal, estadual, federal, empresas públicas e autarquias.
5
Operadoras, ISPs e OTTs (B2W)
Wholesale, carriers, ISPs, OTTs, interconexão, transporte, peering, colocation e serviços internacionais.
2.4

### Princípio de linguagem

Como nomear os mercados em cada lado da marca.

Site e produto público

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

Bastidores e este documento

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.

02 Marca · Brand

## Logo e arquitetura de marca

Logo usage — versions, clear space, minimum sizes, misuse

O símbolo da EVO é um marcador de território que se transforma em movimento. Ele nunca é redesenhado, redistribuído ou recolorido: existem três versões aprovadas e cada uma tem um contexto único de uso.

### Versões aprovadas

Principal · Primary

Navy com contorno interno em Cyan. Uso padrão sobre fundos claros: Cream, White ou Neutral 25.

`evo-logo-primary`
Monocromático · Mono

Navy sólido, contorno vazado. Impressão em uma cor, documentos, fax, gravação, brindes e aplicações de baixa fidelidade.

`evo-logo-mono-navy`
Negativo · Reverse

Branco integral. Sobre Navy, Steel, fotografia escura ou grafismo de fundo escuro. Exige contraste mínimo de 4.5:1 com o fundo.

`evo-logo-white`

### Kit de logo — download

Seis variações, cinco formatos. Clique para baixar. O vetor é sempre a primeira escolha: use PNG só quando o meio não aceitar SVG.

Principal

Navy com contorno em Cyan. Padrão sobre fundo claro.

`evo-logo-primary`
SVG PNG 512 PNG 1024 PNG 2048 WEBP JPG
Monocromático

Navy sólido, contorno vazado. Uma cor, gravação, brinde.

`evo-logo-mono-navy`
SVG PNG 512 PNG 1024 PNG 2048
Negativo

Branco integral. Sobre Navy, Steel ou foto escura.

`evo-logo-white`
SVG PNG 512 PNG 1024 PNG 2048
Símbolo · colorido

Favicon, app icon, avatar. A partir de 24px.

`evo-symbol`
SVG ICO 32 64 180 512 1024 WEBP
Símbolo · monocromático

Selo, marca d'água, aplicação em uma cor.

`evo-symbol-navy`
SVG PNG 512 PNG 1024
Símbolo · negativo

Avatar em fundo Navy, sinalização, rack.

`evo-symbol-white`
SVG PNG 512 PNG 1024

#### Qual arquivo usar

Se o meio não está nesta lista, consulte a governança antes de improvisar

Web, app, e-mail HTML
SVG
Com `viewBox` e sem largura fixa
Favicon
favicon.ico
16, 32 e 48px em um único arquivo
Ícone de app iOS
evo-symbol-180.png
Respiro de 18% do lado do ícone
Ícone de app / PWA
evo-symbol-512.png
Também 1024 para as lojas
Apresentação, documento
PNG 1024 / 2048
Fundo transparente obrigatório
Assinatura de e-mail
evo-logo-primary-512.png
Altura de 26px na assinatura
Sem transparência
JPG fundo branco
Sistemas legados e alguns ERPs
Impressão offset
SVG
Converter para CMYK com prova física aprovada
Corte de vinil, fresa, bordado
SVG
Contorno interno vazado; sem meio-tom
Baixar o LEIA-ME do kit

### 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.

`#031687`
`#081680` Navy
`#4AC0DF`
`#75BADE` Cyan

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.

Digital · logo completo `96 px`
Digital · símbolo isolado `24 px`
Impresso · logo completo `22 mm`
Impresso · símbolo isolado `7 mm`
Altura em slide 1920×1080 `40–56 px`

### Usos proibidos · Misuse

Não distorcerEscala sempre proporcional.
Não recolorirApenas as três versões aprovadas.
Não rotacionarO logo é sempre horizontal.
Não aplicar efeitosSem sombra, brilho, contorno ou 3D.
Não usar sobre fundo de baixo contrasteTroque para a versão negativa.

### 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.

### Assinaturas e convivência

antes Marca Legada Telecom
Endosso de transição

Texto abaixo do logotipo, alinhado à esquerda do símbolo. Vigência máxima de 12 meses por marca migrada.

parceiro
Co-branding

EVO à esquerda, filete vertical de 1px em Warm Gray, parceiro à direita com altura óptica equivalente. Respiro de 1× entre elementos.

Selo isolado
Símbolo isolado

Permitido a partir de 24px em avatar, favicon, app icon e brinde. Nunca ao lado do logotipo completo na mesma peça.

03 Fundamentos · Foundations

## Cor

Color — palette, proportion, semantics and contrast

A cor organiza hierarquia, cria reconhecimento e diferencia públicos sem fragmentar a marca. A paleta é fechada: cinco cores de legado, quatro de expansão. Tudo o que a interface precisa é derivado delas por rampa, nunca por cor nova.

### Legado · primárias

Legacy Navy
`#081680`

Autoridade e permanência. Cor institucional primária.

Legacy Sky / EVO Cyan
`#75BADE`

Movimento e evolução. Acento e destaque de link.

Legacy Gold
`#DEB255`

Herança e valor. Uso pontual, nunca em texto pequeno.

Warm Gray
`#D5D1C8`

Neutro de apoio. Bordas, divisores e superfícies calmas.

Steel
`#5B5E63`

Precisão técnica. Base do vocabulário de infraestrutura.

### Expansão da paleta

Coral
`#EB6964`

Calor humano. Acento do modo expressivo e estado de erro.

Aqua
`#5DCAC5`

Frescor e disponibilidade. Estado de sucesso.

Cream
`#F1EDE5`

Base clara acolhedora. Fundo preferencial de peças humanas.

White
`#FFFFFF`

Superfície de conteúdo e respiro. O espaço vazio é da marca.

### Proporção obrigatória

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

60%Base clara — Cream, White
25%Azuis institucionais — Navy, Cyan
10%Neutros de apoio — Warm Gray, Steel
5%Acentos — Gold, Coral, Aqua

### Combinações recomendadas

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

Navy + White + Cyan
Institucional, corporativo, Corporate (B2B)
Navy + Cream + Gold
Herança, documentos, governo
Steel + White + Aqua
Técnico, operações, wholesale
Navy + Warm Gray + Coral
Humano, residencial, campanha

### Rampas de interface

Cada cor de marca ancora uma rampa de 10 passos. O passo âncora está marcado.

Navy
50
100
200
300
400
500
600
700
800
900
Cyan
50
100
200
300
400
500
600
700
800
900
Aqua
Gold
Coral
Neutral

### Tokens semânticos e os dois temas

Nenhum componente referencia cor de marca direto. Só o semântico muda entre claro e escuro.

Tema claro
`--color-bg-canvas`
`--color-bg-surface`
`--color-fg-default`
`--color-fg-muted`
`--color-action-primary-bg`
`--color-border-subtle`
`--color-focus-ring`
Tema escuro
`--color-bg-canvas`
`--color-bg-surface`
`--color-fg-default`
`--color-fg-muted`
`--color-action-primary-bg`
`--color-border-subtle`
`--color-focus-ring`

### Demonstração ao vivo

Claro Escuro

Os mesmos tokens de `evo-tokens.css`, aplicados a componentes reais via `[data-theme]`. Clique no interruptor — nada aqui é uma captura de tela.

EVO Para Você Para Empresas Corporate Assinar
Fibra 700 Mega

Ideal para casa conectada, streaming em 4K.

Ver plano
E-mail
nome@empresa.com.br
Continuar
Ativo Em análise Vencido

### Contraste — o que a paleta permite

Razões medidas sobre branco (#FFFFFF). O acento claro da marca é bonito e insuficiente para texto: essa é a regra mais violada.

Cor
Razão
Nível
Uso permitido
`navy-600`
14.8:1
AAA
Texto corrido, títulos, ícones, botão primário
`steel`
6.5:1
AA
Texto secundário, legendas, metadados
`cyan-600`
4.4:1
AA grande
Links e rótulos ≥18px ou peso 600+. Texto corrido menor: use `cyan-700` (6.6:1)
`cyan-400`
2.1:1
Falha
Só fundo, grafismo, preenchimento de gráfico ou texto ≥ 36px
`aqua-400`
2.0:1
Falha
Preenchimento e ícone decorativo. Texto: use `aqua-700`
`gold-400`
1.9:1
Falha
Nunca em texto. Fundo, filete, destaque gráfico
Faça

- 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.

Não faça

- 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).

04 Fundamentos · Foundations

## Tipografia

Typography — families, scale, weights and editorial rules

Tipografia oficial aprovada · julho 2026

O RFP do ecossistema digital (§9.3) recomendou Sora como alternativa. Avaliada e não adotada: Figtree e JetBrains Mono permanecem como decisão final — já aprovadas, com licença resolvida e em uso em todo este sistema. Não há segunda fonte de verdade tipográfica.

Duas famílias, licença aberta, disponíveis como webfont e para desktop. Figtree carrega a voz da marca: geométrica na estrutura, humanista nas aberturas — o mesmo equilíbrio entre precisão e proximidade que o logotipo propõe. JetBrains Mono existe para o que precisa ser lido como dado. Nenhuma terceira família é permitida em nenhum meio.

Figtree
Display + Texto · SIL Open Font License
`--font-display`
Aa Gg 123
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 áàâãéêíóôõúç &@#%
Regular 400 texto corrido, tabelas
Medium 500 rótulos, navegação
SemiBold 600 botões, h3, h4, ênfase
Bold 700 h1, h2, números-chave
ExtraBold 800 display, capa, hero
JetBrains Mono
Dados e técnico · Apache 2.0
`--font-mono`
Aa Gg 123
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 () {} [] <> /\ |
Uso obrigatório em

- Identificadores de contrato, protocolo e circuito
- Capacidades, latências, IP, CIDR e coordenadas
- Valores de token, snippets e nomes de variável
- Colunas numéricas em tabelas densas (Operadoras/ISPs/OTTs e Corporate)

Instalação — web Cole no `<head>`

    <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">

Pilha de fallback

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

#### Licença e distribuição

Figtree — SIL Open Font License 1.1. Uso comercial, web e desktop liberados, inclusive por fornecedores e agências.
JetBrains Mono — Apache License 2.0. Mesmas permissões.
Download — Google Fonts fonts.google.com/specimen/Figtree fonts.google.com/specimen/JetBrains+Mono
Desktop — instalar os arquivos estáticos nas máquinas de design e nas máquinas que geram documento e apresentação. Variável só em web.
E-mail — sem webfont: declarar Figtree e desenhar para funcionar em Arial (ver seção 16).
Fornecedor externo — enviar este bloco junto com o briefing. Nenhuma licença precisa ser comprada.

### Escala tipográfica

Escala fechada. Um tamanho fora dela é um bug, não uma decisão de design.

Movidos por um futuro
`display-xl` 64 / 1.02 / 700 / -0.022em
Conexões que transformam
`display-lg` 52 / 1.05 / 700
Crescimento com propósito
`display-md` 42 / 1.08 / 700
Título de seção
`h1` 34 / 1.15 / 700
Subtítulo de bloco
`h2` 28 / 1.20 / 700
Título de card
`h3` 23 / 1.25 / 600
Rótulo de grupo
`h4` 19 / 1.35 / 600
Lead de abertura. Contextualiza a seção em uma ou duas frases e nunca repete o título.
`body-lg` 18 / 1.60 / 400
Texto corrido padrão da interface e dos documentos. Medida ideal entre 60 e 70 caracteres por linha.
`body` 16 / 1.60 / 400
Texto de apoio, células de tabela e descrições de campo.
`body-sm` 14 / 1.55 / 400
Legenda, metadado, nota de rodapé. Piso absoluto da interface.
`caption` 13 / 1.45 / 400
Eyebrow de seção
`overline` 12 / 600 / 0.08em / caixa alta

#### Medida de linha

Títulos e leads `44ch`
Texto de interface `68ch`
Documentos longos `78ch`

#### Mínimos por meio

Interface digital `14 px`
Documento impresso `12 pt`
Slide 1920×1080 `24 px`

#### Ênfase cromática no título

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

Internet que conecta pessoas
Faça

- 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.

Não faça

- 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.

05 Fundamentos · Foundations

## Grid, espaçamento e elevação

Layout — grid, spacing, radius, elevation, breakpoints

Margens amplas são regra editorial da marca, não preferência estética. O espaço em branco é o que faz a base clara de 60% funcionar — e é o primeiro item cortado quando um layout está errado.

### Grid de 12 colunas

Gutter `24px` Máx. conteúdo `1280px` Máx. texto `720px`
Conteúdo principal · 7 col
Apoio · 5 col

#### Breakpoints

sm · celular `480px`
md · tablet `768px`
lg · laptop `1024px`
xl · desktop `1280px`
2xl · monitor `1600px`

#### Margens de página

< 480px `16px`
480 – 1024px `32px`
> 1024px `48px`
Documento A4 `25mm`
Slide 1920×1080 `96px`

#### Raio de canto

xs · tabela densa, tag `4`
sm · campo, input `8`
md · card compacto `12`
lg · card padrão `16`
2xl · painel expressivo `28`
pill · botão, chip `999`

### Escala de espaçamento — base 4px

Todo espaço vertical e horizontal é múltiplo de 4. Não existe 10, 18 ou 30.

`space-1` 4px · gap de ícone e rótulo
`space-2` 8px · dentro de chip e badge
`space-3` 12px · itens de lista
`space-4` 16px · padding base
`space-6` 24px · padding de card, gutter
`space-8` 32px · entre blocos
`space-12` 48px · entre grupos
`space-20` 80px · entre seções de página
`space-32` 128px · respiro de abertura

### Elevação

Sombras tingidas de Navy, nunca cinza neutro. Quatro níveis — acima disso, a hierarquia está errada.

Nível 1
Card em repouso, tabela, painel.
Nível 2
Dropdown, barra fixa, tooltip.
Nível 3
Card em hover, popover, drawer.
Nível 4
Modal e diálogo. Um por tela.

No tema escuro a elevação não vem da sombra: vem do salto de superfície (`bg-canvas` → `bg-surface` → `bg-raised`) mais uma borda de 1px em `border-subtle`.

06 Linguagem visual · Graphic language

## Grafismos e texturas

Graphic language — four families, opacity ceilings, placement

Quatro famílias, uma por peça. Elas trazem movimento, profundidade e reconhecimento — sempre como apoio, nunca competindo com o conteúdo. Cada família tem um teto de opacidade porque a tentação de aumentar é constante.

1

### Ondas fluidas

Linhas e camadas para fundos e aberturas. A família mais usada e a mais fácil de exagerar.

Opacidade máxima `0.35`
2

### Topografias leves

Textura sutil para profundidade. Ideal em cantos, rodapés e faixas de transição.

Opacidade máxima `0.20`
3

### Órbitas e trajetórias

Linhas com pontos e brilho discreto para evolução e conexão. A família mais expressiva.

Opacidade máxima `0.60`
4

### Silhuetas e cenários

Referências territoriais em baixo contraste. No máximo uma por peça, sempre atrás do conteúdo.

Opacidade máxima `0.25`

### Regras de uso

- 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.

Limite duro: nunca mais de uma família por peça, e nunca grafismo atrás de texto corrido — só atrás de título, imagem ou área vazia.
Fundo claro
Fundo escuro
Abertura de seção
Aplicação correta
O grafismo entra por baixo e pela borda — o texto fica na área limpa.
07 Linguagem visual · Graphic language

## Ícones

Iconography — conceptual set, construction grid, usage

Um sistema de símbolos para navegação, apoio e reforço conceitual. Doze ícones cobrem o vocabulário da marca; ícones funcionais de interface (fechar, buscar, ordenar) seguem a mesma construção mas não fazem parte do conjunto conceitual.

Pessoas
Presença
Movimento
Conexão
Propósito
Segurança
Crescimento
Integração
Tecnologia
Futuro
Mobilidade
Dados

### Construção

Grid `24 × 24`
Área útil `20 × 20`
Espessura `1.75`
Terminações `round`
Tamanhos `16 / 20 / 24 / 32`

### Diretrizes do sistema

- Traço simples e contínuo
- Cantos suaves e leitura imediata
- Uso preferencial em uma cor ou gradiente sutil
- Alinhamento por grid e proporções consistentes
- Ícones como apoio, não como ilustração excessiva

### Aplicação

Em cards
Segurança que gera credibilidade.
Proximidade que transforma relações.
Em destaques e callouts
Construímos hoje as soluções do amanhã.

Í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 e rodapé
Pessoas
Conexão
Tecnologia
Segurança

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

### Kit de ícones — download

Os 12 ícones como arquivo individual, mais um sprite único para produto e app.

Pessoas
Presença
Movimento
Conexão
Propósito
Segurança
Crescimento
Integração
Tecnologia
Futuro
Mobilidade
Dados
Baixar sprite completo (.svg)
LEIA-ME do kit
08 Linguagem visual · Graphic language

## Fotografia e imagem

Photography — categories, treatment, composition with graphics

A fotografia é onde a promessa “humana e acolhedora” se prova ou se desmancha. Três categorias cobrem os cinco mercados, e cada uma tem critério de casting, luz e enquadramento. Os espaços abaixo são placeholders: arraste as fotos reais do banco da EVO para dentro deles.

### Cotidiano e humano

Para Você (B2C) e campanhas institucionais. Pessoas usando a conexão para algo concreto — não posando para a câmera.

Casting: diversidade real de idade, corpo e etnia; sem estética de banco de imagem.
Luz: natural, difusa, hora do dia reconhecível.
Cenário: casa brasileira de verdade, com objeto do dia a dia no quadro.
Olhar: voltado para a atividade, raramente para a lente.

### Trabalho em contexto

Para Empresas, Corporate e Governo. Decisão acontecendo: duas ou três pessoas resolvendo algo, no ambiente delas.

Casting: profissionais plausíveis para o porte da empresa retratada.
Luz: ambiente real, com janela; sem luz de estúdio dura.
Cenário: loja, oficina, escritório pequeno, prédio público — não coworking genérico.
Tela visível: apenas conteúdo real ou UI da EVO, nunca gráfico inventado.

### Infraestrutura

Operadoras, ISPs e OTTs (B2W) e prova técnica. Data center, fibra, torre, campo. A escala é o argumento.

Enquadramento: linhas fortes, simetria, profundidade de corredor.
Luz: própria do ambiente; LED do rack é permitido como acento.
Pessoa: sempre com EPI correto quando em campo.
Proibido: render 3D, cabo colorido de estoque, azul neon.
Faça

- 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.

Não faça

- 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.

### Ilustração — quando é permitida

A EVO não tem sistema de ilustração de personagens. O que existe é diagrama: topologia de rede, fluxo de serviço, mapa de cobertura. Ele segue a mesma construção dos ícones — traço de 1.75px, cantos suaves, uma cor mais um acento.

PermitidoDiagrama técnico, mapa, esquema de instalação, fluxo de contratação.
Não permitidoPersonagem plano, mascote, cena isométrica, cidade ilustrada em cor cheia.
Em dúvidaSe a ilustração está ali para preencher espaço, o espaço deveria ficar vazio.

### Geração de imagens com IA

AI image generation — estrutura de prompt para rascunho, moodboard e exploração interna

Imagem gerada por IA serve para rascunho, moodboard e exploração interna — nunca substitui o banco de imagens real em peça institucional ou prova de serviço (ver “Não faça” acima). Todo prompt deve seguir os blocos abaixo, na ordem, para manter casting, luz e composição consistentes com a EVO.

01
Objetivo comunicacional
Mensagem central, onde a imagem será usada, sensação a transmitir.
02
Cena e ação concreta
Momento real durante a atividade, nunca pose. Olhar na atividade, não na câmera.
03
Casting
Brasileiro, diverso e plausível para a atividade retratada — sem caricatura.
04
Cenário e objetos
Local real, específico e funcional, com elementos plausíveis no quadro.
05
Luz e hora do dia
Luz natural ou real do ambiente; sombra suave; nunca estúdio duro ou neon.
06
Cores e styling
Paleta EVO aplicada de forma orgânica — roupa, mobiliário, detalhe. Nunca recolorir equipamento técnico.
07
Enquadramento e lente
Plano, altura de câmera e distância focal equivalente (24–50mm); profundidade de campo moderada.
08
Organização da composição
Full-bleed, sem margem ou faixa vazia; respiro orgânico para título/CTA; ponto focal dentro da área segura de corte.
09
Proporção e resolução
Formato e tamanho de saída — ver parâmetros fixos abaixo.
10
Realismo técnico
Pele, mãos, olhos, caimento de roupa e perspectiva fisicamente corretos; equipamento tecnicamente plausível.
11
Restrições
Sem logo, slogan, texto, holograma, robô, cabo luminoso, azul neon ou pose de aperto de mãos/sorriso para câmera.
Parâmetros fixos de saída
Aspect ratio16:9
Resolution4K
QualityHigh
Number of images1
BackgroundOpaque
OutputJPEG ou PNG
09 Biblioteca · Library

## Componentes

Components — anatomy, variants, states, tokens

Os componentes são funcionais e neutros: eles não mudam entre mercados, apenas herdam o modo de expressão ativo. Todo estado — repouso, hover, foco, ativo, desabilitado, carregando, erro — é obrigatório antes de um componente ser considerado pronto.

### Botão

Button

Uma ação primária por tela. O botão pill é a assinatura de interação da EVO — ela vem do contorno arredondado do símbolo e nunca é quadrada em contexto de conversão.

Variantes
Primário Secundário Terciário Destrutivo Link de ação
Tamanhos
Small só em barras e tabelas. Em telas touch o mínimo é 44px de área tocável.
Estados
`navy-600`
`navy-700`
`navy-800`
`focus-ring 3px`
`neutral-100`
`aria-busy`

#### Anatomia

`altura` 36 / 44 / 52px
`padding-x` 18 / 24 / 30px
`raio` pill (999px)
`rótulo` 600, 14–16px, sem caixa alta
`ícone` 17px, gap 8px, sempre à direita se indicar avanço
Faça

- 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.

Não faça

- “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.

### Campos de formulário

Form fields

Rótulo sempre visível e acima do campo. Placeholder nunca substitui rótulo. Mensagem de erro sempre com texto, nunca só com cor de borda.

Nome completo Repouso · `border-strong`
CNPJ Foco · anel de 3px em cyan-500
E-mail
Falta o domínio. Exemplo: nome@empresa.com.br
Plano contratado Desabilitado · alterável só via atendimento
Segmento
Select · mesma altura e raio do input
Observações Textarea · mínimo 2 linhas visíveis
Seleção
Aceito os termos de serviço Quero receber novidades Pessoa jurídica Pessoa física Fatura por e-mail
Badges e tags
Institucional Ativo Em análise Vencido Rascunho
Mais escolhido SLA 99,9% Fibra
Progresso e carga
Instalação agendada 64%
Consumo do mês 92%
Skeleton · nunca spinner em bloco de conteúdo

### Cards

Cards

Três tipos aprovados: conteúdo, plano e indicador. O card de plano é o componente comercial mais importante da marca — ele carrega a decisão.

#### 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.

Ver detalhes
Mais escolhido
700
Mega

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

R$119,90/mês
Indicadores
+28%
Crescimento sustentável
92%
Satisfação dos clientes
+1.250
Projetos entregues
98%
Disponibilidade
Os mesmos componentes no tema escuro
Identificador do circuito
Card no escuro

A elevação vem do salto de superfície mais a borda — não da sombra.

### Navegação, mensagens e tabela

Navigation, messaging, table

Densidade padrão para Para Você e Governo, densidade compacta para Corporate e Operadoras/ISPs/OTTs. A tabela é o componente que mais sofre com decoração — aqui ela é intencionalmente seca.

Início/Para empresas/Conectividade dedicada
Visão geral Cobertura SLA Contrato
Manutenção programada
Sábado, 02h às 04h. Nenhuma ação necessária.
Instalação concluída
Seu plano já está ativo.
Fatura vence em 3 dias
Vencimento em 28/07. Pagar agora.
Não foi possível concluir
Verifique os dados do cartão e tente novamente.
Serviço
Circuito
Capacidade
SLA
Status
IP Dedicado — São Paulo
EVO-SP-04412
10 Gbps
99,9%
Ativo
Transporte L2 — Curitiba
EVO-CWB-01187
40 Gbps
99,95%
Em ativação
Colocation — Data Center RJ
EVO-RJ-00934
2 × 100 Gbps
99,99%
Ativo
3 de 47 serviços
1 2 3
Erros recorrentes na biblioteca
Zebra colorida em tabela. Use apenas `bg-canvas` alternado.
Badge de status só por cor, sem rótulo textual.
Card clicável inteiro sem indicação visual de alvo.
Modal empilhado sobre modal.
Placeholder no lugar do rótulo do campo.
Ícone sem rótulo em navegação principal.
10 Biblioteca · Library

## Padrões de interface

Patterns — composed solutions for recurring problems

Padrão é a composição aprovada de vários componentes para um problema recorrente. Quando existe padrão, não se inventa layout novo.

### Comparador de planos

Máximo 4 colunas. Um único destaque “Mais escolhido”. Linhas de atributo sempre na mesma ordem entre colunas.

Connect
Business
Enterprise
Conectividade
Suporte 24/7
—
Gestão dedicada
—
—

### Bloco de contato e CTA

Canal, promessa de tempo e ação — nessa ordem. Fundo Navy, grafismo de onda no rodapé, três canais no máximo.

Fale com a EVO.

Estamos prontos para conectar você ao que importa.

WhatsApp(11) 4000-0000
Chat online Resposta em 2 min
Ligamos para você Deixe seu contato

### Estado vazio

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

Nenhuma fatura por aqui

Suas faturas aparecem aqui a partir do primeiro mês de serviço ativo.

### Confirmação destrutiva

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

Cancelar o contrato EVO-SP-04412?

O serviço será desligado em 30 dias e não pode ser reativado com as mesmas condições comerciais.

### Padrões do portal público

evo.digital — home, mercado e conteúdo institucional

Seis padrões que o site público repete em toda a árvore de mercados, cidades e confiança — cada um já nasce responsivo e com o par faça/não faça.

### Mega menu

Um item por mercado público, nunca a sigla interna. CTA de contratação sempre na última coluna.

Para Você Para Empresas Corporate Governo Operadoras, ISPs e OTTs
Internet
Fibra
Wi-Fi inteligente
Home office
Móvel
Planos móveis
eSIM
Portabilidade
Casa conectada
Câmera
Automação
Combos
Consultar cobertura Assinar agora
Máximo 4 colunas de conteúdo + 1 de conversão. Rótulo de coluna nunca é verbo — é substantivo de produto.

### Bloco de cobertura

CEP ou endereço antes de qualquer preço. É o primeiro formulário que a maior parte do tráfego preenche.

A EVO chega na sua rua?
Disponível em Barueri — SP. Fibra até 1 Giga.
Resposta de disponibilidade sempre com nome da cidade e velocidade máxima real — nunca “consulte condições”.

### FAQ / Accordion

Uma pergunta aberta por página, no máximo. Resposta em texto corrido — nunca em lista onde caberia uma frase.

Quanto tempo leva a instalação?

Em áreas já cobertas, a instalação acontece em até 48h após a confirmação do pedido.

Posso mudar de plano depois?
Marcação estruturada (FAQPage) só na pergunta que também aparece visível na página — nunca conteúdo oculto exclusivo para buscador.

### Bloco de confiança

Prova verificável, não adjetivo. Cada selo linka para a fonte — certificado, status ou canal oficial.

LGPD em conformidade
Ver política de privacidade
99,9% de disponibilidade
Ver status em tempo real
Canais oficiais verificados
evita golpe e clonagem
Central de segurança
antifraude e denúncia
Reforça a marca — nunca substitui a página de confiança completa (canais oficiais, segurança, ouvidoria).

### Bloco de cidade

Uma página por município com cobertura real — a prova de que “nacional em escala, local em atendimento” é fato, não slogan.

EVO em Barueri — SP Cobertura ativa
1 Giga
vel. máxima
12
bairros
2018
na cidade desde
Dado sempre real e datado. Cidade sem cobertura ainda usa o mesmo template com CTA de “avise-me quando chegar”.

### Bloco de case

Prova social com nome, cargo e resultado numérico. Corporate e Governo exigem case; Para Você usa depoimento curto.

“Reduzimos o tempo de resposta da rede em 40% depois da migração para o link dedicado EVO.”

Ana Ribeiro · TI, Rede Hospitalar São Lucas
−40% latência
Resultado sempre com métrica e período. Sem case validado, o bloco não entra na página — não se usa depoimento genérico.
11 Biblioteca · Library

## Dados e gráficos

Data visualization — palette order, chart types, labelling

A ordem categórica é fixa: quem desenha o segundo gráfico usa exatamente as mesmas cores na mesma sequência do primeiro. Isso é o que permite comparar duas páginas de relatório sem legenda.

### Ordem categórica

`dataviz-1` navy-500
`dataviz-2` aqua-400
`dataviz-3` cyan-400
`dataviz-4` gold-400
`dataviz-5` coral-400
`dataviz-6` navy-800

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

### Evolução de resultados

Barras + linha combinadas
Receita líquida (R$ mi) EBITDA (R$ mi) Margem EBITDA (%)

### Composição

Tecnologia 45%
Pessoas 30%
Processos 25%

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

Disponibilidade da rede
99,982%
Dentro do SLA
Latência média SP–RJ
6,4 ms
Estável
Ocupação do backbone
78%
Atenção
Faça

- 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.

Não faça

- 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.

12 Expressão · Expression

## Modos de expressão por mercado

Expression modes — one core, five emphases

A adaptação acontece por tom visual, imagem e ênfase cromática — nunca por mudança de marca. Logotipo, arquitetura, tipografia, grafismos fluidos e base cromática institucional permanecem constantes em todos os cinco mercados.

{{ m.code }} ({{ m.abbr }}) {{ m.mode }}

### {{ m.headline }}

{{ m.support }}

Tom
{{ m.tone }}
Acento{{ m.accentName }}
Raio de canto`{{ m.radius }}`
Densidade de layout{{ m.density }}
Densidade de dados{{ m.dataDensity }}

#### Regras do modo

- {{ rule }}

#### Paleta em ênfase e atributos

{{ t }}

### O que permanece constante

Se um destes itens muda para atender um mercado, a decisão está errada.

Logotipo e arquitetura
Tipografia
Grafismos fluidos
Base cromática institucional
Semântica de feedback
Regras de acessibilidade

### Os cinco modos em uma tabela

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

Mercado
Modo
Cores em ênfase
Densidade
Imagem
Para Você (B2C)
EVO Expressive
Cyan, Coral, Cream
Confortável
Cotidiano, pessoas, casa
Para Empresas (B2S)
EVO Business
Navy, Cream, Aqua
Confortável
Rotina de trabalho, equipes
Corporate (B2B)
EVO Business
Navy, Steel, White
Compacta
Silhueta urbana, ambiente corporativo
Governo (B2G)
EVO Institutional
Navy, Warm Gray, Gold
Confortável
Instituição, serviço público
Operadoras/ISPs/OTTs (B2W)
EVO Infrastructure
Steel, Navy, Cyan
Densa
Data center, rede, topologia
13 Expressão · Expression

## Voz e tom

Voice & tone — principles, microcopy, vocabulary

A voz da EVO é uma só: próxima, clara e comprometida. O tom muda com o contexto — comemora numa ativação e é seco numa falha de serviço. Quando houver conflito entre soar bonito e ser entendido, ser entendido ganha.

01

### 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.

02

### Clara antes de criativa

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

03

### Concreta, com prova

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

04

### 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.

### Microcopy — antes e depois

Padrões obrigatórios nos pontos onde o texto decide a experiência

Botão
Evite
“Enviar” · “Clique aqui” · “Saiba mais”
Prefira
“Assinar plano 700” · “Ver cobertura no meu CEP”
Erro de campo
Evite
“Campo inválido.” · “Erro 422.”
Prefira
“Falta o domínio no e-mail. Exemplo: nome@empresa.com.br”
Falha de serviço
Evite
“Estamos passando por instabilidades pontuais no ecossistema.”
Prefira
“Sua internet está fora do ar em Curitiba. Já estamos atuando; previsão de retorno às 14h.”
Preço
Evite
“A partir de R$ 99*” com asterisco sem destino.
Prefira
“R$ 119,90/mês nos 12 primeiros meses. Depois, R$ 139,90/mês.”

#### Vocabulário EVO

solução completa→ diga o que ela resolve
ecossistema→ rede, plataforma ou serviços
disruptivo→ o que mudou, na prática
nossos clientes→ você
a partir de→ preço final e condição

#### Formatação em pt-BR

Moeda `R$ 1.249,90`
Data `28/07/2026`
Data longa `28 de julho de 2026`
Velocidade `700 Mbps`
Percentual `99,9%`
Telefone`(11) 4000-0000`
E-mail corporativo `nome.sobrenome@evo.digital`
Domínio `evo.digital`

#### Tom por situação

Boas-vindas: caloroso, curto, com um próximo passo.
Venda: direto, com preço e condição visíveis.
Suporte: calmo, factual, sem pedir desculpas em excesso.
Falha: seco, específico, com previsão real.
Governo: formal, impessoal, sem adjetivo.
14 Aplicações · Applications

## Digital: web, app e documentos

Digital applications — website, native app, documents, decks

Os mesmos tokens, três meios diferentes. Cada aplicação mostra o sistema resolvido ponta a ponta, com as decisões visíveis: onde entra o grafismo, onde entra o acento, onde o conteúdo respira.

### Website — home Para Você

Área do cliente

#### Internet que conecta pessoas e impulsiona negócios.

Fibra de alta performance, estabilidade e atendimento próximo para o que realmente importa.

Ver planos Para empresas
Estabilidade
que você confia
Velocidade
que entrega
Atendimento
que aproxima
Nossos planos
250
Mega
Ideal para o dia a dia com estabilidade.
Ver plano →
500
Mega
Mais velocidade para sua casa conectada.
Ver plano →
Mais escolhido
700
Mega
Performance para tudo o que importa.
Ver plano →
1
Giga
Máxima velocidade, sem limites.
Ver plano →
Internet que conecta pessoas e impulsiona negócios.

Fibra de alta performance e atendimento próximo.

Ver planos Para empresas
Nossos planos
250
Mega
Ideal para o dia a dia com estabilidade.
Princípios aplicados
Navegação simplesMáximo 4 itens no menu principal.
Hierarquia claraUma promessa, uma ação primária.
Cor disciplinadaAcento só no que precisa de decisão.
Grafismo de apoioEntra pela borda, sai antes do texto.

### App nativo — Minha EVO

9:41
Olá, Marina
EVO Fibra 700 Mega
Conexão estável
Fatura de julho Vence em 3 dias
R$ 119,90
Pagar com Pix
Minha rede
Wi-Fi e dispositivos
Suporte
Resposta em 2 min
Início
Faturas
Consumo
Conta
Home do cliente
Estado do serviço acima de tudo, cobrança em seguida
9:41 Tema escuro
Consumo
Julho 418 GB
Velocidade média
684 Mbps
98% do plano
Testar velocidade
Tema escuro no app
Cyan 300 vira a cor de ação; Navy nunca é fundo de botão no escuro

#### Regras específicas de mobile

Alvos e alcanceMínimo 44×44px, com 8px entre alvos. Ação primária sempre no terço inferior da tela, dentro do alcance do polegar.
Áreas segurasRespeitar safe area de topo e base. Nada de conteúdo crítico sob a barra de gestos.
NavegaçãoMáximo 4 abas, sempre com ícone e rótulo. Sem gaveta lateral como navegação principal.
TipografiaEscala reduzida em um passo: h1 mobile = 28px. Piso de 14px mantido. Respeitar o tamanho de fonte do sistema.
Estado offlineToda tela precisa de versão sem conexão — é uma operadora; o cliente abre o app justamente quando a internet caiu.
Ícone do appSímbolo isolado em Navy sobre fundo branco, com respiro de 18% do lado do ícone.

### Documentos institucionais

São Paulo, 12 de junho de 2026
À
Empresa Parceira
A/C: Diretoria
São Paulo — SP
Prezados,
Este é um exemplo de papel timbrado da EVO. Ele deve ser utilizado em comunicações oficiais que representem a marca com profissionalismo, clareza e consistência.
Atenciosamente,
Equipe EVO
1. Papel timbrado
Margens 25mm, rodapé com onda em 0.35
Proposta
Comercial
Soluções que transformam realidades.
Julho 2026
2. Capa de proposta
Fundo Navy, logo negativo, onda no terço inferior
Documento
Título do documento
Subtítulo ou introdução
Este é um exemplo de documento interno. A estrutura hierárquica do conteúdo deve seguir os estilos definidos no guia de tipografia.
1. Título de seção
Utilize títulos e subtítulos para organizar a informação e facilitar a leitura.
1.1. Subtítulo
Textos corridos devem ter boa extensão de linha e espaçamento adequado.

- Item de lista
- Item de lista
- Item de lista

evo.digital Página 1 de 5
3. Documento de texto
Hierarquia numerada, rodapé discreto
FATURA
Nº 2026/000123
Emissão: 12/07/2026
Dados do cliente
Empresa Parceira Ltda.
CNPJ: 12.345.678/0001-90
São Paulo — SP
Valor total
R$ 24.750,00
Descrição
Período
Valor
Consultoria estratégica
Jun/2026
15.000,00
Desenvolvimento
Jun/2026
7.500,00
Suporte técnico
Jun/2026
2.250,00
Total
R$ 24.750,00
evo.digital
4. Fatura
Monoespaçada em toda coluna de valor

### Apresentações

O futuro nos conecta.
Tecnologia, proximidade e propósito em movimento.
Julho 2026
Slide de título
03.
Estratégia
e Crescimento
Movimento que
gera impacto real.
Divisor de seção
Crescimento com propósito e consistência
Pessoas em primeiro lugar
Times engajados que impulsionam inovação.
Tecnologia que conecta
Soluções simples, seguras e centradas no cliente.
Impacto que transforma
Valor para clientes, parceiros e para o Brasil.
Evolução de resultados
Slide de conteúdo
Boas práticas em apresentação
Uma mensagem por slide
Destaque a ideia principal e elimine excessos.
Alto contraste
Texto nunca abaixo de 24px em 1920×1080.
Ícones disciplinados
Consistentes e alinhados ao conteúdo.
Grafismo em baixa intensidade
Use para apoiar, nunca para competir.
15 Aplicações · Applications

## Redes sociais

Social — formats, safe areas, templates, tone per channel

Social é o único meio em que a EVO compete por atenção em milissegundos, num feed cheio. A saída não é gritar mais alto: é ser reconhecível antes de ser lida. Duas coisas garantem isso — a base clara e o logo no mesmo canto, sempre.

A internet da sua casa não precisa ser um mistério.
evo.digital
Feed 1:1 · 1080×1080
Logo no topo esquerdo, mensagem na base. Uma frase, um acento.
Migrou. E ficou melhor.
Sua operadora agora é EVO.
área de interface
Story 9:16 · 1080×1920
250px livres no topo e 320px na base para a UI da plataforma.
Infraestrutura nacional, decisão local.
Conectividade dedicada para operadoras e grandes contas.
LinkedIn 1.91:1 · 1200×628
Modo Business ou Infrastructure. Sem Coral.
Avatar
Símbolo branco em Navy

Nunca o logotipo completo em avatar circular — ele fica ilegível abaixo de 64px.

Grade do perfil

Ritmo de fundo: no máximo um card escuro a cada três. A grade nunca fica majoritariamente Navy.

#### Tom por canal

Instagram e TikTok — modo Expressive. Rotina, humor leve, resposta a comentário em primeira pessoa.
LinkedIn — modo Business. Dado, caso, pessoa com nome e cargo. Zero emoji.
X e canais de status — factual. Incidente, escopo, previsão, atualização a cada 60 minutos.
YouTube — tutorial e prova de infraestrutura. Legenda obrigatória.
Faça

- 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.

Não faça

- 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.

16 Aplicações · Applications

## E-mail

Email — transactional, campaign, signature

E-mail é o meio mais hostil do sistema: sem webfont garantida, sem flexbox confiável, com cliente que inverte cores. Por isso ele tem regras próprias — e o e-mail transacional, que informa fatura e incidente, tem prioridade sobre o de campanha.

De EVO <atendimento@evo.digital>
Assunto Sua fatura de julho está disponível
Sua fatura de julho está pronta

Olá, Marina. A fatura do seu plano EVO Fibra 700 Mega vence em 28/07/2026.

Valor R$ 119,90
Vencimento 28/07/2026
Ver e pagar fatura

Se você já pagou, pode ignorar este aviso. Dúvidas? Responda este e-mail ou fale com a gente pelo app.

EVO · evo.digital · Você recebe este e-mail porque tem um serviço ativo.
Preferências de comunicação
Transacional
Fato, valor, prazo, ação. Sem imagem de campanha, sem promoção embutida.

#### Construção técnica

Largura do corpo `600px`
Coluna única `obrigatória`
Corpo de texto `16px / 1.6`
Fallback de fonte `Arial, sans-serif`
Botão `tabela + bgcolor`
Peso total`< 100 KB`

Sem webfont: Figtree é declarada, mas o e-mail precisa ficar correto em Arial. Sem SVG, sem background-image carregando informação, sem `position`.

#### Domínio e endereçamento

Domínio oficial `evo.digital`
E-mail corporativo `nome.sobrenome@evo.digital`
Portal do cliente `portal.evo.digital`
Assinatura online `assine.evo.digital`
Parceiros e canal `parceiros.evo.digital`

Subdomínio sempre em português e minúsculo, sem hífen. Nenhum link de e-mail ou peça aponta para outro domínio — nem encurtador, nem domínio de campanha à parte.

#### Assinatura de e-mail

Nome Sobrenome
Cargo · Diretoria
+55 11 4000-0000 · nome.sobrenome@evo.digital

Logo, filete de 1px, três linhas. Sem frase motivacional, sem selo de campanha, sem aviso jurídico de dez linhas.

#### Hierarquia de assunto

Incidente — “Instabilidade em Curitiba: previsão de retorno às 14h”
Cobrança — “Sua fatura de julho está disponível”
Serviço — “Instalação confirmada para quinta, 24/07”
Campanha — “700 Mega na sua rua a partir de agosto”

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

Faça

- 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.

Não faça

- 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.

17 Aplicações · Applications

## Ambientes, frota e sinalização

Environments — retail, fleet, uniform, wayfinding, data center

No físico a marca é vista de longe, em movimento e com luz ruim. Vale outra regra: massa de cor e contorno antes de detalhe. O contorno interno do símbolo só aparece acima de 40cm; abaixo disso, use a versão mono cheia.

Fachada de loja
Faixa Navy com logo negativo ocupando entre 12% e 18% da altura total. Vitrine em Cream, nunca em Navy.
EVO
Totem e sinalização
Símbolo isolado no topo, altura mínima de 40cm. Setas e pictogramas seguem o grid de ícones em 1.75px escalado.
0800 000 0000 · evo.digital
Frota técnica
Base branca, onda Navy na metade inferior, logo principal na porta. Contato só no bloco escuro.
R-04
SALA 2 · CORREDOR B
RACKS R-01 a R-12
ACESSO RESTRITO
Data center e rack
Modo Infrastructure: fundo escuro, monoespaçada em caixa alta, LED do equipamento como único acento.

#### Uniforme e credencial

Campo — camisa Navy, símbolo bordado no peito esquerdo em 4cm, faixa refletiva em Gold nas costas.
Loja — camisa branca, símbolo em Navy, sem estampa nas costas.
Credencial — foto, nome, função e QR de verificação. É item de segurança do cliente, não peça de marca.

#### Materiais e acabamento

Preferir — mate, fosco, madeira clara, metal escovado. A marca não brilha.
Evitar — verniz espelhado, acrílico transparente com LED colorido, adesivo brilhante.
Iluminação — luz neutra (4000K). Backlight branco no logo; nunca luz colorida atrás da marca.
Cor especial — Navy convertido com prova física aprovada. Nunca converter do RGB direto para tinta.
Não faça

- 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.

18 Operação · Operations

## Acessibilidade

Accessibility — non-negotiable baseline, WCAG 2.2 AA

A EVO opera no mercado Governo (B2G): acessibilidade não é diferencial, é requisito contratual e legal. A linha de base é WCAG 2.2 nível AA em todos os produtos, com nível AA reforçado (7:1 em texto corrido) no modo institucional.

4.5:1
Texto corrido

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

3:1
Texto grande e UI

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

44px
Alvo de toque

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

3px
Anel de foco

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.

Não Serviço indisponível
Sim
Indisponível — Serviço fora do ar em Curitiba

### Checklist por entrega

Fluxo completo navegável só por teclado, na ordem visual
Todo campo com `label` associado, não só placeholder
Erro anunciado por `aria-live` e ligado ao campo
Imagem decorativa com `alt=""`; gráfico com descrição
Layout legível em zoom de 200% sem rolagem horizontal
`prefers-reduced-motion` respeitado em toda animação
Nenhuma informação transmitida só por cor, forma ou posição

### Auditoria automatizada — ao vivo

Roda contra o DOM real desta página — contraste calculado pela fórmula WCAG de luminância relativa, não digitado à mão. Não substitui teste com leitor de tela real.

#### Contraste de cor

calculado às {{ a11y.ranAt }}
{{ p.name }} `{{ p.ratio }}:1`{{ p.badgeLabel }}

#### Estrutura e semântica

Imagens com `alt`{{ a11y.imgsWithAlt }} / {{ a11y.imgsTotal }} ({{ a11y.imgsAltPct }}%)
Landmarks (header/nav/footer){{ a11y.landmarksLabel }}
Saltos de nível em título (h1→h3){{ a11y.headingSkips }}
Botões sem rótulo acessível{{ a11y.buttonsNoLabel }}
Campos sem rótulo associado{{ a11y.inputsNoLabel }}
{{ a11y.summaryTitle }}

{{ a11y.summaryText }}

### Movimento e animação

Duração90ms a 320ms para transições de interface. Acima de 480ms só em abertura de página.
Easing `cubic-bezier(.2,.8,.2,1)` na entrada, padrão na saída. Sem bounce, sem elástico.
LimitesNada pisca mais de 3 vezes por segundo. Nenhum carrossel com auto-play sem pausa.
ReduçãoCom `prefers-reduced-motion`, toda duração vai a 1ms e o estado final é aplicado direto.
19 Operação · Operations

## Tokens

Tokens — three layers, naming convention, exports

Três camadas, uma direção de dependência. Primitivos alimentam semânticos, semânticos alimentam componentes. Um componente que referencia primitivo direto quebra o tema escuro e os modos de expressão — é o erro mais caro do sistema.

Camada 1
Primitivos
`--evo-navy: #081680`

Valores crus da marca. Nunca usados direto na UI.

Camada 2
Semânticos
`--color-action-primary-bg`

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

Camada 3
Componente
`--btn-height-md: 44px`

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

### Convenção de nomes

--{categoria}-{elemento}-{variante}-{estado}
`color-action-primary-bg-hover`
categoria · elemento · variante · propriedade · estado
`color-feedback-danger-border`
sem “red”, “erro” ou nome de cor
`space-6`
escala numérica, nunca “grande” ou “md”

### Compatibilidade com a stack do portal público

O RFP do ecossistema digital recomenda Figma, Design Tokens, Storybook e componentes React. Os dois arquivos abaixo são a fonte única desses tokens: `evo-tokens.json` segue o formato W3C Design Tokens e alimenta Style Dictionary/Figma Tokens sem tradução manual; `evo-tokens.css` alimenta Storybook e o build React direto via custom properties.

Figma — import de `evo-tokens.json` via plugin de tokens.
Storybook / React — consome `evo-tokens.css` como tema global.
SVG icons — grid de 24px e regras da seção 07, já compatíveis com sprite ou componente.
Motion guidelines — duração e easing da seção 05, prontos para Framer Motion ou CSS.

### Demonstração de integração

Mockup ilustrativo de como os tokens chegam em Figma e Storybook — não é uma integração real, é a referência de como ela deve se parecer.

Figma — EVO Design System
Variáveis
color/*
space/*
radius/*
Componentes
Button
Card
Field
Storybook — evo-design-system
Button
Primary
Secondary
Card
Field
Badge

### Exportações

`tokens/evo-tokens.css` CSS custom properties · claro, escuro e 5 modos

    :root {
      /* 1. primitivos de marca */
      --evo-navy: #081680;
      --evo-cyan: #75BADE;
      --evo-coral: #EB6964;
      --evo-aqua: #5DCAC5;
      --evo-cream: #F1EDE5;

      /* 2. semânticos — o que a UI consome */
      --color-bg-canvas: var(--neutral-25);
      --color-fg-default: var(--navy-900);
      --color-action-primary-bg: var(--navy-600);
      --color-action-primary-bg-hover: var(--navy-700);
      --color-focus-ring: var(--cyan-500);
      --color-feedback-danger-fg: var(--coral-700);

      /* 3. componente */
      --btn-height-md: 44px;
      --btn-radius: var(--radius-pill);
      --card-radius: var(--radius-lg);
    }

    [data-theme="dark"] {
      --color-bg-canvas: var(--ink-canvas);
      --color-fg-default: var(--ink-fg);
      --color-action-primary-bg: var(--cyan-300);
      --color-action-primary-fg: var(--navy-900);
    }

    [data-mode="infrastructure"] {
      --color-fg-accent: var(--cyan-500);
      --table-row-height: var(--table-row-height-dense);
      --card-radius: var(--radius-xs);
    }

`tokens/evo-tokens.json` W3C Design Tokens · para Figma, Style Dictionary e mobile

    {
      "brand": {
        "navy": { "$value": "#081680", "$type": "color" },
        "cyan": { "$value": "#75BADE", "$type": "color" }
      },
      "semantic": {
        "light": {
          "action": {
            "primary": {
              "bg": "{palette.navy.600}",
              "fg": "{palette.neutral.0}"
            }
          }
        }
      },
      "proportion": {
        "lightBase": { "$value": 60, "$unit": "%" },
        "institutionalBlues": { "$value": 25 },
        "supportNeutrals": { "$value": 10 },
        "accents": { "$value": 5 }
      }
    }

evo-tokens.css Custom properties, temas e modos
evo-tokens.json Formato W3C, pronto para Style Dictionary
20 Operação · Operations

## Governança e contribuição

Governance — maturity, versioning, contribution

Um sistema sem governança volta a ser uma pasta de arquivos em seis meses. Estes são os critérios que decidem o que entra, o que muda e o que sai — especialmente relevantes durante a unificação das marcas do grupo.

### Maturidade dos componentes

Exploratório

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

Beta

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

Estável

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

Descontinuado

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

### Versionamento

`MAJOR` — muda valor de token semântico, remove componente ou altera comportamento esperado. Exige plano de migração.
`MINOR` — adiciona token, variante ou componente sem quebrar o existente.
`PATCH` — correção de bug, documentação, acessibilidade.

### 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.

### Regra de ouro durante a unificação

Marca legada que migra para a EVO adota o sistema inteiro de uma vez em cada ponto de contato — nunca meio a meio na mesma tela. Uma página com logo EVO e componentes da marca antiga comunica desorganização, não transição. Se o prazo não permite migrar a tela completa, migre a jornada inteira depois.

21 Operação · Operations

## Checklist antes de publicar

Pre-flight — nothing ships without these ten

Logo correto
Versão certa para o fundo, área de respiro e tamanho mínimo respeitados.
Contraste adequado
4.5:1 em texto, 3:1 em UI. Cyan e Gold nunca como texto pequeno.
Paleta aprovada
Nenhuma cor fora das nove de marca e suas rampas. Proporção 60/25/10/5 mantida.
Tipografia consistente
Só Figtree e JetBrains Mono, só tamanhos da escala, mínimos por meio respeitados.
Ícones e grafismos com moderação
Uma família de grafismo por peça, dentro do teto de opacidade. Ícone sempre com rótulo.
Hierarquia clara da informação
Uma mensagem principal, uma ação primária, sem salto duplo de nível.
Modo de expressão correto
Ênfase cromática e densidade batem com o mercado de destino.
Teclado e leitor de tela
Fluxo completo sem mouse, foco visível, erros anunciados.
Conteúdo revisado
Voz próxima e clara, preço com condição completa, sem jargão sem tradução.
Tokens, não valores soltos
Nenhum hex, px ou sombra escrito à mão no código entregue.

Marca forte é marca consistente. Este sistema foi desenhado para escalar com clareza, unidade e flexibilidade — cinco mercados, uma marca só.

22 Referência · Source

## Fonte: brandbook (draft)

Source pages — every decision above traces back to one of these

Estas oito páginas do draft alimentaram diretamente o sistema. As demais seções do brandbook não vieram no arquivo — as áreas que elas cobririam foram construídas a partir do briefing de marca e das melhores práticas de referência, e estão marcadas abaixo como derivadas: valem como proposta e precisam de validação, não como transcrição do brandbook.

3. Paleta cromática
→ Seção 03 Cor
5. Grafismos e texturas
→ Seção 06 Grafismos
6. Ícones e linguagem visual
→ Seção 07 Ícones
8. Aplicações por mercado
→ Seção 12 Modos de expressão
9. Exemplos práticos
→ Seções 14 e 21
11. Aplicações em website
→ Seções 09, 10 e 14
15. Documentos institucionais
→ Seção 14 Aplicações
16. Apresentações e templates
→ Seção 14 Aplicações

### Seções derivadas — construídas sem página-fonte

Seção
Base usada
Status
01 Essência da marca
Briefing de posicionamento da EVO e dos cinco mercados
Validar
04 Tipografia
Figtree + JetBrains Mono, aprovadas como tipografia oficial em julho de 2026
Aprovado
08 Fotografia e imagem
Atributos de marca + imagens de referência das páginas 8, 9 e 11
Validar
14 App nativo
Componentes e tokens do próprio sistema, aplicados a jornadas de autosserviço
Pronto para uso
15 Redes sociais · 16 E-mail
Tokens, voz e tom, mais restrições técnicas de cada plataforma
Pronto para uso
17 Ambientes e sinalização
Proporções do logo e paleta aplicadas a escala física; sem projeto arquitetônico
Validar

### Estado das decisões pendentes

Três dos quatro bloqueios foram resolvidos. Resta um, e ele é de conteúdo.

Tipografia oficialFigtree e JetBrains Mono aprovadas. Licença aberta, sem custo, com bloco de instalação na seção 04.
Logo em vetorTrês SVGs recebidos, normalizados para a paleta e desdobrados em seis arquivos, incluindo o símbolo isolado para favicon e app icon.
Semântica de feedbackConfirmado: erro, sucesso e alerta seguem Coral, Aqua e Gold. A paleta permanece fechada em nove cores.
Banco de imagens — aguardandoOs placeholders da seção 08 estão prontos. Ao receber as fotos aprovadas, a direção fotográfica deixa de ser descrição e passa a ser referência.