Perto.digital Perto.digital Central de Identidade
versão set/2026

O Perto é para todos

Tudo que a marca precisa,
sempre por Perto.

A central da identidade Perto Digital: logos e produtos em vetor, os ícones oficiais do ecossistema, cores com contraste verificado, tipografia, componentes de UI e as regras de UX que a marca pratica.

A marca

O que a Perto é, em versão oficial — para nunca reescrever de cabeça.

"Não é só acessibilidade.
É experiência digital.
É crescimento."

Base de Conhecimento Comercial · Perto Digital
Tagline
Solução de acessibilidade digital mais completa do mundo, de verdade.
Claim
A empresa de acessibilidade digital mais premiada do Brasil.
Entidade
Perto Digital · em texto corrido: "a Perto"
Posicionamento
Ecossistema completo de acessibilidade — "não é só um plugin". Parceira estratégica, 100% brasileira.
Assinaturas
"Acessibilidade para Perto da sua marca?" · "Trazer para Perto" · "O Perto é para todos"

Tom de voz

  • Estratégico e consultivo — parceira que ajuda a decidir, não fornecedor que empurra
  • Confiante sem arrogância — liderança sustentada por prova concreta
  • Orientado a dados — todo argumento carrega um número ou uma lei
  • Urgência sem alarmismo — nomeia o custo da inação e aponta a solução
  • Claro e acessível por princípio — a comunicação pratica o que a empresa prega

Na prática

"Ajude os menos favorecidos" Inclusão é direito e oportunidade — nunca caridade

"Evite processos! Compre já!" "98% das empresas desconhecem a obrigatoriedade legal (LBI, Art. 63)"

"Milhões de pessoas..." "60 milhões de brasileiros — 86% comprariam mais em sites acessíveis"

"portadores de deficiência" pessoas com deficiência

Propósito

Inclusão concreta e verificável, que legitima ESG com prova prática — como a Nissan, case público de reputação.

Conformidade

Acessibilidade digital é lei: LBI 13.146/2015 (Art. 63), ABNT NBR 17225, eMAG, WCAG — com jurisprudência consolidada.

Performance

Menos rejeição, mais conversão e melhor SEO: barreiras removidas devolvem jornadas completas para 60 milhões de pessoas.

Logos

Tudo em SVG vetorial — escala sem perder nitidez — com PNG de 3000 px para quem precisa de bitmap. Nos monocromáticos, tile, círculo e detalhe viram contorno — a geometria do ícone é preservada inteira. A regra que evita 90% dos erros: o sufixo diz o fundo de destino — _fundo-claro vai em fundo claro, _fundo-escuro em fundo escuro.

Vetor oficial. Use em fundo branco, Gelo ou foto clara.

Logo principal

Vetor oficial. Use em fundo branco, Gelo ou foto clara.

SVG ↓ PNG ↓
Vetor oficial com wordmark branco. A versão do dia a dia da marca.

Logo para fundo escuro

Vetor oficial com wordmark branco. A versão do dia a dia da marca.

SVG ↓ PNG ↓
Uma cor só, sobre fundo escuro. Impressão, gravação e fundos complexos.

Monocromático branco derivado do vetor oficial

Uma cor só, sobre fundo escuro. Impressão, gravação e fundos complexos.

SVG ↓ PNG ↓
Uma cor só, sobre fundo claro. Ink oficial #0B2429.

Monocromático preto derivado do vetor oficial

Uma cor só, sobre fundo claro. Ink oficial #0B2429.

SVG ↓ PNG ↓
Vetor oficial. Ícone isolado na primária turquesa.

Logomark turquesa

Vetor oficial. Ícone isolado na primária turquesa.

SVG ↓ PNG ↓
O tile com a figura de acessibilidade. App, avatar, favicon.

Ícone

O tile com a figura de acessibilidade. App, avatar, favicon.

SVG ↓ PNG ↓
Só o ícone, em contorno branco, para fundo escuro.

Ícone monocromático branco derivado do vetor oficial

Só o ícone, em contorno branco, para fundo escuro.

SVG ↓ PNG ↓
Só o ícone, em contorno preto, para fundo claro.

Ícone monocromático preto derivado do vetor oficial

