Caixa de entrada zero, todo dia.
E-mail profissional, sem ruído.Um ponto.
Pon de ponto. Tudo começa com a mensagem que chega: um círculo cheio, em coral.
Manual de identidade visual · 2026
E-mail profissional, sem ruído.
Tudo o que você precisa para aplicar a marca Ponvi com consistência: símbolo, cores, tipografia, movimento e tom de voz.
Sumário
A Ponvi é um e-mail profissional para equipes que não podem perder nada. A marca diz isso com uma linha e um ponto: a caixa de entrada em ordem e a mensagem que acabou de chegar.
01 · Conceito
Uma linha.
A linha da caixa de entrada sobe e encontra o ponto. Juntos, desenham o p de Ponvi.
Um respiro.
Um recorte separa a linha do ponto. Nada encosta, nada atropela. É assim que a gente quer o seu e-mail.
Um nome.
O nome vem da Bricolage Grotesque ExtraBold, convertida em curvas. O pingo do i repete o ponto coral.
02 · Logotipo
Uma marca, vários formatos.
O horizontal é a assinatura principal. O vertical serve para espaços quadrados ou altos. O símbolo sozinho entra onde o nome já aparece ou o espaço é pequeno. O nome usa Bricolage Grotesque ExtraBold convertida em curvas.
ponvi-horizontal-positivo.svg
Formato
Fundo
Versão
Arquivo
Positivo: linha índigo, ponto coral e nome em tinta.
Ícone de app e favicon
Ícone índigoPrincipal: app, lojas e avatar
Ícone tintaModo escuro e fundos escuros
64
32
16
FaviconLegível até 16 px: duas formas simples
Família de coresCampanhas, integrações e avatares de equipe
02 · Construção
Duas peças e um respiro.
O símbolo nasce de uma grade de 48 × 48 unidades. A linha mede 12 × 36 com pontas redondas, o ponto tem raio 11,5 e um círculo de raio 14,5 recorta a linha, deixando 3 unidades de folga.
- Grade
- 48 × 48
- Linha
- 12 × 36, pontas redondas
- Ponto
- raio 11,5 em (29, 17)
- Respiro
- 3 (recorte de raio 14,5)
- Nome
- Bricolage Grotesque 800
- Espaçamento do nome
- +1%
- Símbolo na assinatura
- 1,02 × corpo do nome
Área de respiro
Deixe livre, em volta da logo, no mínimo metade da largura do símbolo.
96 px
16 px
Tamanho mínimo
Horizontal: 96 px na tela ou 24 mm impresso. Símbolo: 16 px ou 5 mm.
O pingo do i
O i usa o ponto coral da marca, com 0,2 do corpo do nome, no lugar do pingo original da fonte.
03 · Cores
Índigo de base, cor de sobra.
Três cores principais, três secundárias para dar alegria e organizar o produto, tons claros para fundos e etiquetas, e neutros com um toque de violeta. Clique em qualquer cor para copiar o código.
Tons claros
Neutros de apoio
Etiquetas do produto
Cada cor tem um papel na caixa de entrada. As etiquetas usam o tom claro de fundo, o texto em tinta e um ponto na cor cheia.
Cores de estado
Proporção de uso
Combinações e contraste (WCAG)
04 · Tipografia
Expressiva no título, clara no texto.
Bricolage Grotesque dá personalidade aos títulos, em ExtraBold e com espaçamento apertado. Instrument Sans cuida da leitura na interface e nos e-mails. JetBrains Mono entra em códigos e cabeçalhos técnicos. As três são gratuitas no Google Fonts.
Títulos e nome
Aa
Bricolage Grotesque
Medium 500 · Bold 700 · ExtraBold 800 · espaçamento −4%
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ãçéôú@&?!
Texto e interface
Aa
Instrument Sans
Regular 400 · Medium 500 · Semibold 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ãçéôú@&?!
Teste você mesmo · clique no texto para editar
Fonte
Peso
Caixa de entrada em dia.
DisplayBricolage 800 · 88/0,95 · −5%
Tudo em ordem.
Título 1Bricolage 800 · 56/1 · −4%
Prioridades do dia
Título 2Bricolage 700 · 32/1,1 · −2,5%
Conversas com a equipe
SobretítuloInstrument Sans 600 · 13 · caixa alta +14%
Não lidas · hoje
TextoInstrument Sans 400 · 17/1,55
Responda, agende e organize mensagens sem trocar de janela. O que importa fica sempre à vista.
LegendaInstrument Sans 500 · 13/1,5
Recebido às 09:42 · 3 anexos
05 · Movimento
Role para montar a marca.
O ponto chega
quadro 000 / 179
05 · Movimento
A marca se monta.
3 segundos: o ponto chega, a linha sobe e forma o p, o símbolo abre espaço, o nome sobe letra por letra e o pingo do i fecha a assinatura. A mesma linha do tempo no GSAP (SVG para sites) e no Lottie (JSON e .lottie para o LottieFiles, apps, Webflow e After Effects).
Tocando no player do LottieFiles
Formato
Fundo
Velocidade
2,98 s3,00 s
ponvi-intro-indigo-16x9.json
Princípios de movimento · passe o mouse ou toque para repetir
Tokens de movimento
0,2 sMicro: hover, foco e alternâncias
0,55 sPadrão: textos, cards e entradas
0,6 sChegada: o ponto e os avisos
3 sAssinatura: entrada completa da marca
06 · Elementos gráficos
Peças que se repetem.
Recursos tirados do símbolo amarram todas as peças: o ponto coral, a linha de pontas redondas, o respiro entre elementos e as cores das etiquetas.
A ideia
Nova mensagem
Etiqueta com borda, caixa alta
Trabalho
Clientes
Financeiro
Pessoal
Etiquetas coloridas por assunto
Marina CostaProposta revisada, versão final
Uma linha para organizar, um ponto para o que é novo.
12
Contador e progresso em pontos
Tudo em dia.
Padrão de pontos · passe o mouse ou arraste o dedolinha + ponto
07 · Aplicações
A marca no dia a dia.
Produto, redes, papelaria e e-mail. Os exemplos abaixo usam conteúdo ilustrativo.
Caixa de entrada
3 não lidasMarina CostaProposta revisada, versão final · Segue com os ajustes de prazo que combinamos.Clientes
Equipe FinanceiroFechamento de outubro · Os relatórios já estão na pasta compartilhada.Financeiro
Rafael LimaReunião de quinta às 14h · Confirmo presença e levo os números do trimestre.Trabalho
Juliana AlvesLançamento do site · O cronograma novo está no quadro do projeto.Projetos
Carlos MendesAlmoço de sexta · Reservei para seis pessoas, perto do escritório.Pessoal
Cartão de visita 85 × 55 mm · clique para virar
Caixa de entrada (3) · Ponvi
[Seu nome][Cargo] · Ponvi[e-mail] · [site]
08 · Uso correto
Faça assim, nunca assim.
A logo é um arquivo pronto: não redesenhe, não recolora, não deforme. Na dúvida, use o positivo em fundos claros e nas cores secundárias, e o negativo em índigo ou tinta.
Não faça
09 · Tom de voz
A gente escreve como organiza.
Português claro, frases curtas e nenhum alarme falso. Falamos de mensagens, prazos e pessoas, e tratamos o cliente por você.
Direto
Vamos ao ponto com um fato que a pessoa pode usar.
Assim
Você tem 3 mensagens que precisam de resposta hoje.
Evite
Otimize sua produtividade com nossa solução de comunicação de ponta.
Calmo
E-mail já é barulho demais. A gente não grita.
Assim
Sua caixa está em dia. Até a próxima mensagem.
Evite
URGENTE!!! Não perca nenhuma mensagem importante!
Preciso
Dizemos o que aconteceu, quando e para quem.
Assim
Mensagem enviada às 14:32 para 4 pessoas.
Evite
Sucesso total! Sua mensagem voou pelo mundo!
Assinatura
E-mail profissional, sem ruído.
10 · Arquivos
Tudo pronto para usar.
Os arquivos saem do mesmo desenho desta página. Para gerar de novo depois de qualquer ajuste, rode node scripts/gerar-arquivos.js na pasta do projeto.
Nesta visualização os downloads ficam desativados. Os arquivos estão na pasta do projeto, nos caminhos indicados em cada card. Os botões de copiar SVG e JSON funcionam aqui.
Logos em SVG
Horizontal, vertical e símbolo em 6 versões, com fundo transparente e nome em curvas.
logos/svg/
Ícones e favicon
Ícone do app em índigo, tinta, coral, mel, menta e lavanda, e o favicon.
favicon.svg · logos/svg/ponvi-icone-*.svg
Lottie (.lottie e JSON)
24 animações: 8 fundos em 16:9, 9:16 e 1:1. O .lottie sobe direto no LottieFiles.
animacao/dotlottie/ · animacao/lottie/
Animação GSAP
Função ponviIntro() para sites, com a mesma linha do tempo do Lottie, e um exemplo pronto.
animacao/web/ponvi-intro.js
Cores em CSS e JSON
Todas as cores como variáveis --ponvi-*, prontas para o código.
cores/ponvi-cores.css · .json
Geometria da marca
O símbolo e o nome em código. Gera logos, ícones e o Lottie.
marca/ponvi-marca.js