Cada dashboard começa com uma faixa de KPIs: uma fileira horizontal de 3 a 5 métricas exibidas como números grandes com indicadores de tendência. Total de clientes: 847, +12% neste mês. Negócios em aberto: 23. Receita MTD: R$45,200. A faixa responde 'como estão as coisas?' em menos de dois segundos. CSS Grid com auto-fit e coluna mínima de 200px ajusta tudo bem no celular.
Uma barra lateral fixa substitui o menu hambúrguer. Colapsada tem 64px; expandida 240px. Um botão na base troca o rótulo. O escopo completo da aplicação fica visível o tempo todo, como Linear, Vercel e Notion.
Tabelas têm colunas ordenáveis, seleção de linhas, indicadores de status inline e um menu de ações por linha. A paginação usa cursor, nunca offset, porque linhas adicionadas ou excluídas entre carregamentos quebram páginas baseadas em offset.
Um estado vazio precisa de uma ilustração, uma explicação de uma frase e um botão principal: 'Nenhum cliente ainda. Importe sua primeira lista para começar.' Estados vazios projetados reduzem chamados de suporte no onboarding.
Esqueletos mostram formas cinzentas que correspondem ao layout que virá. Quando os dados chegam, o esqueleto desaparece em 200 ms e o conteúdo real aparece. A página parece mais rápida mesmo quando o tempo da API não mudou.
Tokens semânticos apenas: --color-success para positivo, --color-warning para atenção, --color-danger para crítico, --color-info para neutro. Nunca valores de cor diretos. Troca de tema vira quatro a seis propriedades personalizadas.
Nos sistemas de cores, defino paletas de dashboard com tokens semânticos: --color-success (verde para métricas positivas), --color-warning (âmbar para itens que exigem atenção), --color-danger (vermelho para problemas críticos), --color-info (azul para informações neutras). Cada indicador de status, segmento de gráfico e notificação usa esses tokens, nunca valores de cor diretos. Isso torna a personalização de temas (modo escuro, marca própria do cliente) uma questão de trocar 4-6 propriedades personalizadas de CSS.
Os dashboards Finance Planner SaaS e CETRO HUB usam esses padrões. Quando um novo cliente diz 'quero um dashboard assim', não começo do zero: faço um fork da biblioteca de componentes, troco a fonte de dados, ajusto os tokens de cor e concentro o tempo de engenharia na lógica de negócio que é de fato específica do domínio dele.
Um antipadrão que vejo constantemente: dashboards que mostram dados demais na primeira tela. Um dashboard com 15 gráficos e 8 tabelas não é um dashboard, é um relatório. Um bom dashboard destaca as 3-5 métricas que orientam as decisões diárias e leva a análise detalhada para visualizações de aprofundamento.
Referência: Markus Winand, paginação sem OFFSET.