Pular para o conteúdo
Handy

Guia de marca

Handy

Um balcão de atendimento bem organizado.

Caloroso, calmo e com a próxima ação sempre óbvia. Este guia mostra a marca, as cores, as peças e as regras de composição da Revisão 2. Tudo aqui vem dos tokens do projeto: troque entre claro e escuro no topo para conferir os dois mundos.

  • Petróleomarca
  • Âmbarquem espera
  • Azul-tintaautorização
  • Coralrisco
  • Kraftorigem

Marca

A senha âmbar do balcão com um h cujo arco é o bastão passando de mão: a conversa que troca de quem atende.

Sobre a página

Tom página: nome em tinta escura.

HandyHandyHandyHandy

Sobre a barra

Tom barra: nome claro sobre o petróleo-profundo.

HandyHandyHandyHandy
  • Faça: use <Marca /> com tom e tamanho; só o símbolo no topo do celular.
  • Evite: escrever "Handy" em texto solto como logotipo, trocar a cor da senha ou girar o símbolo.

Barra petróleo

A lateral petróleo-profundo carrega a marca, a empresa, os grupos do menu, as contagens e a pessoa logada. Páginas não mexem nela.

Como usar

Classes: bg-barra, text-barra-foreground, text-barra-suave, bg-barra-ativo, border-barra-borda.

  • Faça: item atual com bg-barra-ativo e texto claro; os demais em text-barra-suave.
  • Faça: contagem em âmbar só para o que espera alguém (conversas na fila, autorizações).
  • Faça: no topo, um aviso pequeno em pílula coral ("1 canal desconectado"), em vez de faixa grande na página.
  • Evite: barra cinza ou preta genérica, e repetir dentro da página um aviso que já está no topo.

Cores

Cada cor tem um sentido no balcão. Use pelo sentido, nunca pela aparência. As amostras seguem o tema escolhido no topo.

Superfícies

Papel quente por baixo, cartão branco por cima.

  • backgroundFundo da página: papel quente.
  • cardCartão branco sobre o papel.
  • inputCampo branco: convida a escrever.
  • mutedApoio: faixas, esqueleto, trilhos.
  • balcaoTampo do balcão: área de mensagens.
  • popoverMenus e diálogos flutuantes.

Marca e ação

Petróleo é a cor da marca e da ação principal.

  • primaryPetróleo: ação principal e item ativo.
  • secondaryAção de apoio.
  • accentPassar o mouse, item selecionado.
  • foregroundTexto principal.
  • muted-foregroundTexto de apoio e legendas.
  • borderLinha fina de cartões e divisórias.
  • campo-bordaBorda de campos e botões de contorno: mais firme.
  • ringAnel de foco do teclado.

Barra petróleo

A lateral é onde a marca mora. Não é cinza nem preto.

  • barraFundo da barra lateral.
  • barra-ativoItem da página atual.
  • barra-suaveTexto de apoio sobre a barra.
  • barra-bordaDivisórias dentro da barra.

Mundo do balcão

Cada cor é um objeto do balcão de atendimento.

  • senhaSenha chamada: quem espera, tempo.
  • senha-suaveFundo suave de espera.
  • kraftEtiqueta de encomenda: origem do lead.
  • carimboCarimbo de aprovado: autorização.
  • carimbo-suaveFundo suave de informação.
  • destructiveFita de frágil: risco, gasto, erro.
  • aviso-suaveFundo suave de risco.

Canais

A cor que o cliente reconhece, mais um fundo suave para selos.

  • canal-whatsappWhatsApp oficial.
  • canal-whatsapp-suaveFundo de selo do WhatsApp.
  • canal-instagramInstagram.
  • canal-instagram-suaveFundo de selo do Instagram.
  • canal-messengerMessenger.
  • canal-messenger-suaveFundo de selo do Messenger.
  • canal-siteChat do site.
  • canal-site-suaveFundo de selo do site.

Bastão e feedback

Quem está com a conversa, e como as coisas terminaram.

  • bastao-iaA IA está atendendo.
  • bastao-ia-suaveFundo do bastão da IA.
  • bastao-pessoaUma pessoa está atendendo.
  • bastao-pessoa-suaveFundo do bastão de pessoa.
  • bastao-filaEsperando na fila.
  • bastao-fila-suaveFundo do bastão da fila.
  • successDeu certo.
  • success-suaveFundo suave de sucesso.

Tipografia

