Dark
Dark mode defaultGeistNext.js + shadcn/uiUso: Páginas internas + dashboards

Pixor Design System · v1.1 Foundations + Dashboard Kit

Base oficial para construir operações internas, painéis executivos e fluxos de gestão.

Módulo ativo
Design System
Online
Leankeep
Página interna + dashboards
Próximo módulo
Proconsórcio
Pipeline e metas
Próximo módulo
Leadpi
Produto e experimentos
Próximo módulo
1) Foundations
Contratos visuais imutáveis para toda tela interna: cores, tipografia, spacing e semântica.

background

Fundo principal

background

card

Containers e blocos

card

primary

Ações principais

primary

secondary

Ações secundárias

secondary

muted

Suporte e contexto

muted

accent

Hover/foco suave

accent

destructive

Risco/erro

destructive

Escala tipográfica (Geist)

Display sample

Head de página

H1 sample

Títulos de seção crítica

H2 sample

Subseções

Body sample

Texto padrão de interface

Caption sample

Metadados e apoio

2) Componentes canônicos
Componentes autorizados para páginas internas e dashboards, com variações mínimas.

Regra: no máximo 1 botão primary por bloco para evitar concorrência de atenção.

3) Padrões de página (App templates)
Modelos para acelerar construção com consistência entre áreas da Pixor.
Internal List Page
Listagem operacional com filtros

1. Header com contexto + CTA principal

2. Toolbar de busca/filtros

3. Tabela + próxima ação

Dashboard Executivo
KPI + tendência + exceções

1. KPIs principais (até 4)

2. Tendência semanal/mensal

3. Bloco de risco e decisão

Detail Page
Conta/projeto com timeline

1. Resumo superior

2. Metas e status

3. Histórico + próximos passos

4) Dashboard Kit (pronto para uso)
Estrutura recomendada para dashboards internos com leitura rápida em 30 segundos.
Receita no mês
R$ 214.300

+18,4% vs. período anterior

Novos deals
34

+11,2% vs. período anterior

Taxa de ativação
72%

+6,1% vs. período anterior

Risco de churn
9 contas

-2 contas vs. período anterior

Tendência (placeholder de gráfico)
Use chart container com até 2 séries por painel.
Bloco de exceções
Top 3 riscos com dono e prazo.

Deal parado > 7 dias · dono: time comercial

Onboarding atrasado · dono: implementation

Follow-up vencido · dono: CS

5) Estados e feedback
Padrões para sucesso, loading, vazio e erro sem ambiguidade.
EstadoSignificadoRegra
successConcluído / saudávelUse apenas quando houve validação real
warningAtenção / risco moderadoQuando precisa ação em até 24h
destructiveCrítico / bloqueadoQuando há impacto direto em meta
infoContextualPara orientação sem urgência
6) Governança do design system
Processo para manter consistência enquanto o produto cresce.

Próximo passo recomendado: transformar este guia em componentes de template reutilizáveis por rota.

Voltar ao topo técnico