13 de outubro de 202612 min de leitura

Como Escolher Tema, Cores e Logo do Cardápio Digital (e Testar no Celular)

Para personalizar o cardápio digital, use uma logo que funcione no tema claro e no escuro, uma capa sem texto importante nas bordas e cores em que o texto passe de 4,5:1 de contraste, o mínimo do W3C para texto normal. No exemplo hipotético deste guia, uma capa 3:1 aparece com 74% da largura num celular de 390 px.

Como personalizar o cardápio digital com cores e logo?

A personalização do cardápio digital cabe em cinco decisões: logo, capa, tema (as cores), modo claro e escuro, e o teste no celular. O objetivo não é enfeitar, é fazer o cliente reconhecer a loja em um segundo e ler preço e nome do prato sem esforço. Beleza vem depois de leitura.

No pede.me, tudo isso mora em Configurações, na seção de aparência do cardápio. Este guia trata da identidade visual. A estrutura (categorias, nomes e ordem) está em como montar um cardápio digital que vende, e a foto dos pratos em fotos de cardápio que vendem. Aqui entram o que o painel permite mudar, os limites de arquivo, a conta do contraste e um roteiro de teste.

O que o dono pode personalizar no pede.me, e o que é Pro?

A divisão é esta:

Item	O que o dono faz	Plano
Logo	Envia, recorta em quadrado, ajusta o enquadramento ou remove	Grátis
Capa (banner)	Envia, recorta em 3:1, ajusta o enquadramento ou remove	Grátis
Tema	O tema Diner é o do plano grátis; os outros 99 da galeria são Pro	Grátis (1) e Pro (99)
Tema da sua marca	Três cores (principal, apoio e fundo), fundo escuro opcional e atalho "Puxar da logo"	Pro
Fonte	Cinco pares de fontes: o Padrão e mais quatro	Padrão grátis; os 4 outros Pro
Modelo de exibição	Lista, grade com fotos grandes ou vitrine	Lista grátis; grade e vitrine Pro
Ajustes do cardápio	Foto grande na lista, descrição só ao abrir, capa cheia com o nome da loja por cima	Pro
Faixa de categorias	Formato e tamanho dos atalhos de categoria	Pro
Estilo dos botões	Quadrado, arredondado ou pílula	Grátis
Modo claro e escuro	O cliente alterna no cartão da loja; o dono não define um padrão escuro	Para todos

O plano grátis é grátis de verdade e sem comissão, e já entrega logo, capa e um tema completo. O Pro custa R$ 49,90/mês; vale decidir depois de testar o que o grátis já faz. A lista geral de grátis e pago está em cardápio digital grátis: o que é grátis e o que é pago.

Como preparar a logo para o cardápio no celular?

A logo ideal é simples, quadrada e legível em um círculo pequeno. O cardápio mostra a logo dentro de um círculo de 80 px no celular e de 96 px em telas maiores, com borda na cor do cartão. Tudo o que estiver perto da borda do quadrado pode ser cortado pelo círculo.

Regras práticas:

Deixe margem interna. Mantenha o desenho dentro de uns 80% da área central do quadrado. O canto do quadrado não aparece no círculo.
Prefira o símbolo ao nome comprido. Letra pequena vira mancha a 80 px; o nome da loja já aparece escrito ao lado.
Cuidado com fundo transparente. O recorte do painel exporta a imagem como JPEG, formato que não guarda transparência. Depois de enviar, abra o cardápio e confira o fundo que apareceu. Se a cor não ficou como esperado, envie a logo já com o fundo sólido que você quer ver.
Evite a logo com fundo branco no tema escuro. O círculo branco pesa no escuro e parece um adesivo. Use uma versão com fundo na cor da marca, ou uma versão que fique bem sobre claro e sobre escuro.

Em Configurações, na seção de aparência, o campo Logo / avatar mostra o recorte redondo com zoom. Dá para Trocar foto, Ajustar enquadramento ou Remover.