Só o ícone, em contorno preto, para fundo claro.

SVG ↓ PNG ↓

Pacote completo

Todos os SVG e PNG desta seção, mais os favicons (512 · 180 · 32 px).

Baixar logos (.zip) ↓ Favicon 512 ↓ 180 ↓ 32 ↓

Fonte da verdade: o Manual de Marca no Figma ↗ e a pasta do Drive. Os vetores aqui são os mesmos arquivos que a Perto usa em produção no site oficial.

Usos proibidos (manual de marca)

  • Distorcer ou mudar a proporção
  • Rotacionar
  • Mudar a cor
  • Inverter os elementos
  • Trocar a tipografia
  • Aplicar efeitos ou sombra
  • Usar contorno
  • Usar versão sem contraste com o fundo

Área de proteção: no mínimo o respiro equivalente à altura do tile em todos os lados. Tamanho mínimo: 100 px digital, 210 px em redes sociais.

Produtos

Os ícones oficiais do ecossistema e os lockups em vetor — tile + nome em Baloo 2 + "Perto" em ciano, exatamente como o manual define. Cada lockup vem nas duas versões de fundo.

Lockups · SVG + PNG, fundo escuro e claro

Lockup Plugin Perto para fundo escuro
Lockup Plugin Perto para fundo claro
Plugin Perto SVG escuro SVG claro PNG
Lockup Libras Perto para fundo escuro
Lockup Libras Perto para fundo claro
Libras Perto SVG escuro SVG claro PNG
Lockup Assistente Perto para fundo escuro
Lockup Assistente Perto para fundo claro
Assistente Perto SVG escuro SVG claro PNG
Lockup Comunicação Perto para fundo escuro
Lockup Comunicação Perto para fundo claro
Comunicação Perto SVG escuro SVG claro PNG
Lockup Texto em Fala Perto para fundo escuro
Lockup Texto em Fala Perto para fundo claro
Texto em Fala Perto SVG escuro SVG claro PNG
Lockup Análise Perto para fundo escuro
Lockup Análise Perto para fundo claro
Análise Perto SVG escuro SVG claro PNG
Lockup Monitor Perto para fundo escuro
Lockup Monitor Perto para fundo claro
Monitor Perto SVG escuro SVG claro PNG
Lockup Docs Perto para fundo escuro
Lockup Docs Perto para fundo claro
Docs Perto SVG escuro SVG claro PNG
Lockup Pertocast Perto para fundo escuro
Lockup Pertocast Perto para fundo claro
Pertocast Perto SVG escuro SVG claro PNG
Lockup Suporte Perto para fundo escuro
Lockup Suporte Perto para fundo claro
Suporte Perto SVG escuro SVG claro PNG

Também no acervo, em PNG oficial do CDN: Texto Alternativo Perto ↓ · Texto Acessível Perto ↓ · Vídeo Perto ↓ .

Ícones de produto · SVG + PNG, turquesa para viver dentro do tile

Ícone Plugin Perto: figura de acessibilidade
PluginSVG · PNG
Ícone Libras Perto: mão em sinal de Libras
LibrasSVG · PNG
Ícone Assistente Perto: atendente com headset
AssistenteSVG · PNG
Ícone Comunicação Perto: pasta de documentos
ComunicaçãoSVG · PNG
Ícone Texto em Fala Perto: linhas de texto com nota musical
Texto em FalaSVG · PNG
Ícone Análise Perto: gráfico de barras com tendência
AnáliseSVG · PNG
Ícone Monitor Perto: lupa de inspeção
MonitorSVG · PNG
Ícone Docs Perto: documento com linhas de texto
DocsSVG · PNG
Ícone Pertocast Perto: tela transmitindo
PertocastSVG · PNG
Ícone Suporte Perto: boia de salvamento
SuporteSVG · PNG

Ícones do botão do Plugin · 5 variantes oficiais

Variante 1 do ícone do botão do Plugin
Variante 1SVG · PNG
Variante 2 do ícone do botão do Plugin
Variante 2SVG · PNG
Variante 3 do ícone do botão do Plugin
Variante 3SVG · PNG
Variante 4 do ícone do botão do Plugin
Variante 4SVG · PNG
Variante 5 do ícone do botão do Plugin
Variante 5SVG · PNG

