Pular para o conteúdo
Design Systemv1.0
Mapa Abrir protótipo
v1.0 · atualizado em 26 de outubro de 2026

Do carrinho à comissão, uma só linguagem.

O design system da PharmaLab reúne tokens, componentes e padrões para uma operação farmacêutica com muitos públicos: o representante no celular, a operação de olho no prazo, o gestor que aprova desconto e a diretoria que fecha o mês. Tudo nesta página é o código real do protótipo, com os dados da Nexa Saúde.

Explorar componentes Ver tokens
22
seções
145
ícones no sprite
19
tipos de gráfico
2
temas, claro e escuro
A

Um só acento

Halor Blue é a única cor de ação. Verde, âmbar e coral aparecem só para dizer o estado de algo.

B

Número é cálculo

Todo valor sai da plataforma e aparece por extenso: R$ 1.214.951, nunca “1,2 mi”. A IA escreve o texto, não o número.

C

Ação antes de análise

A tela começa pelo que precisa de você agora e termina num botão. Análise vem depois, para quem quiser.

D

Para todos os níveis

Modo essencial para o dia a dia, completo para quem configura. Glossário e atalhos para quem quer ir além.

01Fundamentos

Princípios de UX

A PharmaLab atende do representante que vende pelo celular ao financeiro que fecha a DRE. Quando houver dúvida no desenho de uma tela, estes oito princípios decidem. Cada cartão tem um exemplo para você testar.

Valem para todas as telas e ambientes
01

Revelação progressiva

Mostre primeiro o número que decide. O contexto vem no gráfico e o detalhe na ficha, sempre um clique depois.

Na práticaNúmeroGráficoListaFicha
02

Modo essencial e completo

Quem está começando vê só o que usa no dia. Colunas técnicas, regras e logs ficam no modo completo, a um clique.

Teste
4 colunas na lista de pedidos
03

Linguagem simples

Escreva como a equipe fala. “Rep ativo”, não “RA”. O botão diz o que acontece: verbo e objeto.

Na práticaGerar link de pagamentoSubmeter
04

Do zero à ação

Toda fila, alerta ou insight termina numa ação de um clique. Tela vazia ensina o primeiro passo em vez de só dizer que não há nada.

Teste
05

Desfazer em vez de confirmar

Ações leves acontecem na hora e oferecem Desfazer por 5 segundos. Confirmação fica para o que não tem volta.

Teste
06

Teclado para quem tem pressa

⌘K busca e pergunta, ? mostra os atalhos, G e P leva a Pedidos. Nenhum atalho dispara enquanto você digita.

Teste
07

Glossário no lugar

Todo indicador com definição tem um ? ao lado. A mesma frase vale em todas as telas e no assistente de IA.

TesteReps ativos 21 de 24
08

Acessível por padrão

Foco visível, contraste AA, rótulo em todo botão de ícone, tabela com cabeçalho e movimento reduzido respeitado.

Assim fica o foco

Para quem desenhamos

Seis públicos com pressa, contexto e vocabulário diferentes. A mesma tela precisa servir a todos, por isso o que aparece primeiro muda com o papel.

Do resumo ao detalhe

Quatro degraus de profundidade. Cada um responde uma pergunta e leva ao próximo sem trocar de contexto.

Faturamento do mês
R$ 1.214.951
+12,4%
1Resumo

Quanto? Um número, a comparação e um ? com a definição.

2Contexto

Está melhor ou pior? Série no tempo e o período anterior tracejado.

PL-48213Ana PaulaConferência
PL-48249RobertoPago
PL-48247Clínica EquilíbrioLink
PL-48244Clínica Boa ViagemReceita
3Lista

Quais? Tabela com filtros, visões salvas e ação em lote.

  1. Conferência
    há 1 h 44 min
  2. Cartão aprovado
    23 out, 17:56
  3. Pedido criado
4Ficha

Por quê? A ficha mostra a linha do tempo, quem mexeu e quando.

Experimente
02Fundamentos

Marca

O símbolo é um P molecular: um anel hexagonal como bojo, a haste como ligação e um átomo no pé. Ele vive num ladrilho Halor Blue, lê bem a partir de 16 px e muda de tom para dizer em que ambiente você está.

Símbolo e construção

Grade de 48 unidades. O ladrilho tem raio de 13,5 e o traço do glifo tem 4,4, com pontas e junções arredondadas, igual aos ícones.

Ladrilho azul
Uso padrão em superfícies claras e na sidebar Ink
Sobre Ink
Sidebar do admin, hero e console
Ladrilho branco
Só sobre Halor Blue, como no portal do fornecedor

Assinatura

Símbolo mais “PharmaLab” em Plus Jakarta Sans 800, com o ponto azul no fim. O ponto clareia no escuro e fica branco sobre o azul.

ClaraPara fundos claros: login, carrinho do cliente, documentos.
EscuraSidebar do admin e do console, hero e apresentações.
Sobre azulPortal do fornecedor: ladrilho branco e ponto branco.

