Diretrizes da marca

Se você estiver desenvolvendo para usuários na Rússia, use os botões “Salvar no smartphone”, porque a Carteira do Google não está disponível nesse país. Consulte os recursos e diretrizes relevantes. Se você estiver desenvolvendo para usuários fora da Rússia, atualize o botão Adicionar à Carteira do Google. Para isso, basta fazer o download dos recursos abaixo.

O objetivo desta documentação é ajudar você a criar imagens e outros elementos da interface do usuário perfeitos para o app Carteira do Google.

Recursos

Botão "Adicionar à Carteira do Google"

Use o botão Adicionar à Carteira do Google sempre que orientar os usuários a salvarem um passe ou cartão do seu app ou site na carteira deles. O botão Adicionar à Carteira do Google precisa chamar um dos fluxos da API Google Wallet. Esses fluxos abrem o app Carteira do Google na tela que mostra as instruções para salvar cartões de eventos no dispositivo Android e na Conta do Google. Use esse botão em apps, sites ou e-mails.

Os botões Adicionar à Carteira do Google estão disponíveis nos formatos Android XML, SVG e PNG.

Baixar recursos: XML do Android Baixar recursos: SVG Baixar recursos: PNG

Botão "Ver na Carteira do Google"

O botão Ver na Carteira do Google é usado para vincular um usuário à carteira e exibir um cartão salvo anteriormente. Use esse botão em apps, sites ou e-mails.

Os botões Ver na Carteira do Google estão disponíveis nos formatos SVG e PNG.

Fazer o download de recursos: SVG Fazer o download de recursos: PNG

Todos os botões exibidos nas comunicações do seu site, app ou e-mail precisam seguir as diretrizes da marca descritas nesta página. Os exemplos dessas diretrizes incluem estes, entre outros:

• Dimensão em relação a outros botões ou elementos semelhantes da página
• A forma e a cor dos botões não podem ser alteradas
• Espaço livre

Botões localizados

Os botões traduzidos da Carteira do Google são fornecidos em todos os mercados em que a plataforma está disponível. Se você estiver desenvolvendo para usuários nesses mercados, use sempre os botões listados acima. Não crie sua própria versão dos botões. Se não houver uma versão traduzida do botão disponível no seu mercado, use o botão em inglês.

Os botões Adicionar à Carteira do Google estão disponíveis nos seguintes idiomas: albanês, árabe, armênio, azerbaijano, bósnio, búlgaro, catalão, chinês (Hong Kong), chinês (tradicional), croata, tcheco, dinamarquês, holandês, inglês (Índia, Singapura, África do Sul, Austrália, Canadá, Grã-Bretanha, Estados Unidos), estoniano, filipino, finlandês, francês (Canadá), francês (França), georgiano, alemão, grego, hebraico, húngaro, islandês, indonésio, italiano, japonês, cazaque, quirguiz, letão, lituano, macedônio, malaio, norueguês, polonês, português (Brasil), português (Portugal), romeno, russo (Belarus), sérvio, eslovaco, esloveno, espanhol (América Latina), espanhol (Espanha), sueco, tailandês, turco, ucraniano, uzbeque e vietnamita.

Nome localizado

Para esclarecer o usuário, o nome do produto Carteira do Google é traduzido em mercados selecionados. Se você estiver desenvolvendo para usuários nesses países, use sempre o nome localizado abaixo para Web, e-mail e impressão. Não crie sua própria versão traduzida da Carteira do Google. Caso seu mercado não esteja listado abaixo, use o nome em inglês.

País	Nome
Bielorrússia	Google Кошелек
Brasil	Carteira do Google
Chile	Billetera de Google
República Tcheca	Peněženka Google
Grécia	Πορτοφόλι Google
Hong Kong	Google 錢包
Lituânia	Google Piniginė
Polônia	Portfel Google
Portugal	Carteira da Google
Romênia	Portofel Google
Eslováquia	Peňaženka Google
Taiwan	Google 錢包
Turquia	Google Cüzdan
Emirados Árabes Unidos	محفظة Google
Ucrânia	Google Гаманець
Estados Unidos (espanhol) *Use este nome nos EUA se a interface estiver em espanhol	Billetera de Google

Tamanho

Ajuste a altura e a largura do botão Adicionar à Carteira do Google para que ele se ajuste ao seu layout. Se houver outros botões na página, o botão Adicionar à Carteira do Google precisará ser igual ou maior. O botão Adicionar à Carteira do Google não pode ser menor do que os outros.

Estilo

Os botões Adicionar à Carteira do Google estão disponíveis em duas variações: principal e compacta. O botão Adicionar à Carteira do Google tem apenas a opção em preto. Há versões traduzidas dos botões disponíveis. Não crie botões com seu próprio texto localizado.