Como o Plugin entra na página · uma linha, sempre a oficial

O Plugin é produto, não componente de layout. Nunca redesenhe o painel em mockup, apresentação, protótipo ou peça: uma reprodução envelhece na primeira atualização do produto e mostra ao cliente algo que não é o que ele vai receber. Cole o script oficial e o Plugin se renderiza sozinho — sempre na versão atual e com as funções que aquele cliente contratou. Em peça, o que pode aparecer é o botão de acionamento (os 5 SVG acima) e o efeito na página.

Script oficial do Plugin

Antes do </body>. O loader lê o domínio, busca os dados do cliente e monta o painel e o botão — nada disso é escrito por quem integra.

O domínio precisa estar cadastrado no painel da Perto. Sem cadastro, o loader carrega mas getPertoDataClient() devolve false e o Plugin não inicializa — é o caso desta Central hoje, e a saída correta é cadastrar o domínio, nunca preencher o espaço com uma imitação do painel. O script já está nesta página: no dia em que o domínio for autorizado, o Plugin aparece aqui sem mudar uma linha.

Pacote de produtos

Lockups (SVG + PNG), ícones de produto e variantes do botão do Plugin.

Baixar produtos (.zip) ↓

Selos de conformidade

Os selos oficiais que a Perto emite por norma atendida. Use para comprovar conformidade — com o nome da norma legível e sem recolorir.

Selo de conformidade WCAG emitido pela Perto Digital
WCAGSVG · PNG
Selo de conformidade LBI emitido pela Perto Digital
LBISVG · PNG
Selo de conformidade e-MAG emitido pela Perto Digital
e-MAGSVG · PNG
Selo de conformidade LGPD emitido pela Perto Digital
LGPDSVG · PNG
Selo de conformidade ADA emitido pela Perto Digital
ADASVG · PNG
Selo de conformidade GDPR emitido pela Perto Digital
GDPRSVG · PNG
Selo de conformidade HIPAA emitido pela Perto Digital
HIPAASVG · PNG
Selo de conformidade COPPA emitido pela Perto Digital
COPPASVG · PNG
Selo de conformidade UNRUH emitido pela Perto Digital
UNRUHSVG · PNG

Pacote de selos

Os 9 selos em SVG e PNG.

Baixar selos (.zip) ↓

Ícones

Os 77 ícones oficiais do ecossistema, em SVG. São os mesmos arquivos que o Plugin Perto carrega em produção — desenhados com currentColor, então herdam a cor onde você aplicar. Clique em qualquer ícone para copiar o caminho.

Perfis de acessibilidade · 9

Um clique liga o conjunto de ajustes de um perfil. São os 8 perfis do Plugin.

↓
↓
↓
↓
↓
↓
↓
↓
↓

Navegação · 8

Como a pessoa se move pela página sem depender de mouse ou monitor.

↓
↓
↓
↓
↓
↓
↓
↓

Conteúdo · 14

Recursos que reescrevem, descrevem ou reorganizam o que está na tela.

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

Cor e tipografia · 13

Contraste, saturação e ajustes de texto — o grupo mais usado do Plugin.

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

Som · 3

Leitura em voz alta, comando por voz e controle de áudio.

↓
↓
↓

Interface · 12

Os controles que montam a barra e os painéis: abas, setas e passos.

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

Conformidade e ajuda · 5

Os links obrigatórios de um rodapé de acessibilidade.

↓
↓
↓
↓
↓

Ícones de marca e recursos · 13

Os ícones que o site oficial usa para nomear diferenciais e canais.

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

Pacote de ícones

Os 77 SVG, prontos para virar um sprite ou uma pasta de assets.

Baixar ícones (.zip) ↓

Como aplicar: os SVG usam currentColor. Em <img> eles saem na cor original; para herdar a cor do texto, use a técnica de máscara CSS (botão acima) ou cole o SVG inline. Ícone que carrega significado precisa de rótulo em texto ao lado; ícone decorativo leva aria-hidden="true".

Cores

Clique em qualquer cor para copiar o HEX. Contrastes verificados por WCAG 2.2 — não estimados.

