Nome da empresa
Pedido
#105812/08/2026 · 14:30
ClienteAna Souza
WhatsApp(11) 90000-0000
1× Corte e barbaR$ 90,00
2× Produto de cuidadoR$ 90,00
TotalR$ 180,00
Referência interna da fundação visual. Esta página não é uma tela do produto: existe para avaliar tokens, componentes e estados em desktop e mobile.
Azul é ação. Verde é estado positivo. Nenhum componente usa cor literal.
background
Fundo da página (off-white)
surface
Conteúdo / cards
surface-muted
Bloco interno
primary
AÇÃO — botão, ativo, foco
primary-soft
Seleção suave / informativo
success
ESTADO positivo
success-soft
Badge positivo
warning-soft
Atenção / pendente
destructive
Erro / cancelado
muted
Neutro
border
Bordas discretas
foreground
Texto principal
Uma família, hierarquia por peso e tamanho. Números tabulares em valores e horários.
Título de página
Reservas de hoje
Título de seção
Recebimentos e pendências
Texto padrão
Linguagem simples e direta: o usuário precisa entender o que fazer sem treinamento.
Apoio
Explicação secundária, dica ou contexto.
Números (tabular)
R$ 1.284,50 · 14:30 · #1058
Três níveis de elevação. Card apenas quando agrupa informação ou ação útil.
shadow-rest
Superfície padrão
shadow-raised
Destaque discreto
rounded-md
rounded-lg
rounded-xl
rounded-2xl
Uma única ação primária azul por tela. Não existe botão verde.
Campos curtos, rótulo sempre visível, erro explicado em linguagem simples.
Informe um número de WhatsApp válido com DDD.
Vocabulário fixo de estados. Verde nunca indica ação.
Explicam o que aconteceu e o que fazer.
No desktop, tabela quando ajuda a comparar. No mobile, a mesma informação vira lista tocável.
| Operação | Cliente | Status | Valor |
|---|---|---|---|
| #1058 | Ana Souza | Confirmado | R$ 180,00 |
| #1057 | Carlos Lima | Pendente | R$ 96,00 |
Usados só quando reúnem informação útil.
Esqueleto com a mesma silhueta do conteúdo final. Nada de número inventado.
Explicam o que é, por que importa e qual é o próximo passo.
Cadastre um cliente ou deixe que as conversas do WhatsApp criem o registro automaticamente.
Leva menos de 1 minuto.
Ofertas são o que você vende: serviço, produto, locação ou encomenda. Elas alimentam a agenda e a página pública.
Peças de navegação isoladas. A montagem do Shell é a próxima etapa.
Item lateral (desktop)
Barra inferior (mobile)
Mesma informação em A4 e em largura térmica. Sem dados obrigatórios, só sai como rascunho.
Nome da empresa
12/08/2026 · 14:30
Foco visível em azul, alvos confortáveis no toque, contraste verificado no tema claro.