Design System
Todos os componentes do Prisma, em todos os estados, nos dois temas. Cada tela do sistema é montada só com o que está aqui. Alterne o tema no botão acima.
Cores
Neutros frios, um acento violeta da marca, e a escala semântica que o cliente entregou para status e prioridade. Texto sobre fundo colorido é sempre da mesma família do fundo, nunca cinza.
| Cor | Etapa da OS | Prioridade | Outros usos |
|---|---|---|---|
| Crítica | Sem conserto · Recusado pelo cliente | Crítica | Estoque zerado · Acesso bloqueado · Conta vencida |
| Alta | Reprovado no teste (voltou) | Alta | Garantia acionada · Vence hoje |
| Atenção | Aguardando aprovação | — | Estoque mínimo · Vence esta semana · Dado desatualizado |
| Média | Teste | Média | Aparelho de troca com defeito |
| Baixa | Pronto · Entregue | Baixa | Pago · Em estoque · Acesso ativo · Resultado positivo |
| Normal | Diagnóstico · Em reparo | — | Cliente final |
| Informação | Recebido | — | Aviso novo · Mensagem não lida |
| Destaque | — | — | OS de parceira · Lojista · Permuta |
Badge nunca é só cor: sempre tem texto. Cor de fundo é a cor da escala a 22% sobre a superfície; borda a 55%; texto é a mesma matiz, escurecida no tema claro e clareada no escuro (contraste ≥ 4,5:1).
Tipografia
Uma família só: Inter. Escala fixa em rem, passo de ~1,15. Números sempre tabulares em dinheiro, IMEI, datas e IDs, para colunas alinharem.
Espaço, raio, profundidade, ícones
Base de 4px. Raio 8px em cards e overlays, 6px em controles. Sombras com deslocamento e desfoque — nunca halo. Ícones Lucide, 16px, traço 1,75.
Nunca emoji ou glifo Unicode no lugar de ícone.
Botões
Uma ação primária por tela. O botão nomeia o que faz: “Enviar ao técnico”, não “Salvar”. Estados: padrão, hover, foco, desabilitado, carregando.
Ação que não é sua aparece desabilitada com o motivo no tooltip — nunca some. A atendente precisa ver o botão que não é dela para saber com quem está a OS.
Campos de formulário
Rótulo em cima, dica embaixo, erro no lugar da dica com ícone e a saída. Ordem de tabulação sempre declarada. Nada avança sozinho ao completar máscara.
Campo de preço bloqueado
Componente próprio do Prisma. O valor nasce da tabela e vem travado, com a origem escrita. Abrir o cadeado pede a senha do dono ali mesmo, sem modal. Depois de liberado, o histórico registra quem liberou.
Badges, pessoas e teclas
Badge sempre com texto. Chip de pessoa mostra quem é o dono da etapa. Kbd mostra atalhos onde eles existem.
Cards e indicadores
Card com borda de 1px e sombra leve. Cabeçalho com ícone, título e ação à direita. O KPI segue a referência do cliente: ícone circular, valor grande, variação com seta e a linha de tendência.
Maiores clientes · 90 dias
Ver todosGarantia
Tabelas
Densas, com cabeçalho em caixa alta pequena, números à direita e tabulares, ID em negrito, ações que aparecem no hover ou no foco. Linha selecionada em violeta suave.
| OS | Cliente | Aparelho | Etapa | Com quem | Valor | Prazo | ||
|---|---|---|---|---|---|---|---|---|
| 4512 | Marcelo Dias | iPhone 14 Pro | Diagnóstico | DMDiego | 1.400,00 | ter, 09/09 | ||
| 4513 | Sílvia Duarte | MacBook Air M1 | Aguardando aprovação | BSBianca | 890,00 | qua, 10/09 | ||
| 4509 | CelPoint Parceira | Galaxy S23 · 3 un. | Reprovado no teste | RLRafael | 2.370,00 | ontem | ||
| 4501 | Dona Lu Celulares Lojista | iPhone 11 | Pronto | BSBianca | 520,00 | hoje | ||
| 4 ordens · 1 selecionada | 5.180,00 | |||||||
Grade de lançamento (teclado)
O componente do requisito I1. Clique na primeira célula e use só o teclado: Enter avança para a próxima parada; na última coluna, Enter cria a linha seguinte; Esc apaga uma linha vazia; ↑ ↓ trocam de linha na mesma coluna.
Venda de balcão · experimente
Tab segue a leitura; Enter segue o lançamento| # | Produto | Qtd | Unitário | Total | |
|---|---|---|---|---|---|
| 1 | R$ | 70,00 | |||
| 2 | R$ | 29,90 | |||
R$ | — |
Menus, busca global, diálogos, avisos
Modal só para confirmação destrutiva ou senha. Detalhe abre em gaveta lateral. Busca global com Ctrl+K encontra cliente, OS, IMEI e produto.
Os nove estados de tela
Nenhuma tela é entregue sem os estados que se aplicam a ela. Carregando é esqueleto na forma do conteúdo, nunca um spinner no meio. Vazio ensina o próximo passo. Erro diz o problema e a saída.
Histórico e mensagens
Histórico é feed denso, só acréscimo: ator nomeado, ação em negrito, carimbo absoluto. Valor alterado mostra o antes e o depois. Mensagem interna fica junto, com quem, quando.
Histórico
Só acréscimoMensagens com Bianca
1 novaTeclado
Requisito I1. Toda tela responde a isto. Todo formulário declara sua ordem de tabulação e suas paradas de Enter.
| Tecla | Em qualquer tela |
|---|---|
| CtrlK | Busca global: cliente, OS, IMEI, produto, ação |
| / | Foca a busca da tela atual |
| N | Novo (OS, cliente, produto — conforme a tela) |
| Esc | Fecha gaveta, menu, busca; sai do campo |
| CtrlEnter | Envia mensagem; confirma diálogo |
| F2 | Finaliza (venda, entrada de estoque) |
| ? | Mostra os atalhos da tela |
| Tecla | Em formulários e grades |
|---|---|
| Tab | Segue a leitura: cima → baixo, esquerda → direita. Nunca pula, nunca volta. |
| Enter | Avança para a próxima parada (não para todo campo). Na última coluna da grade, cria a linha seguinte. |
| ↑↓ | Troca de linha na mesma coluna; navega listas e menus |
| Esc | Apaga linha vazia; cancela edição inline |
| Espaço | Marca caixa, abre seleção |
| Máscara | Formata enquanto digita (IMEI, telefone, dinheiro) mas nunca avança sozinho |
| Foco inicial | Tela de lançamento abre com o cursor no primeiro campo útil |
Texto na tela
Português do balcão. O botão nomeia a ação. O erro nomeia o problema e a saída. Vocabulário do escopo: OS, etapa, alçada, lojista, parceira, permuta, fornecedor.
Cinco regras que vieram do cliente
São as que um gerador erraria sozinho por serem contra-intuitivas. Todo o resto, a tela-piloto mostra.