Principal	Condensado
Use o botão principal em planos de fundo brancos e claros.	Use o botão condensado se não houver espaço suficiente para a largura total ou do principal.

Espaço livre

Sempre mantenha um espaço livre mínimo de 8 dp em todos os lados do botão Adicionar à Carteira do Google. O espaço livre não pode ser invadido por imagens nem texto.

Altura mínima

Todos os botões Adicionar à Carteira do Google precisam ter uma altura mínima de 48 dp.

Recomendações e restrições

O que fazer	O que não fazer
Recomendação:use somente os botões Adicionar à Carteira do Google fornecidos pelo Google.	Restrição:não crie seus próprios botões Adicionar à Carteira do Google ou altere a fonte, a cor ou o padding do botão.
Recomendação:use o mesmo estilo de botão em todo o site.	Restrição:os botões Adicionar à Carteira do Google não podem ser menores do que os outros.
Recomendação:verifique se os botões Adicionar à Carteira do Google estão do mesmo tamanho ou maiores que os outros.	Restrição:não altere a cor do botão.
Recomendação:mantenha a mesma proporção dos botões Adicionar à Carteira do Google ao redimensionar.	Restrição:não dimensione o botão livremente.
Recomendação:use a versão traduzida dos botões.	Restrição:não crie sua própria versão traduzida do botão.

Práticas recomendadas para posicionamento de botões

Coloque o botão Adicionar à Carteira do Google em telas de confirmação do app, páginas da Web ou e-mails. Consulte as práticas recomendadas a seguir na hora de criar sua interface.

Cartões de transporte público

Coloque o botão Adicionar à Carteira do Google em telas de confirmação do app, páginas da Web ou e-mails. Recomendamos que você coloque o botão Adicionar à Carteira do Google no local em que os usuários acessam os cartões de transporte público no app ou site.

Uso do nome do produto Carteira do Google em textos

É possível usar texto para indicar que o cartão de transporte público do usuário é salvo no dispositivo.

As letras "G" e "W" precisam estar em maiúsculo

Sempre use "C" e "G" em caixa alta, seguidas de letras minúsculas, ao se referir à Carteira do Google. Não escreva todo o nome "Carteira do Google" em letras maiúsculas, a menos que esse seja o estilo tipográfico da sua interface.

Não abrevie "Carteira do Google"

Sempre escreva por extenso as palavras "Carteira", "do" e "Google".

Use o mesmo estilo da sua interface

Use a mesma fonte e estilo tipográfico de todos os textos na sua IU para escrever o nome "Carteira do Google". Não imite o estilo tipográfico do Google.

Sempre use a versão localizada de "Carteira do Google"

Sempre escreva "Carteira do Google" no artigo traduzido.

Design

Use os campos height e size da tag HTML g:savetoandroidpay para modificar a altura e a largura dos botões Adicionar à Carteira do Google. Use a especificação textsize=large para aumentar muito os tamanhos do texto e do botão nas implementações em dispositivos móveis ou nos casos com requisitos especiais de IU.

Use theme para definir a cor dos botões. Confira na tabela a seguir como essas configurações afetam o botão Adicionar à Carteira do Google.

Diretrizes de criação de cartão

Para garantir que seus cartões tenham uma boa aparência e funcionem bem, siga as diretrizes abaixo sobre limites de caracteres, notificações, cores de plano de fundo e imagens principais.

Cor de fundo do card

É possível definir a cor do plano de fundo com o campo hexBackgroundColor. Se você não definir o valor, um algoritmo vai analisar o logotipo, encontrar a cor dominante e usá-la no plano de fundo.