Área de proteção e tamanho mínimo

Deixe livre, em volta da assinatura, metade da altura do símbolo. Abaixo de 24 px use só o símbolo; o favicon usa o traço um pouco mais grosso.

½½½½
O símbolo continua legível em 16 px porque o anel e o átomo não se tocam. A assinatura completa pede no mínimo 24 px de símbolo, cerca de 112 px de largura.

O que evitar

O símbolo tem uma forma só. Estes ajustes parecem pequenos, mas desfazem o reconhecimento.

Favicon

Ladrilho azul em qualquer tema do navegador. O título da aba segue “Tela · PharmaLab”.

Pedidos · PharmaLabJornada · PharmaLab
nexa.pharmalab.com.br/pedidos
Design System · PharmaLabInício · PharmaLab
nexa.pharmalab.com.br/design-system

Cores por ambiente

A cor da sidebar diz onde você está antes de qualquer texto. Quem atende vários ambientes nunca confunde o painel do tenant com o portal do fornecedor.

Admin do tenant · Ink

Painel da Nexa Saúde. Sidebar Ink, item ativo em pílula azul.

Portal do fornecedor · Blue

Laboratório Aurora. Sidebar Halor Blue, ladrilho branco e item ativo em pílula branca.

Console super-admin · Ink e listra

Todos os tenants. Etiqueta “Console da plataforma” e listra azul de 3 px no topo.

03Fundamentos

Cores

Uma paleta curta: Halor Blue como único acento, Ink para superfícies escuras e uma escada de cinzas frios. Componentes nunca usam a paleta direto; eles usam os tokens semânticos, que mudam no tema escuro. Clique em qualquer amostra para copiar o hex.

Paleta da marca

Do Halor Brand Guidelines. Os nomes começam com --pl- e não mudam com o tema.

Tokens semânticos, claro e escuro

São estes que os componentes usam. O escuro não é o claro invertido: o azul fica mais luminoso para manter contraste e as sombras viram contorno.

TokenClaroEscuroUso

Mesmo componente, dois temas

Os mesmos componentes, lado a lado. O escuro vem de data-theme="dark", que pode ser aplicado num trecho da página, como aqui.

Cores funcionais

Dessaturadas e sempre sobre um fundo suave. Servem para estado: chip, ponto, alerta e prazo.

Cor de status é só para estado

Queda de faturamento não é erro: o delta negativo usa cinza, como em −3,2%. Verde e coral entram no delta só quando a direção é crítica, como estorno ou prazo: +0,4 p.p. de estorno.

Séries de gráfico

Seis tons, na ordem em que entram. Azul para a série principal, Ink para a comparação.

Faturamento por canal, de pedido do rep (46%) a cobrança avulsa.

Listras a 135°

Destaque de dado: barra ativa, projeção, etapa final do funil.

Azul
Ink
Cinza
04Fundamentos

Tipografia

Plus Jakarta Sans em cinco pesos. Títulos em 600 com tracking negativo, corpo em 500 e números sempre tabulares, para que colunas de valores fiquem alinhadas.

Aa
Plus Jakarta Sans
Google Fonts · 400, 500, 600, 700 e 800 · recursos cv11 e ss01 ligados

Escala

Dez estilos cobrem o produto inteiro. Se um texto não cabe em nenhum, o problema costuma ser a hierarquia, não a escala.

Números tabulares

Cada dígito com a mesma largura. Em tabelas, KPIs e gráficos, use .num ou .t-num.

Tabular · .num
R$ 111.111
R$ 98.420
R$ 7.111,11
R$ 1.284,90
Proporcional
R$ 111.111
R$ 98.420
R$ 7.111,11
R$ 1.284,90

Centavos em segundo plano

Quando os centavos importam, eles aparecem em .cents, mais claros que o valor inteiro.

Dinheiro em reais

Regra da proposta, sem exceção: valor sempre por extenso. Vale para KPI, tabela, tooltip, eixo de gráfico, exportação e texto da IA.

Por extenso

R$ 1.214.951
R$ 1,2 mi

Nunca “mil”, “k” ou “mi”. A pessoa compara valores de cabeça, e abreviação esconde a ordem de grandeza.

Eixos de gráfico

R$ 250.000
250k

Eixos de moeda usam PL.fmt.axisBrl. Se não couber, use menos marcas, não abrevie.

Formato brasileiro

R$ 509,63
R$509.63

Vírgula decimal, ponto de milhar e espaço fixo depois do R$, para o símbolo nunca quebrar de linha (PL.nbsp).

Formatadores ao vivo

Digite um valor. Todas as telas usam estas funções, então o que você vê aqui é o que aparece no produto.

R$
Aceita vírgula ou ponto. Teste também um negativo, como −50.

Datas e tempo

Relógio do protótipo: segunda-feira, 26 de outubro de 2026, 09:42. Prazos de etapa contam horas úteis; tempos de feed contam minutos corridos.

