Sistema interno de atendimento. Quem usa é atendente de call center, ao telefone, com o cliente na linha — e isso explica quase toda decisão daqui: densidade alta, nenhum passo escondido, o estado da tela legível de canto de olho.
O vermelho tem dono. Ele é a marca de cliente VIP e o estado travado. É a única coisa do sistema com esse peso, e é por isso que funciona. Usar vermelho em mais um lugar tira a força dos dois.
Tipografia
Família única: 'Ubuntu','Ubuntu Sans','Segoe UI',Roboto,Arial,sans-serif. Cinco tamanhos, três pesos. Não existe 600 nem 700.
Título de etapa16px · 500 · --tinta
O corpo que se lê14px · 400 · --tinta
Rótulo e texto de botão13px · 500 · --tinta
Apoio, hint, legenda12.5px · 300 · --tinta-3
ETIQUETA EM CAIXA ALTA11px · 500 · --tinta-4
Números sempre com font-variant-numeric: tabular-nums — contador, quilometragem, valor, cronômetro. Sem isso a coluna dança quando o número muda, e o olho que está conferindo perde o lugar.
Espaço, curvatura e sombra
Seis degraus de espaço, nada entre eles. Se um espaçamento não cabe em nenhum, o problema é o layout.
Um campo tem quatro partes, e nessa ordem: rótulo, marca de obrigatório, o campo, e a explicação embaixo.
Pessoa que está em contato com a central neste momento.
A explicação fica embaixoAcima do campo ela é lida antes de a pessoa saber do que se trata. Embaixo, ela responde a dúvida que acabou de nascer.
Ajuda na conferência, mas não bloqueia a abertura.
A etiqueta vive no rótuloDizer que um campo é informativo é sobre o campo, não sobre o valor. A etiqueta fica junto do nome dele, não do que foi digitado.
Escolher entre poucas opções
Existiam quatro componentes fazendo isso, sem critério. A régua agora está escrita, e ela é por quantidade.
Até 3Segmentado — as opções dividem uma barra, todas visíveis
4 a 8Chips soltos, em linha
Acima de 8Lista fechada
Segmentado · até trêsA escolha inteira cabe num gesto. Ninguém precisa abrir nada para saber o que existe.
Chips · de quatro a oitoAinda cabe em uma ou duas linhas, e continua tudo visível. Foi o que substituiu os quinze motivos agrupados em seis famílias.
Pergunta curta
Um só desenho para toda pergunta de resposta rápida: o que se pergunta à esquerda, a resposta à direita, e o que a resposta abrir vem embaixo na largura toda.
Quem estará no localQuem o prestador procura ao chegar. Vale para todos os serviços.
Autoriza compartilhar dadosPara passar contato e local ao prestador.
UrgênciaEm branco, entra como Geral.
Elas dividem a larguraUma pergunta por linha empurrava o resto da etapa para fora da tela, para responder três coisas que levam dois segundos cada.
Liberação comercialVigência até 28/02/2027. Use só quando o atendimento sair da regra.
É este texto que a pessoa do comercial vai ler para decidir.
E o que a resposta abrir vem embaixoNa largura toda, dentro da mesma pergunta. A exceção fica escondida até existir, e quando existe ela tem espaço — não é um campo espremido no canto.
Botões
Um primário por tela, e ele é sempre a próxima ação de verdade.
Quatro pesos, quatro trabalhosPrimário: a ação da tela. Secundário: a alternativa de mesmo nível. Fantasma: atalho dentro de um campo. Link: revelar o que já está ali.
Botão desabilitado é o último recurso. Ele informa que você errou em algum lugar que não está dito. Em vez disso, o botão muda de promessa: nomeia o campo que falta e leva até ele.
Mensagens
Quatro famílias, e só quatro. A tela tinha seis desenhos de caixa de aviso fazendo o mesmo trabalho.
O prestador não recebe os dados do cliente. O atendimento pode ser aberto, mas o N2 trata o contato antes de acionar alguém.
Aviso · trilho, sem caixaBarra de cor à esquerda e nada de fundo pintado. Fundo colorido em tela densa compete com o campo que precisa ser preenchido.
Tudo conferido. O protocolo é gerado no acionamento e define a posição na fila do N2.
Cartão · caixa claraPara o que é resultado, não interrupção. Ele fecha um assunto em vez de alertar sobre outro.
Na fila do N2Aguardando liberação comercialEm análise
Etiqueta · estado curtoVive dentro de uma linha, ao lado do que ela qualifica. Nunca é frase.
A gramática do número
Saldo, limite e utilização aparecem em quatro lugares do sistema. Escritos de dois jeitos, obrigam quem confere a traduzir de cabeça — ao telefone.
Utilização1 de 2 por ano — o gasto primeiro, nunca o saldo
Limite100 km por utilização — por extenso, não abreviado
Saldo1 utilização restante — ou “nenhuma restante”
⛟Guinchorestam 1 de 2 · Coberto pelo contrato · sugerido
Reboque do veículo até oficina, residência ou destino combinado. Cobre pane, colisão, capotamento e atolamento. A quilometragem conta do local do veículo até o destino; o que passar do limite é cobrado do segurado.
Disponívelrestam 1 de 2 por anoLimite100 km por utilização
↺1 utilização usada de 2: 12/03/2026 — 42 km
Uma cobertura, por extensoÉ este texto que a atendente lê para o cliente. Ele precisa bastar sozinho: o que o serviço cobre, o limite, o que foi gasto no período, o que sobrou e quando foi a última vez.
Movimento e acessibilidade
Duas durações e uma curva. O movimento diz o que é novo, e nada mais.
.22sResposta a clique, troca de estado
.34sEntrada de um bloco novo na tela
curvacubic-bezier(.22,.61,.36,1) — sai rápido, chega devagar
O que já estava na tela não reanima. O render é inteiro a cada mudança; se tudo animasse, a tela piscaria a cada tecla. Um registro guarda o que já entrou.
Acessibilidade
Todo campo tem nome — label for ou aria-label. Chip de escolha usa role="radiogroup" e aria-pressed. Nada depende só de cor: estado sempre tem palavra junto. Toda animação de entrada respeita prefers-reduced-motion.
Atalhos de teclado, porque quem atende não solta o teclado: Enter vai ao próximo campo, S e N respondem o checklist, / foca a busca, Alt+1…5 troca de etapa, Ctrl+Enter aciona.
Atendimento N1 · Gente Serviços · Fernanda Martins As cores, tamanhos e durações desta página são lidas do CSS que o protótipo carrega — e os componentes são renderizados com ele. Se algo mudar no sistema, muda aqui.