Evite zonas "Vibrantes" de alta saturação (por exemplo, verde neon #00FF00 ou ciano elétrico #00FFFF). Essas cores causam cansaço visual intenso e fazem com que o texto "vaze" ou desapareça no segundo plano. Use uma das cores recomendadas.

Cores recomendadas

Cinza-escuro

#1a1a1a

Cinza-médio

#677088

Cinza-claro

#e8eaed

Off-white

#f8f9fa

Branco

#ffffff

Vermelho

#d6322d

Orange

#f78f48

Amarelo

#f9bb2d

Verde

#1e7e3b

Azul

#216acf

Roxo

#9147df

Rosa-claro

#fce8e6

Verde-claro

#e6fffa

Azul-claro

#e8f0fe

Imagens principais

O campo class.heroImage aparece como uma imagem de largura total abaixo dos campos de dados do seu cartão.

Considere adicionar uma imagem se você ainda não tiver uma. Se você tiver uma imagem, siga as especificações abaixo. Se você não selecionar uma imagem, vamos mostrar uma imagem de substituição da categoria do cartão.

Esta é uma lista de recomendações para imagens principais na interface do usuário:

Diretriz	Descrição
Tipo de arquivo preferido	PNG. Se quiser que a cor do plano de fundo do cartão apareça, use um PNG transparente.
Tamanho recomendado	1032x812 px
Proporção	1032:812 (aproximadamente 5:4)
Recomendações e restrições	O que fazer O que não fazer Use fotografias ou ilustrações em alta resolução. Incorpore texto às imagens. Esse conteúdo não será localizado. Inclua padding de 20 dp na parte de cima e de baixo para dar espaço visual. O conteúdo principal da imagem deve tocar a parte de cima e de baixo dela. Use uma imagem quadrada ou quase quadrada. Use imagens retangulares finas.

Conteúdo

Títulos, subtítulos, rótulos e dados de campo:para aumentar a compreensão do usuário, mantenha os títulos e outros campos o mais curtos possível. Os limites de caracteres a seguir se aplicam ao inglês, mas serão traduzidos para outros idiomas, resultando em uma experiência do usuário variada em dispositivos e regiões. Em caso de dúvida, simplifique o conteúdo sem deixar de transmitir os detalhes principais.

Campo	Limite
Etiqueta do título	< 47 caracteres
Rótulo da legenda	< 88 caracteres
Rótulo do campo/título (por exemplo, "Data", "Descrição", "Classe", "Nome do passageiro")	< 20 caracteres
Rótulo de dados do campo (por exemplo, 19 de outubro de 2026, Economy Plus)	< 15 caracteres

Para garantir a legibilidade, limite os dados a dois campos por linha e até três linhas, se possível.

Notificações

Campo	Limite
Título	< 29 caracteres
Corpo recolhido	< 40 caracteres
Corpo expandido	< 80 caracteres

Recomendamos que você respeite os limites de caracteres para evitar o truncamento para usuários com dispositivos pequenos ou tamanhos de fonte aumentados. Consulte Notificações | Dispositivos móveis | Desenvolvedores Android para mais informações.

Logotipos

Diretrizes para imagens de logotipo

A Carteira do Google mascara seu logotipo em um formato circular.

Esta é uma lista de recomendações para imagens de logotipos na interface do usuário:

Diretriz	Descrição
Tipo de arquivo preferido	PNG
Tamanho mínimo	660 pixels por 660 pixels
Proporção da imagem	1:1
Proporção da arte	1:1
Tamanho real do pixel	Dimensionamento para o tamanho do dispositivo
Máscara circular do logotipo	O logotipo é mascarado para se ajustar em um design circular. Seu logotipo precisa se encaixar na área de segurança. Não mascare o logotipo antes. Deixe o logotipo em um quadrado com uma cor de fundo totalmente preenchida. O logotipo precisa ter uma margem de 15%, para que não seja cortado quando for mascarado.

A Carteira do Google mascara seu logotipo em um formato circular.

Diretrizes de imagem do logotipo largo

Imagens de logotipo amplas são compatíveis com ingressos de eventos, cartões de embarque, cartões de transporte público com QR code, cartões de fidelidade, ofertas, vales-presente, cartões genéricos e cartões pessoais genéricos. Esta é uma lista de recomendações para imagens de logotipos amplas na interface do usuário:

Diretriz	Descrição
Tipo de arquivo	PNG transparente
Tamanho recomendado	1.280 pixels x 400 pixels
Tamanho mínimo	400 px de altura, largura proporcional (mais orientações na seção de proporção) Use imagens largas e retangulares.
Proporção	16:5
Cor	Use uma cor muito clara com alto contraste (como branco) para cartões com fundo escuro. Use uma cor muito escura com alto contraste (como preto) para cartões com um fundo claro.

Imagens adicionais

O campo *.imageModulesData.mainImage em uma classe ou objeto aparece como uma imagem de largura total em um cartão abaixo da imagem principal. Use somente se o cartão exigir uma imagem adicional para melhor compreensão do usuário.

Outras diretrizes para imagens

Esta é uma lista de recomendações para imagens adicionais na interface do usuário:

Diretriz	Descrição
Tipo de arquivo preferido	PNG
Tamanho mínimo	1860 px de largura, com altura variável. Use imagens largas e retangulares. Use uma imagem com um fundo colorido para conseguir os melhores resultados.
Tamanho da exibição	A largura total do modelo e a altura proporcional.

Imagens de código de barras

Algumas indústrias permitem imagens acima e abaixo do código de barras.

Imagens acima do código de barras

Esta é uma lista de recomendações para imagens acima do código de barras na interface do usuário:

Diretriz	Descrição
Tipo de arquivo preferido	PNG
Altura máxima	20 dp (em proporção máxima) O tamanho recomendado é de 80 pixels de altura, com largura de 80 a 780 pixels, se houver duas imagens. Isso permite que elas fiquem lado a lado. Se uma imagem for um quadrado e a outra, um retângulo, elas precisarão ter 80x80 pixels e 780x80 pixels.
Proporção	Sem restrições. Com altura e largura máximas de 20 dp em uma única imagem, use uma proporção 20:1. Para usar apenas uma imagem acima do código de barras, ocupe toda a largura (exceto preenchimento). A imagem precisa ter 1600 x 80 pixels.
Tamanho máximo da tela (imagem única)	20 dp de altura e 400 dp de largura

Imagem abaixo do código de barras

Esta é uma lista de recomendações para imagens abaixo do código de barras na interface do usuário:

Diretriz	Descrição
Tipo de arquivo preferido	PNG
Altura máxima	20 dp (em proporção máxima) O tamanho recomendado é 80 pixels de altura e de 80 a 1.600 pixels de largura. Se for quadrado, 80 x 80 pixels. Se for retangular, 1.600 x 80 pixels.
Proporção sem restrições. Com altura e largura máximas de 20 dp em uma imagem, use uma proporção 20:1.	Para ocupar toda a largura com uma imagem (exceto preenchimento), ela precisa ter 1.600 x 80 pixels.
O tamanho máximo de exibição é 20 dp de altura e 400 dp de largura.

Módulos

Um módulo representa um grupo de campos em uma seção específica de um modelo. Confira na tabela a seguir as diretrizes sobre o número de módulos que você precisa incluir nas classes e nos objetos para que os cartões apareçam corretamente no app Carteira do Google.

Diretriz	Descrição
imageModulesData	Use apenas um imageModulesData na sua classe ou nos objetos criados.
infoModuleData	Use até dois infoModuleData na classe ou nos objetos criados. Um infoModuleData pode definir informações específicas da conta do usuário, como "Nome do membro" e "Número da assinatura".
linksModuleData	Use um total de até quatro URIs linksModuleData na classe ou nos objetos criados. É possível ter dois URIs linksModuleData na classe: um para o URI do site e outro para um número de telefone da central de ajuda. Dois URIs linksModuleData no objeto podem definir o URI específico da conta do usuário e os locais próximos.
textModulesData	Use até dois campos textModulesData entre a classe e os objetos criados. É possível ter um URI textModuleData na classe que define os detalhes do programa e outro textModulesData no objeto que determina os detalhes específicos da conta do usuário.

infoModuleData

InfoModuleData contém informações do membro e personalizáveis e aparece na exibição expandida. Use esse módulo para armazenar informações como datas de validade, saldos de pontos ou de valores guardados.

linksModuleData

O módulo de links contém URIs para páginas da Web, números de telefone e endereços de e-mail. Esta é uma lista de recomendações para o módulo de links na interface do usuário:

Diretriz	Exemplo de configuração	Imagem de exemplo
Use o prefixo http: ao atribuir um URI a um site ou um local no Google Maps. Com ele, o consumidor pode tocar no link e navegar até o site ou ver o local no Google Maps. Esse prefixo também cria um ícone de um link ou mapa na frente da descrição no cartão.	'uri': 'http://maps.google.com/?q=google'
	'uri': 'http://developer.google.com/wallet/'
Use o prefixo tel: ao definir um número de telefone. Com ele, o consumidor pode tocar no link para discar o número. Esse prefixo também cria um ícone de um telefone em frente à descrição de texto no cartão.	'uri': 'tel:6505555555'
Use o prefixo mailto: ao definir um endereço de e-mail. Com ele, o consumidor pode tocar no link para enviar um e-mail ao endereço. Esse prefixo também cria um ícone de e-mail na frente da descrição de texto no cartão.	'uri': 'mailto:jonsmith@email.com'

Títulos, rótulos e nomes

Escreva títulos, rótulos e nomes com a primeira letra maiúscula em cada palavra.

Políticas de conteúdo

O conteúdo de cada campo em um cartão precisa obedecer às políticas de conteúdo do Payments. O conteúdo dos sites que você menciona na classe também precisa seguir essas políticas.

Posicionamento dos dados da plataforma do parceiro

Para garantir que os usuários acessem seu app repleto de recursos ou o site sobre o cartão, incorpore o link direto do app ou do site à propriedade linksModuleData.* da classe ou objeto do cartão. Assim os usuários podem navegar até sua plataforma usando o cartão, que aparece na Carteira do Google. Para conferir como é a renderização, acesse as seções de design das categorias de cartões.