Qual o tamanho e o formato da capa?

A capa é uma imagem larga que o painel recorta em 3:1 (três partes de largura para uma de altura), e o cardápio a ajusta à tela de formas diferentes. No computador, a capa ocupa a faixa em 3:1 (ou 2:1 com a capa cheia, que é Pro). No celular, ela encosta nas bordas da tela e tem altura fixa de 176 px, ou 288 px na capa cheia.

A conta, em exemplo hipotético com celular de 390 px de largura e uma capa recortada em 3:1, que o cardápio preenche cobrindo o espaço, sem esticar:

Capa normal no celular: a faixa mede 390 × 176 px. A imagem 3:1 ajustada à altura de 176 px fica com 176 × 3 = 528 px de largura. Aparecem 390 ÷ 528 = 74% da largura; os outros 26% (13% de cada lado) ficam de fora.
Capa cheia no celular: a faixa mede 390 × 288 px. A imagem ajustada à altura tem 288 × 3 = 864 px, e aparecem 390 ÷ 864 = 45% da largura.
Fundo coberto: o cartão da loja sobe sobre a capa em 48 px. Dos 176 px da capa normal, 176 − 48 = 128 px ficam livres para o que é importante.

Na prática: o que importa fica no centro e no alto da imagem (a capa é ancorada no topo, e o corte lateral sai das bordas). Nada de texto, telefone ou promoção perto das laterais ou do fundo. Quem quer texto na capa deve escrevê-lo no próprio cardápio, não dentro da foto, porque a foto muda de corte de aparelho para aparelho.

Para a foto da capa vale o que está em fotos de cardápio que vendem: luz natural e fundo limpo.

Quais são os limites de upload de logo e capa?

Os limites do envio:

Regra	Valor
Formatos aceitos	JPG, PNG e WEBP (SVG não entra)
Tamanho máximo do arquivo enviado	5 MB
Recorte no painel	Capa em 3:1; logo em quadrado com prévia redonda; sem a opção "usar original"
Saída do recorte no navegador	JPEG, com o lado maior limitado a 1.200 px
Arquivo guardado	WebP, com o lado maior limitado a 1.600 px
Conferência	O servidor confere o conteúdo real do arquivo, não só o nome ou o tipo declarado

O limite de 5 MB quase nunca atrapalha, porque a imagem é reduzida no navegador antes de subir. A capa e a logo também entram na prévia do link quando a loja é compartilhada.

Como escolher o tema e a cor da marca?

Escolha o tema pelo que o cliente precisa ler, e só depois pela cor preferida. A galeria do pede.me tem 100 temas, cada um com paleta clara e escura. O Diner, de marca vermelha, é o do plano grátis. Os outros 99, de nichos como açaí, churrascaria, japonês e cafeteria, são do Pro, e a galeria mostra uma prévia do cardápio da própria loja com o tema escolhido.

Um roteiro curto para decidir:

Parta da cor da logo. Cores brigando entre a logo e o botão de pedir confundem.
Uma cor forte e uma de apoio, como o tema já define.
Veja os dois modos. Abra o tema escolhido no claro e no escuro. Alguns têm fundo bem diferente de um modo para o outro.
Se a marca tem cores próprias, use o tema da marca (Pro). O editor pede três cores (principal, apoio e fundo claro), aceita um fundo escuro opcional e tem o botão Puxar da logo, que sugere as cores a partir da logo enviada. É sugestão: o dono ajusta e só então salva. Logo só em preto, branco e cinza devolve um aviso em vez de cor.
O contraste já vem calculado. Nos temas prontos e no tema da marca, texto, tinta da marca e texto do botão saem de uma régua de contraste do sistema (4,5:1 para texto), então o botão de pedir não fica ilegível mesmo com cor clara.

Sobre fonte: além do par padrão (grátis), há quatro pares no Pro. Fonte de impacto ajuda no título, mas preço e descrição precisam ser lidos em tela pequena; em dúvida, o padrão basta.

