Protótipo Valore
Componentes base
Cada componente com seus estados, como as telas vão usar. As cores e as fontes vêm do pacote da marca.
Ações
Botões
Pílulas em tinta, rótulo em Termina. 48 px no site; 40 px no Painel do vendedor.
| Variante | Padrão | Hover | Foco | Desabilitado | Carregando |
|---|---|---|---|---|---|
| Principal | |||||
| Secundário | |||||
| Discreto | |||||
| Destrutivo | |||||
| Painel, 40 px |
Formulários
Campos
Retângulos de raio 6, para nunca parecerem botões. O erro tem borda, ícone e frase.
Ex.: 126610LN
R$
Informe um ano entre 1900 e 2026.
Vem da sua verificação de identidade.
Densidade do Painel, 40 px.
Formulários
Seleção
Ligado em tinta; desligado em line-strong, que passa 3:1 sobre o branco.
Caixa de seleção
Opção única
Interruptor
Filtros e estados
Chips e status
O filtro ativo fica em tinta. O status leva sempre o nome, nunca só a cor.
AutenticadoEm análiseEm trânsitoRecusadoRascunhoReservada
DestaqueLeilãoLote 01 de 12
Catálogo
Card de peça
Foto 4:5, marca em Termina, modelo e referência em Outfit, preço em algarismos tabulares.
Padrão
Salva
Destaque
DestaquePreço baixou
Reservada
Vendida
Hover e foco
Sem foto
Sem foto
Carregando
Mensagens
Alertas e estados
Os textos são os do catálogo de estados.
Pagamento confirmado. R$ 50.900 em custódia.
Falta uma foto. Adicione o fundo da caixa para enviar à curadoria.
Pagamento recusado. Tente outro cartão ou Pix.
Sem cobrança até o vendedor aceitar. A oferta vale por 24 h.
Não conseguimos carregar esta parte.
Tente de novo em alguns segundos.
Nenhuma peça salva.
Toque no coração de uma peça para guardá-la aqui. Se o preço baixar, avisamos você.
Sem conexão. Quando a internet voltar, a página atualiza sozinha.
Sobreposições
Sheets, diálogos e toasts
No celular o sheet sobe de baixo; no computador, o drawer entra pela direita. Só o que flutua tem sombra.
Toasts, como aparecem
Salva
Não salvamos sua alteração. Tente de novo.
Conta › Preferências
Preferências que mudam a moldura
Claro é o padrão. A cor de destaque fica no Aço até chegarem as cores do código (pendência 35); a densidade não é oferecida (pendência 43).
Celular
Gestos
Cada gesto tem um botão visível que faz o mesmo.
1 de 6
Deslizar a galeria
No celular, a foto acompanha o dedo. As setas e o contador ficam sempre à vista.
Arrastar o sheet para baixo
Puxar a alça fecha o sheet. O botão de fechar continua no canto.
Entrada
Loader de entrada
Os seis traços do símbolo, a 61,3°, sobem e descem em sequência. Com movimento reduzido, ficam parados.