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
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.
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.
Í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.
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.
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.
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.
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.
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.
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.
Duas texturas, uma regra
- Tint — gradiente turquesa (ou branco, no claro). É ele que garante o contraste do texto; vidro sem tint é vidro ilegível.
- Refração —
backdrop-filter: blur(18px) saturate(160%). O fundo atrás precisa ter variação, senão não lê como vidro. - Especular e rim light — faixa clara diagonal, 1 px de luz na aresta e halo na base. É o que dá espessura ao material.
- 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.
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.
Início Plugin Perto
O Plugin de acessibilidade com mais recursos e tecnologias exclusivas do mercado
- Conformidade com as diretrizes: Lei nº 13.146 e ABNT/NBR 17225
- Mais de 60 funcionalidades
- 8 ferramentas exclusivas








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.
Blog da Perto Acessibilidade e UX
A falta de acessibilidade do seu site pode estar te custando usuários
Um site inacessível não perde só reputação: perde jornada concluída. Quando a pessoa não consegue navegar, ela não volta — e a conta aparece na taxa de rejeição, no tempo de permanência e na conversão.
A conformidade com a Lei 13.146 e a ABNT NBR 17225 é o piso. O ganho vem depois: recurso que ajuda quem tem deficiência ajuda todo mundo que lê no celular, no sol, com pressa ou com o áudio ligado.
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.
Painel de dados
Interações por perfil
últimos 30 diasValor ao lado de cada barra e ícone por perfil: a informação não fica só na cor.
Funções mais acionadas
- Alto contraste escuro318
- Tamanho do texto264
- Leitor de texto197
- Libras151
- Guia de leitura96
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.
Internet para todos
Ferramentas acessíveis promovem igualdade
Um site acessível não é só uma questão técnica: é compromisso com a igualdade de oportunidades no ambiente digital. Veja como funciona.
Conhecer maisPerfil Baixa Visão ativo
Internet para todos
Ferramentas acessíveis promovem igualdade
Um site acessível não é só uma questão técnica: é compromisso com a igualdade de oportunidades no ambiente digital. Veja como funciona.
Conhecer maisO 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.
Contato
Pronto para tornar seu
site mais acessível?
Descubra como o ecossistema de soluções em acessibilidade da Perto pode impulsionar o sucesso do seu negócio. Preencha o formulário e converse com um especialista.
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.
Projeto Nissan Para Todos
A acessibilidade digital levou a Nissan ao topo.
Acessibilidade para Perto da sua marca?
Conformidade legal
Acessibilidade digital é lei — e o site é serviço essencial.
98% das empresas desconhecem a obrigatoriedade. Para quem atende consumidores ou estudantes, qualquer pessoa prejudicada pode acionar o Ministério Público — e já existe jurisprudência consolidada.
- LBI 13.146/2015
- Art. 63 — acessibilidade obrigatória em sites
- ABNT NBR 17225
- Norma técnica brasileira de acessibilidade digital
- eMAG · WCAG
- Padrão do governo federal e referência internacional
- LGPD
- Barreira de acesso tratada como discriminação
"A Perto não apenas atendeu essa necessidade de forma exemplar, como se mostrou uma parceira estratégica que acredita no nosso compromisso de oferecer uma experiência acessível e inclusiva."
Régis Mercês · Time de Marketing do Instituto Ayrton Senna
Perto Digital · Material informativo — não substitui parecer jurídico
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.
O Perto é para todos
A solução de acessibilidade digital mais completa do mundo, de verdade.
Um ecossistema que torna site, plataforma e conteúdo acessíveis — e transforma conformidade em conversão.
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.
69% já desistiram de comprar por uma barreira no site.
E 86% comprariam mais se ele fosse acessível.
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.
Relatório de conformidade
217 páginas varridas, 1.480 elementos avaliados. Nota calculada sobre os critérios de nível A e AA.
Apto a emitir o Selo Perto DigitalCritérios auditados
- 1.4.3Contraste mínimo de textoConforme
- 1.1.1Conteúdo não textual com alternativaConforme
- 2.4.3Ordem de foco previsívelAtenção · 4 páginas
- 3.3.2Rótulo ou instrução em campoConforme
- 1.4.4Redimensionar texto até 200%Conforme
- 1.2.2Legenda em vídeo pré-gravadoFalha · 2 vídeos
- 2.5.8Tamanho mínimo de alvoConforme
Cada linha traz o código do critério e o estado por escrito — o quadradinho de cor é reforço, não a informação.
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.
Atendimento que não deixa ninguém de fora
Nosso portal segue as diretrizes de acessibilidade digital e é auditado continuamente. Se você encontrar uma barreira, fale com a gente pelo canal de acessibilidade.
Empresa comprometida com acessibilidade digital
Este selo comprova que o domínio abaixo passou pela auditoria do Monitor Perto e atende às diretrizes verificadas.
- Domínio
- www.cliente.com.br
- Norma
- WCAG 2.2 AA
- Nota
- 92/100
- Emissão
- set/2026
- Validade
- 12 meses
Verificável em pertodigital.com.br/selo
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.
Acessibilidade
é direito.
E é oportunidade.
60 milhões de brasileiros precisam dela para navegar. Quase 35% do país.
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.
O ecossistema
Não é só um plugin.
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.
86% comprariam mais se o site fosse acessível.
Panorama 2026
Acessibilidade digital no Brasil
Conformidade, audiência e o custo da inação — o que mudou no ano em que a acessibilidade deixou de ser pauta e virou requisito.
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ó.
Acessibilidade digital
Pronto para trazer acessibilidade
para Perto da sua marca?
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"comaria-labeldescrevendo 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.
Não foi possível carregar a nuvem de pontos deste ornamento.
Os SVG estáticos logo abaixo continuam disponíveis.
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.
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.
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-transparencyeprefers-contrast: morea 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.