Modo claro ou escuro: qual o melhor?

Nenhum dos dois é "o certo": o cardápio abre no claro e quem decide é o cliente. O padrão do cardápio é o tema claro; só abre no escuro se o cliente tocar no botão de sol e lua, no cartão da loja, e o aparelho guarda essa escolha. O cardápio não segue sozinho a configuração do celular. Não há opção para o dono forçar o escuro.

O que isso muda para o dono:

Teste os dois modos, sempre. Metade do trabalho de identidade é conferir que a logo e a capa não quebram quando o fundo troca.
Logo com fundo branco funciona no claro e pesa no escuro. Logo com fundo escuro faz o contrário. A saída mais segura é um fundo na cor da marca ou uma logo desenhada para os dois.

Como garantir contraste e legibilidade?

O W3C (WCAG 2.2, critério 1.4.3) pede razão de contraste de pelo menos 4,5:1 entre o texto e o fundo para texto normal, e 3:1 para texto grande. Texto grande, para o W3C, tem ao menos 18 pontos, ou 14 pontos em negrito. A razão vai de 1:1 (igual) a 21:1 (preto no branco) e se calcula como (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminância relativa da cor mais clara e L2 a da mais escura. Fonte: W3C, "Understanding SC 1.4.3: Contrast (Minimum)" e definição de "contrast ratio" no WCAG 2.2, consultados em outubro de 2026.

O mesmo critério avisa que usar imagem de fundo sem contraste suficiente com o texto é uma falha. E o critério 1.4.11 pede 3:1 para componentes de interface, como a borda de um campo ou um ícone necessário para entender a tela. O texto que faz parte de uma logo ou de um nome de marca é isento da regra, mas isso não torna a marca ilegível um bom argumento: se o cliente não lê o nome, o nome não cumpre o papel.

Exemplos hipotéticos de texto sobre fundo branco (#FFFFFF), com as razões calculadas pela fórmula acima:

Cor do texto	Razão sobre branco	Texto normal (4,5:1)	Texto grande (3:1)
#1A1A1A (quase preto)	17,4:1	Passa	Passa
#B3261E (vermelho escuro)	6,54:1	Passa	Passa
#767676 (cinza)	4,54:1	Passa por pouco	Passa
#777777 (cinza)	4,48:1	Reprova por 0,02	Passa
#F2B705 (amarelo)	1,82:1	Reprova	Reprova

A lição do amarelo: uma cor vibrante pode ser ótima como fundo de botão e péssima como texto sobre branco. Sobre preto (#000000), o mesmo amarelo chega a 11,55:1. Por isso o sistema escolhe o texto do botão, branco ou escuro, conforme a cor da marca: o texto escuro sobre o amarelo passa; o branco, não.

O erro mais comum é o cinza claro na descrição: bonito no computador, ilegível no celular com sol na tela. Em arte feita fora do painel, meça antes num medidor de contraste.

O que evitar na identidade visual do cardápio?

Estes erros se repetem, e todos custam leitura:

Logo com fundo branco no tema escuro, ou o inverso: o quadrado aparece como um adesivo.
Texto sobre foto sem garantia de contraste. Se o texto vem por cima da capa, ele precisa de uma camada que escureça ou clareie o fundo. A capa cheia do pede.me faz isso com um degradê escuro por baixo do nome da loja; uma capa que você mesmo desenha com texto não tem essa proteção.
Cinza claro em texto. Veja a tabela: 4,48:1 já reprova.

Como fazer o teste no celular?

O teste é abrir o cardápio publicado como o cliente abre, e conferir cinco coisas. Leva uns dez minutos:

Abra o link no celular, não só na prévia do painel. Use o navegador, em tela cheia, no brilho que você usa na rua.
Olhe a capa e a logo. A logo está nítida e inteira no círculo? A capa mostra o que importa, sem corte feio?
Troque para o modo escuro no botão de sol e lua e repita. A logo ficou boa? A capa não sumiu?
Leia sem esforço. Segurando o celular a um braço de distância, dá para ler o nome do prato, a descrição e o preço?
Peça a opinião de alguém de fora. Pergunte qual é o botão de pedir. Se hesitar, ajuste a cor ou o texto.

O computador é mais rápido, mas não substitui o celular, onde o corte da capa e o círculo da logo aparecem de verdade. Usar a mesma logo nas redes (como divulgar o cardápio digital no Instagram) ajuda o cliente a reconhecer a loja do post ao cardápio.

O que o pede.me faz e o que não faz na personalização?

O que faz:

Logo e capa com recorte guiado, em JPG, PNG ou WEBP de até 5 MB, no plano grátis.
Um tema grátis (Diner) e 99 temas Pro, todos com modo claro e escuro, mais o tema da marca com as cores do dono (Pro).
Régua de contraste nos temas prontos e no da marca, e botão de sol e lua para o cliente trocar o modo.
Cinco pares de fontes (um grátis), três modelos de exibição (um grátis) e ajustes finos como a capa cheia (Pro).

O que não faz:

Não aceita logo em SVG nem arquivo acima de 5 MB.
Não deixa o dono definir o modo escuro como padrão do cardápio.
Não aceita CSS livre nem fonte enviada pelo dono: as fontes e os formatos vêm de listas fechadas.
Não mede o contraste das imagens que você envia (logo e capa). Essa conferência é visual, no celular.
Não garante que mais cor ou mais capricho gerem mais pedidos. O que o cardápio permite é testar e comparar.

Por onde começar esta semana?

Comece pelo grátis: envie logo e capa, mantenha o tema Diner e faça o teste de dez minutos nos dois modos. Se a identidade pedir cor própria, veja o que o Pro inclui em /pro. Se ainda não tem o cardápio no ar, crie o seu em app.pede.me/signup: o plano grátis tem link próprio, pedidos sem limite e sem comissão, como explica a página do cardápio digital grátis. Para criar do zero, siga como criar um cardápio digital passo a passo.

Perguntas frequentes

No pede.me o editor recorta a logo em quadrado e o cardápio a mostra dentro de um círculo, com 80 px no celular e 96 px em telas maiores. O arquivo guardado tem no máximo 1.600 px no lado maior, então uma imagem quadrada de uns 800 px já sobra. O que decide é o desenho: traço simples, sem letra miúda, que ainda se lê num círculo de 80 px.

JPG, PNG ou WEBP, com até 5 MB por arquivo enviado. O servidor confere o conteúdo real do arquivo, não só a extensão, e converte tudo para WebP. Pelo painel, a imagem passa antes por um recorte (capa em 3:1, logo em quadrado) e sai do navegador como JPEG, então foto grande de celular costuma caber sem esforço.

Não. Logo e capa não têm trava de plano: o envio funciona igual no plano grátis. O que é do Pro (R$ 49,90/mês) são os temas além do Diner, o tema da sua marca com as suas cores, os pares de fontes, os modelos de exibição em grade e vitrine e os ajustes finos, como a capa cheia.

Pode, pelo botão de sol e lua no cartão da loja, no topo do cardápio. O cardápio abre no claro e só muda se o cliente trocar, e o aparelho lembra a escolha. Todos os temas têm versão clara e escura, então a logo e a capa precisam ficar boas nos dois.

Pode, mas com cuidado. No celular a capa é cortada nas laterais e cerca de 48 px do fundo ficam por baixo do cartão da loja, então texto perto das bordas some. Se o texto for importante (horário, promoção), escreva-o no cardápio, em campo de texto, e deixe a capa só com a foto.

Meça a razão de contraste entre o texto e o fundo. O W3C pede ao menos 4,5:1 para texto normal e 3:1 para texto grande. Nos temas prontos do pede.me a conta já vem feita; numa cor sua, confira num medidor de contraste e abra o cardápio no celular, ao ar livre, nos dois modos.