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."
- 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.
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
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
Ícones do botão do Plugin · 5 variantes oficiais
Ícones
Os 81 í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 · 17
Os ícones que o site oficial usa para nomear diferenciais e canais.
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.1 — 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.1)
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.
O Perto é para todos
Mais completa do mundo, de verdade.
São 60 milhões de brasileiros que precisam de acessibilidade digital — e 86% comprariam mais se o site fosse acessível.
Trazer para Perto
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.
Painel de perfis
O padrão mais importante do produto: em vez de pedir que a pessoa configure 60 opções, um perfil liga o conjunto certo de uma vez. Regra: o estado nunca é comunicado só por cor — cada item tem rótulo, descrição e aria-checked.
Perfis de acessibilidade
Escolha um perfil e o Plugin ajusta a página
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.
- Libras contextualizada
- Texto simplificado
- Guia de leitura
- Sublinhar links
- Leitor de texto
- Comando de voz
- Silenciar sons
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.
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.
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
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 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.
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.
Acervo
Onde encontrar cada asset oficial. Itens do Drive: clique para copiar o nome exato e busque no Drive da marca.