ChamadaResultadoOnde usar
05Fundamentos

Espaço, raios, elevação e grid

Base de 4 px, cantos generosos e sombras quase invisíveis. A hierarquia vem do espaço e do contraste, não de bordas e sombras pesadas.

Espaçamento

Oito degraus. Entre cards, sempre --gap (14 px; 12 px no modo compacto).

Alturas de controle

Botão, campo e aba dividem a mesma altura, então tudo alinha numa linha.

--ctl-sm · 36
--ctl · 44
--ctl-lg · 52

No modo compacto as três alturas viram 32, 38 e 46.

Raios

Do chip ao card, sempre arredondado. Botões, abas, busca e filtros de barra são pílulas; campos de texto de formulário usam --r-ctl (14 px).

Elevação

Três níveis e um anel. No escuro, a sombra vira um contorno de 1 px, porque sombra preta some no preto.

--sh-1Cards e linhas. Quase nada, só para separar do fundo.
--sh-2Hover de card, KPI e kanban. Indica que dá para clicar.
--sh-popMenus, popovers, paleta, drawer e modal.
--sh-ringContorno leve de 1 px para separar superfícies iguais.

Grid e layout

Sidebar flutuante, coluna de conteúdo até 1.680 px e grids que se reorganizam sozinhos. Nada rola na horizontal entre 360 e 1.920 px; tabelas largas rolam dentro do próprio card.

≥ 1.280

KPIs em 4 colunas, grids em 3 ou 4, sidebar expandida.

< 1.100

KPIs e grids caem para 2 colunas; a topbar esconde textos.

< 980

Sidebar vira gaveta com hambúrguer, overlay e Esc.

< 640

KPIs e categorias em rolagem horizontal, botão + flutuante.

Classes
06Fundamentos

Ícones

Um sprite SVG em grade de 24, traço de 1,8 com pontas redondas e currentColor, então o ícone herda a cor do texto. Clique em um ícone para copiar a chamada.

Quando usar

  • Ao lado de um rótulo, para a pessoa achar a ação mais rápido.
  • Sozinho em botão de ícone, sempre com aria-label e tooltip.
  • Em 16 a 20 px dentro de controles; 24 px em destaques; 132 px só na marca d’água do KPI.

Quando evitar

  • Como enfeite em todo item de lista. Se todos têm ícone, nenhum se destaca.
  • Ícone colorido de status sem texto: cor sozinha não basta para quem não enxerga cores.
  • Ícones de outras bibliotecas misturados ao sprite.
07Componentes

Botões

Pílulas de 44 px, peso 600, ícone opcional à esquerda. O rótulo é sempre um verbo com objeto, para a pessoa saber o que vai acontecer antes de clicar.

Variantes, tamanhos e estados

Uma variante por intenção. Passe o mouse e use Tab para ver hover e foco.

VariantePequenoPadrãoGrandeÍconeDesabilitadoCarregando
Classes

Anatomia

Altura do controle, raio de pílula e ícone de 18 px. O ícone encosta 4 px na borda para o conjunto parecer centrado.

raio 999 · pílula ícone 18 px 600 · 15 px altura 52 px

Grupos e ícones

Botão de ícone sempre com rótulo acessível. O grupo junta ações irmãs.

Clique: o botão mostra o carregamento sem mudar de largura e um toast confirma.
Botão redondo de adicionar (.fab). Quando usar: só no celular, para a única ação principal da tela. Com ele, o primário da barra de ferramentas some abaixo de 640 px; sem ele, o primário vira um círculo “+”.

Quando usar

  • Primário: uma ação principal por área, como “Gerar link de pagamento”.
  • Dark: ação forte que não é a principal, ou sobre fundo claro de destaque.
  • Soft e outline: ações secundárias, como Exportar, Filtros e Cancelar.
  • Danger: excluir ou reter, sempre com desfazer ou confirmação.

Quando evitar

  • Dois primários lado a lado. Se tudo é principal, nada é.
  • Rótulos vagos como “OK”, “Sim” ou “Submeter”.
  • Botão vermelho sólido. O perigo é dito pelo texto e pela confirmação, não por um alarme.
  • Link com cara de botão para ação, ou botão para navegar: ação é <button>, navegação é <a>.
08Componentes

Formulários

Rótulo em cima, ajuda embaixo e erro que diz como resolver. Todos os controles têm a mesma altura e o mesmo foco azul, e todos funcionam no teclado.

Novo pedido
Campos de texto, seleção e grupo com unidade
Rascunho
Busca na carteira da Camila Rocha
%
Acima de 15% precisa do gerente. Envie para aprovação ou reduza.
R$
Calculado pela Yampi no checkout
Classes
Controles de escolha
Interativos: teste com mouse e teclado
Exigir receita antes do link.switch · role="switch"
Avisar o cliente.check
Tabela de preço.radio
Forma de pagamento.segmented
Quantidade.qty · data-min · data-max
Dias de entrega.segmented[data-multi]
Desabilitadodisabled · aria-disabled
Comissão do rep.range
12%

