Manual de Identidade Visual
A fonte única da verdade para tudo que leva a marca PoisonPay: da cor de um botão ao texto de um e-mail de cobrança. Se não está aqui, não é PoisonPay.
Identidade da Marca
A PoisonPay é infraestrutura financeira. A marca precisa transmitir três coisas ao mesmo tempo: potência, segurança e modernidade. Nada aqui é decorativo — cada elemento carrega um desses significados.
1.1 · O logotipo
O logotipo é composto por dois elementos que podem viver juntos ou separados, mas nunca ser redesenhados.
O símbolo
Um P construído com corte diagonal, sugerindo velocidade e transação em movimento. No centro do contorno vive um cadeado — a promessa de segurança não é dita, é desenhada. O símbolo sozinho é o avatar, o favicon e o app icon.
O logotipo textual
"Poison" em degradê branco→lavanda, "Pay" em degradê magenta→azul. A divisão cromática separa identidade de função. Sempre em caixa alta e baixa como no original — nunca em versalete, nunca todo maiúsculo.
1.2 · Versões oficiais
Uso padrão. Headers, dashboards, checkout, e-mails.
Favicon, app icon, avatar, selo de rodapé.
Sobre a cor de marca, fotos ou impressão em 1 cor.
Exceção: nota fiscal, contrato, documento impresso.
1.3 · Atributos da marca
Liquidação em D+0. A interface nunca faz o usuário esperar sem feedback.
Antifraude e PCI. Segurança é visível na UI, não escondida no rodapé.
Taxa, prazo e saldo sempre à vista. Nunca letra miúda.
Dark theme, degradês e glow. Parece caro porque é bem feito.
Paleta de Cores
A paleta nasce do degradê do logotipo: magenta → roxo → azul elétrico, ancorada em roxo escuro e azul mar. É uma paleta exclusivamente dark — não existe versão light da PoisonPay.
2.1 · Cores de marca
2.2 · Escalas completas
Roxo (primária)
Magenta (acento)
Azul elétrico (secundária)
Azul mar (superfícies frias)
2.3 · Degradês oficiais
O degradê de marca reproduz exatamente o logotipo. Não crie variações novas.
O degradê do logotipo. Botão primário, cartão, header de e-mail.
Versão curta e mais quente. Barras de progresso, toggles, badges.
Azul mar. Áreas informativas e blocos de dados.
Fundo profundo. Páginas de erro e estados vazios.
2.4 · Superfícies do dark theme
Cinco níveis de elevação. Quanto mais alto o elemento, mais clara a superfície — a hierarquia vem da luz, não da sombra.
2.5 · Cores de status financeiro
Vocabulário fechado. Toda transação no ecossistema PoisonPay usa exatamente um destes sete estados — em qualquer tela, e-mail ou webhook.
| Estado | Cor | Quando usar |
|---|---|---|
| Pago | #00E5A0 | Valor confirmado e disponível para saque conforme o prazo. |
| Pendente | #FFB020 | Aguardando pagamento do cliente (PIX gerado, boleto emitido). |
| Estornado | #35C6FF | Devolução concluída, a pedido do seller ou do cliente. |
| Recusado | #FF3D6E | Negado pelo emissor ou pelo antifraude. É um fim de fluxo. |
| Em análise | #A81CFF | Retido pelo antifraude, aguardando decisão manual. |
| Chargeback | #FF7A3D | Contestação aberta pelo portador junto ao emissor. |
| Bloqueado | #7E7898 | Conta ou transação travada por decisão de compliance. |
2.6 · Regras de aplicação
O magenta é pontuação, não parágrafo. Use no elemento mais importante e em mais nada.
Degradê só em títulos curtos e números. Em parágrafo, destrói a legibilidade.
Verde é sempre "pago". Nunca use verde para "salvar" ou "concluir" um formulário.
Nossos escuros têm base arroxeada. Cinza puro (#2A2A2A) parece um bug ao lado da paleta.
Tipografia
Duas famílias, zero exceções. Uma para interface, uma para números e código.
Aa Bb Cc 123
Família de interface. Geométrica e levemente arredondada — conversa com as curvas do logotipo sem competir com ele. Excelente em corpo pequeno sobre fundo escuro.
Pesos: 400 · 500 · 600 · 700 · 800
R$ 1.482,90
Família monoespaçada. Obrigatória para valores monetários, IDs de transação, chaves PIX, códigos e JSON. O alinhamento vertical dos dígitos é o que torna uma tabela financeira legível.
Pesos: 400 · 600 · 700
3.1 · Escala tipográfica
3.2 · Regras de uso
R$, percentuais, IDs e datas em JetBrains Mono. Colunas ficam alinhadas e comparáveis.
Regular, SemiBold e ExtraBold resolvem tudo. Mais que isso vira ruído.
Em textos longos, limite a largura. Linha longa em dark theme cansa o dobro.
#FFFFFF só em títulos. Corpo usa #C6BFDE para reduzir o brilho no escuro.
Grid, Espaço e Raio
Grid de 12 colunas, espaçamento em múltiplos de 4px e uma escala fixa de raios.
4.1 · Grid de 12 colunas
4.2 · Escala de espaçamento
Base 4px. Nunca use um valor fora da escala — se precisou de 13px, o layout está errado.
4.3 · Raios de borda
4.4 · Breakpoints
| Nome | Largura | Comportamento |
|---|---|---|
| sm | 640px | Uma coluna. Bottom nav assume a navegação. |
| md | 768px | Duas colunas em cards. Tabela vira scroll horizontal. |
| lg | 1024px | Sidebar fixa aparece. Layout completo de dashboard. |
| xl | 1280px | Grid de 3–4 colunas em KPIs. |
| 2xl | 1536px | Conteúdo trava em 1120px e centraliza. |
Design Tokens
Todo valor do sistema existe como custom property CSS. Código de produto consome o token, nunca o valor bruto — trocar a marca inteira deve ser uma edição em um arquivo.
<link rel="stylesheet" href="https://poisonpay.com.br/id-visual/assets/css/tokens.css">5.1 · Tokens de cor
--pp-purple #7B2CFA /* primária */
--pp-magenta #E700FF /* acento */
--pp-violet #A81CFF /* hover / foco */
--pp-blue #3D1AF5 /* secundária */
--pp-deep #2A0B6B /* roxo escuro */
--pp-sea #0B2545 /* azul mar */
--pp-bg-base #07050F /* fundo da página */
--pp-bg-elev-2 #131024 /* cards e inputs */
--pp-text-high #FFFFFF /* títulos */
--pp-text-med #C6BFDE /* corpo */
--pp-text-low #9089AD /* secundário */5.2 · Movimento
Durações
--pp-dur-instant80ms — feedback de toque--pp-dur-fast140ms — hover, foco--pp-dur-base220ms — padrão--pp-dur-slow340ms — modal, drawer--pp-dur-slower520ms — reveal
Curvas
standard— 90% dos casosemphasized— entrada de painéisspring— toggles e checksin— saídasout— entradas suaves
Z-index
dropdown1000sticky1100overlay1200modal1300toast1500 ·tooltip1600
5.3 · Elevação
Divisores, linhas
Cards
Dropdowns
Modais
Uso da Marca
O logotipo é o ativo mais caro da empresa. Estas regras não são estéticas — são de proteção.
6.1 · Área de respiro
A margem mínima ao redor do logotipo equivale à altura do cadeado do símbolo (referido como X). Nenhum elemento — texto, borda, imagem — invade essa área.
6.2 · Tamanhos mínimos
Impresso: logotipo completo com no mínimo 25mm de largura; símbolo isolado com no mínimo 8mm. Abaixo disso o cadeado fecha visualmente e a marca perde o significado.
6.3 · Usos proibidos
Seis formas de destruir a marca. Nenhuma delas é aceitável em nenhum contexto.
Distorcer ou esticar. Sempre redimensione proporcionalmente.
Rotacionar. O logotipo vive sempre na horizontal.
Recolorir. O degradê é fixo; a única variante é o branco monocromático.
Aplicar sombra, contorno ou relevo. Use apenas o glow definido no sistema.
Fundo poluído. Sobre foto, use a versão monocromática com camada escura.
Baixo contraste. Fundo médio apaga o degradê — use escuro ou muito claro.
Iconografia
Font Awesome 6.5.1, estilo solid como padrão. Emoji é proibido em qualquer interface, e-mail ou notificação da PoisonPay.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">7.1 · Ícones financeiros
7.2 · Status e feedback
7.3 · Interface e navegação
7.4 · Regras
12 · 14 · 16 · 20 · 24px. Ícone acompanha o tamanho do texto ao lado.
Não use regular e solid na mesma tela. Solid é o padrão.
Botão só com ícone exige aria-label e, de preferência, tooltip.
Renderiza diferente em cada sistema e quebra o tom profissional de um gateway.
Botões
Um botão primário por tela. Ele é a ação que você quer que o usuário tome — se há dois, não há nenhum.
8.1 · Variantes
| Variante | Quando usar |
|---|---|
| Primário | A ação principal da tela: pagar, criar cobrança, sacar. |
| Secundário | Alternativa relevante ao lado da principal: "Ver detalhes". |
| Ghost | Ações de baixa hierarquia: filtros, exportar, cancelar. |
| Link | Navegação inline dentro de um texto ou card. |
| Sucesso | Confirmação de valor liberado. Raro — não use como "salvar". |
| Perigo | Destrutivo e irreversível: estornar, excluir chave, bloquear. |
8.2 · Tamanhos
8.3 · Com ícone, somente ícone e largura total
Com ícone
Somente ícone
Grupo
Largura total
Padrão em checkout mobile e cards de autenticação.
Estados
Toda ação que chama a API entra em
loading imediatamente. O usuário nunca deve conseguir clicar duas vezes em "Pagar".
Formulários
Em um gateway, formulário é onde o dinheiro entra. Rótulo sempre visível, erro sempre explicado, e nunca placeholder no lugar de label.
9.1 · Campos base
Prefixo e sufixo
Estados de validação
9.2 · Seleção
Checkboxes
Radios
Toggles
9.3 · Código de verificação
Digite o código enviado
Enviamos 6 dígitos para +55 (47) ••••-3391
Cole o código completo — os campos preenchem sozinhos.
Badges, Chips & Status
Badge informa, chip filtra. Não troque os papéis.
10.1 · Badges semânticos
Status de transação
10.2 · Chips de filtro
Filtros aplicados a uma listagem. Clique no X para remover.
10.3 · Indicadores de presença
Alertas & Banners
Alerta inline fica no contexto do problema. Banner fala com a conta inteira.
11.1 · Alertas inline
https://loja.com/hooks/pp. Após 24h o endpoint é desativado.11.2 · Banners de topo
11.3 · Consentimento LGPD
Avatares
Sem foto, usamos iniciais sobre o degradê de marca. Nunca um ícone genérico de pessoa.
Tamanhos
Variações de fundo
Com presença
Grupo
Usado em times, aprovações e histórico de acesso.
Loadings & Skeletons
Abaixo de 300ms, não mostre nada. Acima de 300ms, skeleton. Acima de 3s, mensagem explicando o que está acontecendo — em pagamento, silêncio é ansiedade.
Spinners
Dots
Inline, dentro de texto
Pulse
Aguardando PIX
Em botão
13.1 · Skeleton screens
O skeleton imita a forma do conteúdo que vai chegar. Isso reduz a percepção de espera e evita salto de layout.
Progresso & Steps
Barras para quantidade, stepper para jornada.
14.1 · Barras
14.2 · Progresso circular
14.3 · Stepper
Tabelas
A tabela de transações é a tela mais usada do produto. Valores alinhados à direita em fonte mono, status como badge, e ações sempre na última coluna.
| Transação | Cliente | Método | Valor | Status | Data | Ações | |
|---|---|---|---|---|---|---|---|
| txn_9f3a71c4e2 | MRMarina Rocha |
PIX | R$ 247,90 | Pago | 17/08 14:32 | ||
| txn_4c81de5b90 | JSJoão Silveira |
Crédito 3x | R$ 1.480,00 | Em análise | 17/08 13:07 | ||
| txn_2b70ff13ac | ALAna Lemos |
Boleto | R$ 89,90 | Pendente | 17/08 11:44 | ||
| txn_8e15a09d33 | CFCarlos Ferraz |
Crédito | R$ 3.299,00 | Recusado | 17/08 10:19 | ||
| txn_6a92cc47f1 | TPThiago Prado |
PIX | R$ 512,40 | Estornado | 16/08 19:51 | ||
| txn_1d38b6e70a | RNRenata Nunes |
Crédito 12x | R$ 7.850,00 | Chargeback | 16/08 16:03 |
Acordeão
Para FAQ e conteúdo longo opcional. Nunca esconda informação obrigatória atrás de um acordeão.
Cards Especiais
Três formatos com função definida: KPI mede, plano vende, status resume.
17.1 · KPI
17.2 · Planos
Para quem está começando a vender.
- PIX a 1,49% por transação
- Cartão a 4,49% à vista
- Checkout transparente
- Suporte por e-mail
- Split de pagamento
- Gerente de conta
Para operações em escala.
- PIX a 0,99% por transação
- Cartão a 3,99% à vista
- Split com até 10 recebedores
- Antecipação automática
- Antifraude avançado
- Suporte prioritário 24/7
Volume acima de R$ 1M/mês.
- Taxas negociadas
- SLA contratual de 99,99%
- Checkout white-label
- Ambiente dedicado
- Gerente de conta exclusivo
- Integração assistida
17.3 · Cards de status
Modais, Toasts & Snackbars
Modal interrompe e exige decisão. Toast informa sem interromper. Snackbar confirma e oferece desfazer. Clique nos botões — todos os exemplos são reais.
Modais
Loading global
Toasts
Snackbars
18.1 · Quando usar cada um
| Componente | Interrompe? | Usar quando |
|---|---|---|
| Modal | Sim | A decisão é irreversível ou bloqueia o fluxo: estornar, excluir chave de API, aceitar termos. |
| Toast | Não | Evento assíncrono chegou: pagamento aprovado, webhook falhou, saque liberado. |
| Snackbar | Não | Confirmação de uma ação do próprio usuário, com opção de desfazer. |
| Alerta inline | Não | O problema pertence a uma área específica da tela e continua enquanto não for resolvido. |
Checkout & Pagamentos
É aqui que a conversão acontece. Cada elemento tem uma regra: o valor é o maior texto da tela, o botão de pagar nunca sai da dobra, e o cliente sempre sabe quanto falta pra expirar.
20.1 · Display de valor
Sempre com separador de milhar e duas casas. Os centavos são menores para dar peso ao inteiro.
20.2 · Cartão de crédito
Resumo do pedido
Ambiente seguro · dados criptografados · PCI DSS nível 1
20.3 · PIX com QR Code e expiração
Abra o app do seu banco e escaneie o código.
Linha do tempo do pedido
Dashboard
A primeira tela após o login responde três perguntas em menos de dois segundos: quanto eu tenho, quanto vou receber e o que precisa da minha atenção.
21.1 · Gráfico de volume
Volume transacionado · últimos 7 dias
21.2 · Regras do dashboard
Sempre no canto superior esquerdo, com a ação de saque ao lado.
O quinto número já não é lido. Mova o resto para relatórios.
"+18,4%" sozinho não diz nada. Escreva "vs. ontem".
Gráfico decorativo é pior que gráfico nenhum em produto financeiro.
API & Webhooks
A API é parte da identidade. Nomes de campo, formato de erro e estrutura de payload seguem um padrão tão rígido quanto a cor de um botão.
22.1 · Endpoints
22.2 · Payload de webhook
Evento de pagamento confirmado
{ "event": "charge.paid", "created_at": "2026-08-17T14:32:11Z", "data": { "id": "txn_9f3a71c4e2", "status": "paid", "amount": 24790, "currency": "BRL", "method": "pix", "paid_at": "2026-08-17T14:32:09Z", "customer": { "name": "Marina Rocha", "document": "***.456.789-**" }, "fee": 245, "net_amount": 24545, "livemode": true } }
Formato de erro
{ "error": { "type": "card_declined", "code": "insufficient_funds", "message": "Saldo insuficiente no cartão.", "doc_url": "https://api.poisonpay.com.br/docs/errors#insufficient_funds", "request_id": "req_7c1e8a4b02" } }
type para o código tratar,
message em português para o humano ler, e request_id para o suporte rastrear.22.3 · Integrações nativas
Autenticação & 2FA
A tela de login é a primeira impressão de segurança. Card centralizado, glassmorphism, e 2FA obrigatório para qualquer conta que movimenta dinheiro.
23.1 · Login
23.2 · Verificação em duas etapas
Digite o código do seu app autenticador
Perdeu o acesso? Usar código de recuperação
Onboarding & KYC
Aprovação de conta é regulatória, mas a experiência não precisa ser burocrática. Mostre sempre em que passo o seller está e o que falta.
Passo 3 de 5 · Documentação
Leva ~4 minutos24.1 · Checklist de perfil
Complete seu perfil
4 de 6Antifraude & Risco
Score de risco é uma decisão delicada: precisa ser claro sem acusar o cliente. Nunca escreva "fraude" na interface — escreva o que motivou a análise.
25.1 · Score de risco
- Cliente recorrente · 14 compras anteriores
- Dispositivo e IP conhecidos
- Endereço de cobrança confere com a entrega
- CPF válido e sem restrição
- Primeiro pedido deste cliente
- Valor 4x acima do ticket médio da loja
- 6 tentativas de cartão em 4 minutos
- IP com histórico de chargeback
- Geolocalização distante do endereço informado
25.2 · Linguagem em decisões de risco
"Esta cobrança está em análise de segurança. Você recebe a resposta em até 2 horas e não precisa fazer nada agora."
"Transação suspeita de fraude detectada. Aguardando validação antifraude."
"O emissor do cartão não autorizou o pagamento. Tente outro cartão ou pague com PIX."
"Erro 51 — do not honor. Transação negada."
Estados & Erros
Estado vazio sempre oferece uma saída. Página de erro sempre diz o que fazer agora.
26.1 · Estados vazios
Suas vendas aparecem aqui assim que a primeira cobrança for paga.
Nenhum resultado para os filtros aplicados. Tente ampliar o período.
Não conseguimos falar com o servidor. Seus dados estão seguros.
26.2 · Páginas de erro
O link pode estar quebrado ou a página foi movida.
Nossa equipe já foi avisada. Nenhuma transação foi perdida.
26.3 · Anatomia de uma boa mensagem de erro
Em linguagem humana, sem código de sistema. "O pagamento não foi autorizado."
A causa provável, se você souber. "O cartão não tem saldo suficiente."
Sempre uma saída concreta. "Tente outro cartão ou pague com PIX."
Templates de E-mail
E-mail é a única superfície da marca em fundo claro — cliente de e-mail não é confiável para dark theme. O header em degradê carrega a identidade.
Confirmação de pagamento
Pagamento confirmado
Olá, Marina. Recebemos seu pagamento e seu pedido já está em processamento.
| Pedido | #PP-48219 |
| Método | PIX |
| Data | 17/08/2026 às 14:32 |
| Loja | Studio Aurora |
Recuperação de carrinho
Seu PIX ainda está válido
Olá, João. Você começou uma compra e o código PIX ainda funciona por mais 18 minutos.
| Produto | Curso Avançado |
| Expira em | 17/08/2026 às 14:53 |
Se já pagou, ignore este e-mail.
27.1 · Regras para e-mail
O bloco de valor lilás é obrigatório em qualquer e-mail transacional.
Outlook e Gmail invertem cores de formas imprevisíveis. Sempre fundo branco.
Um botão, uma ação. Links secundários vão em texto no rodapé.
Nunca envie CPF, cartão ou chave de API inteiros por e-mail. Sempre mascarados.
Notificações & Push
Notifique dinheiro entrando, dinheiro saindo e risco. Nada além disso.
28.1 · Central de notificações
28.2 · Push
Mobile & Atalhos
Mais de 70% dos pagamentos acontecem no celular. Mobile não é adaptação — é o padrão.
29.1 · Navegação inferior
saldo disponível
Máximo 5 itens. O FAB central é sempre "nova cobrança".
29.2 · Botão de ação flutuante
Um FAB por tela, sempre no canto inferior direito, sempre para a ação mais frequente.
29.3 · Command palette
Pressione Ctrl + K em qualquer lugar do painel. Digite abaixo para filtrar.
Mídia & Upload
Upload sempre mostra progresso individual e permite remover. Arraste um arquivo na área abaixo para testar.
Área de upload
Fila de envio
UX & Engajamento
Gamificação em produto financeiro precisa de mão leve. Reconheça marcos reais do negócio, nunca transforme dinheiro em jogo.
Avaliação
Como foi criar sua primeira cobrança?
NPS
Quanto você recomendaria a PoisonPay?
31.1 · Conquistas do seller
Você recebeu seu primeiro pagamento
Cem pagamentos aprovados
2FA e KYC completos
Volume acumulado de 7 dígitos
12 meses sem contestação
Voz, Tom & Escrita
A PoisonPay fala como um especialista que respeita o tempo de quem lê: direto, sem jargão bancário e sem infantilizar. Somos diretos, humanos e precisos — nunca fofos, nunca burocráticos.
32.1 · Princípios
Comece pelo mais importante. "R$ 247,90 recebidos" antes de "Temos uma boa notícia para você".
Escreva como se falasse com o dono da loja. "Você" e "seu dinheiro", não "o usuário" e "os valores".
Em dinheiro não existe "em breve". Diga "em até 2 horas" ou "no próximo dia útil".
32.2 · Faça / não faça
"Seu saque de R$ 32.000,00 cai na conta até as 18h de hoje."
"Sua solicitação de resgate foi processada com sucesso e será efetivada conforme o prazo operacional vigente."
"Não conseguimos gerar o PIX agora. Tente de novo em alguns segundos."
"Ops! 😅 Algo deu ruim por aqui, mas já já a gente resolve!"
"Taxa de 0,99% por transação. Sem mensalidade."
"Condições comerciais diferenciadas mediante análise. Consulte termos."
32.3 · Glossário obrigatório
| Use sempre | Nunca use | Por quê |
|---|---|---|
| Cobrança | Fatura, boleto (genérico) | "Cobrança" cobre PIX, cartão e boleto ao mesmo tempo. |
| Saldo disponível | Saldo livre, saldo atual | Diferencia do que ainda está "a receber". |
| A receber | Saldo futuro, pendente | "Pendente" é status de transação, não de saldo. |
| Sacar | Resgatar, transferir | É o verbo que o seller usa naturalmente. |
| Recusado | Negado, falhou, erro | Padroniza o vocabulário de status em toda a plataforma. |
| Em análise | Suspeito, bloqueado por fraude | Não acusa o cliente antes da decisão. |
32.4 · Formatação de números
Dinheiro
- R$ 1.482,90 — ponto no milhar, vírgula nos centavos, espaço após R$
- − R$ 30,00 — sinal antes do símbolo, com espaço
- Sempre duas casas decimais, mesmo em valor redondo
- Na API, sempre em centavos inteiros:
148290
Data, hora e percentual
- 17/08/2026 às 14:32 — formato brasileiro, 24h
- 17/08 · 14:32 — versão curta em tabelas
- 4,99% — vírgula decimal, sem espaço antes do %
- 3,2pp — variação de percentual usa "pp", não "%"
- Na API, sempre ISO 8601 em UTC
Ecossistema de Domínios
Quatro superfícies, uma identidade. Cada domínio tem um público e um nível de densidade visual diferente — mas todos consomem os mesmos tokens.
Público: quem ainda não é cliente. Densidade baixa, muito respiro, degradê e glow com força total. É a vitrine da marca.
Público: o lojista, todos os dias. Densidade média. KPIs, tabelas e saque. É onde o design system trabalha mais.
Público: time PoisonPay. Densidade alta, pouco ornamento — aqui velocidade de leitura vence estética. Antifraude, compliance e suporte.
Público: desenvolvedores. A marca aparece na tipografia mono, no realce de sintaxe e na clareza dos erros. Menos glow, mais precisão.
33.1 · O que é compartilhado
| Elemento | Site | Seller | Gestão | API |
|---|---|---|---|---|
| Tokens de cor e tipografia | Idênticos em todos | |||
| Componentes do design system | Idênticos em todos | |||
| Densidade visual | Baixa | Média | Alta | Média |
| Degradê e glow | Intenso | Moderado | Mínimo | Mínimo |
| Animação | Rica | Funcional | Só feedback | Só feedback |
Acessibilidade
Meta: WCAG 2.1 nível AA em todas as superfícies. Em um gateway, acessibilidade não é boa vontade — é o direito de conseguir pagar.
34.1 · Contraste
34.2 · Foco visível
Navegue com Tab pelos elementos abaixo. O anel de foco nunca é removido — nem no checkout.
34.3 · Área de toque
Mínimo aceito
Reprovado
Todo alvo tocável tem no mínimo 44 × 44px, mesmo que o ícone visível seja menor. Use padding para atingir a área — não aumente o ícone.
34.4 · Checklist de entrega
Antes de subir qualquer tela
Regras que nunca mudam
- Cor nunca é o único indicador de estado — sempre acompanha ícone ou texto
- Nenhum
outline: nonesem substituto visível - Toda imagem informativa tem
alt; decorativa temalt="" - Hierarquia de títulos sem pular níveis
- Tempo de sessão nunca expira durante um pagamento em andamento
- Animação essencial tem alternativa estática