Até 620 px
Telefone
Aplicativo do colaborador e do gestor. Barra de abas, ação principal no rodapé e folha inferior para confirmar.
Aplicativo e dispositivos
O mesmo reconhecimento, em qualquer tela.
Como o aplicativo do colaborador se comporta no telefone, no tablet e no desktop, como a gestão cabe no telefone e como a mesma linguagem chega ao painel da gestão.
Telas conceituais. Orientam o design system; não representam um produto publicado nem regras de negócio aprovadas. Pessoas, saldos, prêmios e datas são fictícios, e nenhuma ação é enviada.
621 a 1120 px
Tablet
Trilho de navegação e lista-detalhe no catálogo e no extrato. A folha vira diálogo centralizado.
Acima de 1120 px
Desktop
Navegação lateral com a marca, colunas e densidade maior. A gestão completa segue no painel web.
A largura é a do aplicativo, não a da janela: .tp-app é um contêiner de consulta. Os limites são os mesmos de --tp-breakpoint-mobile e --tp-breakpoint-desktop.
Telefone · aplicativo do colaborador
Tudo ao alcance do polegar.
Quatro destinos na barra de abas e a ação principal de cada tela no rodapé. Toque, use o teclado ou os atalhos ao lado; os dados vivem só nesta página.
Olá, Júlia
Não foi possível conectar. Verifique sua conexão e tente novamente.
Saldo disponível
12.480pts
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Envie 5 reconhecimentos a colegas neste trimestre. Regras demonstrativas.
reconhecimentos enviados
Reconhecimentos recentes
Ao seu alcance
Reconhecimento registrado nesta demonstração
- Entrega
- Prazo
- Informado pelo programa
- Saldo após o resgate
Selecione um prêmio para ver os detalhes e resgatar.
- Saldo
- Créditos
- Débitos
Nenhuma movimentação neste período. Escolha um período maior.
- Data
- Origem
- Identificador
- Pedido
Prazos e entregas são informados pelo programa. Dados demonstrativos.
Selecione uma movimentação para ver os detalhes.
Júlia Andrade
julia.andrade@trocapontos.com.br
Analista de operações
Notificações
Conta
Recebidas
Confirmar resgate
Revise os dados antes de confirmar.
- Prêmio
- Pontos
- Saldo após o resgate
Demonstração local. Nenhum pedido é criado e nenhum ponto real é debitado.
Experimente
Atalhos que levam o aplicativo ao lado direto a um ponto do fluxo.
O que observar
- Barra de abas com quatro destinos, ícone e rótulo sempre visíveis; o perfil fica no avatar da barra superior. O destino atual leva
aria-current="page", pílula atrás do ícone e rótulo em negrito. - Ação principal no rodapé, grudada no fim da área rolável: Enviar reconhecimento, Resgatar.
- Detalhe empilhado com Voltar à esquerda e título alinhado ao início. O foco vai para o título do detalhe e volta ao cartão de origem.
- Folha inferior para confirmar o resgate: foco contido, Esc, toque no véu e botão Fechar. Arrastar nunca é o único caminho.
- Área segura: barra superior e barra de abas somam
env(safe-area-inset-*). A moldura simula 24 px no topo e 8 px embaixo. - Reconhecer movimenta pontos: o valor escolhido sai do saldo de quem envia, a confirmação mostra o saldo depois do envio e o extrato ganha o débito. Sem saldo, o segmentado de pontos entra em erro.
- Tema no Perfil, com três estados: seguir o sistema, claro e escuro. O padrão é seguir o sistema; no produto a escolha fica guardada.
- Alvos de 44 × 44 px em tudo que se toca. Filtros desenhados com 36 px estendem o alvo até 44 px.
Tablet · mesmo aplicativo
Lista de um lado, detalhe do outro.
Acima de 620 px a barra de abas vira trilho e o catálogo e o extrato passam a lista-detalhe. Nada muda no markup: só a largura que o aplicativo recebe.
O que muda do telefone para o tablet
- Trilho de navegação de 96 px à esquerda, com os mesmos destinos e rótulos.
- Lista-detalhe no catálogo e no extrato: a lista ocupa 42% e o detalhe o restante; cada lado rola sozinho e a seleção leva barra lateral e fundo.
- Folha inferior vira diálogo centralizado, com as ações lado a lado.
- Tipografia e alvos de toque continuam os do telefone: corpo de 16 px e 44 px.
Experimente
Desktop · mesmo aplicativo no navegador
Mais colunas, a mesma linguagem.
Acima de 1120 px o trilho se expande em navegação lateral com a marca, a tela inicial ganha duas colunas e o catálogo mostra a grade dentro da lista-detalhe.
Navegação lateral
256 px, com a marca inteira e a área de proteção de .tp-brand. O destino atual leva barra lateral e fundo, como a fila do atendimento.
Colunas
Início em duas colunas assimétricas (5:7): saldo e campanha à esquerda, reconhecimentos à direita. Catálogo em grade de duas colunas na lista.
Densidade
Corpo de 14 px e linhas de lista de 56 px. Os alvos de 44 px continuam na navegação e nos botões, porque há notebooks com tela de toque.
Estados de tela
Carregar, esvaziar, falhar, desconectar.
Os quatro estados que o aplicativo precisa prever em todas as telas. Mensagens da biblioteca de conteúdo, sem culpar a pessoa e sem prometer prazo.
Olá, Júlia
Não foi possível conectar. Verifique sua conexão e tente novamente.
Saldo disponível
12.480pts
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Envie 5 reconhecimentos a colegas neste trimestre. Regras demonstrativas.
reconhecimentos enviados
Reconhecimentos recentes
Ao seu alcance
Reconhecimento registrado nesta demonstração
- Entrega
- Prazo
- Informado pelo programa
- Saldo após o resgate
Selecione um prêmio para ver os detalhes e resgatar.
- Saldo
- Créditos
- Débitos
Nenhuma movimentação neste período. Escolha um período maior.
- Data
- Origem
- Identificador
- Pedido
Prazos e entregas são informados pelo programa. Dados demonstrativos.
Selecione uma movimentação para ver os detalhes.
Júlia Andrade
julia.andrade@trocapontos.com.br
Analista de operações
Notificações
Conta
Recebidas
Confirmar resgate
Revise os dados antes de confirmar.
- Prêmio
- Pontos
- Saldo após o resgate
Demonstração local. Nenhum pedido é criado e nenhum ponto real é debitado.
aria-busy na área. O brilho some com movimento reduzido.Olá, Júlia
Não foi possível conectar. Verifique sua conexão e tente novamente.
Saldo disponível
12.480pts
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Envie 5 reconhecimentos a colegas neste trimestre. Regras demonstrativas.
reconhecimentos enviados
Reconhecimentos recentes
Ao seu alcance
Reconhecimento registrado nesta demonstração
- Entrega
- Prazo
- Informado pelo programa
- Saldo após o resgate
Selecione um prêmio para ver os detalhes e resgatar.
- Saldo
- Créditos
- Débitos
Nenhuma movimentação neste período. Escolha um período maior.
- Data
- Origem
- Identificador
- Pedido
Prazos e entregas são informados pelo programa. Dados demonstrativos.
Selecione uma movimentação para ver os detalhes.
Júlia Andrade
julia.andrade@trocapontos.com.br
Analista de operações
Notificações
Conta
Recebidas
Confirmar resgate
Revise os dados antes de confirmar.
- Prêmio
- Pontos
- Saldo após o resgate
Demonstração local. Nenhum pedido é criado e nenhum ponto real é debitado.
Olá, Júlia
Não foi possível conectar. Verifique sua conexão e tente novamente.
Saldo disponível
12.480pts
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Envie 5 reconhecimentos a colegas neste trimestre. Regras demonstrativas.
reconhecimentos enviados
Reconhecimentos recentes
Ao seu alcance
Reconhecimento registrado nesta demonstração
- Entrega
- Prazo
- Informado pelo programa
- Saldo após o resgate
Selecione um prêmio para ver os detalhes e resgatar.
- Saldo
- Créditos
- Débitos
Nenhuma movimentação neste período. Escolha um período maior.
- Data
- Origem
- Identificador
- Pedido
Prazos e entregas são informados pelo programa. Dados demonstrativos.
Selecione uma movimentação para ver os detalhes.
Júlia Andrade
julia.andrade@trocapontos.com.br
Analista de operações
Notificações
Conta
Recebidas
Confirmar resgate
Revise os dados antes de confirmar.
- Prêmio
- Pontos
- Saldo após o resgate
Demonstração local. Nenhum pedido é criado e nenhum ponto real é debitado.
error.connection e "Tentar novamente". A navegação continua disponível.Olá, Júlia
Não foi possível conectar. Verifique sua conexão e tente novamente.
Saldo disponível
12.480pts
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Envie 5 reconhecimentos a colegas neste trimestre. Regras demonstrativas.
reconhecimentos enviados
Reconhecimentos recentes
Ao seu alcance
Reconhecimento registrado nesta demonstração
- Entrega
- Prazo
- Informado pelo programa
- Saldo após o resgate
Selecione um prêmio para ver os detalhes e resgatar.
- Saldo
- Créditos
- Débitos
Nenhuma movimentação neste período. Escolha um período maior.
- Data
- Origem
- Identificador
- Pedido
Prazos e entregas são informados pelo programa. Dados demonstrativos.
Selecione uma movimentação para ver os detalhes.
Júlia Andrade
julia.andrade@trocapontos.com.br
Analista de operações
Notificações
Conta
Recebidas
Confirmar resgate
Revise os dados antes de confirmar.
- Prêmio
- Pontos
- Saldo após o resgate
Demonstração local. Nenhum pedido é criado e nenhum ponto real é debitado.
Telefone · aplicativo do gestor
A gestão também cabe no telefone.
Três telas mostram que o sistema cobre esse público sem outra linguagem: a mesma casca .tp-app, os mesmos componentes e destinos próprios. O trabalho completo continua no painel web.
Olá, Mariana
Pontos para distribuir
24.000pts
Engajamento01/07 a 30/09/2026
Quem reconheceu alguém no trimestre
pessoas da sua equipe, ou %, em reconhecimentos. Dados demonstrativos.
Resumo do trimestre
- Equipe
- Creditados
- Pendências
Precisa de você
Nenhuma solicitação aguarda você agora.
Nada aguardando você
Novas solicitações de resgate, crédito e campanha aparecem aqui assim que chegarem.
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Cada pessoa envia 5 reconhecimentos no trimestre. Regras demonstrativas.
pessoas já cumpriram a meta.
- Participação
- Cumpriram
- Creditados
Quem mais reconheceu
Reconhecimentos enviados no trimestre. Dados demonstrativos.
Reconhecer e creditar
Os pontos saem da cota do trimestre. Nesta demonstração, nada é enviado.
Olá, Mariana
Pontos para distribuir
24.000pts
Engajamento01/07 a 30/09/2026
Quem reconheceu alguém no trimestre
pessoas da sua equipe, ou %, em reconhecimentos. Dados demonstrativos.
Resumo do trimestre
- Equipe
- Creditados
- Pendências
Precisa de você
Nenhuma solicitação aguarda você agora.
Nada aguardando você
Novas solicitações de resgate, crédito e campanha aparecem aqui assim que chegarem.
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Cada pessoa envia 5 reconhecimentos no trimestre. Regras demonstrativas.
pessoas já cumpriram a meta.
- Participação
- Cumpriram
- Creditados
Quem mais reconheceu
Reconhecimentos enviados no trimestre. Dados demonstrativos.
Reconhecer e creditar
Os pontos saem da cota do trimestre. Nesta demonstração, nada é enviado.
Olá, Mariana
Pontos para distribuir
24.000pts
Engajamento01/07 a 30/09/2026
Quem reconheceu alguém no trimestre
pessoas da sua equipe, ou %, em reconhecimentos. Dados demonstrativos.
Resumo do trimestre
- Equipe
- Creditados
- Pendências
Precisa de você
Nenhuma solicitação aguarda você agora.
Nada aguardando você
Novas solicitações de resgate, crédito e campanha aparecem aqui assim que chegarem.
Campanha ativaaté 30/09/2026
Reconhecer quem faz junto
Cada pessoa envia 5 reconhecimentos no trimestre. Regras demonstrativas.
pessoas já cumpriram a meta.
- Participação
- Cumpriram
- Creditados
Quem mais reconheceu
Reconhecimentos enviados no trimestre. Dados demonstrativos.
Reconhecer e creditar
Os pontos saem da cota do trimestre. Nesta demonstração, nada é enviado.
O que observar
- Abas próprias, coerentes com as do colaborador: Início, Aprovações e Campanhas, com ícone e rótulo sempre visíveis e
aria-current="page"no destino atual. Três destinos, dentro da faixa de 3 a 5. - Os números fecham: cota do trimestre = pontos já creditados + pontos disponíveis para distribuir. Aprovar um crédito extra ou pagar o bônus muda os dois lados na mesma hora.
- Ação em cada linha da fila de aprovações, com nome acessível completo ("Aprovar: Crédito extra de 2.000 pts") e alvo de 44 px.
- A folha inferior é a mesma do resgate: foco contido, Esc, toque no véu, retorno ao acionador e o resumo da conta antes de confirmar.
O que fica no painel web
O aplicativo do gestor resolve o que aparece no meio do dia: uma aprovação, um crédito, uma olhada na campanha. Relatórios, criação e edição de campanhas, importação de pessoas e a distribuição em massa continuam no painel, com tabelas e filtros que pedem largura.
Abrir o painel do gestorGestão e atendimento · desktop
O trabalho pesado da gestão continua no painel web.
O aplicativo do gestor acima é o complemento no telefone. Relatórios, campanhas e distribuição em massa seguem no desktop, com mais densidade e tabelas: o painel existente já aplica a mesma linguagem.
Gestor e RH
Visão geral do painel
Campanhas, distribuição de pontos e engajamento. Navegação lateral persistente, cartões de indicador e tabelas com rolagem delimitada.
Abrir o painel do gestor AtendimentoSistema de atendimento
Fila, conversa e contexto em três colunas no desktop; empilham abaixo de 860 px. Uso principal em desktop.
Abrir o sistema de atendimento| Aspecto | Aplicativo (colaborador e gestor) | Painel da gestão (index.html) |
|---|---|---|
| Linguagem | Tokens, tipografia Passo e Inter, cartões, badges, ícones em traço | Os mesmos |
| Navegação | Barra de abas, trilho ou lateral, conforme a largura; destinos próprios de cada público | Lateral persistente, recolhível |
| Dados | Cartões e linhas de lista; no gestor, uma fila curta de decisões | Tabelas, gráficos e filtros combinados |
| Ação principal | No rodapé da tela, ao alcance do polegar | No cabeçalho da seção |
| Densidade | Confortável; alvos de 44 px | Confortável ou compacta (data-density) |
Premissas desta referência e decisões que dependem da responsável pelo projeto: Plataformas e dispositivos. Visão geral no portal: seção 16.