Receita, código e chave

Três controles especiais do produto. A dropzone aceita arrastar ou clicar; o código aceita colar os 6 dígitos de uma vez.

Envio de receita
Código de acesso

Enviamos para helena@nexasaude.com.br. Para testar, digite 482913; outro código mostra o erro.

Chave secreta
Chave da API Yampi · Laboratório Aurora
••••••••a3f9
A chave nunca volta a aparecer inteira. Só os 4 últimos caracteres.

Linhas de configuração

Título e descrição à esquerda, controle à direita. Estas linhas funcionam de verdade nesta página.

Aparência
Tema claro ou escuro neste dispositivo
Idioma
Textos, datas e moeda
Segundo fator por e-mail Obrigatório para admin
Pedimos um código de 6 dígitos a cada novo dispositivo
Avisos de prazo no WhatsApp
Receber no celular quando uma aprovação passar de 2 horas úteis
Resumo diário da Lab IA
Briefing às 07:00 com o que mudou desde ontem às 18h

Avisos e novidades

Cartão de comunicação abaixo das configurações.

Manutenção programada da Yampi
Publicado em 24 de outubro de 2026

Na madrugada de 30 de outubro, das 02:00 às 04:00, os eventos de pagamento podem chegar com atraso. A plataforma reprocessa tudo sozinha; nenhum pedido se perde.

09Componentes

Chips, deltas, tags e avatares

Pequenos, mas carregam a maior parte do estado da operação. O chip diz o status, o delta diz a direção, a tag marca uma exceção e o avatar diz quem.

Chips de status

Fundo suave e texto na cor do estado. O tom vem do dicionário de dados, então “Aprovado” é verde em qualquer tela.

Variantes
PagoAguardandoRecusadoEm conferênciaRascunhoPadrãoVIPManualLab IA
Tamanhos
Pequeno · 20Padrão · 24Grande · 30
Classes

Deltas

Comparação com o período anterior. Azul quando sobe, cinza quando cai.

Subiu.delta.up+12,4%
Caiu, sem drama.delta.down−3,2%
Bom quando a direção é crítica.delta.good−0,4 p.p. de estorno
Ruim quando a direção é crítica.delta.bad+2 fora do prazo
Estável.delta.flat0,0%

Tags e marcadores

Quadradas e menores que o chip. Marcam exceção ou origem, nunca etapa.

Marcadores do pedido
pedido filhoalterado na Yampisem atribuiçãoatribuição contestadafrioreceitanovo
Origem do evento na linha do tempo
PlataformaYampiFornecedorLab IA
Filtros rápidos · .chip-btn

Avatares

Iniciais sobre seis tons da marca. Sem foto, o tom vem do nome, então a mesma pessoa tem sempre a mesma cor.

Tamanhos
Tons .av-1 a .av-6
Grupo · Equipe Sul
Patrícia Kowalski e mais 4
10Componentes

Cards e KPIs

Cards brancos de 26 px de raio sobre o Cloud. Na linha de KPIs, o primeiro cartão é escuro e carrega o número mais importante da tela.

Linha de KPIs

Ícone num quadrado, delta, menu, número grande com contagem animada e uma comparação. O ? abre a definição do glossário.

Pé do KPI: linha ou frase

O pé padrão é uma linha flexível: rótulo curto e um valor em negrito. Quando o pé vira uma frase com negrito ou link no meio, use .kpi-foot.is-text: ele corre como texto e quebra entre palavras.

Linha, o padrão

  • Comparação curta: “vs. setembro R$ 1.081.340”.
  • Rótulo e valor, ou um ícone pequeno antes do texto.
  • Até uns 40 caracteres, que cabem numa linha do card.

Frase, com .is-text

  • Texto corrido com negrito ou link no meio da frase.
  • Explicação que pode quebrar em duas linhas no celular.
  • Sem ele, cada trecho vira um item flexível: sobra espaço entre as palavras e a quebra cai no lugar errado.

Superfícies

Quatro fundos de card. O escuro e o azul são para destaque e aparecem no máximo uma vez por linha.

Card
Superfície padrão

Branco, raio de 26 e --sh-1. Base de quase tudo.

.card
Card suave
Área recuada

Cloud, sem sombra. Sempre dentro de outro card: sobre o fundo da página ele some.

.card > .card-soft
Card azul
Destaque de marca

Halor Blue com listras suaves. Para meta batida ou chamada da Lab IA.

.card-blue
Card hero
Número principal

Ink com brilho azul no canto. Primeiro KPI da linha.

.card-hero

Cards de categoria

Selecionar um card filtra a tabela abaixo dele. O ativo vira Ink. Clique para testar.

Linhas de lista

As linhas da Halor: fundo Cloud, ícone redondo, valor à direita com barra de participação.