Primárias

Fundos escuros · a base da marca

Secundárias

Apoio e dataviz

Regras de ouro: numa peça escura, ~70–80% é fundo Turquesa profunda, ~15% superfícies de vidro/Gelo e ~5–10% acentos. Lima é tempero, nunca prato principal — e 1–2 palavras em lima por título bastam.

Pares de contraste verificados (WCAG 2.2)

Aprovados

  • Branco sobre #00171D — ~19:1
  • #B3F169 sobre #00171D — ~13:1
  • #91C829 sobre #00171D — ~8:1
  • Branco sobre #0B5A6A — ~7,7:1
  • #0B5A6A sobre branco — ~7,7:1
  • #00A5C1 sobre #00171D — ~5,5:1
  • Branco sobre #49842A — ~4,6:1 (botões)

Reprovados — nunca use

  • #91C829 (Lima) sobre branco — ~1,9:1
  • #9CB865 (Oliva) sobre branco — ~2,2:1
  • #B3F169 sobre branco
  • #00A5C1 sobre branco — só em texto grande (≥24px)

No claro, o destaque vira Turquesa #0B5A6A ou Verde botão #49842A.

Tipografia

Baloo 2 em logos, nomes de produto e display publicitário. Inter em todo o resto — títulos de conteúdo, corpo, UI e documentos. Nada além disso.

Kicker

Inter SemiBold · CAPS · tracking largo · lima ou ciano · 1 por seção

O Perto é para todos

Headline

Inter Bold/ExtraBold · branco · 1–2 palavras em lima clara

Mais completa do mundo, de verdade.

Corpo

Inter Regular · 16–18px · entrelinha 1.5 · Gelo 200 no escuro

São 60 milhões de brasileiros que precisam de acessibilidade digital — e 86% comprariam mais se o site fosse acessível.

Display publicitário

Baloo 2 Bold · peças de anúncio e nomes de produto

Trazer para Perto

Lockup de produto

Vetor oficial — tile + Baloo 2 Bold + "Perto" em ciano #00A5C1

Lockup Plugin Perto

Fontes

As duas famílias são gratuitas no Google Fonts.

Baloo 2 ↗ Inter ↗

UI & UX

O sistema em uso. Todos os blocos abaixo são componentes reais, montados com os tokens e os ícones oficiais desta página — pode inspecionar, copiar e levar para o projeto. Cada um traz a regra de UX que ele existe para cumprir.

Padrão de perfis

O padrão de interação mais importante da marca: em vez de pedir que a pessoa configure 60 opções, um perfil liga o conjunto certo de uma vez. Use-o nas interfaces que a Perto constrói — painel de cliente, Monitor, Análise. Não é o painel do Plugin, que quem desenha é o produto. Regra: o estado nunca é comunicado só por cor — cada item tem rótulo, descrição e aria-checked.

Perfis de acessibilidade Um perfil liga o conjunto certo de ajustes

Abas e lista de funções

Categorias reduzem a carga cognitiva de um catálogo grande. Regra: abas são role="tablist" e respondem às setas do teclado; a aba ativa se distingue por cor e por peso e barra inferior.

  • Navegação pelo teclado
  • Navegação por face
  • Cursores ampliados
  • Teclado virtual

Formulário

Onde a acessibilidade vira conversão: 28% das pessoas que dependem de acessibilidade não conseguem concluir uma compra. Regra: todo campo tem <label> ligado por for, a dica fica visível antes do erro, e o erro é texto — não só a borda vermelha.

Usamos o endereço para rodar o diagnóstico de conformidade.

Falta o domínio depois do @ — algo como contato@empresa.com.br

Dado em destaque

A marca argumenta com número e fonte. Regra: o número é o elemento maior do bloco, a fonte fica sempre visível, e a cor de dataviz só entra como apoio — o significado está no rótulo.

60mi de brasileiros precisam de acessibilidade para usar a internet quase 35% do país · Cetic.br
86% comprariam mais se o site fosse acessível Cetic.br
98% das empresas desconhecem a obrigatoriedade legal LBI 13.146/2015, Art. 63

Card de produto

