Padrão visual

Catálogo vivo. Antes de criar uma tela, copie daqui. Regras em doc/11-padrao-visual.md.

Cores

Ação principal
--roxo-700
Fundo de ação
--roxo-100
Conversar / sucesso
--verde-700
Selo troca
--verde-100
Doação / salvo
--rosa-700
Vender
--ambar-400
Aviso de segurança
--ambar-100
Erro / denúncia
--vermelho-700
Texto
--tinta
Texto de apoio
--tinta-2
Fundo da página
--fundo
Borda de campo
--borda-forte

Texto

Título 1 — página

Título 2 — seção

Título 3 — cartão

Destaque, 20 px. Para frases importantes.

Corpo, 18 px. Tamanho mínimo de leitura no site.

Apoio, 16 px, cor --tinta-2.

Legenda, 15 px. Só para dados secundários.

Botões

Selos

Aceita troca Doação Telefone confirmado Sai do ar em 1 dia Usado, bom estado 4,8 (127)

Busca

Cartão de anúncio

Cadeira de escritório ergonômica

R$ 349,00

Aceita troca

Sorocaba - SP (8 km) 4,8 (127)

Avisos

Informação

Explica algo neutro.

Segurança

Aparece antes de contato, troca e mapa.

Deu certo

Confirma uma ação.

Falta pouco

Diz o que aconteceu e o que fazer.

Formulário

Nome do item

Ajuda sempre acima do campo.

Campo com erro

Escreva o nome do item.

VenderEscolha grande

TrocarEscolha grande

InterruptorSempre com “Sim/Não” escrito

Diálogo

Ícones

busca microfone pino troca etiqueta sacola presente coracao conversa escudo alerta info mapa camera sofa celular notebook geladeira bicicleta camiseta controle panela brinquedo livro ferramenta bola