Formas de pagamento
Outubro até hoje
Ver gráfico

    Lista simples

    Sem fundo, com divisórias. Para rankings e listas longas dentro de um card.

    Top representantes
    Faturamento no mês
    Outubro
      11Componentes

      Tabelas

      Cabeçalho em pílula Cloud, linhas de 56 px, nome com a dose em cinza na mesma linha e chips suaves. Busca, filtros, visões salvas, seleção em lote e paginação vêm juntos.

      Tabela de pedidos

      Tudo funciona: busque, troque a visão, remova um filtro, selecione linhas para ver a barra de ações em lote e abra a ficha pelo olho.

      Pedidos de hoje
      Criados hoje até 09:42 · amostra da Nexa Saúde
      PedidoClienteProdutoRepValorPagamentoEtapaAções

      Densidade

      O modo compacto reduz linhas de 56 para 44 px e controles de 44 para 38 px. Para quem trabalha numa fila longa o dia todo.

      ReceitaPacienteCanalConfiançaStatusEspera

      Quando usar

      • Para comparar muitos itens com os mesmos campos: pedidos, receitas, reps.
      • Valores à direita com .t-num; dose e cidade em .t-sub ou .t-dose.
      • Ações da linha à direita: ver, editar e mais. Ação em lote só aparece com seleção.

      Quando evitar

      • Para menos de 5 itens ou um item com muitos detalhes: use lista ou ficha.
      • Quebrar a página na horizontal. Tabela larga rola dentro de .table-wrap com indicador.
      • Colunas técnicas no modo essencial. Marque com .adv-only.
      13Componentes

      Overlays

      Tudo que flutua sobre a tela. Drawers e modais empilham, prendem o foco, fecham com Esc e devolvem o foco para quem os abriu. Abra cada um.

      DrawerPL.drawer()

      Ficha, formulário longo ou detalhe, sem perder a lista. Abre à direita com 560 px.

      ModalPL.modal()

      Uma decisão curta e focada, com no máximo dois botões e um campo.

      ConfirmaçãoPL.confirm()

      Só para o que não volta, como excluir uma regra. Devolve uma promessa.

      Toast com desfazerPL.toast()

      Confirma uma ação leve e oferece Desfazer por 5 segundos. Pausa no hover.

      MenuPL.menu()

      Ações de um item, com ícone, atalho, item marcado e ação perigosa separada.

      PopoverPL.popover()

      Explicação curta presa a um elemento. Fecha ao clicar fora.

      Tooltipdata-tip

      Rótulo de botão de ícone ou atalho. Aparece no hover e no foco do teclado.

      Passe o mouse
      Hint do glossário.hint · data-hint-key

      A definição de um indicador, igual em todas as telas e no assistente.

      Margem de contribuição
      Paleta de comandosPL.cmdk.open()

      Busca telas, pedidos e clientes, executa ações e responde perguntas com números.

      Lab IAPL.ai.open()

      Assistente em drawer, com sugestões, resposta com número calculado e link para a tela.

      NotificaçõesPL.notify.open()

      Agrupadas em Hoje e Antes. O estado de lida fica salvo e o ponto do sino atualiza.

      Tour guiadoPL.tour()

      Holofote com explicação passo a passo. Aparece uma vez por tela, e volta pela Ajuda.

      14Componentes

      Feedback

      Alerta para o que pede atenção, vazio que ensina, esqueleto enquanto carrega e progresso para metas. Todo feedback diz o que aconteceu e o que fazer em seguida.

      Alertas

      Ícone, título que resume, texto que explica e até duas ações. O tom segue as cores funcionais.

      CryoPharma sem eventos há 47 min
      Pagamentos e envios desse fornecedor podem estar atrasados na plataforma. A loja na Yampi continua vendendo normalmente.
      Chargeback no pedido PL-47025
      A comissão do pedido foi estornada. Envie a defesa pela Yampi até 2 de novembro para tentar reverter.
      Lote LT-2026-10-01 pronto para pagar
      21 representantes, R$ 86.420 via Pix, agendado para 30 de outubro. Todas as notas fiscais de PJ chegaram.
      Fechamento de setembro na versão 2
      A revisão corrigiu R$ 760 em comissões. A versão 1 fica no histórico, com quem mudou e por quê.
      Taxa provisória em uso no cartão da CryoPharma
      A taxa real conciliada para 2 a 3 parcelas é 6,61%, acima dos 2,99% provisórios. A margem de 9 pedidos muda quando você atualizar.

      Estados vazios

      Contextuais: explicam por que está vazio e oferecem o primeiro passo. Nunca só “Nenhum dado”.

      Nenhuma aprovação esperando

      Quando um rep pedir desconto acima de 5%, o pedido aparece aqui com o prazo de 2 horas úteis.

      Sua carteira ainda está vazia

      Cadastre o primeiro cliente ou importe a planilha que você já usa. Levamos menos de 2 minutos.

      Nada para “minoxidil 10%”

      O catálogo tem Minoxidil 5%. Confira a dose ou busque pelo SKU.

      Esqueletos

      Reproduzem a forma do conteúdo. O brilho para com movimento reduzido.

      Progresso

      Preenchido por --v. Listrado para meta, Ink para comparação, cores funcionais para prazo.

      Meta de outubro · R$ 1.400.00086,8%
      Conversão do carrinho48,3%
      Setembro, para comparar77,2%
      No prazo40%
      Perto do prazo85%
      Estourado100%
      15Componentes

      Fluxo: trilhas, etapas e kanban

      O pedido anda em três trilhas independentes: pagamento, operação e comissão. O kanban mostra a etapa calculada a partir delas, com o prazo de cada etapa contado em horas úteis.

      Três trilhas do PL-48213

      Ana Paula Ribeiro, para Lúcia Ribeiro · Camila Rocha · Laboratório Aurora · cartão em 3x ·

      Pipeline padrão

      Dez etapas configuráveis em Configurações › Operação. As internas andam pelo kanban; as da Yampi andam sozinhas pelos eventos. Números de hoje.

      Etapa internaEtapa da Yampi

      Linha do tempo

      Cada evento com horário, trilha e origem. Nada se apaga; correção vira um novo evento.

        Prazo na etapa

        O tempo do cartão muda de cor a 80% do prazo e fica coral quando passa. Cartão atrasado ganha uma barra à esquerda. Tempo e prazo são contados em horas úteis (seg–sex, 08h–18h; 1 dia útil = 600 min): formate todo campo *Min com PL.fmt.durBiz. PL.fmt.dur é só para tempo corrido.

        Kanban

        Pedidos reais de hoje. Arraste um cartão entre as colunas com o mouse, ou foque o cartão e aperte Enter (no celular, toque e segure) para escolher a etapa em Mover para….

        16Componentes

        Peças compartilhadas

        Peças que várias telas faziam cada uma do seu jeito e agora saem da fundação: quem controla cada etapa, o chip da etapa, a abertura da aba, colunas fixas, resumo de valores (também sobre Ink), pé de KPI em frase, destaque da busca, barra com projeção, arte do produto, marca do tenant e QR code.

        Quem controla cada etapa

        São dois trechos da Yampi com a Conferência, interna, no meio: a plataforma leva o pedido até a receita, a Yampi cuida do pagamento, a plataforma confere e a Yampi volta a mandar na separação e no envio. Toda tela desenha este mesmo modelo a partir de PL.data.pipelineRuns; nunca escreva “daqui em diante a Yampi controla” como se fosse uma passagem só.

        PL.stageChip(order) escreve onde o pedido está: chip neutro com o ponto da cor da etapa. Exceção vence a etapa (Retido em âmbar, Falha na entrega em coral); Entregue fica verde. { origin: true } mostra a etiqueta Interna ou Yampi.

        Abertura da aba

        Uma linha de contexto logo abaixo das abas. Título só quando ele diz mais do que o nome da aba (o mês, o recorte, um bom-dia); senão, só o texto. Ação principal fica sempre à direita da subnav, nunca aqui.

        Comissões de outubro

        Comissão nasce apurada quando o pagamento é aprovado, fica liberada 7 dias depois da entrega e é paga no lote do mês seguinte.

        Competência: data do pagamento

        Pedidos que pediram uma condição fora da alçada do rep. Aprove com um toque, faça uma contraproposta ou negue com motivo.

        Botão sobre superfície suave

        Em linha ou painel --surface-2, use .btn-raised: superfície com borda suave, legível nos dois temas. .btn-white fica só para cards Ink, azuis ou foto.

        2 aprovações fora do prazo
        PL-48198 e PL-47889 subiram de nível

        Pílula dentro da frase

        Número clicável dentro de um texto: a pontuação que vem depois vai num .punct logo depois da .text-pill: a pílula fecha o respiro e a frase lê “chegaram.”, nunca “chegaram .”.

        Desde ontem às 18h, 38 pedidos foram pagos e 12 receitas chegaram. 2 aprovações passaram do prazo.

        Tabela com colunas fixas

        Em tabela larga, .sticky-start prende a primeira coluna (e a seguinte, quando a primeira é a seleção) e .sticky-end prende as ações. A sombra só aparece quando há conteúdo passando por baixo. Tabelas com mais de 12 linhas ganham cabeçalho fixo e um esmaecer no pé enquanto houver linhas abaixo.

        Resumo de valores

        Subtotal, descontos, frete e total, alinhados à direita. Cada linha é um <div> com dt e dd; .is-neg marca desconto e .is-total fecha a conta. Sobre Ink, como o painel de total do pedido, acrescente .on-ink.

        Card · .sum-list
        Resumo do pedido
        PL-48213
        Ink · .card-hero .sum-list.on-ink
        Total do pedido
        PL-48213

        Sobre Ink, o desconto fica branco como os outros valores: o verde perde contraste no fundo escuro e o sinal de menos já diz que é desconto. Em área recuada dentro de um card, use .is-soft.

        Realizado e projeção

        Sólido é o realizado, listrado é a projeção e o traço é a meta. Cabe numa linha de tabela.

        Produto, tenant e QR

        A mesma arte de embalagem em toda tela; a marca do tenant nas páginas públicas; QR que o celular lê de verdade.

        c.pharmalab.com.br/nexa/c/8K3MQ2A

        Destaque na busca

        Em lista filtrada, o trecho que bateu com a busca aparece marcado. Ignora acento e maiúscula: “acido” acha Ácido azelaico, “omega” acha Ômega 3. Digite para testar.

          Assinatura

          Devolve HTML pronto para innerHTML: o texto já sai escapado e só o primeiro trecho encontrado ganha o <mark class="hl">. Busca vazia devolve só o texto escapado.

          • Acento e caixa não contam, mas o texto mostrado mantém a grafia original.
          • Sem escapar de novo: passe o texto cru e jogue o resultado direto no HTML.
          • Entrada curta do destaque, desligada com movimento reduzido.

          Tempo útil e APIs novas

          Prazos em minutos úteis viram horário de vencimento com PL.fmt.due; PL.time soma e conta minutos úteis (seg–sex, 08h–18h).

          ChamadaResultadoPara quê
          17Inteligência e dados

          Lab IA

          A IA escreve o texto e sugere a ação. O número sempre sai do cálculo da plataforma, e toda resposta diz de onde veio e respeita o papel de quem pergunta.

          A regra: texto da IA, número do cálculo

          Assim um insight nunca inventa um valor, e o mesmo número aparece no KPI, no gráfico e na frase.

          Dados da operação

          Pedidos, receitas, eventos da Yampi e comissões na base gerencial.

          Cálculo da plataforma

          Consultas fixas com a definição do glossário. Saída: R$ 1.448.596.

          Lab IA escreve

          “A projeção é de R$ 1.448.596, 3,5% acima da meta.” O texto cita o número, nunca o cria.

          Cartões de insight

          Insight, ação sugerida e tarefas marcáveis. A barra à esquerda diz a prioridade. Gerados às 07:02 pelos agentes de cada área.

          Respostas com número

          O padrão que aparece na paleta e no assistente: valor, rótulo, série curta, uma frase e o link para a tela de origem.

          Pergunte

          A IA pode

          • Resumir o que mudou e priorizar o que precisa de alguém.
          • Sugerir uma ação concreta com dono: “Agendar conversa com Rodrigo Schmitt”.
          • Rascunhar mensagens e a apresentação mensal, sempre editáveis.

          A IA não pode

          • Gerar, arredondar ou estimar um número que a plataforma não calculou.
          • Oferecer ou negociar medicamento no atendimento.
          • Mostrar dados fora do papel de quem pergunta. Gestor vê a equipe dele, rep vê a carteira dele.
          18Inteligência e dados

          Gráficos

          Dezenove tipos em SVG, sem bibliotecas externas. Todos leem as cores dos tokens, refazem o desenho na troca de tema, entram com animação, respeitam movimento reduzido e navegam pelo teclado. Os dados abaixo são da Nexa Saúde, até 26/10 às 09:42.

          Acessível por padrão

          Cada gráfico tem role="img" e um resumo em aria-label. Com o foco nele, as setas percorrem os pontos, Enter seleciona e Esc limpa; o valor é lido em voz por uma região aria-live.

          19Padrões e conteúdo

          Padrões

          Combinações de componentes que se repetem em todo o produto. Usar o mesmo padrão em todo lugar é o que faz a pessoa aprender uma vez e saber usar todas as telas.

          Filtros e visões salvas

          Busca à esquerda, ações à direita, visões salvas e chips removíveis logo abaixo. O filtro ativo sempre aparece como chip.

          Desfazer em vez de confirmar

          A ação acontece na hora. O toast avisa e oferece Desfazer, que devolve o item para o mesmo lugar.

          Conversas atribuídas a você
          Atendimento · WhatsApp

          Modo essencial e completo

          O essencial mostra o que a pessoa usa no dia. O completo revela colunas, regras e logs. Ligue na página toda: o modo essencial esconde os trechos de código desta documentação.

          Aprovação · PL-48239
          Clínica Vitta Integrativa · Camila Rocha
          Valor do pedido
          R$ 10.456,37
          Aguardando gerente
          Regra disparadaar3 · pedido acima de R$ 10.000nível gerente
          Margem estimadapiso de 10%27,4%
          Escalonamentoprazo de 2 horas úteissobe para diretoria às 11:42
          Pedido acima de R$ 10.000 precisa do gerente. Você é avisado quando ele decidir.

          Do vazio à primeira ação

          A tela vazia explica o benefício e tem um botão que resolve. Depois da primeira ação, mostra o resultado e o próximo passo.

          Ver como outro papel

          O admin confere a tela com os olhos de outro papel. Menu e dados seguem o recorte, uma faixa Ink avisa e o acesso fica no log. Este exemplo não muda o seu papel nas outras telas.

          Módulos visíveis

          Ações em lote

          Selecionar linhas faz surgir a barra Ink na base da tela, com a contagem e as ações que valem para todas.

          3selecionadosAtribuirReterReprocessar

          A barra aparece só com seleção, fica fixa na base da tela e some com o ✕. Ações destrutivas em lote pedem confirmação; as outras oferecem Desfazer.

          Barra de salvar

          Formulários de configuração não salvam campo a campo. Ao mudar algo, a linha ganha um traço azul e a barra surge presa à base, com a contagem e o caminho para revisar antes de salvar.

          3 alterações não salvas. Você escolhe quando passam a valer.
          1 valor inválido · corrija para salvar

          Revisar abre o antes e o depois de cada campo, com a data de vigência. No celular, texto numa linha e botões lado a lado na outra. Dentro de um drawer, use .savebar.is-in-drawer.

          20Padrões e conteúdo

          Conteúdo e voz

          Português do Brasil, frase com só a primeira letra maiúscula, palavras que a equipe usa no balcão. Escrevemos para quem está com pressa e com o celular numa mão.

          Direto

          Primeiro o que importa. “17 pedidos fora do prazo”, não “Atenção: há itens que requerem sua avaliação”.

          Específico

          Número, nome e prazo. “Aprovar até 11:42” diz mais que “aprovar em breve”.

          Humano

          Fale com a pessoa, sem culpar. “Não encontramos o cliente”, não “Erro 404: entidade inexistente”.

          Calmo

          Saúde já é sensível. Nada de exclamação, caixa alta ou alarme vermelho para coisa que tem solução.

          Faça e evite

          Exemplos reais de cada tipo de texto.

          Verbos de botão

          Verbo no infinitivo mais objeto. A pessoa lê só o botão e sabe o que vai acontecer.

          Mensagem de erro

          Três partes, nesta ordem. A terceira é a mais importante.

          1O que aconteceu, em uma frase, sem código técnico.
          2Por quê, só se ajudar a resolver.
          3O que fazer agora, de preferência com um botão.
          Não conseguimos gerar o link
          A loja do Laboratório Aurora na Yampi não respondeu. Seu carrinho está salvo.

          Glossário

          Uma definição por indicador, usada em todas as telas, nos hints e pelo assistente. Vem de PL.data.glossary.

          21Padrões e conteúdo

          Motion e acessibilidade

          Movimento curto, com desaceleração forte no fim, só para explicar o que mudou. Com movimento reduzido ligado no sistema, tudo aparece no estado final, sem animação.

          Movimento reduzido: desligado

          Duração e curva

          Três durações e uma curva para tudo.

          --t-fast
          160 ms

          Hover, cor, foco, tooltip.

          --t
          260 ms

          Troca de aba, drawer, menu, sidebar.

          --t-slow
          520 ms

          Barra de progresso e entrada de gráfico.

          Sai rápido e chega devagar. A pessoa vê a resposta na hora e o fim suave deixa claro onde o elemento parou. Não usamos quique, elástico ou rotação.

          Microinterações

          Quatro movimentos, todos com propósito.

          Contagem · PL.countUp
          R$ 1.214.951
          R$ 509,6348,3%

          Número que chega contando, uma vez, ao carregar. Em atributo, use número de JavaScript: data-countup="509.63" data-fmt="brl" mostra R$ 509,63.

          Desenho do gráfico
          Entrada em cascata · PL.reveal

          Cards entram com 40 ms de diferença.

          Elevação no hover · .lift

          Passe o mouse: o card sobe 2 px e ganha --sh-2. Diz que dá para clicar.

          Checklist de acessibilidade

          O mínimo de toda tela antes de ir para revisão.

          • Foco visível em tudo que é clicável: anel de 3 px em Halor Blue a 35%.
          • Elemento certo: ação é <button>, navegação é <a>, tabela tem <th scope>.
          • Rótulo em todo ícone sozinho, com aria-label e tooltip.
          • Cor nunca sozinha: status tem texto; prazo tem ícone e tempo.
          • Contraste AA para texto (4,5:1) e componentes (3:1), nos dois temas.
          • Drawer e modal prendem o foco, fecham com Esc e devolvem o foco.
          • Movimento reduzido respeitado em CSS e em JS, inclusive nos gráficos.
          • Zoom e celular: nada rola na horizontal de 360 a 1.920 px.

          Contraste medido

          Calculado agora, no tema em uso.

          ParAmostraRazãoNível

          Mapa do teclado

          Funcionam em todas as telas com shell e nesta página. Nenhum dispara enquanto você digita.

          22Referência

          Tokens

          Referência completa das variáveis CSS de pharmalab.css, com o valor claro e o escuro. Clique no nome para copiar var(--token).

          TokenClaroEscuroUso