O lockup entra no topo, o benefício vem em uma linha e o CTA é consultivo. Regra: o card inteiro não é um link — o alvo clicável é o botão, com nome que diz o que acontece.

Plugin Perto

Mais de 60 funcionalidades e perfis pré-configurados. O maior e mais completo do mundo.

  • Navegação por face e por teclado
  • Perfis com um clique
Libras Perto

A única IA de interpretação em Libras do Brasil com contextualização — não tradução literal.

  • +10 avatares 3D
  • Personagem com a sua marca
Selo de conformidade WCAG

Selo Perto Digital — comprova que o site está alinhado às diretrizes globais e à LBI.

Botões, chips e foco

Navegue com Tab pelos controles abaixo: o anel de foco é lima e tem 3 px. Regra: nunca remova o foco visível, e o alvo tem no mínimo 44 px de altura para quem tem tremor ou usa toque.

Case de sucesso Conformidade LBI Ver a seção

As regras que a marca pratica

Não é checklist de conformidade: é o que separa uma peça da Perto de uma peça genérica. Uma marca de acessibilidade que publica algo inacessível perde o argumento comercial.

Contraste antes da estética

4.5:1 em texto normal, 3:1 em texto grande e elementos gráficos. Lima e oliva só funcionam como texto sobre fundo escuro — no claro o destaque vira turquesa.

Foco sempre visível

Anel lima de 3 px com 2 px de deslocamento. Quem navega por teclado precisa saber onde está; outline: none sem substituto é defeito, não estilo.

Nunca só pela cor

Estado ligado/desligado, erro e sucesso levam texto, ícone ou forma além da cor. Daltonismo atinge 1 em cada 12 homens.

Movimento é opcional

Toda animação respeita prefers-reduced-motion. Parallax e autoplay podem desencadear crise em quem tem epilepsia fotossensível ou distúrbio vestibular.

Alt text que informa

Descreva a função da imagem, não o arquivo. Imagem decorativa recebe alt="". O Texto Alternativo Perto gera as descrições em um clique.

Hierarquia semântica

Um h1 por página e nível por nível, sem pular. É assim que o leitor de tela monta o índice da página — e o Google também.

Linguagem simples

Frase curta, voz ativa, sem juridiquês. A marca prega linguagem clara: a própria comunicação é a primeira prova.

Atalho para o conteúdo

Primeiro elemento focável da página é "pular para o conteúdo" — inclusive aqui. Sem ele, quem usa teclado percorre o menu inteiro em cada página.

Anti-padrões