Títulos em Bricolage Grotesque, texto em Figtree. Números sempre com a classe numeros, para as colunas alinharem. Nada abaixo de 12 px.

  • Display36 px · 600 · Bricolage

    Quem espera agora

  • Título 128 px · 600 · Bricolage

    Conversas de hoje

  • Título 220 px · 600 · Bricolage

    Autorizações pendentes

  • Título 316 px · 600 · Bricolage

    Respostas automáticas

  • Corpo15 px · 400 · Figtree

    A IA responde as perguntas simples e chama uma pessoa quando precisa.

  • Rótulo13 px · 500 · Figtree

    Setor que recebe

  • Legenda12 px · 400 · Figtree

    Última mensagem há 2 min

  • Númerostabular · classe numeros

    R$ 1.234,56 · 08:05 · 14 min

Espaço e raio

Base de 4 px. Cartões com rounded-xl, campos e botões com rounded-lg, pílulas com rounded-full.

Espaço

Dentro do grupo, menos; entre grupos, pelo menos o dobro.

  • 14 px
  • 28 px
  • 312 px
  • 416 px
  • 624 px
  • 832 px
  • 1248 px
  • 1664 px

Raio

O raio diz o tamanho da peça.

  • rounded-xlCartões e painéis
  • rounded-lgCampos e botões
  • rounded-mdItens pequenos
  • rounded-fullPílulas, avatares, pontos

Profundidade

Papel quente, cartão branco com borda fina e sombra curta tingida de petróleo. O que flutua ganha sombra maior. Só as classes de sombra; nunca sombra escrita à mão.

  • shadow-xsCampos e botões de contorno
  • shadow-smCartões sobre a página
  • shadow-mdItem arrastado, destaque
  • shadow-lgMenus e barras flutuantes
  • shadow-xlDiálogos

Movimento

Só cor, opacidade e transformação. Ao carregar, os blocos principais entram em cascata. Quem pede menos movimento no sistema não vê nada deslizar.

Entrada em cascata

Classe surgir com atraso-1 a atraso-6, nos blocos principais (não em cada linha).

  • Cabeçalho da páginasurgir
  • Quem espera agorasurgir atraso-1
  • Lista do diasurgir atraso-2
  • Painel lateralsurgir atraso-3
  • Resumo da semanasurgir atraso-4

Durações

Clique para ver cada uma.

150 ms
250 ms
400 ms
  • Faça: transition-colors, transition-opacity ou transition-transform com 150 a 200 ms.
  • Evite: transition-all, quique e animação em cada linha de lista.

Ícones

Lucide, em 16, 20 ou 24 px, com traço de 1,5. Decorativo leva aria-hidden; ícone sozinho como botão leva texto para leitor de tela. Nunca emoji.

  • Início
  • Conversas
  • Contatos
  • Negócios
  • Agentes de IA
  • Autorizações
  • Configurações
  • Buscar
  • Novo
  • Enviar
  • Avisos
  • Telefone
  • Tempo
  • Etiqueta
  • Campanha
  • Pagamento
  • Agenda
  • Confirmado

Canais

Cada canal aparece com a cor que o cliente reconhece. O WhatsApp por QR code não é oficial, por isso vem sempre em coral de aviso.

IconeCanal

Bolinha na cor do canal. Tamanhos xs, sm, md e lg; com anel para sobrepor a um avatar.

  • WhatsApp oficial
  • Instagram
  • Messenger
  • Site
  • WhatsApp por QR code

SeloCanal

Bolinha + nome. Use curto em listas densas.

  • WhatsApp oficialWhatsApp
  • InstagramInstagram
  • MessengerMessenger
  • SiteSite
  • WhatsApp por QR codeWhatsApp QR
  • Faça: em telas de canais, ícone grande + nome da conta + situação com ponto e texto.
  • Evite: selo cinza igual para todos os canais, ou o verde vivo do WhatsApp em áreas grandes.

Pessoas

Avatar de iniciais com cor estável por nome: a mesma pessoa tem sempre a mesma cor. O canal por onde ela fala vai no canto.

AvatarPessoa

Tamanhos xs, sm, md e lg. Nunca avatar cinza igual para todos.

  • Marina Azevedo
  • Jéssica Lima
  • Carlos Menezes
  • Juliana Prado
  • Rafael Nunes
  • Dona Rita

Bastão

A assinatura do Handy: quem está com a conversa agora e há quanto tempo. Sempre ícone + texto, nunca só a cor.

Faixa

Item de lista de conversas.

IA · 2 min
Jéssica · 14 min
Na fila · 6 min

Barra

Cabeçalho da conversa.

IA · 2 min
Jéssica · 14 min
Na fila · 6 min

Pílula

Tabelas e cartões.

IA · 2 minJéssica · 14 minNa fila · 6 min

Etiqueta de origem

Etiqueta de encomenda em papel kraft, com o furo à esquerda: de onde veio o contato.

Origem: Clareamento de novembroOrigem: Avaliação gratuitaOrigem: Botão do siteOrigem: Anúncio de aparelho

Explicação visível

Em toda configuração, a explicação fica visível: o que é, por que importa e um exemplo. Nunca escondida em interrogação. A recomendação quebra linha em vez de estourar.

