Sistema de Design Vivo
Cores, tipografia, Vivinho, ícones, botões e componentes — organizados em tokens e padrões prontos para o aplicativo Web, o aplicativo Mobile e as apresentações.
Fundamentos
O ponto de partida da marca: por que existimos e como isso guia cada decisão de design.
Digitalizar para Aproximar
A Vivo acredita que a revolução tecnológica deve ser parte da vida de todas e todos, e não um privilégio de poucos. Reduzimos a distância entre as pessoas e o que importa para cada uma — educação, cultura, entretenimento, saúde, negócios e, acima de tudo, outras pessoas.
Cantos arredondados, tom caloroso, linguagem direta.
“Tem todxs na Vivo.” Gente de verdade, sem estereótipos.
Alegres e calorosos; as cores trazem vida e energia.
Tratamento sem volume, simples e atemporal, feito para a tela.
Logotipo
Design simples e atemporal. Sempre use os arquivos originais — o logo não deve ser reconstruído.
Logo oficial · cor principal (púrpura) · branco sobre fundo escuro · branco sobre preto
Preferencialmente púrpura. Branco quando o contraste exigir — mantendo o púrpura em outros elementos.
Impressão: 15 mm · Tela: 35 px. Respeite a área de proteção ao redor.
Acima de 480px: logo a 5% da largura. Abaixo de 480px: 25% para garantir visibilidade.
Cores
A Vivo é multicolorida. Clique em qualquer amostra para copiar o valor hexadecimal.
Cor principal
Cores secundárias
Cores de apoio — contraste no digital
Cinzas — papéis definidos pelo guia
Degradês
Trazem movimento e modernidade. Use apenas uma opção de degradê por peça.
Uma cor — do tom principal ao tom de apoio
#660099 → #461e5f#eb3c7d → #cd1e5a#ffb300 → #fa6423#99cc33 → #32a04b#0066cc → #0055a0Duas cores — púrpura + cor (exceto verde) · 30% / 70%
#660099 30% → #eb3c7d#660099 30% → #ff9900#660099 30% → #0066ccTipografia
Roboto é a fonte oficial Vivo para o digital. Títulos em Roboto Slab (substituto da ITC Officina Serif).
Caráter humanista e amigável. ⚠ Substituto da ITC Officina Serif (comercial, sem licença web).
Fonte oficial Vivo para sites, botões e apps. Light · Regular · Medium.
Vivinho
O símbolo da marca. Humaniza o serviço — sem gênero nem idade, representa diversidade e inclusão.
Ícones
Traços simples, terminações redondas. Permitidos em qualquer cor da paleta ou degradê.
Botões
Flat, cantos de 4px, texto Roboto centralizado, 1ª letra maiúscula. Sem ícones — só texto. Passe o mouse para ver os estados.
Componentes digitais
Construídos sobre a paleta de apoio + cinzas. Rosa escuro sinaliza erro/atenção; verde escuro, correto.
Vivo Fibra
Internet de alta velocidade para toda a casa.
Espaço & elevação
Fundações digitais preparadas pela nG Solutions, estendendo a marca Vivo. Grade base de 4px.
Voz & tom
Português (pt-BR), otimista, caloroso e humano. Direto e claro, sem estereótipos.
Faça
- “Tem todxs na Vivo” — represente a diversidade brasileira.
- Botões em sentença: “Veja os planos”, “Recarregue agora”.
- Micro-rótulos em CAIXA ALTA com leve tracking.
- Tom alegre e acolhedor, foco na pessoa.
Evite
- Estereótipos ou conceitos pré-estabelecidos.
- BOTÕES INTEIROS EM CAIXA ALTA.
- Excesso de cores numa mesma peça.
- Frieza ou linguagem distante.