Não usar o gradiente do ícone (#82A341 → #C1DC89) como cor de texto.

Sim lima clara #B3F169 no escuro, turquesa #0B5A6A no claro.

Não encher o título de destaques em lima.

Sim uma ou duas palavras — o termo que decide a frase.

Não vidro sobre cor chapada, nem vidro sem contraste para o texto por cima.

Sim vidro sobre gradiente, foto ou glow — e texto testado em cima.

Não clip-art de cadeira de rodas azul para falar de inclusão.

Sim os ícones oficiais desta página, personagens 3D e pessoas reais.

Não redesenhar ícone de produto nem inventar lockup.

Sim baixar o vetor oficial na seção Produtos.

Não "portadores de deficiência", "pessoas especiais", tom de caridade.

Sim "pessoas com deficiência" — inclusão é direito e oportunidade.

Tokens CSS

Todas as variáveis da marca — cores, vidro, tipografia e raios — prontas para qualquer projeto web.

perto-tokens.css ↓

Telas

O sistema aplicado em telas inteiras: páginas, painel de dados, materiais e peças de campanha, em liquid glass, nuvem de pixel e ornamentos 3D, nos dois temas. Nenhuma delas desenha o Plugin — o painel é do produto e entra pelo script oficial; o que aparece nas telas é o botão de acionamento em asset oficial e o efeito na página.

Superfície liquid glass Texto sobre o vidro — o contraste vem do tint, não do blur.

Duas texturas, uma regra

  1. Tint — gradiente turquesa (ou branco, no claro). É ele que garante o contraste do texto; vidro sem tint é vidro ilegível.
  2. Refração — backdrop-filter: blur(18px) saturate(160%). O fundo atrás precisa ter variação, senão não lê como vidro.
  3. Especular e rim light — faixa clara diagonal, 1 px de luz na aresta e halo na base. É o que dá espessura ao material.
  4. Nuvem de pixel — malha de quadrados de 2 px em grade de 9 px, dissolvida por máscara radial. Entra atrás de número e título para dar profundidade sem criar mais uma caixa.

Salvaguarda: em prefers-reduced-transparency, prefers-contrast: more ou navegador sem backdrop-filter, o vidro cai para superfície opaca e a nuvem de pixel desaparece — o texto nunca depende do efeito.

Ornamentos pontilhados 3D · 6 peças

Derivados da geometria real do logo — o círculo, o detalhe menor, o quadrado arredondado e a figura de acessibilidade. O volume vem do raio de cada ponto (iluminação vinda de cima à esquerda, a mesma do gradiente do ícone), nunca da cor: por isso funcionam em qualquer tema e nunca carregam informação. Aplicados por máscara CSS, herdam a cor do contexto.

As duas esferas

O círculo do logo e o detalhe menor, pontilhados com iluminação de cima à esquerda. O ornamento mais reconhecível da marca.

SVG ↓

Esfera

Só o círculo principal, centro (27.74, 28.62) raio 15.26. Para composições em que a marca já aparece em outro lugar.

SVG ↓

Figura em halftone

A pessoa de braços abertos do ícone, amostrada em pontos: o raio de cada ponto vem da cobertura de tinta.

SVG ↓

Figura, malha grossa

A mesma figura com passo maior. Para capa e story, onde o ornamento aparece grande.

SVG ↓

Tile em perspectiva

O quadrado arredondado do logo projetado em fuga. Os cantos curvos continuam legíveis na projeção.

SVG ↓

Horizonte

Grade em fuga sem contorno, para assentar a peça. Densidade cai com a distância, sem virar linha sólida.

SVG ↓

Como aplicar: ornamento é textura, não conteúdo — entra com aria-hidden, em z-index:-1, e desaparece em prefers-reduced-transparency e prefers-contrast: more. Nunca coloque texto por cima da parte densa: use a região que já dissolveu.

Pacote de ornamentos

Os 6 SVG com currentColor, prontos para máscara ou uso direto.

Baixar ornamentos (.zip) ↓
Tema das telas

As telas são exemplos visuais: chegam à tecnologia assistiva como imagem com descrição, e os controles simulados ficam fora da ordem de tabulação — nenhum botão falso captura o foco de quem navega por teclado.

Página de solução, pronta para o Plugin 1440 × 860

O layout canônico de uma página de produto: navegação, migalha, título com trecho em destaque, três itens de conformidade e a faixa de clientes com botão de pausa. O botão de acionamento na borda é o asset oficial — o painel quem desenha é o produto, pelo script da Perto, nunca a peça.

O painel do Plugin não é desenhado aqui, e nem deve ser em nenhuma peça. Quem o renderiza é o produto, pelo script oficial — que já está carregado nesta página. Enquanto o domínio da Central não for cadastrado no painel da Perto, getPertoDataClient() devolve false e o Plugin não inicializa; cadastrado o domínio, ele aparece sozinho, aqui e em qualquer página com o mesmo script.

O efeito do Plugin no conteúdo 1440 × 860

O que muda na página quando as funções de conteúdo estão ligadas: links sublinhados, régua do guia de leitura sobre o parágrafo em foco e o resto do texto recuado. O que se vê aqui é o site — o painel que aciona isso é do produto e entra pelo script oficial.

Painel de dados — Análise Perto 1280 × 760

Aqui os quatro indicadores viraram uma faixa dividida por fios em vez de quatro caixas, e o gráfico perdeu a moldura: fica sobre a nuvem de pixel, separado por linha. WCAG 1.4.1: cada série traz o valor e o ícone do perfil — a leitura não depende de comparar cores.

O efeito do Plugin no mobile 390 × 800

À esquerda a página como ela chega; à direita a mesma página com o perfil de baixa visão ligado pelo Plugin — texto maior, alto contraste, links sublinhados e cursor ampliado. O botão de acionamento fica na borda, como no produto.

O par é o que a marca aprova: não basta a tela bonita — precisa funcionar com o Plugin ligado.

Formulário e rodapé 1280 × 1040

O formulário da marca vive sobre vidro, com a nuvem de pixel atrás em vez de moldura. WCAG 3.3.2 e 1.4.11: rótulo visível acima do campo, obrigatoriedade escrita em palavras, erro descrito por extenso e borda de campo com 3:1 contra o fundo.

Slide, post e one-pager 16 : 9 · 1080 × 1080 · A4

As três peças de saída, agora sem caixa nenhuma: os números se separam por fio vertical e ficam sobre a nuvem de pixel. No one-pager impresso o sistema vira tinta — superfície branca, títulos em turquesa e nada de transparência.

Capa de apresentação 16 : 9

A abertura do deck: tipo grande, três selos como prova e a marca em 3D — figura e as duas esferas — sangrando pela direita. O ornamento ocupa o lugar que antes teria uma foto ou uma caixa — e o texto fica todo na metade que já dissolveu.

Story · Reel 9 : 16

Vertical, com um dado só e a figura em volume 3D no centro. Nada de caixa: a hierarquia é toda tipográfica, e o dado vem com a fonte visível — regra da marca mesmo em peça de 15 segundos.

Monitor Perto — relatório de conformidade 1280 × 800

A nota fica sobre a esfera 3D, sem círculo de progresso nem medidor. Cada critério traz o código do WCAG e o estado por escrito: o quadradinho de cor é reforço, e o formato dele muda por estado — círculo, quadrado e losango — para quem não distingue as cores.

O Selo no site do cliente 1280 × 620

Como o selo chega ao mundo: embutido no rodapé do cliente, em placa clara para funcionar sobre qualquer fundo, e a página de verificação que ele abre. O tile extrudado em 3D assenta a peça sem moldura.

Artes com os ornamentos 3D · 5 formatos

Aqui o ornamento não é fundo: é o assunto da peça. Cinco formatos que a marca usa de verdade, cada um com um ornamento 3D diferente e nenhuma caixa — a composição se resolve por fio, escala e espaço vazio.

Post institucional 1080 × 1080

A marca em 3D ocupa a metade direita e o texto respira na esquerda. É a peça de posicionamento: nenhum dado, nenhuma oferta — só o que a Perto defende.

Divisor de seção 16 : 9

O slide que separa capítulos do deck: número grande, título curto e as duas esferas em 3D sangrando pela esquerda. Um fio horizontal segura a composição — mais nada.

Anúncio e capa de relatório 4 : 5 · 3 : 4

Dois verticais. No anúncio, a figura em volume segura o dado e o CTA fecha embaixo. Na capa do relatório, a esfera 3D entra atrás do título — é a peça mais sóbria da família.

Backdrop de evento 21 : 9

Formato de palco e telão. O tile extrudado ancora a direita e o horizonte pontilhado assenta a base — os dois juntos dão profundidade a uma peça que vai ser vista de longe. Tipo grande e uma pergunta só.

O que foi verificado nestas telas

Não é lista de intenções: é o que dá para conferir abrindo o inspetor nesta página. Critérios do WCAG 2.2 nível AA.

1.4.3 · 1.4.11 Contraste de texto e de componente
Todo par texto/fundo dos dois temas foi calculado: mínimo 4.5:1 em corpo, 3:1 em título grande, borda de campo e trilha de gráfico. Lima e oliva só aparecem como texto no escuro — no claro o destaque vira turquesa.
1.4.1 Informação nunca só na cor
Barra de gráfico traz valor numérico e ícone do perfil; o perfil ativo no mobile traz etiqueta em texto; erro de campo traz mensagem. Em escala de cinza a tela continua legível.
1.4.12 Espaçamento de texto
Nenhuma caixa trava altura de linha. Aumentar entrelinha para 1.5 e espaço entre letras para 0.12em não corta conteúdo em nenhuma tela.
2.2.2 Pausar movimento
A faixa de clientes e o vídeo de fundo do formulário têm controle de pausa visível — como no site real. Nada se move sozinho sem forma de parar.
2.5.8 Alvo mínimo
Todo controle desenhado tem 44 px de altura — chip de filtro, aba, botão do Plugin e CTA. O tamanho está no desenho, não só na regra.
4.1.2 · 1.1.1 Nome, função, valor
Cada tela é um role="img" com aria-label descrevendo o conteúdo, inclusive os números. Os controles simulados não entram no foco, então ninguém tabula por botão que não faz nada.
1.4.10 Refluxo
As molduras escalam por transformação, sem rolagem horizontal na página. O conteúdo real de cada padrão reflui em uma coluna no mobile.
3.3.1 · 3.3.2 Rótulo e erro
Rótulo sempre visível acima do campo, obrigatoriedade escrita em palavras (não só asterisco) e mensagem de erro que diz como corrigir.

Ornamentos 3D

Aqui a geometria é tridimensional de verdade: cada ponto existe em (x, y, z), é rotacionado, projetado em perspectiva (f = D/(D+z)), ordenado por profundidade e iluminado pela normal da superfície. A face voltada para trás não desaparece — fica esmaecida, e a nuvem mantém volume. Arraste o ornamento ou use os controles para girar.

Marca completa

A figura de acessibilidade em volume, a esfera grande atrás e a menor à frente — o ícone da marca reconstruído em 3D.

Composição 3D da marca: a figura de acessibilidade de braços abertos, em volume pontilhado, à frente de uma esfera grande de pontos, com uma esfera menor no canto inferior direito.

SVG do ângulo padrão ↓

Os cinco ornamentos 3D · SVG no ângulo padrão

Marca completa

A figura de acessibilidade em volume, a esfera grande atrás e a menor à frente — o ícone da marca reconstruído em 3D.

SVG ↓ Nuvem 3D (.json) ↓

As duas esferas

O círculo do logo e o detalhe menor como duas esferas em posições reais no espaço, com paralaxe entre elas.

SVG ↓ Nuvem 3D (.json) ↓

Figura em volume

A silhueta da figura inflada por transformada de distância: cheia no tronco, afinando nas pontas.

SVG ↓ Nuvem 3D (.json) ↓

Esfera

Pontos distribuídos por espiral de Fibonacci na superfície — espaçamento uniforme em qualquer ângulo.

SVG ↓ Nuvem 3D (.json) ↓

Tile extrudado

O quadrado arredondado do logo com espessura: face frontal, traseira e a parede lateral.

SVG ↓ Nuvem 3D (.json) ↓

O que vai no .json: a nuvem crua — pts com as coordenadas (x, y, z) e nrm com a normal de cada ponto, além da escala e do ângulo padrão. É o suficiente para reprojetar em qualquer ferramenta, animar num render 3D ou levar para o After Effects sem depender deste site.

Pacote 3D

Os cinco ornamentos em SVG no ângulo padrão. As nuvens .json baixam individualmente nos cartões.

Baixar ornamentos 3D (.zip) ↓

Regras de uso

textura Ornamento não carrega informação
Entra sempre com aria-hidden. Nada do que a peça precisa comunicar pode depender dele — se apagar o ornamento e a mensagem se perder, a composição está errada.
1.4.3 Contraste vem do texto, não do fundo
Ponha o texto na região que já dissolveu, ou reduza a opacidade da nuvem até o par texto/fundo passar 4.5:1. O ornamento nunca deve ser a razão de um contraste falhar.
2.2.2 Sem rotação automática
O visualizador acima só gira quando alguém arrasta ou aciona um controle. Ornamento 3D em peça publicada entra estático — movimento contínuo cansa e quebra em prefers-reduced-motion.
alto contraste Ornamento desaparece
Em prefers-reduced-transparency e prefers-contrast: more a nuvem sai de cena, como a nuvem de pixel. A peça precisa continuar de pé sem ela.

Materiais

Apresentações, propostas, one-pagers e cases publicados pelo time de marketing. A lista carrega da biblioteca da Central, então está sempre na versão mais recente — sem arquivo desatualizado circulando por e-mail.

Carregando a lista…

Acervo

Onde encontrar cada asset oficial. Itens do Drive: clique para copiar o nome exato e busque no Drive da marca.

Marca e diretrizes

Apresentações

Vídeos

Cases de sucesso

Pertocast

Imagens