Igual ao recomendado
O que é
O quanto da caixa de entrada cada pessoa enxerga.
Por que importa
Protege a privacidade entre colegas e mantém cada um focado no que é seu.
Exemplo
A Jéssica vê as conversas dela e quem está esperando atendimento.
Sim
Recomendado: não
O que é
Baixar conversas e listas de contatos para o computador.
Por que importa
É o caminho mais comum de vazamento da lista de pacientes.
Exemplo
Uma planilha com todos os pacientes que fizeram avaliação em outubro.

Aviso de risco

Bloco coral com ícone, texto claro e caixa de aceite. Só para o que pode custar caro: número não oficial e ações que gastam dinheiro. No máximo um por tela.

Este jeito pode fazer o WhatsApp bloquear o seu número

O WhatsApp não autoriza esta conexão. Se ele perceber o uso, o número pode ser suspenso.

  • Use um número que você possa perder.
  • Envie poucas mensagens novas por dia.

Botões

Um botão principal por região. O âmbar (senha) é só para atender quem está esperando. Alvo de 44 px no toque, 36 px no computador.

Variantes

  • Faça: senha em "Atender", "Chamar o próximo", "Assumir".
  • Evite: dois botões petróleo lado a lado, ou âmbar em ação que não tem ninguém esperando.

Tamanhos e estados

Campos

Campos brancos com borda firme e sombra mínima: parecem prontos para escrever, não desativados. Todo seletor mostra um valor ou um texto de apoio. Erro sempre com texto.

Esse e-mail parece incompleto. Confira depois do @.

E-mail conferido.

Cartões e balcão

O cartão é branco, com borda fina e sombra curta, e nunca mora dentro de outro cartão. O pontilhado do balcão é só da área de mensagens.

Quem espera agora
6 na fila · a mais antiga há 18 min
Dona RitaNa fila · 18 min
Paulo NogueiraNa fila · 7 min

bg-card + border-border + shadow-sm + rounded-xl sobre bg-background.

Oi! Vocês fazem avaliação no sábado?

Fazemos, sim. Tenho horário às 9h ou às 10h30. Qual prefere?

Às 9h, por favor.

fundo-balcao: tampo pontilhado, só na área de mensagens.

Feedback

Aviso só quando muda a ação: no máximo um por tela, colado ao que ele afeta. O que é só informação vira linha discreta. Selos para estados curtos, toast para confirmar.

Avisos na página

Selos e toasts

NovoRascunhoArquivadoEsperandoOrigemAutorizadoNão oficialConectado

Mais de dois selos na mesma linha viram "+2".

Estados

Toda página tem cinco estados: com dados, carregando, vazio, erro e sem permissão. Eles aparecem no lugar do conteúdo, um de cada vez.

Carregando

Esqueleto com a forma do que vem.

Exemplo de carregamento

Nenhuma conversa por aqui

Quando um cliente escrever, a conversa aparece nesta lista.

Não conseguimos carregar as conversas

Isso costuma ser passageiro. Tente de novo em instantes.

Você não tem acesso a esta área

Esta área é só para quem administra a conta. Peça a essa pessoa para liberar o seu acesso.

Números e gráficos

Número conta uma história: sempre com contexto, tabular e alinhado à direita. Mini-barras e segmentos feitos com tokens, sem biblioteca de gráfico.

Número com contexto

R$ 184,60

cobrados pela Meta até 14/11 · outubro fechou em R$ 362,40

  • Campanhas e ofertasR$ 141,30
  • Lembretes e avisosR$ 43,30
34 de 40 conversas novas hoje

Cores de série

Oito cores distinguíveis no claro e no escuro. Sempre com legenda.

  • chart-1
  • chart-2
  • chart-3
  • chart-4
  • chart-5
  • chart-6
  • chart-7
  • chart-8

Camadas e larguras

Nenhum número solto de camada no código: sempre pelo nome, como z-(--z-modal). Página de trabalho usa a largura toda, com painel lateral quando fizer sentido.

Camadas

  • --z-dropdownMenus e listas suspensas10
  • --z-stickyTopo, barra inferior e barra de salvar20
  • --z-overlayFundo escurecido de diálogos30
  • --z-modalDiálogos e gavetas40
  • --z-toastAvisos temporários50
  • --z-tooltipDicas, sempre por cima60

Larguras

  • --largura-mdLeitura e formulários curtos768 px
  • --largura-lgAssistentes passo a passo1024 px
  • --largura-xlPáginas de trabalho: listas, quadros, configurações1280 px
  • Faça: filtros em uma linha: busca à esquerda, seletores do tamanho do conteúdo, contagem à direita.
  • Evite: página estreita sobrando metade da tela, e grade de três cartões iguais com ícone.