Case CX

Design system RecargaPay

Tokens e componentes do simulador do cliente, do backoffice e do painel do agente. Azul-escuro como cor principal, fundos claros, cantos arredondados, pílulas de situação e pêssego só como destaque. Funciona no tema claro e no escuro. A marca aparece só como texto, sem logotipo.

Princípios

O que guia cada decisão visual.

Claro antes de bonito

Situação, horário e valor aparecem primeiro. Números em fonte monoespaçada, para conferir de olho.

Cor com significado

Verde é resolvido, âmbar é esperando, vermelho é problema, roxo é Segurança, azul é a assistente. Pêssego só destaca.

Para todo mundo

Contraste AA, foco visível no teclado, sem rolagem lateral no celular e movimento reduzido quando o sistema pede.

Texto que acolhe

Sem emoji e sem travessão. Frases curtas, de igual para igual, e todo erro diz o que fazer em seguida.

Cores

No tema escuro as escalas se invertem: o tom 50 vira fundo escuro e os tons 700 e 900 viram texto claro. Os componentes usam os tokens semânticos, então funcionam nos dois temas.

Marca

Semânticos

Feedback

Situações

Pílulas de situação usadas na recarga, na fila e nos bastidores. A cor acompanha o significado, nunca o contrário.

CreditadaProcessandoAguardando a operadora Cancelada, devolução em andamentoValor devolvidoDevolução atrasadaEm análise

Fila e atendimento

Com a assistenteFila N1Fila N2Fila SegurançaAna, N1Encerrado

Chips do painel do agente

R09assistenteN1N2BCXbot antigoPENDENTE

Tipografia

Figtree para a interface e IBM Plex Mono para números, horários e códigos, carregadas do Google Fonts. Sem internet, entram as fontes do sistema (Segoe UI, San Francisco, Roboto e Consolas) sem quebrar o layout.

3xl · 32 / 800R$ 20,00
2xl · 24 / 800Conversa do cliente
lg · 16 / 700Bastidores da última resposta
md · 14,5 / 400Se não cair até 11:50, ela é cancelada sozinha e o valor volta para o seu Pix.
sm · 13 / 400Texto de apoio e legendas.
mono · 13 / 50027/07 09:50 · P002703 · (**) *****-7924

Espaço, raio e sombra

Escala de 4 px. Raios de 10, 14 e 16 px, e pílula para botões e situações.

Espaço

Raio e sombra

sm, md e lg

Componentes

Mesmas classes da v1, com o acabamento novo. Os estados de foco aparecem só no teclado.

Botões

<button class="btn pri"> <button class="btn"> <button class="btn dest"> <button class="btn perigo"> <button class="btn sm">

Controle segmentado e campos

Faixa de indicadores

Em andamento
12
Na fila
3N1 2, N2 0, Seg. 1
Satisfação
4,6de 5

Indicador de destaque

Volume humano por 100 contatos
25
Agente novo
1.204

Painel

Relógio da simulação

a recarga muda de situação com o tempo
Conteúdo do painel.

Mensagens e estados

Não deu para carregar a fila. Confira se o servidor está aberto.
Regras aplicadas: o agente já está usando.
A IA está desligada: o atendimento funciona só com as regras.
Escolha um atendimento na filaOs atendimentos aparecem aqui ao vivo.

Carregando...

Tabela

CasoDescriçãoRegraResultado
T09Estorno no cartão em andamento, prazo pula o feriado de 07/09R10passou
T13Fraude vai para Segurança sem diagnosticar o pedidoR00 BCXpassou

Conversa

Bolhas com hora, cartão da recarga com situação e linha do tempo, sugestões em pílula e o indicador de digitando.

minha recarga não caiu10:30
Sei que esperar é chato. Se não cair até 11:50, ela é cancelada sozinha e o valor volta para o seu Pix até 12:50.10:30
Recarga Claro, Pix
R$ 20,00
(**) *****-7924
Aguardando a operadora
  1. Pedido feito27/07 09:50
  2. Limite para cair27/07 11:50
  3. Devolução até27/07 12:50
.rp-msg.cli / .rp-msg.bot + .hora · .rp-timeline li.feito / li.agora · .rp-sugestoes · .rp-digitando

Contraste

Combinações de texto usadas na interface, calculadas nesta página a partir dos tokens do tema atual. Troque o tema no topo para conferir o escuro. Meta: 4,5:1 (WCAG AA para texto normal).

TextoFundoRazãoAA

Como usar

<link rel="stylesheet" href="design-system.css"> (painel/static/design-system.css) /* no CSS da tela, sempre pelos tokens semânticos */ .minha-area { background: var(--rp-surface); color: var(--rp-text); border: 1px solid var(--rp-border); }
Use os tokens semânticos (--rp-surface, --rp-text, --rp-brand) e as classes de componente: assim a tela funciona no tema escuro sem nada a mais.
Para o tema, coloque data-theme="dark" ou "light" no elemento html; sem o atributo, vale o tema do sistema.
Não escreva hexadecimal solto na tela, nem branco fixo em texto sobre a cor da marca (use --rp-text-on-brand).
Não desenhe nem imite o logotipo da marca; o nome entra como texto. Sem emoji e sem travessão nos textos.

Arquivos: painel/static/design-system.css (fonte), painel/static/design_system.html (esta página). dist/painel_agente.html e dist/design_system.html são gerados por scripts/build_standalone.py com o CSS embutido.